diff --git a/src/App.tsx b/src/App.tsx
index d40e6b73..af3a3171 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,15 +7,18 @@ import {
Switch,
Route,
} from 'react-router-dom';
-import ConnectForm from './pages/ConnectForm';
-const Hello2: FC = () => {
- return (
-
-
HELLO 2
-
- );
-};
+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();
@@ -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 (
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
-}
+};
+
+export default App;
diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
new file mode 100644
index 00000000..d9f753c1
--- /dev/null
+++ b/src/components/TextField.tsx
@@ -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 (
+
+ );
+};
+export default TextField;
diff --git a/src/declare.d.ts b/src/declare.d.ts
index 072045a3..825ff4c3 100644
--- a/src/declare.d.ts
+++ b/src/declare.d.ts
@@ -3,3 +3,4 @@ declare module 'electron-root-path';
declare module 'electron-devtools-installer';
declare module 'validator';
declare module 'uuid';
+declare module 'lodash';
diff --git a/src/pages/ConnectForm.tsx b/src/pages/ConnectForm.tsx
index d5dbc32c..d1562723 100644
--- a/src/pages/ConnectForm.tsx
+++ b/src/pages/ConnectForm.tsx
@@ -2,11 +2,10 @@ import {
makeStyles,
Button,
Grid,
- TextField,
Typography,
FormGroup,
FormControlLabel,
- Checkbox,
+ Switch,
ListItem,
List,
} from '@material-ui/core';
@@ -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',
@@ -33,9 +34,6 @@ const useStyles = makeStyles(() => ({
green: {
color: 'green',
},
- button: {
- padding: 1,
- },
buttonWrapper: {
marginTop: 20,
},
@@ -189,7 +187,9 @@ const ConnectForm: FC = () => {
- Pomerium TCP Connector
+
+ Pomerium TCP Connector
+
= () => {
= () => {
@@ -284,10 +283,9 @@ const ConnectForm: FC = () => {