UI updates (first pass) (#181)

* rename component * update dialog and background color * remove unused collapsible card * update start screen and other stuff * update main table design * refactor account details to new tab layout (first pass) * update details card color * alternative details tab style * predicted details tab colors * migrate details screens * components cleanup * refactor usages of ContentDetailsScript * remove more colors * improve layout * fix base dialog border, cleanup button * fix close button * reorganize some components, add ts paths config (wip) * Revert "reorganize some components, add ts paths config (wip)" This reverts commit 627c1c5.
onflowser · Aug 22, 2023 · 193e973 · 193e973
1 parent 2fe0061
commit 193e973
Show file tree

Hide file tree

Showing 103 changed files with 996 additions and 1,647 deletions.
diff --git a/frontend/src/App.scss b/frontend/src/App.scss
@@ -9,7 +9,7 @@
 
 html,
 body {
-  background: $background;
+  background: $gray-110;
   font-family: $font-family-inter;
   font-size: $font-size-normal;
   font-style: normal;

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -8,7 +8,7 @@ import {
   withRouter,
 } from "react-router-dom";
 import { Toaster } from "react-hot-toast";
-import { RouteWithLayout } from "./components/layout/Layout";
+import { RouteWithProjectLayout } from "./components/layout/Layout";
 import { routes } from "./constants/routes";
 import { UiStateContextProvider } from "./contexts/ui-state.context";
 import "./App.scss";
@@ -102,16 +102,19 @@ export const FlowserRoutes = (): ReactElement => {
       <ProjectRequirements />
       <Switch>
         <Route path={routes.start} component={Start} />
-        <RouteWithLayout path={routes.accounts} component={Accounts} />
-        <RouteWithLayout path={routes.blocks} component={Blocks} />
-        <RouteWithLayout path={routes.transactions} component={Transactions} />
-        <RouteWithLayout path={routes.contracts} component={Contracts} />
-        <RouteWithLayout path={routes.events} component={Events} />
-        <RouteWithLayout
+        <RouteWithProjectLayout path={routes.accounts} component={Accounts} />
+        <RouteWithProjectLayout path={routes.blocks} component={Blocks} />
+        <RouteWithProjectLayout
+          path={routes.transactions}
+          component={Transactions}
+        />
+        <RouteWithProjectLayout path={routes.contracts} component={Contracts} />
+        <RouteWithProjectLayout path={routes.events} component={Events} />
+        <RouteWithProjectLayout
           path={routes.interactions}
           component={InteractionsPage}
         />
-        <RouteWithLayout
+        <RouteWithProjectLayout
           path={routes.configureCurrent}
           component={Configuration}
         />

diff --git a/frontend/src/assets/icons/close.svg b/frontend/src/assets/icons/close.svg
diff --git a/frontend/src/assets/icons/open_project.svg b/frontend/src/assets/icons/open_project.svg
diff --git a/frontend/src/assets/icons/yellow_line.svg b/frontend/src/assets/icons/yellow_line.svg
diff --git a/frontend/src/components/breadcrumbs/Breadcrumbs.module.scss b/frontend/src/components/breadcrumbs/Breadcrumbs.module.scss
@@ -6,11 +6,9 @@
 .root {
   display: flex;
   height: 50px;
-  padding: 0 $spacing-base - 2px;
+  padding: 0 $spacing-base;
   border-radius: $border-radius-card;
   align-items: center;
-  background: $medium-violet;
-  margin: 0 $spacing-l;
 
   .backButtonWrapper {
     width: 40px;
@@ -39,13 +37,13 @@
     display: flex;
     align-items: center;
 
-    & span {
+    .arrow {
       margin: 0 $spacing-base * 0.5;
     }
 
     * {
       font-family: $font-family-inter;
-      font-size: $font-size-small - 1px;
+      font-size: $font-size-normal;
       color: $color-grey;
       text-decoration: none;
     }

diff --git a/frontend/src/components/breadcrumbs/Breadcrumbs.tsx b/frontend/src/components/breadcrumbs/Breadcrumbs.tsx
@@ -3,9 +3,13 @@ import { NavLink, useHistory } from "react-router-dom";
 import { useNavigation } from "../../hooks/use-navigation";
 import classes from "./Breadcrumbs.module.scss";
 import { ReactComponent as IconBackButton } from "../../assets/icons/back-button.svg";
+import classNames from "classnames";
 
-export function Breadcrumbs(): ReactElement | null {
-  const breadCrumbsBarHeight = 50;
+type BreadcrumbsProps = {
+  className?: string;
+};
+
+export function Breadcrumbs(props: BreadcrumbsProps): ReactElement | null {
   const { isShowBackButtonVisible, isBreadcrumbsVisible, breadcrumbs } =
     useNavigation();
   const history = useHistory();
@@ -20,7 +24,7 @@ export function Breadcrumbs(): ReactElement | null {
   }
 
   return (
-    <div className={classes.root}>
+    <div className={classNames(classes.root, props.className)}>
       {isShowBackButtonVisible && (
         <div className={classes.backButtonWrapper} onClick={onBack}>
           <IconBackButton className={classes.backButton} />
@@ -35,7 +39,9 @@ export function Breadcrumbs(): ReactElement | null {
           ))
           .reduce((prev, curr, i) => [
             prev,
-            <span key={++i}>{">>"}</span>,
+            <span key={++i} className={classes.arrow}>
+              {">>"}
+            </span>,
             curr,
           ])}
       </div>

diff --git a/frontend/src/components/buttons/action-button/ActionButton.module.scss b/frontend/src/components/buttons/action-button/ActionButton.module.scss
@@ -25,11 +25,11 @@
 
   .header {
     transition: 0.3s;
-    color: $light-grey;
+    color: $gray-10;
   }
 
   .footer {
-    color: $light-grey;
+    color: $gray-10;
     opacity: 0.5;
     font-size: $font-size-small;
   }

diff --git a/frontend/src/components/buttons/button/Button.module.scss b/frontend/src/components/buttons/button/Button.module.scss
@@ -4,15 +4,15 @@
 
 .button {
   position: relative;
-  background-color: $yellow;
+  background-color: $violet-100;
   border-radius: $border-radius-button;
-  color: $background;
+  color: $white;
   font-size: $font-size-big;
   font-family: $font-family-inter;
   letter-spacing: $character-spacing-medium;
   font-style: normal;
   font-weight: bold;
-  border: 2px solid $yellow;
+  border: 2px solid $violet-100;
   cursor: pointer;
 
   &:hover {
@@ -47,7 +47,7 @@
 }
 
 .normal {
-  background: $yellow;
+  background: $violet-100;
   height: 32px;
   padding: 0 18px;
   font-size: $font-size-xsmall !important;
@@ -83,7 +83,7 @@
 
 .outlined {
   background: none;
-  color: $yellow;
+  color: $white;
 
   &.disabled {
     color: $color-not-active-button-text-grey;

diff --git a/frontend/src/components/buttons/button/Button.tsx b/frontend/src/components/buttons/button/Button.tsx
@@ -1,6 +1,7 @@
 import React, { FunctionComponent, HTMLAttributes } from "react";
 import classes from "./Button.module.scss";
 import Loader from "react-loader-spinner";
+import classNames from "classnames";
 
 export type ButtonProps = React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -28,16 +29,26 @@ const Button: FunctionComponent<ButtonProps> = ({
       {...restProps}
       onClick={onClick}
       disabled={disabled}
-      className={`${classes.button} ${classes[variant]} ${
-        disabled ? classes.disabled : ""
-      } ${restProps.className} ${outlined ? classes.outlined : ""}`}
+      className={classNames(
+        classes.button,
+        classes[variant],
+        restProps.className,
+        {
+          [classes.disabled]: disabled,
+          [classes.outlined]: outlined,
+        }
+      )}
     >
       {loading && (
         <div className={classes.loaderWrapper}>
           <Loader type="Oval" color={loaderColor} height={25} width={25} />
         </div>
       )}
-      <div className={loading ? classes.hiddenChildren : ""}>
+      <div
+        className={classNames({
+          [classes.hiddenChildren]: loading,
+        })}
+      >
         {restProps.children}
       </div>
     </button>

diff --git a/frontend/src/components/buttons/radio-button/RadioButton.module.scss b/frontend/src/components/buttons/radio-button/RadioButton.module.scss
@@ -21,7 +21,7 @@
     & > span {
       display: block;
       visibility: visible;
-      background-color: $light-grey;
+      background-color: $gray-10;
       border-radius: 50%;
       width: 10px;
       height: 10px;

diff --git a/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss b/frontend/src/components/buttons/toggle-button/ToggleButton.module.scss
@@ -29,11 +29,11 @@
       &.inactive {
         transform: translateX(0);
         transition: all 100ms;
-        background-color: #5B5E62;
+        background-color: $gray-30;
       }
 
       &.disabled {
-        background-color: $dark-grey;
+        background-color: $gray-50;
       }
     }
   }

diff --git a/frontend/src/components/cadence-editor/cadence-editor.css b/frontend/src/components/cadence-editor/cadence-editor.css
@@ -1,6 +1,7 @@
 /* Main editor container */
 .cadence-editor {
     width: 100%;
+    background: #272B32;
 }
 
 .cadence-editor .cm-editor {

diff --git a/frontend/src/components/card/Card.module.scss b/frontend/src/components/card/Card.module.scss
@@ -13,34 +13,4 @@
     @include addNewContentAnimation(.4s);
   }
 
-  .loading {
-    position: absolute;
-    display: flex;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: $table-line-background;
-    align-items: center;
-    justify-content: center;
-    color: $light-grey;
-    opacity: 0.8;
-  }
-
-  &.header-row {
-    background-color: $dark-violet;
-    color: $grey;
-  }
-
-  &.table-line {
-    background-color: $table-line-background;
-  }
-
-  &.dark-blue {
-    //background-color: $dark-blue;
-  }
-
-  &.active {
-    border: 1px solid $yellow;
-  }
 }
diff --git a/frontend/src/components/card/Card.tsx b/frontend/src/components/card/Card.tsx
@@ -1,34 +1,28 @@
 import React, { FunctionComponent, HTMLAttributes } from "react";
 import classes from "./Card.module.scss";
+import classNames from "classnames";
 
 type CardProps = HTMLAttributes<HTMLDivElement> & {
   className?: string;
-  variant?: "table-line" | "black" | "header-row" | "dark-blue";
   active?: boolean;
-  loading?: boolean;
   showIntroAnimation?: boolean;
-  loadingText?: string;
 };
 
 const Card: FunctionComponent<CardProps> = ({
   children,
   className,
-  variant = "dark-blue",
   active = false,
-  loading = false,
-  loadingText = "Loading ...",
   showIntroAnimation,
   ...restProps
 }) => {
   return (
     <div
-      className={`${classes.root} ${classes[variant]} ${
-        // TODO: fix the possibly undefined index "variant"
-        active ? classes.active : ""
-      } ${className} ${showIntroAnimation ? classes.introAnimation : ""}`}
+      className={classNames(classes.root, className, {
+        [classes.active]: active,
+        [classes.introAnimation]: showIntroAnimation,
+      })}
       {...restProps}
     >
-      {loading && <span className={classes.loading}>{loadingText}</span>}
       {children}
     </div>
   );

diff --git a/frontend/src/components/collapsible-card/Collapsible.module.scss b/frontend/src/components/collapsible-card/Collapsible.module.scss