Resolve "Improve styling"

.vscode/extensions.json

@@ -6,6 +6,7 @@
         "dbaeumer.vscode-eslint",
         "ms-vsliveshare.vsliveshare",
         "cssho.vscode-svgviewer",
-        "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "jpoissonnier.vscode-styled-components"
     ]
 }
\ No newline at end of file

client/package-lock.json

@@ -1130,6 +1130,29 @@
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz",
@@ -2513,6 +2536,17 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz",
       "integrity": "sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw=="
     },
+    "@types/styled-components": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.9.tgz",
+      "integrity": "sha512-kbEG6YlwK8rucITpKEr6pA4Ho9KSQHUUOzZ9lY3va1mtcjvS3D0wDciFyHEiNHKLL/npZCKDQJqm0x44sPO9oA==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@types/tapable": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
@@ -3617,6 +3651,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
       "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+      "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -4290,6 +4340,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5020,6 +5075,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5103,6 +5163,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -14726,6 +14796,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -15422,6 +15497,23 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "styled-components": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
+      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",

client/package.json

@@ -24,6 +24,7 @@
     "react-scripts": "4.0.2",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "styled-components": "^5.2.1",
     "typescript": "^4.1.3",
     "web-vitals": "^1.1.0",
     "yup": "^0.32.9"
@@ -32,6 +33,7 @@
     "@types/enzyme": "^3.10.8",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
+    "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "4.2.0",
     "@typescript-eslint/parser": "4.2.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",

client/src/App.css

-.wrapper {
-  padding: 20px;
-}

client/src/App.tsx

-import { createMuiTheme, ThemeProvider } from '@material-ui/core'
-import { teal } from '@material-ui/core/colors'
+import { createMuiTheme, MuiThemeProvider, StylesProvider } from '@material-ui/core'
 import React from 'react'
-import './App.css'
+import { ThemeProvider } from 'styled-components'
 import Main from './Main'
+import { Wrapper } from './styled'
 
 const theme = createMuiTheme({
   palette: {
     primary: {
-      main: '#6200EE',
+      main: '#11064D',
     },
     secondary: {
-      main: teal.A400,
+      main: '#A6141D',
     },
   },
 })
 
 const App: React.FC = () => {
   return (
-    <div className="wrapper">
-      <ThemeProvider theme={theme}>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-        <Main />
-      </ThemeProvider>
-    </div>
+    <StylesProvider injectFirst>
+      <Wrapper>
+        <MuiThemeProvider theme={theme}>
+          <ThemeProvider theme={theme}>
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+            <Main />
+          </ThemeProvider>
+        </MuiThemeProvider>
+      </Wrapper>
+    </StylesProvider>
   )
 }
 

client/src/pages/admin/AdminPage.css

-.background {
-  height: 100%;
-}
-
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-}

client/src/pages/admin/AdminPage.tsx

@@ -9,14 +9,13 @@ import {
   ListItemIcon,
   ListItemText,
   Toolbar,
-  Typography,
+  Typography
 } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import DashboardIcon from '@material-ui/icons/Dashboard'
 import MailIcon from '@material-ui/icons/Mail'
 import React from 'react'
 import { Link, Route, Switch, useRouteMatch } from 'react-router-dom'
-import './AdminPage.css'
 import CompetitionManager from './components/CompetitionManager'
 import Regions from './components/Regions'
 
@@ -72,7 +71,7 @@ const AdminView: React.FC = () => {
         }}
         anchor="left"
       >
-        <div className="background">
+        <div>
           <div className={classes.toolbar} />
           <Divider />
           <List>

client/src/pages/admin/components/CompetitionManager.css

-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items:flex-end;
-}
-
-.new-competition-button {
-  margin-bottom: 8px !important;
-}
-
-.remove-competition {
-  color:red !important;
-}
\ No newline at end of file

client/src/pages/admin/components/CompetitionManager.tsx

@@ -15,7 +15,7 @@ import TableRow from '@material-ui/core/TableRow'
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
 import React from 'react'
 import { Link } from 'react-router-dom'
