style(): improve UI

formancehq · Nov 18, 2022 · f9cb5c3 · f9cb5c3
1 parent e6336e6
commit f9cb5c3
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 13 deletions.
diff --git a/app/root.css b/app/root.css
@@ -16,6 +16,7 @@ body {
 .Graph {
   background-color: #fff;
   margin-top: 24px;
+  border-radius: 4px;
 }
 
 .Graph svg g polygon {

diff --git a/app/routes/overview/index.tsx b/app/routes/overview/index.tsx
@@ -166,12 +166,13 @@ const Overview: FunctionComponent<{ data?: OverviewData }> = ({ data }) => {
                   alignItems="center"
                   justifyContent="space-between"
                 >
-                  <Box display="flex">
+                  <Box display="flex" alignItems="center">
                     <Avatar
                       sx={{
                         backgroundColor: ({ palette }) => palette.neutral[800],
-                        width: 72,
-                        height: 72,
+                        width: 52,
+                        height: 52,
+                        borderRadius: '4px',
                       }}
                     >
                       <Person fontSize="large" />

diff --git a/app/src/components/Navbar/Navbar.tsx b/app/src/components/Navbar/Navbar.tsx
@@ -113,21 +113,38 @@ const Navbar: FunctionComponent = () => {
                 sx={{
                   width: 24,
                   height: 24,
+                  padding: '1px',
+                  borderRadius: '4px',
                   bgcolor: theme.palette.green.bright,
                 }}
               >
                 {currentUser.avatarLetter ? (
-                  currentUser.avatarLetter
+                  <Typography variant="bold">
+                    {currentUser.avatarLetter}
+                  </Typography>
                 ) : (
                   <Person />
                 )}
               </Avatar>
             </IconButton>
             <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-              <ArrowDropDown sx={{ color: theme.palette.grey[500] }} />
+              <ArrowDropDown sx={{ color: theme.palette.neutral[500] }} />
             </IconButton>
             <Menu
-              sx={{ mt: '45px' }}
+              sx={{
+                mt: '45px',
+                ul: {
+                  padding: '6px',
+                  margin: 0,
+                  background: theme.palette.neutral[800],
+                  color: theme.palette.neutral[0],
+                },
+              }}
+              PaperProps={{
+                sx: {
+                  boxShadow: 'none',
+                },
+              }}
               id="menu-appbar"
               anchorEl={anchorElUser}
               anchorOrigin={{
@@ -143,7 +160,15 @@ const Navbar: FunctionComponent = () => {
               onClose={handleCloseUserMenu}
             >
               {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleLogout}>
+                <MenuItem
+                  key={setting}
+                  onClick={handleLogout}
+                  sx={{
+                    ':hover': {
+                      background: theme.palette.neutral[700],
+                    },
+                  }}
+                >
                   <Typography textAlign="center">{setting}</Typography>
                 </MenuItem>
               ))}

diff --git a/app/src/components/Wrappers/Metadata/Metadata.tsx b/app/src/components/Wrappers/Metadata/Metadata.tsx
@@ -133,7 +133,8 @@ const Metadata: FunctionComponent<MetadataProps> = ({
           background: ({ palette }) => palette.neutral[900],
           justifyContent: 'space-between',
           alignItems: 'self-start',
-          p: '20px',
+          borderRadius: '4px',
+          p: '12px',
           '& ul': {
             marginTop: '0px !important',
           },

diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.92",
     "@mui/material": "latest",
-    "@numaryhq/storybook": "^0.7.2",
+    "@numaryhq/storybook": "^0.7.3",
     "@opentelemetry/api": "^1.2.0",
     "@opentelemetry/auto-instrumentations-node": "^0.34.0",
     "@opentelemetry/exporter-trace-otlp-grpc": "^0.33.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1458,10 +1458,10 @@
   dependencies:
     json-parse-even-better-errors "^2.3.1"
 
-"@numaryhq/storybook@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@numaryhq/storybook/-/storybook-0.7.2.tgz#6ba90048aad70a2a27065095e1e3aab632a31e41"
-  integrity sha512-X0JO2uOPq9qBUG4xNPjtUYHx7WYo7MLgqDXS/sWaAOnkWFwWc7TP6iKtrDs/JMHAp5pIaCSEn/vyey63Yul1og==
+"@numaryhq/storybook@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@numaryhq/storybook/-/storybook-0.7.3.tgz#e179140892051821ff2a5d88e36fa78777bce550"
+  integrity sha512-iutFXjvEP8q3aHnhHh+gWE7dqETw/+nplfgBClMspSUTVj35/KT2lqKSj2LUVU1TCXnd+6iokpXhsnbpgsrM2w==
 
 "@opentelemetry/api-metrics@0.29.2":
   version "0.29.2"