176 fix css sizing (#177)

David-Duefrene · Sep 6, 2023 · e22c2fc · e22c2fc
1 parent 1177dac
commit e22c2fc
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 61 deletions.
diff --git a/Components/ChartBox/ChartBox.module.sass b/Components/ChartBox/ChartBox.module.sass
@@ -1,6 +1,5 @@
 .ChartArea
     display: flex
-    margin-left: -1em
 
 .Chart
     box-shadow: var(--shadow)
diff --git a/Components/ChartBox/ChartBox.tsx b/Components/ChartBox/ChartBox.tsx
@@ -67,7 +67,7 @@ const ChartBox = ({ data, title, lang }: ChartBoxProps) => {
 			<Title page={title} opts={lang} />
 			<div className={styles.ChartArea}>
 				<ColorKey>{linesColors}</ColorKey>
-				<svg className={styles.Chart} ref={svgRef} width={width + 120} height={height * 1.1} />
+				<svg className={styles.Chart} ref={svgRef} width={width + 120} height={Math.floor(height * 1.1)} />
 			</div>
 		</article>
 	)

diff --git a/Components/ChartBox/ColorKey/ColorKey.module.sass b/Components/ChartBox/ColorKey/ColorKey.module.sass
@@ -5,7 +5,6 @@
     margin-right: 1em
 
     width: 15%
-    max-height: 80vh
     display: flex
     z-index: 0
 

diff --git a/styles/index.module.sass → Components/UI/NavBar/NavBar.module.sass b/styles/index.module.sass → Components/UI/NavBar/NavBar.module.sass
@@ -1,20 +1,21 @@
-.NavBar
-    display: flex
-    flex-direction: column
-    justify-content: center
-    align-items: center
-
-.Link
-    display: flex
-    flex-direction: column
-    justify-content: center
-    align-items: center
-    width: 100%
-    background-color: var(--alt-color)
-    color: var(--text-color)
-    font-weight: bold
-    cursor: pointer
-
-    &:hover
-      background-color: var(--text-color)
-      color: var(--bg-color)
+.NavBar
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
+.Link
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    width: 100%
+    background-color: var(--alt-color)
+    color: var(--text-color)
+    font-weight: bold
+    cursor: pointer
+
+    &:hover
+      background-color: var(--text-color)
+      color: var(--bg-color)
+
diff --git a/Components/UI/NavBar/NavBar.tsx b/Components/UI/NavBar/NavBar.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+import useVariableInterpolation from '../../../util/useVariableInterpolation'
+
+import styles from './NavBar.module.sass'
+
+const CHARTLIST = [ 'population', 'budget' ] as const
+
+const NavBar = (): JSX.Element => {
+	const { t } = useVariableInterpolation('common')
+
+	const charts: JSX.Element[] = CHARTLIST.map((chartName, index) => {
+		const tChartName = t(`chartList.${chartName}`)
+		return (
+			<Link key={`Chart-${index}-${chartName}`} className={styles.Link} href={`/${chartName}`}>
+				<Image src={`/icons/${chartName}.svg`} width='50' height='50' alt={tChartName} />
+				{tChartName}
+			</Link>
+		)
+	})
+
+	return <nav className={styles.NavBar}>{charts}</nav>
+}
+
+export default NavBar
+
diff --git a/Components/UI/ThemeToggle/ThemeToggle.tsx b/Components/UI/ThemeToggle/ThemeToggle.tsx
@@ -3,29 +3,22 @@ import { useState, useEffect } from 'react'
 import styles from './ThemeToggle.module.sass'
 
 const ThemeToggle = () => {
-	// Is Next.js SSR compatible here? I don't think so
-	const isDarkMode: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches
-	const [ theme, setTheme ] = useState<'Dark' | 'Light'>(isDarkMode ? 'Dark' : 'Light')
+	const [ theme, setTheme ] = useState<'Dark' | 'Light'>('Light')
 
 	useEffect(() => {
-		const updateTheme = () => setTheme(isDarkMode ? 'Dark' : 'Light')
-		const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
-		matchMedia.addEventListener('change', updateTheme)
-
-		return () => matchMedia.removeEventListener('change', updateTheme)
-	}, [ isDarkMode ])
+		if (window.matchMedia('(prefers-color-scheme: dark)')) {
+			setTheme('Dark')
+			document.documentElement.className = 'Dark'
+		}
+	}, [ ])
 
 	const clickable = () => {
-		const textColor = theme === 'Dark' ? 'black' : 'white'
-		document.documentElement.style.setProperty('--text-color', textColor)
-
-		const backgroundColor = theme === 'Dark' ? 'white' : 'black'
-		document.documentElement.style.setProperty('--bg-color', backgroundColor)
-
-		setTheme(theme === 'Dark' ? 'Light' : 'Dark')
+		const newTheme = theme === 'Dark' ? 'Light' : 'Dark'
+		document.documentElement.className = newTheme
+		setTheme(newTheme)
 	}
 
-	return <button className={styles.Button} onClick={clickable}>{theme === 'Dark' ? 'Light' : 'Dark' }</button>
+	return <button className={styles.Button} onClick={clickable}>{theme}</button>
 }
 
 export default ThemeToggle

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,14 +1,12 @@
 import Head from 'next/head'
-import Link from 'next/link'
-import Image from 'next/image'
 
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import useVariableInterpolation from '../util/useVariableInterpolation'
 
-import type { NextPage } from 'next'
+import NavBar from '../Components/UI/NavBar/NavBar'
 
-import styles from '../styles/index.module.sass'
+import type { NextPage } from 'next'
 
 export const getStaticProps = async ({ locale }: { locale: string }) => {
 	return {
@@ -20,14 +18,6 @@ export const getStaticProps = async ({ locale }: { locale: string }) => {
 
 const Home: NextPage = () => {
 	const { t } = useVariableInterpolation('common')
-	const charts = [
-		<Link key='0' className={styles.Link} href='/population'>
-			<Image src='/icons/population.svg' width='50' height='50' alt={t('chartList.population')} />{t('chartList.population')}
-		</Link>,
-		<Link key='1' className={styles.Link} href='/budget'>
-			<Image src='/icons/budget.svg' width='50' height='50' alt={t('chartList.budget')} />{t('chartList.budget')}
-		</Link>,
-	]
 
 	const title: string = t('title')
 	const desc: string = t('description')
@@ -46,10 +36,11 @@ const Home: NextPage = () => {
 			</hgroup>
 
 			<main>
-				<nav className={styles.NavBar}>{charts}</nav>
+				<NavBar />
 			</main>
 		</>
 	)
 }
 
 export default Home
+
diff --git a/styles/globals.sass b/styles/globals.sass
@@ -16,8 +16,6 @@ html
     height: 99vh
 
     --alt-color: grey
-    --text-color: white
-    --bg-color: #000000
     --glass: rgba(0, 0, 0, 0)
 
     --shadow: 0px 3px 1px -2px var(--text-color), 0px 2px 2px 0px var(--alt-color), 0px 1px 5px 0px var(--alt-color)
@@ -37,18 +35,19 @@ html
     color: var(--text-color)
     background-color: var(--bg-color)
 
-    @media (prefers-color-scheme: light)
-        --text-color: #000000
-        --bg-color: #ffffff
+.Light
+    --text-color: #000000
+    --bg-color: #ffffff
+
+.Dark
+    --text-color: #ffffff
+    --bg-color: #000000
 
 main
     display: flex
     flex-direction: row
     justify-content: center
     align-items: center
-    height: 100vh
-    width: 100vw
-    overflow: hidden
 
 a
     color: inherit