From ac09f480d4c8e10eda2963c900f99016cd58c4d6 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Sat, 27 Mar 2021 09:28:50 +0100
Subject: [PATCH 1/2] Add styled components files and remove .css files
---
.vscode/extensions.json | 3 +-
client/package-lock.json | 92 +++++++++++++++++++
client/package.json | 2 +
client/src/App.css | 3 -
client/src/App.tsx | 6 +-
client/src/pages/admin/AdminPage.css | 9 --
client/src/pages/admin/AdminPage.tsx | 5 +-
.../admin/components/CompetitionManager.css | 13 ---
.../admin/components/CompetitionManager.tsx | 14 +--
client/src/pages/admin/components/styled.tsx | 18 ++++
client/src/pages/login/LoginPage.css | 11 ---
client/src/pages/login/LoginPage.tsx | 6 +-
.../src/pages/login/components/AdminLogin.tsx | 5 +-
.../login/components/CompetitionLogin.tsx | 5 +-
client/src/pages/login/components/styled.tsx | 7 ++
client/src/pages/login/styled.tsx | 9 ++
.../PresentationEditorPage.css | 23 -----
.../PresentationEditorPage.tsx | 30 +++---
.../components/SettingsPanel.tsx | 9 +-
.../presentationEditor/components/styled.tsx | 7 ++
.../src/pages/presentationEditor/styled.tsx | 21 +++++
client/src/pages/views/ViewSelectPage.css | 20 ----
client/src/pages/views/ViewSelectPage.tsx | 16 ++--
client/src/pages/views/styled.tsx | 18 ++++
client/src/styled.tsx | 5 +
25 files changed, 229 insertions(+), 128 deletions(-)
delete mode 100644 client/src/App.css
delete mode 100644 client/src/pages/admin/AdminPage.css
delete mode 100644 client/src/pages/admin/components/CompetitionManager.css
create mode 100644 client/src/pages/admin/components/styled.tsx
delete mode 100644 client/src/pages/login/LoginPage.css
create mode 100644 client/src/pages/login/components/styled.tsx
create mode 100644 client/src/pages/login/styled.tsx
delete mode 100644 client/src/pages/presentationEditor/PresentationEditorPage.css
create mode 100644 client/src/pages/presentationEditor/components/styled.tsx
create mode 100644 client/src/pages/presentationEditor/styled.tsx
delete mode 100644 client/src/pages/views/ViewSelectPage.css
create mode 100644 client/src/pages/views/styled.tsx
create mode 100644 client/src/styled.tsx
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 9421e18e..6f470f03 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 283deca6..babf4067 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 62063ad6..e5fbde97 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 5f11ff0c..00000000
--- 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 c80013fd..d0149834 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,8 +1,8 @@
import { createMuiTheme, ThemeProvider } from '@material-ui/core'
import { teal } from '@material-ui/core/colors'
import React from 'react'
-import './App.css'
import Main from './Main'
+import { Wrapper } from './styled'
const theme = createMuiTheme({
palette: {
@@ -17,12 +17,12 @@ const theme = createMuiTheme({
const App: React.FC = () => {
return (
- <div className="wrapper">
+ <Wrapper>
<ThemeProvider theme={theme}>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<Main />
</ThemeProvider>
- </div>
+ </Wrapper>
)
}
diff --git a/client/src/pages/admin/AdminPage.css b/client/src/pages/admin/AdminPage.css
deleted file mode 100644
index 471dc7d3..00000000
--- 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 196595c9..7f4d4ce0 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 716dde28..00000000
--- 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 8a4b9afb..b37bb2a2 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 00000000..7a7f75ed
--- /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 abefd48f..00000000
--- 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 582154a2..a821a26f 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 f2624004..f794862a 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 7ac9e6db..e70508d4 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 00000000..66be5e0a
--- /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 00000000..f00e942d
--- /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 2d3d142b..00000000
--- 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 97da7889..65140251 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 00fc1962..1eb1b40e 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 00000000..6534cd6e
--- /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 00000000..1b580d03
--- /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;
+`
\ No newline at end of file
diff --git a/client/src/pages/views/ViewSelectPage.css b/client/src/pages/views/ViewSelectPage.css
deleted file mode 100644
index 920c6a34..00000000
--- 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 b7b753fa..2781f60c 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 00000000..0dfbf495
--- /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 00000000..d26b4dbb
--- /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
--
GitLab
From b02c79b73b5519aa31a65dc51053730e99947eb6 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Mon, 29 Mar 2021 10:44:00 +0200
Subject: [PATCH 2/2] fix theming and colors according to specifications
---
client/src/App.tsx | 24 +++++++++++--------
.../src/pages/presentationEditor/styled.tsx | 4 ++--
2 files changed, 16 insertions(+), 12 deletions(-)
diff --git a/client/src/App.tsx b/client/src/App.tsx
index d0149834..d3e92beb 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 { 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 (
- <Wrapper>
- <ThemeProvider theme={theme}>
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
- <Main />
- </ThemeProvider>
- </Wrapper>
+ <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/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx
index 1b580d03..6ba71760 100644
--- a/client/src/pages/presentationEditor/styled.tsx
+++ b/client/src/pages/presentationEditor/styled.tsx
@@ -2,7 +2,7 @@ import { Button, ListItem, Toolbar } from '@material-ui/core'
import styled from 'styled-components'
export const ToolBarContainer = styled(Toolbar)`
- display:flex;
+ display: flex;
justify-content: space-between;
`
@@ -18,4 +18,4 @@ export const ViewButtonGroup = styled.div`
export const SlideListItem = styled(ListItem)`
text-align: center;
height: 60px;
-`
\ No newline at end of file
+`
--
GitLab