diff options
Diffstat (limited to 'subprojects/frontend')
-rw-r--r-- | subprojects/frontend/src/TopBar.tsx | 17 |
1 files changed, 16 insertions, 1 deletions
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index 0f757986..5f72dc96 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import AppBar from '@mui/material/AppBar'; | 1 | import AppBar from '@mui/material/AppBar'; |
2 | import Toolbar from '@mui/material/Toolbar'; | 2 | import Toolbar from '@mui/material/Toolbar'; |
3 | import Typography from '@mui/material/Typography'; | 3 | import Typography from '@mui/material/Typography'; |
4 | import { useTheme } from '@mui/material/styles'; | 4 | import { styled, useTheme } from '@mui/material/styles'; |
5 | import useMediaQuery from '@mui/material/useMediaQuery'; | 5 | import useMediaQuery from '@mui/material/useMediaQuery'; |
6 | import { throttle } from 'lodash-es'; | 6 | import { throttle } from 'lodash-es'; |
7 | import { observer } from 'mobx-react-lite'; | 7 | import { observer } from 'mobx-react-lite'; |
@@ -45,6 +45,15 @@ function useWindowControlsOverlayVisible(): boolean { | |||
45 | return windowControlsOverlayVisible; | 45 | return windowControlsOverlayVisible; |
46 | } | 46 | } |
47 | 47 | ||
48 | const DevModeBadge = styled('div')(({ theme }) => ({ | ||
49 | ...theme.typography.button, | ||
50 | display: 'inline-block', | ||
51 | padding: `0 ${theme.shape.borderRadius}px`, | ||
52 | background: theme.palette.text.primary, | ||
53 | color: theme.palette.outer.background, | ||
54 | borderRadius: theme.shape.borderRadius, | ||
55 | })); | ||
56 | |||
48 | export default observer(function TopBar(): JSX.Element { | 57 | export default observer(function TopBar(): JSX.Element { |
49 | const { editorStore } = useRootStore(); | 58 | const { editorStore } = useRootStore(); |
50 | const overlayVisible = useWindowControlsOverlayVisible(); | 59 | const overlayVisible = useWindowControlsOverlayVisible(); |
@@ -82,6 +91,12 @@ export default observer(function TopBar(): JSX.Element { | |||
82 | > | 91 | > |
83 | <Typography variant="h6" component="h1" flexGrow={1}> | 92 | <Typography variant="h6" component="h1" flexGrow={1}> |
84 | Refinery | 93 | Refinery |
94 | {import.meta.env.DEV && ( | ||
95 | <> | ||
96 | {' '} | ||
97 | <DevModeBadge>Dev</DevModeBadge> | ||
98 | </> | ||
99 | )} | ||
85 | </Typography> | 100 | </Typography> |
86 | {showGenerateButton && ( | 101 | {showGenerateButton && ( |
87 | <GenerateButton editorStore={editorStore} hideWarnings /> | 102 | <GenerateButton editorStore={editorStore} hideWarnings /> |