Skip to content

Commit f0c163b

Browse files
sametcn99sametcn99
committed
Fix UI shell formatting
1 parent a17d847 commit f0c163b

4 files changed

Lines changed: 124 additions & 88 deletions

File tree

‎ui/src/common/ConnectionErrorBanner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface ConnectionErrorBannerProps {
88
message: string;
99
}
1010

11-
export const ConnectionErrorBanner = ({ height, retry, message }: ConnectionErrorBannerProps) => (
11+
export const ConnectionErrorBanner = ({height, retry, message}: ConnectionErrorBannerProps) => (
1212
<div
1313
style={{
1414
backgroundColor: '#e74c3c',
@@ -22,7 +22,7 @@ export const ConnectionErrorBanner = ({ height, retry, message }: ConnectionErro
2222
padding: '8px 16px',
2323
boxSizing: 'border-box',
2424
}}>
25-
<Typography align="center" variant="h6" style={{ lineHeight: 1.4 }}>
25+
<Typography align="center" variant="h6" style={{lineHeight: 1.4}}>
2626
{message}{' '}
2727
<Button variant="outlined" onClick={retry}>
2828
Retry

‎ui/src/layout/Header.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import AppBar from '@mui/material/AppBar';
2-
import Button, { ButtonProps } from '@mui/material/Button';
2+
import Button, {ButtonProps} from '@mui/material/Button';
33
import IconButton from '@mui/material/IconButton';
4-
import { Theme } from '@mui/material/styles';
5-
import { makeStyles } from 'tss-react/mui';
4+
import {Theme} from '@mui/material/styles';
5+
import {makeStyles} from 'tss-react/mui';
66
import Toolbar from '@mui/material/Toolbar';
77
import Typography from '@mui/material/Typography';
88
import AccountCircle from '@mui/icons-material/AccountCircle';
@@ -16,11 +16,11 @@ import GitHubIcon from '@mui/icons-material/GitHub';
1616
import MenuIcon from '@mui/icons-material/Menu';
1717
import Apps from '@mui/icons-material/Apps';
1818
import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
19-
import React, { CSSProperties } from 'react';
20-
import { Link } from 'react-router';
21-
import { useMediaQuery } from '@mui/material';
19+
import React, {CSSProperties} from 'react';
20+
import {Link} from 'react-router';
21+
import {useMediaQuery} from '@mui/material';
2222
import Tooltip from '@mui/material/Tooltip';
23-
import { ThemeKey } from './theme';
23+
import {ThemeKey} from './theme';
2424

2525
const themeIcons: Record<ThemeKey, React.ReactElement> = {
2626
dark: <Brightness4 />,
@@ -93,12 +93,12 @@ const Header = ({
9393
showSettings,
9494
themeMode,
9595
}: IProps) => {
96-
const { classes } = useStyles();
96+
const {classes} = useStyles();
9797
const themeLabel = `Toggle theme (current: ${themeMode})`;
9898
const themeIcon = themeIcons[themeMode];
9999
return (
100100
<AppBar
101-
sx={{ position: { xs: 'sticky', sm: 'fixed' } }}
101+
sx={{position: {xs: 'sticky', sm: 'fixed'}}}
102102
style={style}
103103
className={classes.appBar}>
104104
<Toolbar className={classes.toolbar}>
@@ -174,13 +174,13 @@ const Buttons = ({
174174
setNavOpen: (open: boolean) => void;
175175
showSettings: VoidFunction;
176176
}) => {
177-
const { classes } = useStyles();
177+
const {classes} = useStyles();
178178
const mobile = useMediaQuery('(max-width:600px)');
179179

180180
return (
181181
<div className={classes.menuButtons}>
182182
<ResponsiveButton
183-
sx={{ display: { sm: 'none', xs: 'block' } }}
183+
sx={{display: {sm: 'none', xs: 'block'}}}
184184
icon={<MenuIcon />}
185185
onClick={() => setNavOpen(!navOpen)}
186186
label="menu"
@@ -190,7 +190,11 @@ const Buttons = ({
190190
<>
191191
{admin && (
192192
<Link className={classes.link} to="/users" id="navigate-users">
193-
<ResponsiveButton icon={<SupervisorAccount />} label="users" color="inherit" />
193+
<ResponsiveButton
194+
icon={<SupervisorAccount />}
195+
label="users"
196+
color="inherit"
197+
/>
194198
</Link>
195199
)}
196200
<Link className={classes.link} to="/applications" id="navigate-apps">
@@ -229,7 +233,7 @@ const ResponsiveButton: React.FC<{
229233
id?: string;
230234
onClick?: () => void;
231235
icon: React.ReactNode;
232-
}> = ({ icon, label, ...rest }) => {
236+
}> = ({icon, label, ...rest}) => {
233237
const matches = useMediaQuery('(max-width:1000px)');
234238
if (matches) {
235239
return (

‎ui/src/layout/Layout.tsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import {
77
Paper,
88
Box,
99
} from '@mui/material';
10-
import { makeStyles } from 'tss-react/mui';
10+
import {makeStyles} from 'tss-react/mui';
1111
import CssBaseline from '@mui/material/CssBaseline';
1212
import * as React from 'react';
13-
import { HashRouter, Navigate, Route, Routes } from 'react-router';
13+
import {HashRouter, Navigate, Route, Routes} from 'react-router';
1414
import Header from './Header';
1515
import Navigation from './Navigation';
1616
import ScrollUpButton from '../common/ScrollUpButton';
@@ -23,12 +23,12 @@ import Plugins from '../plugin/Plugins';
2323
import Login from '../user/Login';
2424
import Messages from '../message/Messages';
2525
import Users from '../user/Users';
26-
import { observer } from 'mobx-react-lite';
27-
import { ConnectionErrorBanner } from '../common/ConnectionErrorBanner';
28-
import { useStores } from '../stores';
29-
import { SnackbarProvider } from 'notistack';
26+
import {observer} from 'mobx-react-lite';
27+
import {ConnectionErrorBanner} from '../common/ConnectionErrorBanner';
28+
import {useStores} from '../stores';
29+
import {SnackbarProvider} from 'notistack';
3030
import LoadingSpinner from '../common/LoadingSpinner';
31-
import { isThemeKey, ThemeKey } from './theme';
31+
import {isThemeKey, ThemeKey} from './theme';
3232
import DefaultPage from '../common/DefaultPage';
3333

3434
const useStyles = makeStyles()((theme: Theme) => ({
@@ -62,14 +62,14 @@ const Layout = observer(() => {
6262
currentUser: {
6363
loggedIn,
6464
authenticating,
65-
user: { name, admin },
65+
user: {name, admin},
6666
logout,
6767
tryReconnect,
6868
connectionErrorMessage,
6969
refreshKey,
7070
},
7171
} = useStores();
72-
const { classes } = useStyles();
72+
const {classes} = useStyles();
7373
const [currentTheme, setCurrentTheme] = React.useState<ThemeKey>(() => {
7474
const stored = window.localStorage.getItem(localStorageThemeKey);
7575
return isThemeKey(stored) ? stored : 'system';
@@ -85,7 +85,7 @@ const Layout = observer(() => {
8585
}),
8686
[paletteMode]
8787
);
88-
const { version } = config.get('version');
88+
const {version} = config.get('version');
8989
const [navOpen, setNavOpen] = React.useState(false);
9090
const [showSettings, setShowSettings] = React.useState(false);
9191

@@ -122,12 +122,12 @@ const Layout = observer(() => {
122122
message={connectionErrorMessage}
123123
/>
124124
)}
125-
<div style={{ display: 'flex', flexDirection: 'column' }}>
125+
<div style={{display: 'flex', flexDirection: 'column'}}>
126126
<CssBaseline />
127127
<Header
128128
admin={admin}
129129
name={name}
130-
style={{ top: !connectionErrorMessage ? 0 : connectionBannerHeight }}
130+
style={{top: !connectionErrorMessage ? 0 : connectionBannerHeight}}
131131
version={version}
132132
loggedIn={loggedIn}
133133
themeMode={currentTheme}
@@ -137,7 +137,7 @@ const Layout = observer(() => {
137137
setNavOpen={setNavOpen}
138138
navOpen={navOpen}
139139
/>
140-
<div style={{ display: 'flex' }}>
140+
<div style={{display: 'flex'}}>
141141
<Navigation
142142
loggedIn={loggedIn}
143143
admin={admin}
@@ -149,10 +149,11 @@ const Layout = observer(() => {
149149
setNavOpen={setNavOpen}
150150
/>
151151
<main
152-
className={`${classes.content} ${connectionErrorMessage
152+
className={`${classes.content} ${
153+
connectionErrorMessage
153154
? classes.contentWithConnectionError
154155
: ''
155-
}`}>
156+
}`}>
156157
<Routes>
157158
<Route path="/login" element={<Login />} />
158159
<Route path="/" element={authed(<Messages />)} />
@@ -197,7 +198,7 @@ const Layout = observer(() => {
197198
});
198199

199200
// eslint-disable-next-line
200-
const Lazy = ({ component }: { component: () => Promise<{ default: React.ComponentType<any> }> }) => {
201+
const Lazy = ({component}: {component: () => Promise<{default: React.ComponentType<any>}>}) => {
201202
const Component = React.lazy(component);
202203

203204
return (
@@ -208,8 +209,8 @@ const Lazy = ({ component }: { component: () => Promise<{ default: React.Compone
208209
};
209210

210211
const RequireAuth: React.FC<
211-
React.PropsWithChildren<{ loggedIn: boolean; authenticating: boolean }>
212-
> = ({ children, authenticating, loggedIn }) => {
212+
React.PropsWithChildren<{loggedIn: boolean; authenticating: boolean}>
213+
> = ({children, authenticating, loggedIn}) => {
213214
if (authenticating) {
214215
return <LoadingSpinner />;
215216
}
@@ -219,8 +220,8 @@ const RequireAuth: React.FC<
219220
return <>{children}</>;
220221
};
221222

222-
export const RequireElevation = observer(({ children }: React.PropsWithChildren) => {
223-
const { elevateStore } = useStores();
223+
export const RequireElevation = observer(({children}: React.PropsWithChildren) => {
224+
const {elevateStore} = useStores();
224225

225226
if (elevateStore.elevated) {
226227
return <>{children}</>;
@@ -229,7 +230,7 @@ export const RequireElevation = observer(({ children }: React.PropsWithChildren)
229230
return (
230231
<DefaultPage title="Authentication Required" maxWidth={400}>
231232
<Paper elevation={6}>
232-
<Box sx={{ padding: 2 }}>
233+
<Box sx={{padding: 2}}>
233234
<ElevationForm />
234235
</Box>
235236
</Paper>

0 commit comments

Comments
 (0)