From cf5e3b6018909a203ef860ce16caeccc1af6bc89 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Mon, 12 Jul 2021 21:33:15 +1000 Subject: [PATCH] theme updates --- www/package.json | 2 +- www/public/index.html | 4 +- www/src/Themes.tsx | 90 ++++++- www/src/assets/FiretableLogo.tsx | 51 +--- www/src/assets/antler.svg | 1 - www/src/assets/firetable-with-wordmark.svg | 1 - www/src/assets/firetable.svg | 1 - www/src/components/Auth/AuthLayout.tsx | 13 +- www/src/components/Auth/FirebaseUi.tsx | 2 +- .../components/ConnectServiceSelect/styles.ts | 4 +- www/src/components/FormattedChip.tsx | 8 +- www/src/components/Grid/Card/styles.ts | 2 +- .../components/HomeNavigation/NavDrawer.tsx | 4 +- www/src/components/HomeNavigation/index.tsx | 47 +++- www/src/components/Navigation/NavDrawer.tsx | 5 +- .../components/Navigation/NavDrawerItem.tsx | 11 +- www/src/components/Navigation/UserMenu.tsx | 27 ++- www/src/components/Navigation/index.tsx | 2 +- www/src/components/ProjectSettings/index.tsx | 1 - www/src/components/SideDrawer/index.tsx | 1 + www/src/components/SideDrawer/useStyles.ts | 7 +- www/src/components/StyledCard.tsx | 2 +- .../Table/TableHeader/TableHeaderButton.tsx | 2 +- .../components/Table/TableHeader/index.tsx | 24 +- www/src/components/Table/styles.ts | 4 +- www/src/components/TableSettings/form.tsx | 6 +- www/src/components/TableSettings/index.tsx | 12 +- .../fields/Action/FormDialog/Dialog.tsx | 22 +- .../fields/Checkbox/SideDrawerField.tsx | 5 +- .../components/fields/Checkbox/TableCell.tsx | 7 +- .../ConnectServiceSelect/styles.ts | 4 +- .../fields/ConnectTable/InlineCell.tsx | 1 + www/src/components/fields/User/TableCell.tsx | 1 + www/src/constants/routes.ts | 4 + www/src/contexts/FiretableContext.tsx | 2 +- www/src/pages/Home.tsx | 19 +- www/src/pages/Test.tsx | 228 +++++++++--------- www/yarn.lock | 8 +- 38 files changed, 356 insertions(+), 279 deletions(-) delete mode 100644 www/src/assets/antler.svg delete mode 100644 www/src/assets/firetable-with-wordmark.svg delete mode 100644 www/src/assets/firetable.svg diff --git a/www/package.json b/www/package.json index c197fc811..343ed3b64 100644 --- a/www/package.json +++ b/www/package.json @@ -8,7 +8,7 @@ }, "private": true, "dependencies": { - "@antlerengineering/form-builder": "^3.0.0-0", + "@antlerengineering/form-builder": "^3.0.0-1", "@antlerengineering/multiselect": "^1.0.0-0", "@date-io/date-fns": "1.x", "@emotion/react": "^11.4.0", diff --git a/www/public/index.html b/www/public/index.html index ff3111bea..618a06cb9 100644 --- a/www/public/index.html +++ b/www/public/index.html @@ -19,12 +19,12 @@ diff --git a/www/src/Themes.tsx b/www/src/Themes.tsx index 5af9c0f92..38534da4a 100644 --- a/www/src/Themes.tsx +++ b/www/src/Themes.tsx @@ -7,7 +7,7 @@ export const BODY_FONT = "Inter, system-ui, sans-serif"; export const MONO_FONT = "IBM Plex Mono, ui-monospace, monospace"; export const ANTLER_RED = "#ED4747"; -export const SECONDARY_GREY = "#282829"; +export const SECONDARY_GREY = "#070042"; export const SECONDARY_TEXT = "rgba(0, 0, 0, 0.6)"; export const LOG_TEXT = "#cccccc"; export const ERROR = "#b00020"; @@ -35,10 +35,11 @@ declare module "@material-ui/core/styles/createTransitions" { export const themeBase = { palette: { - // primary: { main: ANTLER_RED, light: ANTLER_RED }, + primary: { main: "#371FFF" }, secondary: { main: SECONDARY_GREY }, text: { secondary: SECONDARY_TEXT, log: LOG_TEXT }, error: { main: ERROR }, + background: { default: "#F9F9FB" }, }, typography: { fontFamily: BODY_FONT, @@ -105,6 +106,38 @@ export const themeBase = { // color: SECONDARY_TEXT, }, }, + shadows: [ + // Based on https://tailwindcss.com/docs/box-shadow + // with additional “outline” shadow + "none", // 0 + "0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", // 1 + "0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", // 2 + "0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", // 3 + "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 4 + "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 5 + "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 6 + "0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 7 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 8 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 9 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 10 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 11 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 12 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 13 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 14 + "0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", // 15 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 16 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 17 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 18 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 19 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 20 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 21 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 22 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", // 23 + "0 0 0 1px rgba(0, 0, 0, 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.25)", // 24 + ], + shape: { + borderRadius: 4, + }, components: { MuiTextField: { defaultProps: { @@ -112,6 +145,57 @@ export const themeBase = { // size: "small", }, }, + MuiPaper: { + styleOverrides: { + rounded: { + borderRadius: 8, + }, + }, + }, + MuiDialog: { + styleOverrides: { + paper: { + borderRadius: 8, + }, + }, + }, + MuiButton: { + styleOverrides: { + root: { + borderRadius: 24, + }, + }, + }, + MuiListItem: { + styleOverrides: { + root: { + width: "calc(100% - 16px)", + margin: "4px 8px", + padding: "4px 8px", + borderRadius: 4, + }, + }, + }, + MuiMenu: { + styleOverrides: { + list: { + padding: "4px 0", + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + width: "calc(100% - 8px)", + margin: "0 4px", + padding: "6px 12px", + borderRadius: 4, + "&.Mui-selected": { + color: "#371FFF", + }, + }, + }, + }, }, }; @@ -119,6 +203,7 @@ export const darkThemeBase = { // https://material.io/design/color/dark-theme.html#ui-application palette: { mode: "dark", + primary: { main: "#8A99FF" }, secondary: { main: "#E4E4E5" }, text: { // primary: "rgba(255, 255, 255, 0.87)", @@ -127,6 +212,7 @@ export const darkThemeBase = { // disabled: "rgba(255, 255, 255, 0.38)", }, error: { main: "#CF6679" }, + background: { default: "#121212" }, }, // typography: { // overline: { color: "rgba(255, 255, 255, 0.6)" }, diff --git a/www/src/assets/FiretableLogo.tsx b/www/src/assets/FiretableLogo.tsx index 4a5000077..80583742c 100644 --- a/www/src/assets/FiretableLogo.tsx +++ b/www/src/assets/FiretableLogo.tsx @@ -1,45 +1,18 @@ -import { useTheme } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; export default function FiretableLogo() { - const theme = useTheme(); - - const primaryColor = theme.palette.primary.main; - const strokeColor = "#FFF"; - return ( - - - - - - - - - - - - - - - + firetable + ); } diff --git a/www/src/assets/antler.svg b/www/src/assets/antler.svg deleted file mode 100644 index 7195df0c7..000000000 --- a/www/src/assets/antler.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/www/src/assets/firetable-with-wordmark.svg b/www/src/assets/firetable-with-wordmark.svg deleted file mode 100644 index d6f760ac9..000000000 --- a/www/src/assets/firetable-with-wordmark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/www/src/assets/firetable.svg b/www/src/assets/firetable.svg deleted file mode 100644 index ace38ba28..000000000 --- a/www/src/assets/firetable.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/www/src/components/Auth/AuthLayout.tsx b/www/src/components/Auth/AuthLayout.tsx index 69ef9cc12..7cb1c16a0 100644 --- a/www/src/components/Auth/AuthLayout.tsx +++ b/www/src/components/Auth/AuthLayout.tsx @@ -5,6 +5,7 @@ import { Paper, Typography, LinearProgress } from "@material-ui/core"; import { alpha } from "@material-ui/core/styles"; import bgPattern from "assets/bg-pattern.svg"; +import FiretableLogo from "assets/FiretableLogo"; const useStyles = makeStyles((theme) => createStyles({ @@ -55,14 +56,6 @@ const useStyles = makeStyles((theme) => textAlign: "center", }, - wordmark: { - display: "block", - - color: theme.palette.primary.main, - letterSpacing: 0, - fontVariantLigatures: "common-ligatures", - }, - projectName: { display: "block", marginTop: theme.spacing(1), @@ -91,9 +84,7 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) { return ( - - firetable - + {process.env.REACT_APP_FIREBASE_PROJECT_ID} diff --git a/www/src/components/Auth/FirebaseUi.tsx b/www/src/components/Auth/FirebaseUi.tsx index 03e3f2cac..90c67a818 100644 --- a/www/src/components/Auth/FirebaseUi.tsx +++ b/www/src/components/Auth/FirebaseUi.tsx @@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ...theme.typography.button, paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2) + 18, + paddingRight: Number(theme.spacing(2).replace("px", "")) + 18, marginLeft: -18, width: "100%", textAlign: "center", diff --git a/www/src/components/ConnectServiceSelect/styles.ts b/www/src/components/ConnectServiceSelect/styles.ts index 6abd919a0..251f14314 100644 --- a/www/src/components/ConnectServiceSelect/styles.ts +++ b/www/src/components/ConnectServiceSelect/styles.ts @@ -7,7 +7,7 @@ export const useStyles = makeStyles((theme) => paper: { overflow: "hidden", maxHeight: "calc(100% - 48px)" }, menuChild: { - padding: `0 ${theme.spacing(2)}px`, + padding: `0 ${theme.spacing(2)}`, minWidth: 340, // Need to set fixed height here so popup is positioned correctly height: 340, @@ -23,7 +23,7 @@ export const useStyles = makeStyles((theme) => background: `${theme.palette.background.paper} no-repeat`, position: "relative", margin: theme.spacing(0, -2), - maxWidth: `calc(100% + ${theme.spacing(4)}px)`, + maxWidth: `calc(100% + ${theme.spacing(4)})`, "&::before, &::after": { content: '""', diff --git a/www/src/components/FormattedChip.tsx b/www/src/components/FormattedChip.tsx index 3748e2b13..d18a8165c 100644 --- a/www/src/components/FormattedChip.tsx +++ b/www/src/components/FormattedChip.tsx @@ -30,9 +30,13 @@ export default function FormattedChip(props: ChipProps) { if (VARIANTS.includes(label)) { return ( - + ); } - return ; + return ; } diff --git a/www/src/components/Grid/Card/styles.ts b/www/src/components/Grid/Card/styles.ts index 6b2254c99..87a174a24 100644 --- a/www/src/components/Grid/Card/styles.ts +++ b/www/src/components/Grid/Card/styles.ts @@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => tabDivider: { marginTop: -1 }, tabSection: { paddingTop: theme.spacing(2), height: "100%" }, - tabContentGrid: { height: `calc(100% + ${theme.spacing(3)}px)` }, + tabContentGrid: { height: `calc(100% + ${theme.spacing(3)})` }, divider: { margin: theme.spacing(2), diff --git a/www/src/components/HomeNavigation/NavDrawer.tsx b/www/src/components/HomeNavigation/NavDrawer.tsx index abd4c546c..e3504a443 100644 --- a/www/src/components/HomeNavigation/NavDrawer.tsx +++ b/www/src/components/HomeNavigation/NavDrawer.tsx @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => listItem: { color: theme.palette.text.secondary, - minHeight: 48, + // minHeight: 48, transition: theme.transitions.create(["background-color", "color"]), "& $listItemIcon": { transition: theme.transitions.create("color") }, }, @@ -68,7 +68,7 @@ const useStyles = makeStyles((theme) => }, listItemIcon: {}, listItemText: { - ...theme.typography.button, + // ...theme.typography.button, display: "block", color: "inherit", }, diff --git a/www/src/components/HomeNavigation/index.tsx b/www/src/components/HomeNavigation/index.tsx index 64a8b3da0..34f6ffb78 100644 --- a/www/src/components/HomeNavigation/index.tsx +++ b/www/src/components/HomeNavigation/index.tsx @@ -42,23 +42,48 @@ const useStyles = makeStyles((theme) => appBar: { height: APP_BAR_HEIGHT, - backgroundColor: theme.palette.background.paper, - [theme.breakpoints.down("md")]: { paddingRight: 0 }, [theme.breakpoints.up("md")]: { - transition: theme.transitions.create("width", { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), + transition: + theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }) + + ", " + + theme.transitions.create(["box-shadow", "background-color"]), "$open &": { width: `calc(100% - ${NAV_DRAWER_WIDTH}px)`, - transition: theme.transitions.create("width", { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), + transition: + theme.transitions.create("width", { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }) + + ", " + + theme.transitions.create(["box-shadow", "background-color"]), }, }, + + // Elevation 8 + backgroundImage: + "linear-gradient(rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09))", + "&::before": { + content: "''", + display: "block", + position: "absolute", + top: 0, + right: 0, + bottom: 0, + left: 0, + + backgroundColor: theme.palette.background.default, + transition: theme.transitions.create("opacity"), + }, + }, + appBarScrolled: { + "&::before": { + opacity: 0, + }, }, maxHeight: { height: APP_BAR_HEIGHT, @@ -122,7 +147,7 @@ export default function HomeNavigation({ diff --git a/www/src/components/Navigation/NavDrawer.tsx b/www/src/components/Navigation/NavDrawer.tsx index dbb901494..c267c8254 100644 --- a/www/src/components/Navigation/NavDrawer.tsx +++ b/www/src/components/Navigation/NavDrawer.tsx @@ -42,13 +42,14 @@ const useStyles = makeStyles((theme) => listItem: { color: theme.palette.text.secondary, - minHeight: 48, + // minHeight: 48, transition: theme.transitions.create(["background-color", "color"]), "& $listItemIcon": { transition: theme.transitions.create("color") }, }, listItemIcon: {}, listItemText: { - ...theme.typography.button, + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightMedium, display: "block", color: "inherit", }, diff --git a/www/src/components/Navigation/NavDrawerItem.tsx b/www/src/components/Navigation/NavDrawerItem.tsx index bc13b232f..395423bcb 100644 --- a/www/src/components/Navigation/NavDrawerItem.tsx +++ b/www/src/components/Navigation/NavDrawerItem.tsx @@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => createStyles({ listItem: { color: theme.palette.text.secondary, - minHeight: 48, + // minHeight: 48, }, listItemSelected: { "&&, &&:hover": { @@ -33,7 +33,9 @@ const useStyles = makeStyles((theme) => }, listItemIcon: {}, listItemText: { - ...theme.typography.button, + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightMedium, + // ...theme.typography.button, display: "block", color: "inherit", }, @@ -42,11 +44,12 @@ const useStyles = makeStyles((theme) => dropdownIconOpen: { transform: "rotate(180deg)" }, childListItem: { - minHeight: 40, + minHeight: 36, paddingLeft: theme.spacing(4), }, childListItemText: { - ...theme.typography.overline, + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightMedium, display: "block", color: "inherit", }, diff --git a/www/src/components/Navigation/UserMenu.tsx b/www/src/components/Navigation/UserMenu.tsx index b68f70c4b..e15235d1d 100644 --- a/www/src/components/Navigation/UserMenu.tsx +++ b/www/src/components/Navigation/UserMenu.tsx @@ -166,17 +166,26 @@ export default function UserMenu(props: IconButtonProps) { onClose={() => setThemeSubMenu(null)} classes={{ paper: classes.subMenu }} > - changeTheme("system")}> + changeTheme("system")} + selected={!themeOverridden} + > {!themeOverridden && } System - changeTheme("light")}> + changeTheme("light")} + selected={themeOverridden && theme === "light"} + > {themeOverridden && theme === "light" && } Light - changeTheme("dark")}> + changeTheme("dark")} + selected={themeOverridden && theme === "dark"} + > {themeOverridden && theme === "dark" && } @@ -185,6 +194,18 @@ export default function UserMenu(props: IconButtonProps) { )} + + User settings + + + + + + Project settings + + + + Sign out diff --git a/www/src/components/Navigation/index.tsx b/www/src/components/Navigation/index.tsx index 9ec39937b..ea0c59395 100644 --- a/www/src/components/Navigation/index.tsx +++ b/www/src/components/Navigation/index.tsx @@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => height: APP_BAR_HEIGHT, [theme.breakpoints.down("md")]: { paddingRight: 0 }, - backgroundColor: theme.palette.background.paper, + backgroundColor: theme.palette.background.default, }, maxHeight: { diff --git a/www/src/components/ProjectSettings/index.tsx b/www/src/components/ProjectSettings/index.tsx index b874e266a..38f6dc555 100644 --- a/www/src/components/ProjectSettings/index.tsx +++ b/www/src/components/ProjectSettings/index.tsx @@ -30,7 +30,6 @@ export default function ProjectSettings({ handleClose }: IProjectSettings) { return (
diff --git a/www/src/components/SideDrawer/useStyles.ts b/www/src/components/SideDrawer/useStyles.ts index 1c3570ec3..f476900c6 100644 --- a/www/src/components/SideDrawer/useStyles.ts +++ b/www/src/components/SideDrawer/useStyles.ts @@ -19,9 +19,6 @@ export const useStyles = makeStyles((theme) => borderRadius: `${(theme.shape.borderRadius as number) * 2}px 0 0 ${ (theme.shape.borderRadius as number) * 2 }px`, - backgroundColor: - theme.palette.background.elevation?.[24] ?? - theme.palette.background.paper, width: DRAWER_WIDTH, overflowX: "visible", @@ -60,8 +57,8 @@ export const useStyles = makeStyles((theme) => "&$disabled": { boxShadow: theme.shadows[6], - backgroundColor: - theme.palette.grey[theme.palette.mode === "light" ? 300 : 800], + // backgroundColor: + // theme.palette.grey[theme.palette.mode === "light" ? 300 : 800], }, "& + &": { marginTop: theme.spacing(4) }, diff --git a/www/src/components/StyledCard.tsx b/www/src/components/StyledCard.tsx index 6a9771713..066bb604e 100644 --- a/www/src/components/StyledCard.tsx +++ b/www/src/components/StyledCard.tsx @@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) => }, cardActions: { - padding: theme.spacing(1), + // padding: theme.spacing(1), display: "flex", justifyContent: "space-between", diff --git a/www/src/components/Table/TableHeader/TableHeaderButton.tsx b/www/src/components/Table/TableHeader/TableHeaderButton.tsx index 64b3e657f..000257b37 100644 --- a/www/src/components/Table/TableHeader/TableHeaderButton.tsx +++ b/www/src/components/Table/TableHeader/TableHeaderButton.tsx @@ -15,7 +15,7 @@ export default function TableHeaderButton({