From b33439e75d4b22a0c68b5cb56851b518a5ea7db7 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 17 Apr 2021 10:30:24 +0200 Subject: started moving to css files --- components/footer.tsx | 4 +- components/logo.tsx | 25 ++---- components/navbar.tsx | 42 +++------ components/ui.tsx | 20 +---- package.json | 3 +- pages/_app.tsx | 3 + pages/index.tsx | 11 +-- styles/global.css | 92 +++++++++++++++---- styles/index.module.css | 7 ++ styles/navbar.css | 11 +++ styles/ui.css | 9 ++ styles/utility.css | 27 ++++++ tsconfig.json | 7 +- yarn.lock | 233 ++++++++++++++++++++++++++++++++++++++++++++++-- 14 files changed, 390 insertions(+), 104 deletions(-) create mode 100644 styles/index.module.css create mode 100644 styles/navbar.css create mode 100644 styles/ui.css create mode 100644 styles/utility.css diff --git a/components/footer.tsx b/components/footer.tsx index 36ebef3..f39946c 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { LogoDark } from '../components/logo'; +import Logo from '../components/logo'; import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined'; import ExtensionIcon from '@material-ui/icons/Extension'; @@ -25,7 +25,7 @@ function PageLink(props: { export function Footer() { return
- +

4 op een rij

