Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add styles #9

Merged
merged 2 commits into from
Mar 4, 2021
Merged

add styles #9

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9e3949
add styles
nhayfield Mar 4, 2021
3dfd1ce
fix faded button
nhayfield Mar 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add styles
  • Loading branch information
@nhayfield
nhayfield committed Mar 4, 2021
commit c9e394994974354b4ae1a02b08c1ecf0d4c267b2
100 changes: 75 additions & 25 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@ import {
Switch,
Route,
} from 'react-router-dom';
import ConnectForm from './pages/ConnectForm';

const Hello2: FC = () => {
return (
<div>
<h3>HELLO 2</h3>
</div>
);
};
import {
createStyles,
jssPreset,
makeStyles,
StylesProvider,
ThemeProvider,
} from '@material-ui/core';
import { create } from 'jss';
import { createTheme } from './utils/theme';
import ConnectForm from './pages/ConnectForm';
import { THEMES } from './utils/constants';

const RouteListener: FC = (x) => {
const history = useHistory();
Expand All @@ -25,22 +28,69 @@ const RouteListener: FC = (x) => {
return <>{x.children}</>;
};

export default function App() {
const jss = create({ plugins: [...jssPreset().plugins] });

const useStyles = makeStyles(() =>
createStyles({
'@global': {
'*': {
boxSizing: 'border-box',
margin: 0,
padding: 0,
},
html: {
'-webkit-font-smoothing': 'antialiased',
'-moz-osx-font-smoothing': 'grayscale',
height: '100%',
width: '100%',
},
body: {
height: '100%',
width: '100%',
},
'#root': {
height: '100%',
width: '100%',
},
},
})
);

interface Settings {
direction?: 'ltr' | 'rtl';
responsiveFontSizes?: boolean;
theme?: string;
rowCount?: number;
}

const defaultSettings: Settings = {
responsiveFontSizes: true,
theme: THEMES.LIGHT,
rowCount: 25,
};

const App: FC = () => {
useStyles();
return (
<HashRouter>
<Switch>
<RouteListener>
<Route exact path="/">
<Redirect to="/connect" />
</Route>
<Route exact path="/hello2" component={Hello2} />
<Route exact path="/connect" component={ConnectForm} />
<Route
path="/edit_connect/:channelId/:editingConnected"
component={ConnectForm}
/>
</RouteListener>
</Switch>
</HashRouter>
<ThemeProvider theme={createTheme(defaultSettings)}>
<StylesProvider jss={jss}>
<HashRouter>
<Switch>
<RouteListener>
<Route exact path="/">
<Redirect to="/connect" />
</Route>
<Route exact path="/connect" component={ConnectForm} />
<Route
path="/edit_connect/:channelId/:editingConnected"
component={ConnectForm}
/>
</RouteListener>
</Switch>
</HashRouter>
</StylesProvider>
</ThemeProvider>
);
}
};

export default App;
44 changes: 44 additions & 0 deletions src/components/TextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/* eslint-disable react/jsx-props-no-spreading */
import {
makeStyles,
TextField as MuiTextField,
TextFieldProps,
} from '@material-ui/core';
import React from 'react';

import { Theme } from '../utils/theme';

const useStyles = makeStyles((theme: Theme) => ({
root: {
'& .Mui-focused': {},
'& .MuiInputBase-input': {
padding: theme.spacing(1),
backgroundColor: theme.palette.background.dark,
},
'& .Mui-error .MuiInputBase-input': {
backgroundColor: theme.palette.error.main,
},
'& .MuiOutlinedInput-notchedOutline': {
borderWidth: '0px',
},
'& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
transform: 'translate(8px, 10px) scale(1)',
},
boxShadow: theme.shadows[1],
borderRadius: '2px',
},
}));

