frontend: use mui theming (#2851)

This PR modifies the usage of themes, removing emotion's implementation to keep only a MUI theme with the Clutch design system's colors. Testing Performed manual --------- Co-authored-by: Lucía Echenique Álvarez <[email protected]>
lyft · Feb 1, 2024 · d84c283 · d84c283
1 parent bcb8bdc
commit d84c283
Show file tree

Hide file tree

Showing 135 changed files with 1,937 additions and 1,669 deletions.
diff --git a/docs/development/feature.md b/docs/development/feature.md
@@ -511,10 +511,10 @@ There are two new imports (`@clutch-sh/core` and `@clutch-sh/data-layout`) added
   },
   "dependencies": {
     // highlight-start
-    "@clutch-sh/core": "^2.0.0-beta",
-    "@clutch-sh/data-layout": "^2.0.0-beta",
+    "@clutch-sh/core": "^3.0.0-beta",
+    "@clutch-sh/data-layout": "^3.0.0-beta",
     // highlight-end
-    "@clutch-sh/wizard": "^2.0.0-beta",
+    "@clutch-sh/wizard": "^3.0.0-beta",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
@@ -629,9 +629,9 @@ There is another new import (`lodash`) added in the code above. Let's also add t
     "test:watch": "yarn run test --watch"
   },
   "dependencies": {
-    "@clutch-sh/core": "^2.0.0-beta",
-    "@clutch-sh/data-layout": "^2.0.0-beta",
-    "@clutch-sh/wizard": "^2.0.0-beta",
+    "@clutch-sh/core": "^3.0.0-beta",
+    "@clutch-sh/data-layout": "^3.0.0-beta",
+    "@clutch-sh/wizard": "^3.0.0-beta",
     // highlight-next-line
     "lodash": "^4.17.21",
     "react": "^17.0.2",

diff --git a/examples/amiibo/frontend/workflows/amiibo/package.json b/examples/amiibo/frontend/workflows/amiibo/package.json
@@ -18,9 +18,9 @@
     "test:watch": "yarn run test --watch"
   },
   "dependencies": {
-    "@clutch-sh/core": "^2.0.0-beta",
-    "@clutch-sh/data-layout": "^2.0.0-beta",
-    "@clutch-sh/wizard": "^2.0.0-beta",
+    "@clutch-sh/core": "^3.0.0-beta",
+    "@clutch-sh/data-layout": "^3.0.0-beta",
+    "@clutch-sh/wizard": "^3.0.0-beta",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
@@ -9,7 +9,7 @@ export const decorators = [
   ),
 ];
 
-export const parameters = {  
+export const parameters = {
   backgrounds: {
     default: "clutch",
     values: [
@@ -21,6 +21,6 @@ export const parameters = {
         name: "light",
         value: "#ffffff",
       },
-    ]
-  }
-};
+    ],
+  },
+};
diff --git a/frontend/lerna.json b/frontend/lerna.json
@@ -6,5 +6,5 @@
     "packages/*",
     "workflows/*"
   ],
-  "version": "2.0.0-beta"
+  "version": "3.0.0-beta"
 }
diff --git a/frontend/packages/app/package.json b/frontend/packages/app/package.json
@@ -18,7 +18,7 @@
     "test:e2e": "cypress run"
   },
   "dependencies": {
-    "@clutch-sh/core": "^2.0.0-beta",
+    "@clutch-sh/core": "^3.0.0-beta",
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.2"

diff --git a/frontend/packages/app/src/index.css b/frontend/packages/app/src/index.css
@@ -4,10 +4,6 @@ html, body, #root, #App {
   min-height: 100vh;
 }
 
-#App {
-  background-color: #f9fafe;
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus,

diff --git a/frontend/packages/core/package.json b/frontend/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@clutch-sh/core",
-  "version": "2.0.0-beta",
+  "version": "3.0.0-beta",
   "description": "Clutch Core Components",
   "homepage": "https://clutch.sh/docs/development/frontend/overview#clutch-shcore",
   "license": "Apache-2.0",

