Settings page redesign (#669)

* Start on settings page redesign * add icons and fix tests * Final fixes * Fix code style issues with ESLint * lint fix --------- Co-authored-by: Lint Action <github-actions[bot]@users.noreply.github.com>
grai-io · Sep 29, 2023 · 340ef69 · 340ef69
1 parent 2d85a1c
commit 340ef69
Show file tree

Hide file tree

Showing 33 changed files with 650 additions and 384 deletions.
diff --git a/grai-frontend/src/components/icons/Alerts.tsx b/grai-frontend/src/components/icons/Alerts.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const Alerts: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Alerts
diff --git a/grai-frontend/src/components/icons/ApiKeys.tsx b/grai-frontend/src/components/icons/ApiKeys.tsx
@@ -0,0 +1,21 @@
+import React from "react"
+
+const ApiKeys: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 2L19 4M19 4L22 7L18.5 10.5L15.5 7.5M19 4L15.5 7.5M11.39 11.61C11.9064 12.1195 12.3168 12.726 12.5978 13.3948C12.8787 14.0635 13.0246 14.7813 13.0271 15.5066C13.0295 16.232 12.8884 16.9507 12.6119 17.6213C12.3355 18.2919 11.9291 18.9012 11.4162 19.4141C10.9033 19.9271 10.294 20.3334 9.62333 20.6099C8.95271 20.8864 8.23403 21.0275 7.50866 21.025C6.7833 21.0226 6.06557 20.8767 5.39682 20.5958C4.72807 20.3148 4.1215 19.9043 3.61203 19.388C2.61016 18.3507 2.05579 16.9614 2.06832 15.5193C2.08085 14.0772 2.65928 12.6977 3.67903 11.678C4.69877 10.6583 6.07824 10.0798 7.52032 10.0673C8.96241 10.0548 10.3517 10.6091 11.389 11.611L11.39 11.61ZM11.39 11.61L15.5 7.5"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default ApiKeys
diff --git a/grai-frontend/src/components/icons/Installations.tsx b/grai-frontend/src/components/icons/Installations.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const Installations: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_371_34)">
+      <path
+        d="M18.0001 10H16.7401C16.366 8.551 15.5929 7.23599 14.5088 6.2044C13.4246 5.1728 12.0728 4.46599 10.607 4.16428C9.14124 3.86256 7.6202 3.97804 6.21676 4.49759C4.81332 5.01714 3.58375 5.91993 2.66776 7.10338C1.75177 8.28683 1.1861 9.70348 1.03502 11.1924C0.883935 12.6812 1.1535 14.1826 1.81309 15.526C2.47267 16.8693 3.49583 18.0007 4.76629 18.7916C6.03676 19.5824 7.50359 20.0011 9.00011 20H18.0001C19.3262 20 20.598 19.4732 21.5356 18.5355C22.4733 17.5979 23.0001 16.3261 23.0001 15C23.0001 13.6739 22.4733 12.4021 21.5356 11.4645C20.598 10.5268 19.3262 10 18.0001 10Z"
+        stroke="#747A82"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_371_34">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default Installations
diff --git a/grai-frontend/src/components/icons/PersonalInfo.tsx b/grai-frontend/src/components/icons/PersonalInfo.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const PersonalInfo: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default PersonalInfo
diff --git a/grai-frontend/src/components/icons/TwoFactor.tsx b/grai-frontend/src/components/icons/TwoFactor.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+
+const TwoFactor: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default TwoFactor
diff --git a/grai-frontend/src/components/icons/Users.tsx b/grai-frontend/src/components/icons/Users.tsx
@@ -0,0 +1,42 @@
+import React from "react"
+
+const Users: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M23 20.9999V18.9999C22.9993 18.1136 22.7044 17.2527 22.1614 16.5522C21.6184 15.8517 20.8581 15.3515 20 15.1299"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799"
+      stroke="#747A82"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Users
diff --git a/grai-frontend/src/components/icons/Workspace.tsx b/grai-frontend/src/components/icons/Workspace.tsx
@@ -0,0 +1,35 @@
+import React from "react"
+
+const Workspace: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 20V10"
+      stroke="#747A82"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 20V4"
+      stroke="#747A82"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M6 20V14"
+      stroke="#747A82"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export default Workspace
diff --git a/grai-frontend/src/components/settings/SettingsAppBar.tsx b/grai-frontend/src/components/settings/SettingsAppBar.tsx
@@ -1,38 +1,37 @@
 import React from "react"
-import { Close } from "@mui/icons-material"
-import { AppBar, IconButton, Toolbar, Typography } from "@mui/material"
-import { useNavigate } from "react-router-dom"
-import useWorkspace from "helpers/useWorkspace"
+import { Box, Typography } from "@mui/material"
 
-const SettingsAppBar: React.FC = () => {
-  const { routePrefix } = useWorkspace()
-  const navigate = useNavigate()
-
-  const handleClose = () => navigate(routePrefix)
+type SettingsAppBarProps = {
+  title: string
+  buttons?: React.ReactNode
+}
 
-  return (
-    <AppBar
-      position="fixed"
-      color="transparent"
-      elevation={0}
+const SettingsAppBar: React.FC<SettingsAppBarProps> = ({ title, buttons }) => (
+  <Box
+    sx={{
+      px: "48px",
+      py: "16px",
+      borderBottomStyle: "solid",
+      borderBottomWidth: 1,
+      borderBottomColor: "divider",
+      display: "flex",
+    }}
+  >
+    <Typography
+      variant="h6"
       sx={{
-        borderBottomStyle: "solid",
-        borderBottomWidth: 1,
-        borderBottomColor: "divider",
-        zIndex: theme => theme.zIndex.drawer + 1,
-        backgroundColor: "white",
+        color: "rgba(0, 0, 0, 0.80)",
+        fontSize: "24px",
+        fontWeight: 400,
+        lineHeight: "32px",
+        my: "8px",
       }}
     >
-      <Toolbar>
-        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-          Settings
-        </Typography>
-        <IconButton onClick={handleClose}>
-          <Close />
-        </IconButton>
-      </Toolbar>
-    </AppBar>
-  )
-}
+      {title}
+    </Typography>
+    <Box sx={{ flexGrow: 1 }} />
+    {buttons}
+  </Box>
+)
 
 export default SettingsAppBar
diff --git a/grai-frontend/src/components/settings/SettingsContent.tsx b/grai-frontend/src/components/settings/SettingsContent.tsx
@@ -0,0 +1,13 @@
+import React from "react"
+import { Box, SxProps } from "@mui/material"
+
+type SettingsContentProps = {
+  children: React.ReactNode
+  sx?: SxProps
+}
+
+const SettingsContent: React.FC<SettingsContentProps> = ({ children, sx }) => (
+  <Box sx={{ ...sx, p: 3 }}>{children}</Box>
+)
+
+export default SettingsContent