const TextField = (props: TextFieldProps): JSX.Element => {
const classes = useStyles();
return (
<MuiTextField
{...props} //
variant="outlined"
size="small"
color="primary"
className={classes.root}
/>
);
};
export default TextField;
1 change: 1 addition & 0 deletions src/declare.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ declare module 'electron-root-path';
declare module 'electron-devtools-installer';
declare module 'validator';
declare module 'uuid';
declare module 'lodash';
30 changes: 19 additions & 11 deletions src/pages/ConnectForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import {
makeStyles,
Button,
Grid,
TextField,
Typography,
FormGroup,
FormControlLabel,
Checkbox,
Switch,
ListItem,
List,
} from '@material-ui/core';
Expand All @@ -22,10 +21,12 @@ import {
DISCONNECT,
ConnectionData,
} from '../utils/constants';
import TextField from '../components/TextField';
import { Theme } from '../utils/theme';

const useStyles = makeStyles(() => ({
const useStyles = makeStyles((theme: Theme) => ({
container: {
padding: 3,
padding: theme.spacing(3),
},
red: {
color: 'red',
Expand All @@ -34,7 +35,12 @@ const useStyles = makeStyles(() => ({
color: 'green',
},
button: {
padding: 1,
background: theme.palette.primary.light,
marginRight: theme.spacing(1),
'&:hover': {
background: theme.palette.primary.light,
opacity: `0.6`,
},
},
buttonWrapper: {
marginTop: 20,
Expand Down Expand Up @@ -189,7 +195,9 @@ const ConnectForm: FC<Props> = () => {
<Grid className={classes.container}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12}>
<Typography variant="h4">Pomerium TCP Connector</Typography>
<Typography variant="h3" color="textPrimary">
Pomerium TCP Connector
</Typography>
</Grid>
<Grid item xs={12}>
<TextField
Expand All @@ -208,7 +216,7 @@ const ConnectForm: FC<Props> = () => {
<FormControlLabel
label="Disable TLS Verification"
control={
<Checkbox
<Switch
checked={connectionData.disableTLS}
name="disable-tls-verification"
color="primary"
Expand Down Expand Up @@ -271,7 +279,7 @@ const ConnectForm: FC<Props> = () => {
<Button
fullWidth
type="button"
variant="outlined"
variant="contained"
onClick={() => disconnect(connectionData.channelID)}
disabled={!connected}
color="primary"
Expand All @@ -284,7 +292,7 @@ const ConnectForm: FC<Props> = () => {
<Button
fullWidth
type="button"
variant="outlined"
variant="contained"
disabled={Object.values(errors).some(Boolean)}
color="primary"
className={classes.button}
Expand All @@ -296,10 +304,10 @@ const ConnectForm: FC<Props> = () => {
<Grid item xs={3}>
<Button
fullWidth
variant="contained"
color="primary"
type="button"
variant="outlined"
onClick={clear}
color="primary"
className={classes.button}
disabled={!connected}
>
Expand Down
5 changes: 5 additions & 0 deletions src/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,8 @@ export interface MenuConnection {
channelID: string;
output: string[];
}

export const THEMES = {
LIGHT: 'LIGHT',
DARK: 'DARK',
};
57 changes: 57 additions & 0 deletions src/utils/shadows.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import type { Shadows } from '@material-ui/core/styles/shadows';

export const softShadows: Shadows = [
'none',
'0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 4px 8px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 5px 8px -2px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 6px 12px -4px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 7px 12px -4px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 6px 16px -4px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 8px 18px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 9px 18px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 10px 20px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 11px 20px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 12px 22px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 13px 22px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 14px 24px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 16px 28px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 18px 30px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 20px 32px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)',
'0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)',
];

export const strongShadows: Shadows = [
'none',
'0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 2px 2px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 4px 8px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 5px 8px -2px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 6px 12px -4px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 7px 12px -4px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 6px 16px -4px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 7px 16px -4px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 8px 18px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 9px 18px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 10px 20px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 11px 20px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 12px 22px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 13px 22px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 14px 24px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 16px 28px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 18px 30px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 20px 32px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 22px 34px -8px rgba(0,0,0,0.50)',
'0 0 1px 0 rgba(0,0,0,0.70), 0 24px 36px -8px rgba(0,0,0,0.50)',
];
Loading