frontend: fix component theming issues (#2894)

Covers the following issues found in components in an ongoing theming update: App Layout - Header: Search autocomplete highlight color is too dark before: ![image](https://github.com/lyft/clutch/assets/5430603/55fa7728-d32f-45de-9a76-a559daf78bc1) after: ![image](https://github.com/lyft/clutch/assets/5430603/003046fb-21de-4e0a-8cd6-10b860b88e88) Feedback: Darken text in feedback components for legibility before: ![image](https://github.com/lyft/clutch/assets/5430603/74d5e3f1-3796-4588-bff7-17567249ccbd) after: ![image](https://github.com/lyft/clutch/assets/5430603/ff9c4fe5-1d53-4b22-bd31-e9b4377cab1b) Input - Switch: gray colors make it look disabled before: ![image](https://github.com/lyft/clutch/assets/5430603/7b8ebc1a-ef11-4271-84bd-3693bfca11fe) after: ![image](https://github.com/lyft/clutch/assets/5430603/da243809-84d7-4efc-a477-117746a375ac) Card: Landing card, icon character should be dark before: ![image](https://github.com/lyft/clutch/assets/5430603/7e3d9f1b-aea9-4281-8044-bfcf06a4cabc) after: ![image](https://github.com/lyft/clutch/assets/5430603/40f1b799-4261-4093-98ef-3c404026946b) Accordion: Missing label (white text) before: ![image](https://github.com/lyft/clutch/assets/5430603/546f1086-a547-4f43-9e52-4161a61e40ae) after: ![image](https://github.com/lyft/clutch/assets/5430603/fc3a217f-b3fe-4125-872d-06b4a2707392) Dialog: Pressed state should be a darker shade normal state: ![image](https://github.com/lyft/clutch/assets/5430603/44063221-d5bc-4b71-90db-2807f2fe8a51) before: ![image](https://github.com/lyft/clutch/assets/5430603/4cc9afa3-bd9d-48ed-b46b-5427ad6cd82e) after: ![image](https://github.com/lyft/clutch/assets/5430603/5dc78d2b-44e3-4244-a638-e9e3902321e5) Testing Performed manual, unit tests
lyft · Jan 11, 2024 · dbc9d95 · dbc9d95
1 parent cb5fc28
commit dbc9d95
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 19 deletions.
diff --git a/frontend/packages/core/src/AppLayout/search.tsx b/frontend/packages/core/src/AppLayout/search.tsx
@@ -103,16 +103,16 @@ const StyledCloseIcon = styled(Icon)(({ theme }) => ({
 // popper containing the search result options
 const Popper = styled(MuiPopper)(({ theme }) => ({
   ".MuiPaper-root": {
-    border: `1px solid ${theme.palette.secondary[700]}`,
-    boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[400], 0.2)}`,
+    border: `1px solid ${theme.palette.secondary[100]}`,
+    boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[600], 0.2)}`,
 
     "> .MuiAutocomplete-listbox": {
       "> .MuiAutocomplete-option": {
         height: "48px",
         padding: "0px",
 
         "&.Mui-focused": {
-          background: theme.palette.secondary[800],
+          background: theme.palette.primary[200],
         },
       },
     },

diff --git a/frontend/packages/core/src/Feedback/alert.tsx b/frontend/packages/core/src/Feedback/alert.tsx
@@ -14,7 +14,7 @@ const StyledAlert = styled(MuiAlert)<{ severity: MuiAlertProps["severity"] }>(
     padding: "16px",
     paddingLeft: "24px",
     paddingBottom: "20px",
-    color: alpha(theme.palette.secondary[900], 0.6),
+    color: alpha(theme.palette.secondary[900], 0.75),
     fontSize: "14px",
     overflow: "auto",
     ".MuiAlert-icon": {

diff --git a/frontend/packages/core/src/Input/switchToggle.tsx b/frontend/packages/core/src/Input/switchToggle.tsx
@@ -26,7 +26,7 @@ const SwitchContainer = styled(MuiSwitch)(({ theme }) => ({
     },
   },
   ".MuiSwitch-track": {
-    backgroundColor: theme.palette.secondary[400],
+    backgroundColor: theme.palette.secondary[500],
     opacity: 1,
   },
   ".Mui-disabled": {
@@ -53,7 +53,7 @@ const SwitchContainer = styled(MuiSwitch)(({ theme }) => ({
     },
   },
   ".Mui-checked + .MuiSwitch-track": {
-    backgroundColor: theme.palette.primary[400],
+    backgroundColor: theme.palette.primary[300],
     opacity: 1,
   },
   ".Mui-checked.Mui-disabled": {

diff --git a/frontend/packages/core/src/button.tsx b/frontend/packages/core/src/button.tsx
@@ -140,7 +140,7 @@ const variantPalette = (variant: ButtonVariant, theme: Theme): ButtonPalette =>
       background: {
         primary: theme.palette.primary[600],
         hover: theme.palette.primary[700],
-        active: theme.palette.primary[600],
+        active: theme.palette.primary[800],
         disabled: theme.palette.secondary[200],
       },
       font: {

diff --git a/frontend/packages/core/src/card.tsx b/frontend/packages/core/src/card.tsx
@@ -285,7 +285,7 @@ const IconAvatar = styled(Avatar)({
 });
 
 const StyledAvatar = styled(IconAvatar)(({ theme }) => ({
-  color: "alpha(theme.palette.secondary[900], 0.38)",
+  color: alpha(theme.palette.secondary[900], 0.38),
   backgroundColor: alpha(theme.palette.secondary[900], 0.12),
 }));
 

diff --git a/frontend/packages/core/src/panel.tsx b/frontend/packages/core/src/panel.tsx
@@ -1,12 +1,9 @@
 import React from "react";
 import styled from "@emotion/styled";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import {
-  Accordion as MuiExpansionPanel,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from "@mui/material";
+import { Accordion as MuiExpansionPanel, AccordionDetails, AccordionSummary } from "@mui/material";
+
+import { Typography } from "./typography";
 
 const FullWidthExpansionPanel = styled(MuiExpansionPanel)`
   width: 100%;
@@ -23,9 +20,9 @@ const Accordion: React.FC<AccordionProps> = ({ heading, summary, expanded, child
   return (
     <FullWidthExpansionPanel defaultExpanded={expanded}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>{heading}</Typography>
+        <Typography variant="body2">{heading}</Typography>
         <div style={{ flexGrow: 1 }} />
-        <Typography color="secondary">{summary}</Typography>
+        <Typography variant="body2">{summary}</Typography>
       </AccordionSummary>
       <AccordionDetails>{children}</AccordionDetails>
     </FullWidthExpansionPanel>

diff --git a/frontend/packages/core/src/tests/__snapshots__/button.test.tsx.snap b/frontend/packages/core/src/tests/__snapshots__/button.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Destructive Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-1i6z5sh-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Large Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButtonBase-root css-r0dr1r-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Large Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButtonBase-root css-bb0am6-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
 exports[`Neutral Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Primary Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-jc1w96-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Primary Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-61rao6-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Small Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButtonBase-root css-e1f49j-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Small Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButtonBase-root css-6xod7i-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;