-import './CompetitionManager.css'
+import { NewCompetitionButton, RemoveCompetition, TopBar } from './styled'
 
 const BootstrapInput = withStyles((theme: Theme) =>
   createStyles({
@@ -103,7 +103,7 @@ const CompetitionManager: React.FC = () => {
 
   return (
     <div>
-      <div className="top-bar">
+      <TopBar>
         <div>
           <FormControl className={classes.margin}>
             <InputLabel shrink id="demo-customized-textbox">
@@ -151,10 +151,10 @@ const CompetitionManager: React.FC = () => {
             </Select>
           </FormControl>
         </div>
-        <Button color="secondary" variant="contained" className="new-competition-button">
+        <NewCompetitionButton color="secondary" variant="contained">
           Ny Tävling
-        </Button>
-      </div>
+        </NewCompetitionButton>
+      </TopBar>
       <TableContainer component={Paper}>
         <Table className={classes.table} aria-label="simple table">
           <TableHead>
@@ -195,9 +195,9 @@ const CompetitionManager: React.FC = () => {
       <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
         <MenuItem onClick={handleClose}>Starta</MenuItem>
         <MenuItem onClick={handleClose}>Duplicera</MenuItem>
-        <MenuItem className="remove-competition" onClick={handleClose}>
+        <RemoveCompetition onClick={handleClose}>
           Ta bort
-        </MenuItem>
+        </RemoveCompetition>
       </Menu>
     </div>
   )

client/src/pages/admin/components/styled.tsx

+import { Button, MenuItem } from '@material-ui/core'
+import styled from 'styled-components'
+
+export const TopBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+`
+
+export const NewCompetitionButton = styled(Button)`
+  margin-bottom: 8px;
+`
+
+export const RemoveCompetition = styled(MenuItem)`
+  color:red;
+`
+
+

client/src/pages/login/LoginPage.tsx

@@ -3,7 +3,7 @@ import { makeStyles, Theme } from '@material-ui/core/styles'
 import React from 'react'
 import AdminLogin from './components/AdminLogin'
 import CompetitionLogin from './components/CompetitionLogin'
-import './LoginPage.css'
+import { LoginPageContainer } from './styled'
 
 interface TabPanelProps {
   activeTab: number
@@ -27,7 +27,7 @@ const LoginPage: React.FC = () => {
   const classes = useStyles()
   const [loginTab, setLoginTab] = React.useState(0)
   return (
-    <div className="login-page">
+    <LoginPageContainer>
       <div className={classes.root}>
         <AppBar position="static">
           <Tabs value={loginTab} onChange={(event, selectedTab) => setLoginTab(selectedTab)}>
@@ -37,7 +37,7 @@ const LoginPage: React.FC = () => {
         </AppBar>
         <LoginContent activeTab={loginTab} />
       </div>
-    </div>
+    </LoginPageContainer>
   )
 }
 

client/src/pages/login/components/AdminLogin.tsx

@@ -5,6 +5,7 @@ import { Formik, FormikHelpers } from 'formik'
 import React from 'react'
 import * as Yup from 'yup'
 import { AccountLoginModel } from '../../../interfaces/models'
+import { LoginForm } from './styled'
 
 interface AccountLoginFormModel {
   model: AccountLoginModel
@@ -48,7 +49,7 @@ const AdminLogin: React.FC = () => {
   return (
     <Formik initialValues={accountInitialValues} validationSchema={accountSchema} onSubmit={handleAccountSubmit}>
       {(formik) => (
-        <form onSubmit={formik.handleSubmit} className="login-form">
+        <LoginForm onSubmit={formik.handleSubmit}>
           <TextField
             label="Email Adress"
             name="model.email"
@@ -85,7 +86,7 @@ const AdminLogin: React.FC = () => {
           ) : (
             <div />
           )}
-        </form>
+        </LoginForm>
       )}
     </Formik>
   )

client/src/pages/login/components/CompetitionLogin.tsx

@@ -5,6 +5,7 @@ import { Formik, FormikHelpers } from 'formik'
 import React from 'react'
 import * as Yup from 'yup'
 import { CompetitionLoginModel } from '../../../interfaces/models'
+import { LoginForm } from './styled'
 
 interface CompetitionLoginFormModel {
   model: CompetitionLoginModel
@@ -55,7 +56,7 @@ const CompetitionLogin: React.FC = () => {
       onSubmit={handleCompetitionSubmit}
     >
       {(formik) => (
-        <form onSubmit={formik.handleSubmit} className="login-form">
+        <LoginForm onSubmit={formik.handleSubmit}>
           <TextField
             label="Tävlingskod"
             name="model.code"
@@ -76,7 +77,7 @@ const CompetitionLogin: React.FC = () => {
           ) : (
             <div />
           )}
-        </form>
+        </LoginForm>
       )}
     </Formik>
   )

client/src/pages/login/components/styled.tsx

+import styled from 'styled-components'
+
+export const LoginForm = styled.form`
+  display: flex;
+  flex-direction: column;
+`
+

client/src/pages/login/LoginPage.css → client/src/pages/login/styled.tsx

-.login-page {
+import styled from 'styled-components'
+
+export const LoginPageContainer = styled.div`
   display: flex;
   height: 100%;
   justify-content: center;
   align-items: center;
-}
+`
 
-.login-form {
-  display: flex;
-  flex-direction: column;
-}

client/src/pages/presentationEditor/PresentationEditorPage.css

-.toolbar-container {
-  display:flex;
-  justify-content: space-between;
-}
-
-.view-button {
-  margin-right: 8px;
-}
-
-.view-button-group {
-  display: flex;
-  flex-direction: row;
-}
-
-.slide-list-item {
-  text-align: center !important;
-  height: 60px;
-}
-
-.right-drawer-tab {
-  height: 64px;
-  min-width: 130px !important;
-}
\ No newline at end of file

client/src/pages/presentationEditor/PresentationEditorPage.tsx

-import { Button, Divider, Typography } from '@material-ui/core'
+import { Divider, Typography } from '@material-ui/core'
 import AppBar from '@material-ui/core/AppBar'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import Drawer from '@material-ui/core/Drawer'
 import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
 import ListItemText from '@material-ui/core/ListItemText'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import Toolbar from '@material-ui/core/Toolbar'
 import React from 'react'
 import { useParams } from 'react-router-dom'
 import SettingsPanel from './components/SettingsPanel'
-import './PresentationEditorPage.css'
+import { SlideListItem, ToolBarContainer, ViewButton, ViewButtonGroup } from './styled'
 
 function createSlide(name: string) {
   return { name }
@@ -75,22 +73,22 @@ const PresentationEditorPage: React.FC = () => {
     <div className={classes.root}>
       <CssBaseline />
       <AppBar position="fixed" className={classes.appBar}>
-        <Toolbar className="toolbar-container">
+        <ToolBarContainer>
           <Typography variant="h6" noWrap>
             Tävling nr: {params.id}
           </Typography>
-          <div className="view-button-group">
-            <Button className="view-button" variant="contained" color="secondary">
+          <ViewButtonGroup>
+            <ViewButton variant="contained" color="secondary">
               Åskådarvy
-            </Button>
-            <Button className="view-button" variant="contained" color="secondary">
+            </ViewButton>
+            <ViewButton variant="contained" color="secondary">
               Deltagarvy
-            </Button>
-            <Button className="view-button" variant="contained" color="secondary">
+            </ViewButton>
+            <ViewButton variant="contained" color="secondary">
               Domarvy
-            </Button>
-          </div>
-        </Toolbar>
+            </ViewButton>
+          </ViewButtonGroup>
+        </ToolBarContainer>
       </AppBar>
       <Drawer
         className={classes.leftDrawer}
@@ -104,9 +102,9 @@ const PresentationEditorPage: React.FC = () => {
         <Divider />
         <List>
           {slides.map((slide) => (
-            <ListItem className="slide-list-item" divider button key={slide.name}>
+            <SlideListItem divider button key={slide.name}>
               <ListItemText primary={slide.name} />
-            </ListItem>
+            </SlideListItem>
           ))}
         </List>
       </Drawer>

client/src/pages/presentationEditor/components/SettingsPanel.tsx

-import { Tab, Tabs } from '@material-ui/core'
+import { Tabs } from '@material-ui/core'
 import AppBar from '@material-ui/core/AppBar'
 import React from 'react'
 import CompetitionSettings from './CompetitionSettings'
+import { SettingsTab } from './styled'
 
 interface TabPanelProps {
   activeTab: number
@@ -23,9 +24,9 @@ const SettingsPanel: React.FC = () => {
     <div>
       <AppBar position="static">
         <Tabs value={activeTab} onChange={(event, val) => setActiveTab(val)} aria-label="simple tabs example">
-          <Tab className="right-drawer-tab" label="Tävling" />
-          <Tab className="right-drawer-tab" label="Sida" />
-          <Tab className="right-drawer-tab" label="Stil" />
+          <SettingsTab label="Tävling" />
+          <SettingsTab label="Sida" />
+          <SettingsTab label="Stil" />
         </Tabs>
       </AppBar>
       <TabContent activeTab={activeTab} />

client/src/pages/presentationEditor/components/styled.tsx

+import { Tab } from '@material-ui/core'
+import styled from 'styled-components'
+
+export const SettingsTab = styled(Tab)`
+  height: 64px;
+  min-width: 130px;
+`
\ No newline at end of file

client/src/pages/presentationEditor/styled.tsx

+import { Button, ListItem, Toolbar } from '@material-ui/core'
+import styled from 'styled-components'
+
+export const ToolBarContainer = styled(Toolbar)`
+  display: flex;
+  justify-content: space-between;
+`
+
+export const ViewButton = styled(Button)`
+  margin-right: 8px;
+`
+
+export const ViewButtonGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+
+export const SlideListItem = styled(ListItem)`
+  text-align: center;
+  height: 60px;
+`