diff --git a/components/logo.tsx b/components/logo.tsx index e43aa88..9faf43f 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -1,27 +1,14 @@ -export function LogoDark() { +export default function Logo() { return (
- - - - - + + + + +
); } -export function LogoLight() { - return ( -
- - - - - - - -
- ); -} diff --git a/components/navbar.tsx b/components/navbar.tsx index 70de574..932669d 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,8 +1,8 @@ import axios from 'axios'; -import { CSSProperties, useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { userInfo } from '../api/api'; -import { LogoDark } from '../components/logo'; +import Logo from '../components/logo'; import { AccountAvatar } from './account'; import { NotificationsArea } from './notificationsArea'; import { SocketContext } from './socketContext'; @@ -15,12 +15,6 @@ import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; -var NavBarItemStyle: CSSProperties = { - margin: 12, - marginBottom: 16, - display: 'block', -}; - export function NavBar() { var [loggedIn, setLoggedIn] = useState(false); var [gotData, setGotData] = useState(false); @@ -61,14 +55,13 @@ export function NavBar() { }, []); return
-
- +
+
- + - + - {false && + {false && } - + -
+
{loggedIn && diff --git a/components/ui.tsx b/components/ui.tsx index c3f950b..99479a8 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -9,7 +9,6 @@ export function Vierkant(props: { href?: string; width?: string; height?: string; - style?: CSSProperties; children?: ReactNode; className?: string; id?: string; @@ -17,25 +16,8 @@ export function Vierkant(props: { onclick?: () => void; }) { return diff --git a/package.json b/package.json index df620cc..75fa8b1 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "devDependencies": { "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", - "@types/react-router-dom": "^5.1.7" + "@types/react-router-dom": "^5.1.7", + "typescript-plugin-css-modules": "^3.2.0" } } diff --git a/pages/_app.tsx b/pages/_app.tsx index 0682a4d..bf9a280 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,6 +7,9 @@ import '../styles/dark.css'; import '../styles/disk.css'; import '../styles/footer.css'; import '../styles/global.css'; +import '../styles/utility.css'; +import '../styles/ui.css'; +import '../styles/navbar.css'; export default function VierOpEenRijWebsite({ Component, pageProps }) { return
diff --git a/pages/index.tsx b/pages/index.tsx index 354efc5..c1b912d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -16,6 +16,8 @@ import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; import { mdiRobotExcited } from '@mdi/js'; import Icon from '@mdi/react'; +import styles from '../styles/index.module.css'; + var GameModeIconStyle: CSSProperties = { fontSize: 64, width: 64, @@ -43,13 +45,6 @@ var SquareSize: CSSProperties = { height: 90, }; -var LoginOrRegisterBoxStyle: CSSProperties = { - verticalAlign: 'top', - height: `calc(${SquareSize.height}px + 24px * 2)`, - width: '100%', - maxWidth: `calc(100% - ${SquareSize.width}px - 12px * 2 - 24px * 2)`, -}; - var InnerLoginOrRegisterBoxStyle: CSSProperties = { position: 'relative', width: '100%', @@ -198,7 +193,7 @@ export default function HomePage() { Tegen computer
} - + {loggedIn ? : } diff --git a/styles/global.css b/styles/global.css index 1e87524..350a2a7 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,17 +1,73 @@ -html { - --text: #FCFFFD; - --page-background: var(--text); - - --background: #5D737E; - --text-alt: var(--background); - --background-alt: #81949E; - - --disk-a: #E16D82; - --disk-a-text: #FDC0C4; - --disk-b: #71D9CC; - --disk-b-text: #C0FDEB; +:root { + --background: #E3E6EE; + --foreground: var(--gray-100); + + --accent: #7E3AA6; + + --error: #A63A4D; + --disk-b-alt: #582D35; + + --confirm: #3AA699; + --disk-a-alt: #244743; + + /* shade */ + --gray-100: #141619; + --gray-200: #1F242D; + --gray-300: #293140; + --gray-700: #757D92; + --gray-800: #A9AFC0; + --gray-900: #CED2DC; + + /* box-shadow */ + --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3); + --drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15); + + /* border-radius */ + --tight-corner: 6px; + --loose-corner: 8px; + + /* margin/padding */ + --spacing-small: 6px; + --spacing-medium: 12px; + --spacing-large: 24px; } +@media (prefers-color-scheme: dark) { + :root { + --background: var(--gray-900); + --foreground: #FFFFF3; + + --accent: #AD34F3; + + --error: #FF4365; + --disk-b-alt: #F49BA1; + + --confirm: #00D9C0; + --disk-a-alt: #86F3F3; + + --gray-100: #CED2DC; + --gray-200: #A9AFC0; + --gray-300: #757D92; + --gray-700: #293140; + --gray-800: #1F242D; + --gray-900: #141619; + } +} + +/* html { */ +/* --text: #FCFFFD; */ +/* --page-background: var(--text); */ + +/* --background: #5D737E; */ +/* --text-alt: var(--background); */ +/* --background-alt: #81949E; */ + +/* --disk-a: #E16D82; */ +/* --disk-a-text: #FDC0C4; */ +/* --disk-b: #71D9CC; */ +/* --disk-b-text: #C0FDEB; */ +/* } */ + /* default margin */ html, body { margin: 0; @@ -27,17 +83,17 @@ h3 { padding-bottom: 6px; } -/* global font zize */ -p, b, i, span, td, th { font-size: 15px; } - /* navbar fix */ body { padding-left: 48px; } /* font */ -html { font-family: "Inter"; } +html { font-family: "Inter", sans-serif; } -/* background color */ -html, body { background-color: var(--page-background); } +/* color */ +:root, html, body { + background-color: var(--background); + color: var(--foreground); +} /* link fix */ a { diff --git a/styles/index.module.css b/styles/index.module.css new file mode 100644 index 0000000..9b518ea --- /dev/null +++ b/styles/index.module.css @@ -0,0 +1,7 @@ +.loginOrRegisterBox { + --squareSize: 90px; + vertical-align: top; + height: calc(var(--squareSize) + 2 * var(--spacing-large)); + width: 100%; + max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2); +} diff --git a/styles/navbar.css b/styles/navbar.css new file mode 100644 index 0000000..5866b8f --- /dev/null +++ b/styles/navbar.css @@ -0,0 +1,11 @@ +.navbar .item { + margin: var(--spacing-medium); + margin-bottom: calc(var(--spacing-medium) + 4px); + display: block; +} + +.navbar .bottomArea { + position: absolute; + bottom: -4px; + left: 0; +} diff --git a/styles/ui.css b/styles/ui.css new file mode 100644 index 0000000..d665044 --- /dev/null +++ b/styles/ui.css @@ -0,0 +1,9 @@ +.vierkant { + margin: var(--spacing-small); + display: inline-block; + position: relative; + box-sizing: border-box; +} + +.fullwidth { width: calc(100% - var(--spacing-medium)); } + diff --git a/styles/utility.css b/styles/utility.css new file mode 100644 index 0000000..753b88d --- /dev/null +++ b/styles/utility.css @@ -0,0 +1,27 @@ +.drop-1 { box-shadow: var(--drop-level-1); } +.drop-2 { box-shadow: var(--drop-level-2); } + +.pad-s { padding: var(--spacing-small); } +.pad-m { padding: var(--spacing-medium); } +.pad-l { padding: var(--spacing-large); } + +.round-l { border-radius: var(--loose-corner); } +.round-t { border-radius: var(--tight-corner); } + +.bg-100 { background-color: var(--gray-100); } +.bg-200 { background-color: var(--gray-200); } +.bg-300 { background-color: var(--gray-300); } +.bg-700 { background-color: var(--gray-700); } +.bg-800 { background-color: var(--gray-800); } +.bg-900 { background-color: var(--gray-900); } + +.subtile { + color: var(--gray-300); + font-style: italic; +} + +/* no-select */ +.nosel { + user-select: none; + font-weight: 600; +} diff --git a/tsconfig.json b/tsconfig.json index 283a43f..6866dec 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,12 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "preserve" + "jsx": "preserve", + "plugins": [ + { + "name": "typescript-plugin-css-modules" + } + ] }, "include": [ "src" diff --git a/yarn.lock b/yarn.lock index 06a9373..05ae7bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3104,6 +3104,11 @@ bfj@^7.0.2: hoopy "^0.1.4" tryer "^1.0.1" +big.js@^3.1.3: + version "3.2.0" + resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e" + integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q== + big.js@^5.2.2: version "5.2.2" resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" @@ -3602,6 +3607,21 @@ chokidar@3.4.3, chokidar@^3.4.1: optionalDependencies: fsevents "~2.1.2" +"chokidar@>=3.0.0 <4.0.0": + version "3.5.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" + integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.3.1" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -3935,6 +3955,13 @@ cookie@^0.3.1: resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb" integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s= +copy-anything@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-2.0.3.tgz#842407ba02466b0df844819bbe3baebbe5d45d87" + integrity sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ== + dependencies: + is-what "^3.12.0" + copy-concurrently@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0" @@ -4145,6 +4172,13 @@ css-loader@4.3.0: schema-utils "^2.7.1" semver "^7.3.2" +css-parse@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" + integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q= + dependencies: + css "^2.0.0" + css-prefers-color-scheme@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4" @@ -4177,6 +4211,14 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" +css-selector-tokenizer@^0.7.0: + version "0.7.3" + resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1" + integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg== + dependencies: + cssesc "^3.0.0" + fastparse "^1.1.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -4428,6 +4470,13 @@ debug@^3.1.1, debug@^3.2.5: dependencies: ms "^2.1.1" +debug@~3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -4806,7 +4855,7 @@ dotenv-expand@5.1.0: resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0" integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA== -dotenv@8.2.0: +dotenv@8.2.0, dotenv@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a" integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw== @@ -4963,6 +5012,13 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w== +errno@^0.1.1: + version "0.1.8" + resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f" + integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A== + dependencies: + prr "~1.0.1" + errno@^0.1.3, errno@~0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618" @@ -5546,6 +5602,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= +fastparse@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" + integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== + fastq@^1.6.0: version "1.9.0" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.9.0.tgz#e16a72f338eaca48e91b5c23593bcc2ef66b7947" @@ -5846,6 +5907,11 @@ fsevents@~2.1.2: resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e" integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ== +fsevents@~2.3.1: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -5870,6 +5936,13 @@ gauge@~2.7.3: strip-ansi "^3.0.1" wide-align "^1.1.0" +generic-names@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.3.tgz#2d786a121aee508876796939e8e3bff836c20917" + integrity sha1-LXhqEhruUIh2eWk56OO/+DbCCRc= + dependencies: + loader-utils "^0.2.16" + gensync@^1.0.0-beta.1: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" @@ -6379,6 +6452,13 @@ iconv-lite@0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" +icss-utils@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-3.0.1.tgz#ee70d3ae8cac38c6be5ed91e851b27eed343ad0f" + integrity sha1-7nDTroysOMa+XtkehRsn7tNDrQ8= + dependencies: + postcss "^6.0.2" + icss-utils@^4.0.0, icss-utils@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467" @@ -6420,6 +6500,11 @@ image-blob-reduce@^2.2.2: dependencies: pica "^6.1.1" +image-size@~0.5.0: + version "0.5.5" + resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c" + integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w= + immer@7.0.9: version "7.0.9" resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e" @@ -6904,6 +6989,11 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= +is-what@^3.12.0: + version "3.14.1" + resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1" + integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA== + is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -7524,6 +7614,11 @@ json3@^3.3.2: resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81" integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA== +json5@^0.5.0: + version "0.5.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821" + integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE= + json5@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" @@ -7702,6 +7797,22 @@ last-call-webpack-plugin@^3.0.0: lodash "^4.17.5" webpack-sources "^1.1.0" +less@^3.11.1: + version "3.13.1" + resolved "https://registry.yarnpkg.com/less/-/less-3.13.1.tgz#0ebc91d2a0e9c0c6735b83d496b0ab0583077909" + integrity sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw== + dependencies: + copy-anything "^2.0.1" + tslib "^1.10.0" + optionalDependencies: + errno "^0.1.1" + graceful-fs "^4.1.2" + image-size "~0.5.0" + make-dir "^2.1.0" + mime "^1.4.1" + native-request "^1.0.5" + source-map "~0.6.0" + leven@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" @@ -7769,6 +7880,16 @@ loader-utils@2.0.0, loader-utils@^2.0.0: emojis-list "^3.0.0" json5 "^2.1.2" +loader-utils@^0.2.16: + version "0.2.17" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" + integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g= + dependencies: + big.js "^3.1.3" + emojis-list "^2.0.0" + json5 "^0.5.0" + object-assign "^4.0.1" + loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" @@ -7806,6 +7927,11 @@ lodash._reinterpolate@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= +lodash.camelcase@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" + integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY= + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" @@ -7841,6 +7967,11 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== +lodash@^4.17.4: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loglevel@^1.6.8: version "1.7.0" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0" @@ -7886,7 +8017,7 @@ magic-string@^0.25.0, magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.4" -make-dir@^2.0.0: +make-dir@^2.0.0, make-dir@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA== @@ -8045,7 +8176,7 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.17, mime-types@~2.1.19, dependencies: mime-db "1.44.0" -mime@1.6.0: +mime@1.6.0, mime@^1.4.1: version "1.6.0" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== @@ -8187,7 +8318,7 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1: dependencies: minimist "^1.2.5" -mkdirp@^1.0.3, mkdirp@^1.0.4: +mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== @@ -8277,6 +8408,11 @@ napi-build-utils@^1.0.1: resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806" integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg== +native-request@^1.0.5: + version "1.0.8" + resolved "https://registry.yarnpkg.com/native-request/-/native-request-1.0.8.tgz#8f66bf606e0f7ea27c0e5995eb2f5d03e33ae6fb" + integrity sha512-vU2JojJVelUGp6jRcLwToPoWGxSx23z/0iX+I77J3Ht17rf2INGjrhOoQnjVo60nQd8wVsgzKkPfRXBiVdD2ag== + native-url@0.3.4: version "0.3.4" resolved "https://registry.yarnpkg.com/native-url/-/native-url-0.3.4.tgz#29c943172aed86c63cee62c8c04db7f5756661f8" @@ -9305,6 +9441,13 @@ postcss-env-function@^2.0.2: postcss "^7.0.2" postcss-values-parser "^2.0.0" +postcss-filter-plugins@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-3.0.1.tgz#9d226e946d56542ab7c26123053459a331df545d" + integrity sha512-tRKbW4wWBEkSSFuJtamV2wkiV9rj6Yy7P3Y13+zaynlPEEZt8EgYKn3y/RBpMeIhNmHXFlSdzofml65hD5OafA== + dependencies: + postcss "^6.0.14" + postcss-flexbugs-fixes@4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690" @@ -9340,6 +9483,26 @@ postcss-gap-properties@^2.0.0: dependencies: postcss "^7.0.2" +postcss-icss-keyframes@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz#80c4455e0112b0f2f9c3c05ac7515062bb9ff295" + integrity sha1-gMRFXgESsPL5w8Bax1FQYruf8pU= + dependencies: + icss-utils "^3.0.1" + postcss "^6.0.2" + postcss-value-parser "^3.3.0" + +postcss-icss-selectors@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/postcss-icss-selectors/-/postcss-icss-selectors-2.0.3.tgz#27fa1afcaab6c602c866cbb298f3218e9bc1c9b3" + integrity sha1-J/oa/Kq2xgLIZsuymPMhjpvBybM= + dependencies: + css-selector-tokenizer "^0.7.0" + generic-names "^1.0.2" + icss-utils "^3.0.1" + lodash "^4.17.4" + postcss "^6.0.2" + postcss-image-set-function@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288" @@ -9365,7 +9528,7 @@ postcss-lab-function@^2.0.1: postcss "^7.0.2" postcss-values-parser "^2.0.0" -postcss-load-config@^2.0.0: +postcss-load-config@^2.0.0, postcss-load-config@^2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a" integrity sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw== @@ -9777,7 +9940,7 @@ postcss-unique-selectors@^4.0.1: postcss "^7.0.0" uniqs "^2.0.0" -postcss-value-parser@^3.0.0: +postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0: version "3.3.1" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== @@ -9824,6 +9987,15 @@ postcss@8.1.7: nanoid "^3.1.16" source-map "^0.6.1" +postcss@^6.0.14, postcss@^6.0.2: + version "6.0.23" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" + integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== + dependencies: + chalk "^2.4.1" + source-map "^0.6.1" + supports-color "^5.4.0" + postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6: version "7.0.35" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24" @@ -10559,6 +10731,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +reserved-words@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/reserved-words/-/reserved-words-0.1.2.tgz#00a0940f98cd501aeaaac316411d9adc52b31ab1" + integrity sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE= + resolve-cwd@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" @@ -10766,7 +10943,7 @@ safe-regex@^1.1.0: dependencies: ret "~0.1.10" -"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: +"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@^2.1.2, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -10813,6 +10990,13 @@ sass-loader@8.0.2: schema-utils "^2.6.1" semver "^6.3.0" +sass@^1.26.5: + version "1.32.10" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.10.tgz#d40da4e20031b450359ee1c7e69bc8cc89569241" + integrity sha512-Nx0pcWoonAkn7CRp0aE/hket1UP97GiR1IFw3kcjV3pnenhWgZEWUf0ZcfPOV2fK52fnOcK3JdC/YYZ9E47DTQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -11653,7 +11837,21 @@ stylis@3.5.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== -supports-color@^5.3.0: +stylus@^0.54.7: + version "0.54.8" + resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147" + integrity sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg== + dependencies: + css-parse "~2.0.0" + debug "~3.1.0" + glob "^7.1.6" + mkdirp "~1.0.4" + safer-buffer "^2.1.2" + sax "~1.2.4" + semver "^6.3.0" + source-map "^0.7.3" + +supports-color@^5.3.0, supports-color@^5.4.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== @@ -12120,6 +12318,25 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript-plugin-css-modules@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/typescript-plugin-css-modules/-/typescript-plugin-css-modules-3.2.0.tgz#44241064395d565f242689b96eb50bf413e68ddf" + integrity sha512-oMe5IDKuPvLBOeaYupAqqq8UMTu7Jo5e0InqkQSSKXuZCcRm0+LQfUVMyM62IFpgzxHLuN32a7YdBxAaSXZrRQ== + dependencies: + dotenv "^8.2.0" + icss-utils "^4.1.1" + less "^3.11.1" + lodash.camelcase "^4.3.0" + postcss "^7.0.27" + postcss-filter-plugins "^3.0.1" + postcss-icss-keyframes "^0.2.1" + postcss-icss-selectors "^2.0.3" + postcss-load-config "^2.1.0" + reserved-words "^0.1.2" + sass "^1.26.5" + stylus "^0.54.7" + tsconfig-paths "^3.9.0" + typescript@^4.1.3: version "4.1.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7" -- cgit v1.2.3 From dd77d6bb276f6a70b36f69d11cde7f5c8995f5e1 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 17 Apr 2021 17:24:59 +0200 Subject: home page without inline react styles :tada: --- components/recentGames.tsx | 20 +++---- components/ui.tsx | 21 +------ pages/_app.tsx | 2 + pages/index.tsx | 144 +++++++++------------------------------------ styles/global.css | 13 ++-- styles/index.css | 72 +++++++++++++++++++++++ styles/index.module.css | 7 --- styles/ui.css | 12 ++++ styles/utility.css | 27 ++++++++- 9 files changed, 161 insertions(+), 157 deletions(-) create mode 100644 styles/index.css delete mode 100644 styles/index.module.css diff --git a/components/recentGames.tsx b/components/recentGames.tsx index 988126f..65c819a 100644 --- a/components/recentGames.tsx +++ b/components/recentGames.tsx @@ -28,18 +28,14 @@ function GameOutcome(props: { game: gameInfo; }) { }, }[props.game.status](); })(); - var outcome = props.game.outcome; - return - {gameStatus} + return + + {gameStatus} + ; } diff --git a/components/ui.tsx b/components/ui.tsx index 99479a8..db858a4 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -30,6 +30,7 @@ export function Button(props: { children?: ReactNode; style?: CSSProperties; href?: string; + className?: string; onclick?: (() => void); id?: string; }) { @@ -37,26 +38,10 @@ export function Button(props: { onClick={props.onclick} href={props.href} id={props.id} - style={{ - padding: props.text ? 8 : 16, - textAlign: props.text ? 'center' : 'left', - borderRadius: 8, - backgroundColor: 'var(--disk-a)', - cursor: 'pointer', - position: 'relative', - textDecoration: 'none', - display: 'block', - userSelect: 'none', - ...props.style, - }} + className={"button pad-s round-t " + props.className} > {props.text - ? + ? {props.text} : undefined} diff --git a/pages/_app.tsx b/pages/_app.tsx index bf9a280..46aa8d0 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -11,6 +11,8 @@ import '../styles/utility.css'; import '../styles/ui.css'; import '../styles/navbar.css'; +import '../styles/index.css'; + export default function VierOpEenRijWebsite({ Component, pageProps }) { return
diff --git a/pages/index.tsx b/pages/index.tsx index c1b912d..c3fe955 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import axios from 'axios'; -import { CSSProperties, useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { userGames, userGameTotals, userInfo } from '../api/api'; import { Footer } from '../components/footer'; import { SocketContext } from '../components/socketContext'; @@ -16,72 +16,14 @@ import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; import { mdiRobotExcited } from '@mdi/js'; import Icon from '@mdi/react'; -import styles from '../styles/index.module.css'; - -var GameModeIconStyle: CSSProperties = { - fontSize: 64, - width: 64, - height: 64, - display: 'inline-block', - position: 'absolute', - top: 24, - left: '50%', - transform: 'translateX(-50%)', -}; - -var GameModeTextStyle: CSSProperties = { - whiteSpace: 'nowrap', - display: 'inline-block', - position: 'absolute', - bottom: 24, - left: '50%', - transform: 'translateX(-50%)', - userSelect: 'none', - fontWeight: 500, -}; - -var SquareSize: CSSProperties = { - width: 90, - height: 90, -}; - -var InnerLoginOrRegisterBoxStyle: CSSProperties = { - position: 'relative', - width: '100%', - height: '100%', -}; - function LoginOrRegisterBox() { - return
- - Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies + return
+ + Log in of maak een account aan om toegang tot meer functies te krijgen -
-
; } @@ -90,44 +32,19 @@ function AccountBox(props: { info: userInfo; sumGameInfo: userGameTotals; }) { - return
-
+ return
+
-
-

- {props.info?.username} -

-

Score: {props.info?.rating}

-

- {props.sumGameInfo?.win} W - / - {props.sumGameInfo?.lose} V - / - {props.sumGameInfo?.draw} G +

+

{props.info?.username}

+

Score: {props.info?.rating}

+

+ {props.sumGameInfo?.win} W + / + {props.sumGameInfo?.lose} V + / + {props.sumGameInfo?.draw} G

; @@ -175,25 +92,22 @@ export default function HomePage() { 4 op een rij -
- - - Nieuw spel -
+
+ + + Nieuw spel {false - && - - Puzzels -
+ && + + Puzzels } {false - && - - Tegen computer -
+ && + + Tegen computer } - + {loggedIn ? : } diff --git a/styles/global.css b/styles/global.css index 350a2a7..3c28cfc 100644 --- a/styles/global.css +++ b/styles/global.css @@ -1,5 +1,5 @@ :root { - --background: #E3E6EE; + --background: var(--gray-900); --foreground: var(--gray-100); --accent: #7E3AA6; @@ -14,9 +14,10 @@ --gray-100: #141619; --gray-200: #1F242D; --gray-300: #293140; - --gray-700: #757D92; - --gray-800: #A9AFC0; - --gray-900: #CED2DC; + --gray-600: #757D92; + --gray-700: #A9AFC0; + --gray-800: #CED2DC; + --gray-900: #E3E6EE; /* box-shadow */ --drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3); @@ -150,3 +151,7 @@ input.light::placeholder { color: var(--text-alt); } border-width: 2px; } +.outcome.win { color: var(--disk-a-alt); } +.outcome.lose { color: var(--disk-b-alt); } +.outcome.draw { color: var(--gray-600); } + diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..8ba12a6 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,72 @@ +.topbar * { + --squareSize: 90px; +} + +.loginOrRegisterBox { + vertical-align: top; + height: calc(var(--squareSize) + 2 * var(--spacing-large)); + width: 100%; + max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2); +} + +.loginOrRegisterBox .inner { + position: relative; + width: 100%; + height: 100%; +} + +.loginOrRegisterBox .inner .registerMessage { + user-select: none; + display: inline-block; + margin: 0 auto; + min-width: 240px; + max-width: 350px; + text-align: center; +} + +.loginOrRegisterBox .inner .button.register { + background-color: var(--gray-700); + color: var(--foreground); +} + +.gamemode .icon { + font-size: 64px; + font-size: 64px; + height: 64px; + display: inline-block; + position: absolute; + top: var(--spacing-large); + left: 50%; + transform: translateX(-50%); +} + +.gamemode .text { + white-space: nowrap; + display: inline-block; + position: absolute; + bottom: var(--spacing-large); + left: 50%; + transform: translateX(-50%); + user-select: none; + font-weight: 500; +} + +.topbar .gamemode { + --size: calc(var(--squareSize) + 2 * var(--spacing-large)); + width: var(--size); + height: var(--size); +} + +.topbar .profile .info { + left: calc(90px + 12px); + width: calc(100% - 90px - 12px); + height: 100%; +} + +.topbar .profile .info .username { max-width: 178px; } +.topbar .profile .info .score { margin-top: var(--spacing-small); } + +.topbar .profile .info .games .divider { + margin: 0 3px; +} + diff --git a/styles/index.module.css b/styles/index.module.css deleted file mode 100644 index 9b518ea..0000000 --- a/styles/index.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.loginOrRegisterBox { - --squareSize: 90px; - vertical-align: top; - height: calc(var(--squareSize) + 2 * var(--spacing-large)); - width: 100%; - max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2); -} diff --git a/styles/ui.css b/styles/ui.css index d665044..f1d65e2 100644 --- a/styles/ui.css +++ b/styles/ui.css @@ -7,3 +7,15 @@ .fullwidth { width: calc(100% - var(--spacing-medium)); } +.button { + background-color: var(--accent); + color: var(--gray-900); + text-align: center; + cursor: pointer; + position: relative; + text-decoration: none; + display: block; + user-select: none; + font-weight: 600; +} + diff --git a/styles/utility.css b/styles/utility.css index 753b88d..4331d3a 100644 --- a/styles/utility.css +++ b/styles/utility.css @@ -15,13 +15,38 @@ .bg-800 { background-color: var(--gray-800); } .bg-900 { background-color: var(--gray-900); } +.posabs { position: absolute; } +.posrel { position: relative; } + +.t0 { top: 0; } +.b0 { bottom: 0; } +.r0 { right: 0; } +.l0 { left: 0; } + +.h0 { left: 0; right: 0; } +.v0 { top: 0; bottom: 0; } + +.a0 { top: 0; bottom: 0; left: 0; right: 0; } + .subtile { color: var(--gray-300); font-style: italic; } -/* no-select */ .nosel { user-select: none; font-weight: 600; } + +.sidebyside { + display: grid; + grid-gap: var(--spacing-medium); + grid-auto-flow: column; +} + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + -- cgit v1.2.3 From 59459df904674bc3eaa95f4203113793c7c7fc9a Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 17 Apr 2021 17:25:11 +0200 Subject: dprint fmt --- components/logo.tsx | 1 - components/navbar.tsx | 22 +++++++++---------- components/recentGames.tsx | 12 ++++++----- components/ui.tsx | 6 ++++-- pages/_app.tsx | 4 ++-- pages/index.tsx | 54 +++++++++++++++++++++++----------------------- 6 files changed, 51 insertions(+), 48 deletions(-) diff --git a/components/logo.tsx b/components/logo.tsx index 9faf43f..df35370 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -11,4 +11,3 @@ export default function Logo() {
); } - diff --git a/components/navbar.tsx b/components/navbar.tsx index 932669d..7f6e694 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -55,7 +55,7 @@ export function NavBar() { }, []); return
-
+
- + - + - {false && + {false && } - + -
+
{loggedIn && diff --git a/components/recentGames.tsx b/components/recentGames.tsx index 65c819a..d619eeb 100644 --- a/components/recentGames.tsx +++ b/components/recentGames.tsx @@ -29,11 +29,13 @@ function GameOutcome(props: { game: gameInfo; }) { }[props.game.status](); })(); return - + {gameStatus} ; diff --git a/components/ui.tsx b/components/ui.tsx index db858a4..e2d19ad 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -17,7 +17,9 @@ export function Vierkant(props: { }) { return @@ -38,7 +40,7 @@ export function Button(props: { onClick={props.onclick} href={props.href} id={props.id} - className={"button pad-s round-t " + props.className} + className={'button pad-s round-t ' + props.className} > {props.text ? diff --git a/pages/_app.tsx b/pages/_app.tsx index 46aa8d0..290e687 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -7,9 +7,9 @@ import '../styles/dark.css'; import '../styles/disk.css'; import '../styles/footer.css'; import '../styles/global.css'; -import '../styles/utility.css'; -import '../styles/ui.css'; import '../styles/navbar.css'; +import '../styles/ui.css'; +import '../styles/utility.css'; import '../styles/index.css'; diff --git a/pages/index.tsx b/pages/index.tsx index c3fe955..3d9da21 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -17,13 +17,13 @@ import { mdiRobotExcited } from '@mdi/js'; import Icon from '@mdi/react'; function LoginOrRegisterBox() { - return
- + return
+ Log in of maak een account aan om toegang tot meer functies te krijgen -
-
; } @@ -32,19 +32,19 @@ function AccountBox(props: { info: userInfo; sumGameInfo: userGameTotals; }) { - return
-
+ return
+
-
-

{props.info?.username}

-

Score: {props.info?.rating}

-

- {props.sumGameInfo?.win} W - / - {props.sumGameInfo?.lose} V - / - {props.sumGameInfo?.draw} G +

+

{props.info?.username}

+

Score: {props.info?.rating}

+

+ {props.sumGameInfo?.win} W + / + {props.sumGameInfo?.lose} V + / + {props.sumGameInfo?.draw} G

; @@ -92,22 +92,22 @@ export default function HomePage() { 4 op een rij -
- - - Nieuw spel +
+ + + Nieuw spel {false - && - - Puzzels + && + + Puzzels } {false - && - - Tegen computer + && + + Tegen computer } - + {loggedIn ? : } -- cgit v1.2.3 From 18652c6ff5e10208298bea67ffce6b4ed327c97d Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 18 Apr 2021 11:30:10 +0200 Subject: search page without inline css --- components/ui.tsx | 19 +++--------------- pages/_app.tsx | 1 + pages/index.tsx | 6 +++--- pages/search.tsx | 56 +++++++++++------------------------------------------- styles/global.css | 18 ++++++++++-------- styles/search.css | 12 ++++++++++++ styles/utility.css | 11 ++++++++++- 7 files changed, 50 insertions(+), 73 deletions(-) create mode 100644 styles/search.css diff --git a/components/ui.tsx b/components/ui.tsx index e2d19ad..60b80f4 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -12,14 +12,11 @@ export function Vierkant(props: { children?: ReactNode; className?: string; id?: string; - fullwidth?: boolean; onclick?: () => void; }) { return @@ -98,6 +95,7 @@ export function Input(props: { dark?: boolean; autocomplete?: string; autofocus?: boolean; + className?: string; }) { return ; } diff --git a/pages/_app.tsx b/pages/_app.tsx index 290e687..3f66711 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -12,6 +12,7 @@ import '../styles/ui.css'; import '../styles/utility.css'; import '../styles/index.css'; +import '../styles/search.css'; export default function VierOpEenRijWebsite({ Component, pageProps }) { return
diff --git a/pages/index.tsx b/pages/index.tsx index 3d9da21..b5f4b50 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -107,17 +107,17 @@ export default function HomePage() { Tegen computer } - + {loggedIn ? : }
{loggedIn - && + && } - +

Nieuws ofzo

Chess.com heeft heel veel troep waar niemand naar kijkt

 diff --git a/pages/search.tsx b/pages/search.tsx index 2b8668a..90f1f67 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -24,32 +24,21 @@ function search(callback: (results: Array) => void) { } function SearchResults(props: { userList: Array; }) { - return
+ return
{props.userList?.map(user => )}
; } function SearchResult(props: { user: userInfo; }) { return -
+
-
- {props.user.username} -

{props.user.status}

+
+ {props.user.username} +

{props.user.status}

; @@ -58,40 +47,22 @@ function SearchResult(props: { user: userInfo; }) { function SearchBar(props: { searchFunction: (event?: FormEvent) => void; }) { - return + return
- +
; } @@ -112,12 +83,7 @@ export default function HomePage() { {searched && results.length == 0 &&

Geen zoekresultaten gevonden

} diff --git a/styles/global.css b/styles/global.css index 3c28cfc..b6ed028 100644 --- a/styles/global.css +++ b/styles/global.css @@ -116,14 +116,20 @@ h1, h2, h3, p, b, i, span, td, th { table { table-layout: fixed; } /* table styles */ -td, th { - padding: 4px; - font-size: 15px; +td, th { padding: 4px; } + +input { + color: var(--foreground); + background-color: transparent; + font-family: inherit; + border: 0; + font-size: 1rem; /* why? */ } input::placeholder { font-style: italic; - opacity: .8; + opacity: 1; + color: var(--gray-600); } /* remove chrome's ugly :focus outline */ @@ -135,10 +141,6 @@ input::placeholder { /* material-ui default state */ svg.MuiSvgIcon-root { transition: none !important; } -input::placeholder { opacity: .75; } -input.dark::placeholder { color: var(--text); } -input.light::placeholder { color: var(--text-alt); } - /* editable field status */ *[contenteditable] { border-color: var(--background-alt); } *[contenteditable="true"]:focus { border-color: var(--disk-a); } diff --git a/styles/search.css b/styles/search.css new file mode 100644 index 0000000..06a3918 --- /dev/null +++ b/styles/search.css @@ -0,0 +1,12 @@ +.searchBar input { + width: calc(100% - 2 * var(--spacing-medium) - 48px); + margin: 2px 0; +} + +.results .result .inner .userInfo { + left: calc(48px + var(--spacing-medium)); +} + +h1.noresults { + margin: 24px 32px; +} diff --git a/styles/utility.css b/styles/utility.css index 4331d3a..783b168 100644 --- a/styles/utility.css +++ b/styles/utility.css @@ -28,8 +28,17 @@ .a0 { top: 0; bottom: 0; left: 0; right: 0; } +.dispnone { display: none; } +.dispinbl { display: inline-block; } +.dispbl { display: block; } + +.valigntop { vertical-align: top; } +.valignsup { vertical-align: super; } + +.center { text-align: center; } + .subtile { - color: var(--gray-300); + color: var(--gray-600); font-style: italic; } -- cgit v1.2.3 From 5d964348d6b7af2b17d9838b1fe8b78d76a68cbc Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 18 Apr 2021 11:30:28 +0200 Subject: dprint fmt --- components/ui.tsx | 2 +- pages/index.tsx | 4 ++-- pages/search.tsx | 22 +++++++++++----------- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/components/ui.tsx b/components/ui.tsx index 60b80f4..89e8ffe 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -105,7 +105,7 @@ export function Input(props: { placeholder={props.label} spellCheck={false} defaultValue={props.value ? String(props.value) : ''} - className={"input" + " " + (props.dark ? 'dark' : 'light') + " " + props.className} + className={'input' + ' ' + (props.dark ? 'dark' : 'light') + ' ' + props.className} autoComplete={props.autocomplete} autoFocus={props.autofocus} />; diff --git a/pages/index.tsx b/pages/index.tsx index b5f4b50..9f63229 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -114,10 +114,10 @@ export default function HomePage() {
{loggedIn - && + && } - +

Nieuws ofzo

Chess.com heeft heel veel troep waar niemand naar kijkt

 diff --git a/pages/search.tsx b/pages/search.tsx index 90f1f67..6e52865 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -24,21 +24,21 @@ function search(callback: (results: Array) => void) { } function SearchResults(props: { userList: Array; }) { - return
+ return
{props.userList?.map(user => )}
; } function SearchResult(props: { user: userInfo; }) { return -
+
-
- {props.user.username} -

{props.user.status}

+
+ {props.user.username} +

{props.user.status}

; @@ -47,22 +47,22 @@ function SearchResult(props: { user: userInfo; }) { function SearchBar(props: { searchFunction: (event?: FormEvent) => void; }) { - return + return
- +
; } @@ -83,7 +83,7 @@ export default function HomePage() { {searched && results.length == 0 &&

Geen zoekresultaten gevonden

} -- cgit v1.2.3 From 8ceff7d77c55d32db308dee85debf6bb3bcb9c55 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 18 Apr 2021 13:42:14 +0200 Subject: added todo file (wip) --- todo | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 todo diff --git a/todo b/todo new file mode 100644 index 0000000..7d82e3d --- /dev/null +++ b/todo @@ -0,0 +1,27 @@ +pages: + +- 404 +- maintenance +- /logout +- privacy info + +unimplemented: + +- view friend/blocked/request list +- + +website fixes: + +- unaccessible when not logged in: + - /user/* pages + - /settings +- unaccessible when logged in: + - /register + - /login + +security measures: + +- repeated login prevention +- api rate limiting +- write unit tests + -- cgit v1.2.3 From 2527a6a2e0a9e679cb5a19abb56ad6a363cf980d Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 18 Apr 2021 13:42:44 +0200 Subject: settings page / balloon+tuitje without inline css done --- components/ui.tsx | 131 ++++++++++------------------------------------------ pages/_app.tsx | 1 + pages/index.tsx | 2 +- pages/settings.tsx | 63 +++++++++---------------- styles/index.css | 1 - styles/settings.css | 8 ++++ styles/ui.css | 46 ++++++++++++++++++ styles/utility.css | 2 + 8 files changed, 105 insertions(+), 149 deletions(-) create mode 100644 styles/settings.css diff --git a/components/ui.tsx b/components/ui.tsx index 89e8ffe..f939456 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -27,10 +27,9 @@ export function Vierkant(props: { export function Button(props: { text?: string; children?: ReactNode; - style?: CSSProperties; href?: string; className?: string; - onclick?: (() => void); + onclick?: () => void; id?: string; }) { return void; - style?: CSSProperties; href?: string; + className?: string; }) { return ; @@ -186,110 +170,43 @@ export function CheckBox(props: {
; } -export class ColorPicker extends Component<{ - style?: CSSProperties; -}> { - state: { - color: string; - dark: boolean; - } = { - color: '#012345', - dark: true, - }; +export function ColorPicker() { + var [ dark, setDark ] = useState(false); + var [ color, setColor ] = useState("#012345"); - render() { - return ; - } +
+ ; } -export function Tuitje(props: { - style?: CSSProperties; - rotation?: number; -}) { +export function Tuitje() { return ; } export function Bubble(props: { children?: ReactNode; - style?: CSSProperties; - tuitjeStyle?: CSSProperties; }) { - return + return {props.children} - + ; } diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f66711..bbdbae8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -13,6 +13,7 @@ import '../styles/utility.css'; import '../styles/index.css'; import '../styles/search.css'; +import '../styles/settings.css'; export default function VierOpEenRijWebsite({ Component, pageProps }) { return
diff --git a/pages/index.tsx b/pages/index.tsx index 9f63229..31aee57 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -107,7 +107,7 @@ export default function HomePage() { Tegen computer } - + {loggedIn ? : } diff --git a/pages/settings.tsx b/pages/settings.tsx index 0f40a90..e9fc5fa 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,7 +1,6 @@ import axios from 'axios'; import reduce from 'image-blob-reduce'; -import { CSSProperties, useContext } from 'react'; -import * as cookies from 'react-cookies'; +import { useContext } from 'react'; import { AccountAvatar } from '../components/account'; import { Footer } from '../components/footer'; @@ -16,11 +15,6 @@ import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined'; import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined'; import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined'; -var SettingsSubsectionStyle: CSSProperties = { - marginTop: 24, - minHeight: 40, -}; - async function uploadNewProfileImage() { if (!this.result) return; @@ -54,9 +48,9 @@ export default function SettingsPage() { Instellingen - +

Account

-
+
-
+
} /> -
+

Gebruikersnaam

Hier staat hij dan

-
+
} /> } /> -
+

Email

******@example.com

-
+
} /> -
+

Wachtwoord

- +

Kleuren

-
+
-
+

Schijfjes

-
+
-
+

Achtergrond

-
-
+
+
updatePreference({ 'darkMode': state })} @@ -123,31 +117,20 @@ export default function SettingsPage() {

Donkere modus

- +

Standaard spelregels

-
+
- +

Uitloggen

-
+
} text='Uitloggen' - style={{ - float: 'none', - marginLeft: 0, - }} - onclick={() => { - cookies.remove('token'); - window.location.pathname = '/'; - }} + href="/logout" />
diff --git a/styles/index.css b/styles/index.css index 8ba12a6..fcda8e0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -3,7 +3,6 @@ } .loginOrRegisterBox { - vertical-align: top; height: calc(var(--squareSize) + 2 * var(--spacing-large)); width: 100%; max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2); diff --git a/styles/settings.css b/styles/settings.css new file mode 100644 index 0000000..bcce5b5 --- /dev/null +++ b/styles/settings.css @@ -0,0 +1,8 @@ +.section.logout .button { + float: unset; +} + +.subsection { + margin-top: var(--spacing-large); + min-height: 40px; +} diff --git a/styles/ui.css b/styles/ui.css index f1d65e2..b8cd44c 100644 --- a/styles/ui.css +++ b/styles/ui.css @@ -19,3 +19,49 @@ font-weight: 600; } +.button.iconlabel, +.button.colorpicker { + margin-left: var(--spacing-medium); +} + +.button.colorpicker { + --color: var(--gray-100); + --background: #ff00ff; + + background-color: var(--background); + color: var(--color); + border-width: 2px; + border-style: solid; + border-color: var(--color); +} + +.button.iconlabel .label { + margin: 3px; + margin-left: 8px; +} + +.button.colorpicker .labelwrapper { + width: 150px; + height: 24px; +} + +.button.colorpicker .labelwrapper .label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-feature-settings: "tnum", "ss01"; +} + +.bubble { + margin: 0; + overflow: visible; + left: 50%; + top: -24px; + transform: translateY(-100%) translateX(-50%); +} + +.bubble .tuitje { + bottom: -12px; + transform: translate(-50%, 0%) rotate(0deg); +} diff --git a/styles/utility.css b/styles/utility.css index 783b168..f8954cd 100644 --- a/styles/utility.css +++ b/styles/utility.css @@ -37,6 +37,8 @@ .center { text-align: center; } +.floatr { float: right; } + .subtile { color: var(--gray-600); font-style: italic; -- cgit v1.2.3 From 465b971fd0cb80004bf60865ddc25df9cd72ba38 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 18 Apr 2021 13:42:54 +0200 Subject: dprint fmt --- components/ui.tsx | 20 ++++++++++---------- pages/settings.tsx | 44 ++++++++++++++++++++++---------------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/components/ui.tsx b/components/ui.tsx index f939456..6555813 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -57,12 +57,12 @@ export function IconLabelButton(props: { return ; @@ -171,14 +171,14 @@ export function CheckBox(props: { } export function ColorPicker() { - var [ dark, setDark ] = useState(false); - var [ color, setColor ] = useState("#012345"); + var [dark, setDark] = useState(false); + var [color, setColor] = useState('#012345'); - return - -
; - } + Spelregels aanpassen + + + setEditGameRulesDialogVisible(false)} + setGameRules={setRuleset} + ruleset={ruleset} + visible={editGameRulesDialogVisible} + /> +
; } function GameSettingsSection(props: { @@ -168,120 +155,116 @@ function GameRule(props: { } type editGameSettingsProps = { - parentState: CurrentGameSettingsStateType; + visible: boolean; + ruleset: ruleset; hideEditGameRules: () => void; setGameRules: (newRules: ruleset) => void; }; -export class EditGameSettings extends Component { - render() { - return
+ + ; } diff --git a/styles/ui.css b/styles/ui.css index b8cd44c..efc96b7 100644 --- a/styles/ui.css +++ b/styles/ui.css @@ -65,3 +65,8 @@ bottom: -12px; transform: translate(-50%, 0%) rotate(0deg); } + +.dialogbox { + width: 392px; +} + diff --git a/styles/utility.css b/styles/utility.css index f8954cd..0393d1d 100644 --- a/styles/utility.css +++ b/styles/utility.css @@ -17,6 +17,7 @@ .posabs { position: absolute; } .posrel { position: relative; } +.posfix { position: fixed; } .t0 { top: 0; } .b0 { bottom: 0; } @@ -61,3 +62,9 @@ text-overflow: ellipsis; } +.abscenter { + top: 51%; + left: 50%; + transform: translate(-50%, -50%); +} + -- cgit v1.2.3 From 763d21dc09ea1ae5bf7bda03763386039de396a9 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 18 Apr 2021 19:34:00 +0200 Subject: edit game rules working (still some inline css) --- components/dialogBox.tsx | 19 ++++------ components/gameSettings.tsx | 85 ++++++++------------------------------------- pages/_app.tsx | 1 + styles/gameSettings.css | 59 +++++++++++++++++++++++++++++++ styles/ui.css | 10 ++++++ 5 files changed, 92 insertions(+), 82 deletions(-) create mode 100644 styles/gameSettings.css diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 0a61762..4ead7c5 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -9,20 +9,15 @@ export function DialogBox(props: { title: string; onclick?: () => void; hidden?: boolean; + className?: string; }) { - return -

{props.title}

+ return +

{props.title}

- + {props.children} ; diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index 3c3a699..bb01284 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -30,60 +30,24 @@ export function CurrentGameSettings() { .catch(() => {}); }, []); - /* showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true }); */ - /* hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false }); */ - /* setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules }); */ - var timelimit_str = ruleset.timelimit.enabled ? `${ruleset.timelimit.minutes}m${ruleset.timelimit.seconds}s plus ${ruleset.timelimit.addmove}` : 'Geen tijdslimiet'; var ranked_str = ruleset.ranked ? 'Gerangschikt' : 'Niet gerangschikt'; - return
-

+ return

+

{timelimit_str}
{ranked_str}

@@ -105,13 +69,7 @@ function GameSettingsSection(props: { }) { return