diff --git a/frontend/packages/core/src/AppLayout/drawer.tsx b/frontend/packages/core/src/AppLayout/drawer.tsx
@@ -2,10 +2,12 @@ import * as React from "react";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import styled from "@emotion/styled";
 import {
+  alpha,
   Avatar as MuiAvatar,
   Drawer as MuiDrawer,
   List,
   ListItemButton,
+  Theme,
   Typography,
 } from "@mui/material";
 import _ from "lodash";
@@ -16,65 +18,69 @@ import { useAppContext } from "../Contexts";
 import { useNavigate } from "../navigation";
 import type { PopperItemProps } from "../popper";
 import { Popper, PopperItem } from "../popper";
+import { THEME_VARIANTS } from "../Theme/colors";
 
 import { filterHiddenRoutes, routesByGrouping, sortedGroupings, workflowByRoute } from "./utils";
 
 // sidebar
-const DrawerPanel = styled(MuiDrawer)({
+const DrawerPanel = styled(MuiDrawer)(({ theme }: { theme: Theme }) => ({
   width: "100px",
   overflowY: "auto",
   ".MuiDrawer-paper": {
     top: "unset",
     width: "inherit",
-    backgroundColor: "#FFFFFF",
-    boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)",
+    backgroundColor:
+      theme.palette.mode === THEME_VARIANTS.light
+        ? theme.palette.contrastColor
+        : theme.palette.background.paper,
+    boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[400], 0.2)}`,
     position: "relative",
     display: "flex",
   },
-});
+}));
 
 // sidebar groupings
 const GroupList = styled(List)({
   padding: "0px",
 });
 
 const GroupListItem = styled(ListItemButton)<{ icon: number }>(
-  {
+  ({ theme }: { theme: Theme }) => ({
     flexDirection: "column",
     minHeight: "82px",
     padding: "16px 8px 16px 8px",
     height: "fit-content",
     "&:hover": {
-      backgroundColor: "#F5F6FD",
+      backgroundColor: theme.palette.primary[100],
     },
     "&:active": {
-      backgroundColor: "#D7DAF6",
+      backgroundColor: theme.palette.primary[300],
     },
     "&.Mui-selected": {
-      backgroundColor: "#EBEDFB",
+      backgroundColor: theme.palette.primary[200],
       "&:hover": {
-        backgroundColor: "#F5F6FD",
+        backgroundColor: theme.palette.primary[100],
       },
       "&:active": {
-        backgroundColor: "#D7DAF6",
+        backgroundColor: theme.palette.primary[300],
       },
     },
-  },
+  }),
   props => ({
     // avatar and label
     "&:hover, &:active, &.Mui-selected": {
       ".MuiAvatar-root": {
-        backgroundColor: props.icon ? "unset" : "#3548D4",
+        backgroundColor: props.icon ? "unset" : props.theme.palette.primary[600],
       },
       ".MuiTypography-root": {
-        color: "#3548D4",
+        color: props.theme.palette.primary[600],
       },
     },
   })
 );
 
-const GroupHeading = styled(Typography)({
-  color: "rgba(13, 16, 48, 0.6)",
+const GroupHeading = styled(Typography)(({ theme }: { theme: Theme }) => ({
+  color: alpha(theme.palette.secondary[900], 0.6),
   fontWeight: 500,
   fontSize: "14px",
   lineHeight: "18px",
@@ -83,19 +89,19 @@ const GroupHeading = styled(Typography)({
   width: "100%",
   textOverflow: "ellipsis",
   overflow: "hidden",
-});
+}));
 
 const IconAvatar = styled(MuiAvatar)({
   height: "24px",
   width: "24px",
 });
 
-const Avatar = styled(IconAvatar)({
-  background: "rgba(13, 16, 48, 0.6)",
-  color: "#FFFFFF",
+const Avatar = styled(IconAvatar)(({ theme }: { theme: Theme }) => ({
+  background: alpha(theme.palette.secondary[900], 0.6),
+  color: theme.palette.contrastColor,
   fontSize: "14px",
   borderRadius: "4px",
-});
+}));
 
 interface GroupProps {
   heading: string;

diff --git a/frontend/packages/core/src/AppLayout/header.tsx b/frontend/packages/core/src/AppLayout/header.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import styled from "@emotion/styled";
-import { AppBar as MuiAppBar, Box, Grid, Toolbar, Typography } from "@mui/material";
+import { AppBar as MuiAppBar, Box, Grid, Theme, Toolbar, Typography } from "@mui/material";
 
 import type { AppConfiguration } from "../AppProvider";
 import { FeatureOn, SimpleFeatureFlag } from "../flags";
@@ -45,23 +45,23 @@ interface HeaderProps extends AppConfiguration {
   userInfo?: boolean;
 }
 
-const AppBar = styled(MuiAppBar)({
+const AppBar = styled(MuiAppBar)(({ theme }: { theme: Theme }) => ({
   minWidth: "fit-content",
-  background: "linear-gradient(90deg, #38106b 4.58%, #131c5f 89.31%)",
+  background: theme.palette.headerGradient,
   zIndex: 1201,
   height: APP_BAR_HEIGHT,
-});
+}));
 
 // Since the AppBar is fixed we need a div to take up its height in order to push other content down.
 const ClearAppBar = styled.div({ height: APP_BAR_HEIGHT });
 
-const Title = styled(Typography)({
+const Title = styled(Typography)(({ theme }: { theme: Theme }) => ({
   margin: "12px 0px 12px 8px",
   fontWeight: "bold",
   fontSize: "30px",
   paddingLeft: "5px",
-  color: "rgba(255, 255, 255, 0.87)",
-});
+  color: theme.palette.common.white,
+}));
 
 const StyledLogo = styled("img")({
   width: "48px",

diff --git a/frontend/packages/core/src/AppLayout/notifications.tsx b/frontend/packages/core/src/AppLayout/notifications.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import {
+  alpha,
   ClickAwayListener,
   Grow as MuiGrow,
   IconButton,
@@ -10,50 +11,51 @@ import {
   MenuList,
   Paper as MuiPaper,
   Popper as MuiPopper,
+  Theme,
 } from "@mui/material";
 
-const StyledNotificationsIcon = styled(IconButton)({
-  color: "#ffffff",
+const StyledNotificationsIcon = styled(IconButton)(({ theme }: { theme: Theme }) => ({
+  color: theme.palette.contrastColor,
   marginRight: "8px",
   padding: "12px",
   "&:hover": {
-    background: "#2d3db4",
+    background: theme.palette.primary[600],
   },
   "&:active": {
-    background: "#2938a5",
+    background: theme.palette.primary[700],
   },
-});
+}));
 
 const Popper = styled(MuiPopper)({
   padding: "0 12px",
   marginLeft: "12px",
 });
 
-const Paper = styled(MuiPaper)({
+const Paper = styled(MuiPaper)(({ theme }: { theme: Theme }) => ({
   width: "242px",
-  border: "1px solid #E7E7EA",
-  boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)",
-});
+  border: `1px solid ${theme.palette.secondary[100]}`,
+  boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[600], 0.2)}`,
+}));
 
-const MenuItem = styled(MuiMenuItem)({
+const MenuItem = styled(MuiMenuItem)(({ theme }: { theme: Theme }) => ({
   height: "48px",
   padding: "12px",
   "&:hover": {
-    backgroundColor: "#E7E7EA",
+    backgroundColor: theme.palette.secondary[200],
   },
   "&:active": {
-    backgroundColor: "#EBEDFB",
+    backgroundColor: theme.palette.primary[200],
   },
-});
+}));
 
-const ListItemText = styled(MuiListItemText)({
+const ListItemText = styled(MuiListItemText)(({ theme }: { theme: Theme }) => ({
   margin: "0px",
   ".MuiTypography-root": {
-    color: "#0D1030",
+    color: theme.palette.secondary[900],
     fontSize: "14px",
     lineHeight: "24px",
   },
-});
+}));
 
 const Grow = styled(MuiGrow)((props: { placement: string }) => ({
   transformOrigin: props.placement,