diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 9421e18e7ae549bdc1f6a80582081e6b1e238bec..6f470f0326be6b34f1198195eeab4f74523223a5 100644
--- a/.vscode/extensions.json
+++ b/.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
diff --git a/client/package-lock.json b/client/package-lock.json
index 283deca695ee7ef78fd7f34dbd3991f385caab82..babf4067dae1b9bd485c7a0a01acf045b78fb52f 100644
--- a/client/package-lock.json
+++ b/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",
diff --git a/client/package.json b/client/package.json
index 62063ad624b7d1947b3834b11f70dbbc6f452fcf..e5fbde97d3784a1d77fa68eeffce32cbdfea1876 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/App.css b/client/src/App.css
deleted file mode 100644
index 5f11ff0cfecc03f317eba31cad53c0b21c80a6f3..0000000000000000000000000000000000000000
--- a/client/src/App.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.wrapper {
- padding: 20px;
-}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index c80013fd85ff12b484ae7abd705fab9b1befe608..d3e92bebd8a5449e74ec359e777e793c5c3288cf 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,28 +1,32 @@
-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>
)
}
diff --git a/client/src/pages/admin/AdminPage.css b/client/src/pages/admin/AdminPage.css
deleted file mode 100644
index 471dc7d3d7a3b865f32c4e0d99b9bba73df2c5cb..0000000000000000000000000000000000000000
--- a/client/src/pages/admin/AdminPage.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.background {
- height: 100%;
-}
-
-.top-bar {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
-}
diff --git a/client/src/pages/admin/AdminPage.tsx b/client/src/pages/admin/AdminPage.tsx
index 196595c9d59f13ddebe99dc8d60cb493b0965388..7f4d4ce002fc49e4b1dffc513d2ab8508f251d5b 100644
--- a/client/src/pages/admin/AdminPage.tsx
+++ b/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>
diff --git a/client/src/pages/admin/components/CompetitionManager.css b/client/src/pages/admin/components/CompetitionManager.css
deleted file mode 100644
index 716dde28317c6d6da62f3ddcb72021cec5d31ed8..0000000000000000000000000000000000000000
--- a/client/src/pages/admin/components/CompetitionManager.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.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
diff --git a/client/src/pages/admin/components/CompetitionManager.tsx b/client/src/pages/admin/components/CompetitionManager.tsx
index 8a4b9afb0129edb92d9136244bd74ccf467cd7ae..b37bb2a2f536384501248f7944d3dc40d45e1ee6 100644
--- a/client/src/pages/admin/components/CompetitionManager.tsx
+++ b/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>
)
diff --git a/client/src/pages/admin/components/styled.tsx b/client/src/pages/admin/components/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a7f75ed368ade88f1f103a1feb87407b5f7d8c0
--- /dev/null
+++ b/client/src/pages/admin/components/styled.tsx
@@ -0,0 +1,18 @@
+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;
+`
+
+
diff --git a/client/src/pages/login/LoginPage.css b/client/src/pages/login/LoginPage.css
deleted file mode 100644
index abefd48f971cdf9fdf2f072a552aaaf6a7b18713..0000000000000000000000000000000000000000
--- a/client/src/pages/login/LoginPage.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.login-page {
- display: flex;
- height: 100%;
- justify-content: center;
- align-items: center;
-}
-
-.login-form {
- display: flex;
- flex-direction: column;
-}
diff --git a/client/src/pages/login/LoginPage.tsx b/client/src/pages/login/LoginPage.tsx
index 582154a28586ee32909364575035c220e68ea872..a821a26fe0e6273b7911cf3168eff5731039fc2c 100644
--- a/client/src/pages/login/LoginPage.tsx
+++ b/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>
)
}
diff --git a/client/src/pages/login/components/AdminLogin.tsx b/client/src/pages/login/components/AdminLogin.tsx
index f26240043a48e5fb07bcc51a86163db9ea2edf03..f794862ab341b3adad1d689f9ffed38cdc906fbc 100644
--- a/client/src/pages/login/components/AdminLogin.tsx
+++ b/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>
)
diff --git a/client/src/pages/login/components/CompetitionLogin.tsx b/client/src/pages/login/components/CompetitionLogin.tsx
index 7ac9e6dbe684f87b3939b92d2446ec8a08a55cdd..e70508d45d68176c587f2e6f1ede81fc0fbb8af9 100644
--- a/client/src/pages/login/components/CompetitionLogin.tsx
+++ b/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>
)
diff --git a/client/src/pages/login/components/styled.tsx b/client/src/pages/login/components/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..66be5e0afa4879b9aa222bef9309d68b59d5cddd
--- /dev/null
+++ b/client/src/pages/login/components/styled.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const LoginForm = styled.form`
+ display: flex;
+ flex-direction: column;
+`
+
diff --git a/client/src/pages/login/styled.tsx b/client/src/pages/login/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f00e942d4911ef0e51e68c16a2431902cd7ccfb3
--- /dev/null
+++ b/client/src/pages/login/styled.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const LoginPageContainer = styled.div`
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+`
+
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.css b/client/src/pages/presentationEditor/PresentationEditorPage.css
deleted file mode 100644
index 2d3d142b16b81330816316bb5993360e286abbf2..0000000000000000000000000000000000000000
--- a/client/src/pages/presentationEditor/PresentationEditorPage.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.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
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 97da7889ee1d912a8ca58f57180f3047057ffec3..651402514ca49e0d2f3eb5bcbb9bffd610dea243 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -1,16 +1,14 @@
-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>
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
index 00fc1962e2c31dd57cdd3eb52dd7375142b70517..1eb1b40e69d6f84b942bb4fa65a8cbc5daf7163c 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
@@ -1,7 +1,8 @@
-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} />
diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6534cd6e6fe4d545bb9bfb15a13f9b74ca9e31bf
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/styled.tsx
@@ -0,0 +1,7 @@
+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
diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ba71760ad6d7d1608420082934e03087f903d47
--- /dev/null
+++ b/client/src/pages/presentationEditor/styled.tsx
@@ -0,0 +1,21 @@
+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;
+`
diff --git a/client/src/pages/views/ViewSelectPage.css b/client/src/pages/views/ViewSelectPage.css
deleted file mode 100644
index 920c6a342fa49a6a2ce9d205effa14e6e0d74a7c..0000000000000000000000000000000000000000
--- a/client/src/pages/views/ViewSelectPage.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.root {
- display: flex;
- justify-content: center;
- margin-top: 12%;
- height: 100%;
-}
-
-.button-group {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: max-content;
- height: 140px;
- margin-left: auto;
- margin-right: auto;
-}
-
-.view-button {
- width: 100%;
-}
diff --git a/client/src/pages/views/ViewSelectPage.tsx b/client/src/pages/views/ViewSelectPage.tsx
index b7b753faa6217e37ff3f2463757fd11d7a342f64..2781f60c9959ebe0a1298a2f3b04cf0e690c9e9e 100644
--- a/client/src/pages/views/ViewSelectPage.tsx
+++ b/client/src/pages/views/ViewSelectPage.tsx
@@ -1,24 +1,24 @@
import Button from '@material-ui/core/Button'
import React from 'react'
import { Link, useRouteMatch } from 'react-router-dom'
-import './ViewSelectPage.css'
+import { ViewSelectButtonGroup, ViewSelectContainer } from './styled'
const ViewSelectPage: React.FC = () => {
const url = useRouteMatch().url
return (
- <div className="root">
- <div className="button-group">
- <Button className="view-button" color="primary" variant="contained" component={Link} to={`${url}/participant`}>
+ <ViewSelectContainer>
+ <ViewSelectButtonGroup>
+ <Button color="primary" variant="contained" component={Link} to={`${url}/participant`}>
Deltagarvy
</Button>
- <Button className="view-button" color="primary" variant="contained" component={Link} to={`${url}/audience`}>
+ <Button color="primary" variant="contained" component={Link} to={`${url}/audience`}>
Åskådarvy
</Button>
- <Button className="view-button" color="primary" variant="contained" component={Link} to={`${url}/judge`}>
+ <Button color="primary" variant="contained" component={Link} to={`${url}/judge`}>
Domarvy
</Button>
- </div>
- </div>
+ </ViewSelectButtonGroup>
+ </ViewSelectContainer>
)
}
diff --git a/client/src/pages/views/styled.tsx b/client/src/pages/views/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0dfbf495003c6e71fece6dae17bba586c75f1e34
--- /dev/null
+++ b/client/src/pages/views/styled.tsx
@@ -0,0 +1,18 @@
+import styled from 'styled-components'
+
+export const ViewSelectContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ margin-top: 12%;
+ height: 100%;
+`
+
+export const ViewSelectButtonGroup = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: max-content;
+ height: 140px;
+ margin-left: auto;
+ margin-right: auto;
+`
\ No newline at end of file
diff --git a/client/src/styled.tsx b/client/src/styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d26b4dbbf90a14be7f256b462cb33d8e9a018619
--- /dev/null
+++ b/client/src/styled.tsx
@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+ padding: 20px;
+`
\ No newline at end of file