diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-02-23 11:49:58 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-02-23 19:13:17 +0100 |
commit | c31b3678300f9d85d11e9fcdad5e69396496316b (patch) | |
tree | d151322c1aa0273ca8adbfa3bbedfe54f217daa8 /subprojects | |
parent | chore(deps): bump frontend dependencies (diff) | |
download | refinery-c31b3678300f9d85d11e9fcdad5e69396496316b.tar.gz refinery-c31b3678300f9d85d11e9fcdad5e69396496316b.tar.zst refinery-c31b3678300f9d85d11e9fcdad5e69396496316b.zip |
feat(frontend): add top bar logo
Diffstat (limited to 'subprojects')
-rw-r--r-- | subprojects/frontend/src/TopBar.tsx | 24 |
1 files changed, 23 insertions, 1 deletions
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index 867a24a0..d80c022d 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx | |||
@@ -55,6 +55,27 @@ function useWindowControlsOverlayVisible(): boolean { | |||
55 | return windowControlsOverlayVisible; | 55 | return windowControlsOverlayVisible; |
56 | } | 56 | } |
57 | 57 | ||
58 | function RefineryIcon({ size }: { size: number }): JSX.Element { | ||
59 | const theme = useTheme(); | ||
60 | return ( | ||
61 | <svg | ||
62 | xmlns="http://www.w3.org/2000/svg" | ||
63 | width={size} | ||
64 | height={size} | ||
65 | viewBox="0 0 512 515" | ||
66 | > | ||
67 | <path | ||
68 | d="M447.98 179.335c-139.95-9.583-301.272-50.91-384-147.336v46.117C98.45 129.623 209.442 178.137 294.243 199.1c-84.796 20.963-195.791 69.476-230.265 120.985v46.117c82.73-96.422 244.053-137.752 384.002-147.334z" | ||
69 | fill={theme.palette.text.primary} | ||
70 | /> | ||
71 | <path | ||
72 | d="M447.98 296.729c-113.755 4.192-287.485 40.727-384 136.557v46.716c95.14-103.612 279.898-137.754 384-143.745z" | ||
73 | fill={theme.palette.primary.main} | ||
74 | /> | ||
75 | </svg> | ||
76 | ); | ||
77 | } | ||
78 | |||
58 | const DevModeBadge = styled('div')(({ theme }) => ({ | 79 | const DevModeBadge = styled('div')(({ theme }) => ({ |
59 | ...theme.typography.button, | 80 | ...theme.typography.button, |
60 | display: 'inline-block', | 81 | display: 'inline-block', |
@@ -101,7 +122,8 @@ export default observer(function TopBar(): JSX.Element { | |||
101 | py: 0.5, | 122 | py: 0.5, |
102 | }} | 123 | }} |
103 | > | 124 | > |
104 | <Typography variant="h6" component="h1"> | 125 | <RefineryIcon size={24} /> |
126 | <Typography variant="h6" component="h1" pl={1}> | ||
105 | Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>} | 127 | Refinery {import.meta.env.DEV && <DevModeBadge>Dev</DevModeBadge>} |
106 | </Typography> | 128 | </Typography> |
107 | <Stack direction="row" alignItems="center" flexGrow={1} marginLeft={1}> | 129 | <Stack direction="row" alignItems="center" flexGrow={1} marginLeft={1}> |