theme updates

rowyio · Jul 12, 2021 · cf5e3b6 · cf5e3b6
1 parent 4a2ba93
commit cf5e3b6
Show file tree

Hide file tree

Showing 38 changed files with 356 additions and 279 deletions.
diff --git 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
@@ -19,12 +19,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="theme-color"
-      content="#fff"
+      content="#F9F9FB"
       media="(prefers-color-scheme: light)"
     />
     <meta
       name="theme-color"
-      content="#000"
+      content="#121212"
       media="(prefers-color-scheme: dark)"
     />
     <meta name="description" content="Excel for your database" />

diff --git 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,20 +106,104 @@ 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: {
         variant: "filled",
         // 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",
+          },
+        },
+      },
+    },
   },
 };
 
 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
@@ -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 (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="140"
-      height="32"
-      viewBox="0 0 140 32"
+    <Typography
+      variant="h4"
+      component="h1"
+      color="primary"
+      style={{
+        letterSpacing: 0,
+        fontVariantLigatures: "common-ligatures",
+        userSelect: "none",
+      }}
     >
-      <g fill="none" fillRule="evenodd">
-        <rect width="32" height="32" fill={primaryColor} rx="2.667" />
-        <g fill={strokeColor}>
-          <g fillRule="nonzero">
-            <path d="M5.333 18.667V24A2.667 2.667 0 0 0 8 26.667h5.333v-8h-8zM6.667 20H12v5.333H8A1.333 1.333 0 0 1 6.67 24.1l-.003-.1v-4zM18.667 18.667v8H24A2.667 2.667 0 0 0 26.667 24v-5.333h-8zM20 25.333V20h5.333v4c0 .703-.544 1.279-1.233 1.33l-.1.003h-4z" />
-            <path d="M12 18.667v8h8v-8h-8zM13.333 20h5.334v5.333h-5.334V20z" />
-          </g>
-          <path
-            fillRule="nonzero"
-            d="M18.667 12v8h8v-8h-8zM20 13.333h5.333v5.334H20v-5.334z"
-          />
-          <path
-            fillRule="nonzero"
-            d="M12 12v8h8v-8h-8zm1.333 1.333h5.334v5.334h-5.334v-5.334z"
-          />
-          <path
-            stroke={strokeColor}
-            strokeWidth="1.333"
-            d="M19.333 6v6.667H26V6h-6.667zm2.577.667h1.512L25.672 12h-2.143l-.85-2.075L21.826 12h-2.165l2.248-5.333z"
-          />
-        </g>
-        <path
-          fill={primaryColor}
-          fillRule="nonzero"
-          d="M43.467 26v-9.813h2.586V13.36h-2.586v-2.693c0-1.547 1.093-2.267 2.16-2.267 1.2 0 2.053.693 2.053 1.68v.187c0 .906.693 1.573 1.573 1.573s1.627-.693 1.627-1.573v-.294c0-2.24-1.787-4.453-5.253-4.453-2.987 0-5.36 1.76-5.36 4.88v2.96H37.76v2.827h2.507V26h3.2zm7.413 0V13.36h-3.2V26h3.2zm6.773 0v-8.267s.88-1.706 2.827-1.706c.933 0 1.52.293 1.52.293l1.12-2.88s-1.04-.4-2.187-.4c-2.346 0-3.44 2.16-3.44 2.16v-1.84h-3.04V26h3.2zm13.067.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56zm11.333 7.813c1.84 0 3.04-.827 3.04-.827L86.64 22.88s-.613.453-1.333.453c-.854 0-1.654-.453-1.654-2V16.24h3.814v-2.88h-3.814V9.6h-3.2v3.76h-2.48v2.88h2.48v5.6c0 2.693 1.867 4.48 4.32 4.48zm9.28 0c2.854 0 4.16-1.92 4.16-1.92V26h2.96v-8.24c0-2.88-2.133-4.72-5.76-4.72-2.64 0-4.986 1.147-4.986 1.147l1.04 2.64s1.946-.934 3.786-.934c1.12 0 2.72.534 2.72 2.187v.72s-1.2-.907-3.52-.907c-2.746 0-4.96 1.76-4.96 4.187 0 2.693 2.187 4.24 4.56 4.24zm.987-2.667c-.987 0-2.293-.293-2.293-1.626 0-1.36 1.36-1.787 2.346-1.787 1.734 0 2.88.64 2.88.64v1.307s-1.013 1.466-2.933 1.466zm16.48 2.667c3.28 0 6.16-2.747 6.16-6.64s-2.88-6.64-6.16-6.64c-2.4 0-3.573 1.653-3.573 1.653V5.84h-3.2V26h2.96v-1.653s1.093 1.973 3.813 1.973zm-.56-2.987c-2.107 0-3.013-1.76-3.013-1.76v-3.786s.906-1.76 3.013-1.76c2.16 0 3.467 1.573 3.467 3.653s-1.307 3.653-3.467 3.653zM123.6 26V5.84h-3.2V26h3.2zm9.52.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56z"
-        />
-      </g>
-    </svg>
+      firetable
+    </Typography>
   );
 }
diff --git a/www/src/assets/antler.svg b/www/src/assets/antler.svg
diff --git a/www/src/assets/firetable-with-wordmark.svg b/www/src/assets/firetable-with-wordmark.svg
diff --git a/www/src/assets/firetable.svg b/www/src/assets/firetable.svg
diff --git 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 (
     <Div100vh className={classes.root} style={{ minHeight: "100rvh" }}>
       <Paper className={classes.paper}>
-        <Typography variant="h4" component="h1" className={classes.wordmark}>
-          firetable
-        </Typography>
+        <FiretableLogo />
         <Typography variant="overline" className={classes.projectName}>
           {process.env.REACT_APP_FIREBASE_PROJECT_ID}
         </Typography>

diff --git 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
@@ -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
@@ -30,9 +30,13 @@ export default function FormattedChip(props: ChipProps) {
 
   if (VARIANTS.includes(label)) {
     return (
-      <Chip {...props} className={clsx(props.className, classes[label])} />
+      <Chip
+        size="small"
+        {...props}
+        className={clsx(props.className, classes[label])}
+      />
     );
   }
 
-  return <Chip {...props} />;
+  return <Chip size="small" {...props} />;
 }
diff --git 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
@@ -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
@@ -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({
         <AppBar
           color="inherit"
           elevation={trigger ? 4 : 0}
-          className={classes.appBar}
+          className={clsx(classes.appBar, trigger && classes.appBarScrolled)}
         >
           <Container>
             <Toolbar className={clsx(classes.maxHeight, classes.toolbar)}>