From 08ba9024f532554fe2135d2596f1169828b01e5f Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 19 Apr 2021 09:51:38 +0200 Subject: login/register pages done + fullwidth css class edited --- pages/register.tsx | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'pages/register.tsx') diff --git a/pages/register.tsx b/pages/register.tsx index f78d092..90dab3e 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -89,34 +89,34 @@ export default function RegisterPage() {
-
- +
+
submitRegister(e, toast)}> - - - + className='pad-m fullwidth bg-900 round-t' + /> + + - + /> +
-- cgit v1.2.3 From c140e56db162755d7f85e89306236a0a09bf4e35 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 20 Apr 2021 16:14:04 +0200 Subject: site not longer broken (i think) still some inline css remains.... --- components/dialogBox.tsx | 2 +- components/gameBar.tsx | 41 +++++++-------------------------------- components/ui.tsx | 2 +- components/voerBord.tsx | 50 +++++------------------------------------------- pages/game.tsx | 2 +- pages/index.tsx | 12 ++++++------ pages/login.tsx | 2 +- pages/register.tsx | 2 +- pages/search.tsx | 2 +- pages/settings.tsx | 8 ++++---- pages/user.tsx | 8 ++++---- styles/disk.css | 4 ++-- styles/game.css | 36 ++++++++++++++++++++++++++++++++++ styles/utility.css | 3 +++ 14 files changed, 73 insertions(+), 101 deletions(-) (limited to 'pages/register.tsx') diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 4ead7c5..a5b02fa 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -12,7 +12,7 @@ export function DialogBox(props: { className?: string; }) { return

{props.title}

diff --git a/components/gameBar.tsx b/components/gameBar.tsx index 0d7d4d9..a3479d5 100644 --- a/components/gameBar.tsx +++ b/components/gameBar.tsx @@ -11,14 +11,7 @@ function GameBarModule(props: { onclick?: () => void; }) { return {props.children} @@ -37,33 +30,13 @@ export function GameBar(props: { active: boolean; resignFunction: () => void; }) { - return -
+ return +
-
-

+ {props.active &&
} +

{!props.active ? 'Wachten op tegenstander...' : props.turn == props.player1 diff --git a/components/ui.tsx b/components/ui.tsx index 80bfba1..11914c8 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -16,7 +16,7 @@ export function Vierkant(props: { }) { return diff --git a/components/voerBord.tsx b/components/voerBord.tsx index 93e350c..ffb291b 100644 --- a/components/voerBord.tsx +++ b/components/voerBord.tsx @@ -1,62 +1,22 @@ -function Disc() { - return
; -} - export function VoerBord(props: { width: number; height: number; onMove: (move: number) => void; active: boolean; }) { - return + return
{[...Array(props.height).keys()].map((row) => ( {[...Array(props.width).keys()].map((column) => (
+
+
- -
{ props.onMove(Number((event.target as HTMLElement).id.split('-')[1])); diff --git a/pages/game.tsx b/pages/game.tsx index d6d7fb0..9e702ed 100644 --- a/pages/game.tsx +++ b/pages/game.tsx @@ -1,7 +1,7 @@ import Icon from '@mdi/react'; import axios from 'axios'; import copy from 'copy-to-clipboard'; -import { CSSProperties, useContext, useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import * as cookies from 'react-cookies'; import { Socket } from 'socket.io-client'; import { SocketContext } from '../components/socketContext'; diff --git a/pages/index.tsx b/pages/index.tsx index 873cf8b..c4b4baf 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -93,31 +93,31 @@ export default function HomePage() { 4 op een rij
- + Nieuw spel {false - && + && Puzzels } {false - && + && Tegen computer } - + {loggedIn ? : }
{loggedIn - && + && } - +

Nieuws ofzo

Chess.com heeft heel veel troep waar niemand naar kijkt

 diff --git a/pages/login.tsx b/pages/login.tsx index 9e26b50..73fbb52 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -50,7 +50,7 @@ export default function LoginPage() {
- +
submitLogin(e, toast)}>
- + submitRegister(e, toast)}> ) => void; }) { - return + return Instellingen - +

Account

@@ -92,7 +92,7 @@ export default function SettingsPage() {
- +

Kleuren

@@ -117,13 +117,13 @@ export default function SettingsPage() {

Donkere modus

 - +

Standaard spelregels

 - +

Uitloggen

Profiel - +
@@ -280,7 +280,7 @@ export default function AccountPage() {
- +
} @@ -312,7 +312,7 @@ export default function AccountPage() { } label='Nederland' />
- +
} @@ -340,7 +340,7 @@ export default function AccountPage() { />
- + diff --git a/styles/disk.css b/styles/disk.css index d858335..2646fed 100644 --- a/styles/disk.css +++ b/styles/disk.css @@ -1,3 +1,3 @@ .voerBord .disk.state-0 { background-color: var(--page-background); } -.voerBord .disk.state-1 { background-color: var(--disk-a); } -.voerBord .disk.state-2 { background-color: var(--disk-b); } +.voerBord .disk.state-1 { background-color: var(--confirm); } +.voerBord .disk.state-2 { background-color: var(--error); } diff --git a/styles/game.css b/styles/game.css index ae8c3ff..de00b1c 100644 --- a/styles/game.css +++ b/styles/game.css @@ -32,3 +32,39 @@ margin-top: var(--spacing-large); } +.voerBord { + border-spacing: var(--spacing-small); +} + +.voerBord .cell.inner { + border: 2px solid var(--gray-800); +} + +.voerBord .square { + margin-top: 100%; +} + +.voerBord.active .cell.inner { + cursor: pointer; +} + +.voerBord .disk { + border-radius: 999999999px; + margin: 3px; +} + +.gameBar .gameBarButton { + margin: 0; +} + +.gameBar .move { + width: 32px; + height: 32px; + border-radius: 16px; + + margin: 8px; +} + +.gameBar .move.move-a { background-color: var(--error); } +.gameBar .move.move-b { background-color: var(--confirm); } + diff --git a/styles/utility.css b/styles/utility.css index d3c5897..0ff6b10 100644 --- a/styles/utility.css +++ b/styles/utility.css @@ -43,6 +43,9 @@ .valigntop { vertical-align: top; } .valignsup { vertical-align: super; } +.cpointer { cursor: pointer; } +.cdefault { cursor: default; } + .center { text-align: center; } .floatr { float: right; } -- cgit v1.2.3 From ae4375d8b492c244328a88190e8ed10c8dbd2fda Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 20 Apr 2021 16:21:51 +0200 Subject: all pages without inline styles --- pages/game.tsx | 8 +------- pages/login.tsx | 2 +- pages/register.tsx | 2 +- styles/game.css | 5 +++++ 4 files changed, 8 insertions(+), 9 deletions(-) (limited to 'pages/register.tsx') diff --git a/pages/game.tsx b/pages/game.tsx index 9e702ed..de2c089 100644 --- a/pages/game.tsx +++ b/pages/game.tsx @@ -65,13 +65,7 @@ function VoerGame(props: { }); }, []); - return
+ return
- +
submitLogin(e, toast)}> diff --git a/pages/register.tsx b/pages/register.tsx index 63f51f7..2709a10 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -88,7 +88,7 @@ export default function RegisterPage() { return (
- +
submitRegister(e, toast)}> diff --git a/styles/game.css b/styles/game.css index de00b1c..f454691 100644 --- a/styles/game.css +++ b/styles/game.css @@ -68,3 +68,8 @@ .gameBar .move.move-a { background-color: var(--error); } .gameBar .move.move-b { background-color: var(--confirm); } +.voerGame { + max-width: 100vh; + margin: 0 auto; +} + -- cgit v1.2.3 From 84bfb5e738a100a6572344bf8babaa1a776d8947 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 20 Apr 2021 16:32:08 +0200 Subject: dark mode working now :tada: --- pages/login.tsx | 2 +- pages/register.tsx | 2 +- pages/search.tsx | 2 +- styles/dark.css | 22 ++++++++++++++++------ styles/game.css | 45 +++++++++++++++------------------------------ styles/gameSettings.css | 3 +++ styles/global.css | 36 ------------------------------------ styles/ui.css | 13 +++++-------- 8 files changed, 42 insertions(+), 83 deletions(-) (limited to 'pages/register.tsx') diff --git a/pages/login.tsx b/pages/login.tsx index 4cadd82..da13f45 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -48,7 +48,7 @@ export default function LoginPage() { return (
- +
submitLogin(e, toast)}> diff --git a/pages/register.tsx b/pages/register.tsx index 2709a10..bc2fc0f 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -88,7 +88,7 @@ export default function RegisterPage() { return (
- +
submitRegister(e, toast)}> diff --git a/pages/search.tsx b/pages/search.tsx index 7aba29c..99f99b0 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -31,7 +31,7 @@ function SearchResults(props: { userList: Array; }) { function SearchResult(props: { user: userInfo; }) { return
diff --git a/styles/dark.css b/styles/dark.css index 681116f..b44171b 100644 --- a/styles/dark.css +++ b/styles/dark.css @@ -1,9 +1,19 @@ html.dark { - --text: #FCFFFD; - --text-alt: var(--text); + --background: var(--gray-900); + --foreground: #FFFFF3; - --page-background: #11171a; - --background: #222d33; - --background-alt: #344047; -} + --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; +} diff --git a/styles/game.css b/styles/game.css index f454691..2c1eb94 100644 --- a/styles/game.css +++ b/styles/game.css @@ -7,55 +7,35 @@ padding: var(--spacing-medium) var(--spacing-large); } -.newGameDialog .inviteButton { - height: 160px; -} +.newGameDialog .inviteButton { height: 160px; } -.newGameDialog .inviteButton.random { - background-color: var(--confirm); -} +.newGameDialog .inviteButton.random { background-color: var(--confirm); } -.newGameDialog .inviteButton.link { - background-color: var(--error); -} +.newGameDialog .inviteButton.link { background-color: var(--error); } .newGameDialog .inviteButton .icon { top: var(--spacing-medium); font-size: 100px; } -.newGameDialog .inviteButton .label { - bottom: var(--spacing-medium); -} +.newGameDialog .inviteButton .label { bottom: var(--spacing-medium); } -.newGameDialog > div { - margin-top: var(--spacing-large); -} +.newGameDialog > div { margin-top: var(--spacing-large); } -.voerBord { - border-spacing: var(--spacing-small); -} +.voerBord { border-spacing: var(--spacing-small); } -.voerBord .cell.inner { - border: 2px solid var(--gray-800); -} +.voerBord .cell.inner { border: 2px solid var(--gray-800); } -.voerBord .square { - margin-top: 100%; -} +.voerBord .square { margin-top: 100%; } -.voerBord.active .cell.inner { - cursor: pointer; -} +.voerBord.active .cell.inner { cursor: pointer; } .voerBord .disk { border-radius: 999999999px; margin: 3px; } -.gameBar .gameBarButton { - margin: 0; -} +.gameBar .gameBarButton { margin: 0; } .gameBar .move { width: 32px; @@ -73,3 +53,8 @@ margin: 0 auto; } +html.dark .newGameDialog .inviteButton { background-color: var(--gray-800); } +html.dark .newGameDialog .inviteButton.random .icon { color: var(--confirm); } +html.dark .newGameDialog .inviteButton.link .icon { color: var(--error); } +html.dark .newGameDialog .searchBar .input { background-color: var(--gray-800); } + diff --git a/styles/gameSettings.css b/styles/gameSettings.css index 533cea0..d9ba262 100644 --- a/styles/gameSettings.css +++ b/styles/gameSettings.css @@ -40,6 +40,9 @@ margin: 0; margin-bottom: var(--spacing-medium); } +html.dark .editGameSettings .editableRules .editableRulesSection { + background-color: var(--gray-800); +} .editGameSettings .button { line-height: normal; diff --git a/styles/global.css b/styles/global.css index f70b6bd..541dd76 100644 --- a/styles/global.css +++ b/styles/global.css @@ -33,42 +33,6 @@ --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; diff --git a/styles/ui.css b/styles/ui.css index cd9f461..6dbc388 100644 --- a/styles/ui.css +++ b/styles/ui.css @@ -5,6 +5,7 @@ box-sizing: border-box; } +html.dark .button { color: var(--foreground); } .button { background-color: var(--accent); color: var(--gray-900); @@ -64,20 +65,16 @@ transform: translate(-50%, 0%) rotate(0deg); } -.dialogbox { - width: 392px; -} - -.dialogbox > .title { - margin-bottom: var(--spacing-large); -} - +.dialogbox { width: 392px; } +.dialogbox > .title { margin-bottom: var(--spacing-large); } .dialogbox .icon.close { top: 25px; right: 25px; cursor: pointer; } +html.dark .dialogbox { background-color: var(--gray-700); } + .searchBar { overflow: hidden; } -- cgit v1.2.3