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