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/navbar.tsx | 42 ++++++++++++++---------------------------- 1 file changed, 14 insertions(+), 28 deletions(-) (limited to 'components/navbar.tsx') 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 && -- 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(-) (limited to 'components/navbar.tsx') 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 de2853cc4793b7948b94525a0a4f964e49943131 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Wed, 21 Apr 2021 09:57:40 +0200 Subject: even more components without inline css --- components/gameSettings.tsx | 60 ++++++++++++--------------------------------- components/navbar.tsx | 42 +++---------------------------- styles/gameSettings.css | 25 +++++++++++++++---- styles/navbar.css | 25 +++++++++++++++++++ styles/notifications.css | 5 ++-- 5 files changed, 67 insertions(+), 90 deletions(-) (limited to 'components/navbar.tsx') diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index bb01284..13462be 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -1,5 +1,5 @@ import axios from 'axios'; -import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react'; +import { ReactNode, useEffect, useState } from 'react'; import { ruleset, userPreferences } from '../api/api'; import { DialogBox } from './dialogBox'; @@ -71,24 +71,15 @@ function GameSettingsSection(props: { id={props.id} className='pad-m editableRulesSection' > - + {props.title} - +
+ +
{props.children}
; } @@ -96,19 +87,10 @@ function GameSettingsSection(props: { function GameRule(props: { title: string; description: string; - style?: CSSProperties; }) { - return
-

{props.title}

-

{props.description}

+ return
+

{props.title}

+

{props.description}

; } @@ -161,28 +143,16 @@ export function EditGameSettings(props: editGameSettingsProps) { />
- + Timer gebruiken voor bijde spelers - {false && -
+ {true && +
- + } + return
@@ -90,29 +72,13 @@ export function NavBar() {
- {loggedIn && + {loggedIn &&
setNotificationsAreaVisible(!notificationsAreaVisible)} > - {gotNotifications &&
} + {gotNotifications &&
}
.iconWrapper { + cursor: pointer; +} + +.notifications .notificationDot { + background-color: var(--accent); + width: 8px; + height: 8px; + border-radius: 4px; + top: 2px; + right: 2px; +} diff --git a/styles/notifications.css b/styles/notifications.css index ec47836..db1598d 100644 --- a/styles/notifications.css +++ b/styles/notifications.css @@ -1,4 +1,5 @@ -.notificationsArea { +/* a tags are here because of css specificity */ +a.notificationsArea { left: calc(48px + var(--spacing-medium)); top: 92px; transform: translateY(-100%); @@ -7,7 +8,7 @@ height: 450px; } -.notificationsArea .tuitje { +a.notificationsArea .tuitje { left: var(--spacing-medium); bottom: 86px; transform: translate(-100%, 100%) rotate(90deg); -- cgit v1.2.3