diff --git a/client/src/components/appbar/Appbar.js b/client/src/components/appbar/Appbar.js
index 19e6044..49ce9f0 100644
--- a/client/src/components/appbar/Appbar.js
+++ b/client/src/components/appbar/Appbar.js
@@ -10,13 +10,13 @@ function Appbar() {
sx={{
background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
width: '100%',
- height: 50,
+ height: 60,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
-
+
Words But With Letters
diff --git a/client/src/components/overview/BonusWordScore.js b/client/src/components/overview/BonusWordScore.js
deleted file mode 100644
index a259716..0000000
--- a/client/src/components/overview/BonusWordScore.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { Sheet, Typography } from '@mui/joy'
-import { useTheme } from '@emotion/react'
-
-const BonusWordScore = ({ bonusWordScore }) => {
- const theme = useTheme()
-
- return (
-
-
- {bonusWordScore ? bonusWordScore.toLocaleString('en-US') : '00'}
-
-
- )
-}
-
-BonusWordScore.propTypes = {}
-
-export default BonusWordScore
diff --git a/client/src/components/overview/ScoreColumn.js b/client/src/components/overview/ScoreColumn.js
index 4ae6ca9..5e16acd 100644
--- a/client/src/components/overview/ScoreColumn.js
+++ b/client/src/components/overview/ScoreColumn.js
@@ -1,27 +1,55 @@
import React from 'react'
-import PropTypes from 'prop-types'
import { Grid, Sheet, Typography, useTheme } from '@mui/joy'
-const ScoreColumn = ({ wordScores }) => {
+const ScoreColumn = ({ wordScores, bonusScore }) => {
const theme = useTheme()
return (
-
- {wordScores.slice(0, 6).map((score, index) => (
-
-
- {score ? score.toLocaleString('en-US') : 0}
-
-
- ))}
+
+
+ {wordScores.slice(0, 6).map((score, index) => (
+
+
+ {score ? score.toLocaleString('en-US') : 0}
+
+
+ ))}
+
+
+
+ {bonusScore || 0}
+
+
)
diff --git a/client/src/components/overview/ScoreOverview.js b/client/src/components/overview/ScoreOverview.js
index ed02018..d754d1b 100644
--- a/client/src/components/overview/ScoreOverview.js
+++ b/client/src/components/overview/ScoreOverview.js
@@ -1,11 +1,9 @@
import React from 'react'
-import PropTypes from 'prop-types'
-import { Divider, Grid, Sheet, Typography } from '@mui/joy'
+import { Grid, Sheet, Typography } from '@mui/joy'
import { useTheme } from '@emotion/react'
import MiniBoard from './MiniBoard'
import ScoreColumn from './ScoreColumn'
import BonusWord from './BonusWord'
-import BonusWordScore from './BonusWordScore'
const ScoreOverview = ({ progress, scoreModifiers }) => {
const theme = useTheme()
@@ -17,7 +15,7 @@ const ScoreOverview = ({ progress, scoreModifiers }) => {
flexDirection: 'column',
padding: 2,
borderTopLeftRadius: 8,
- width: 390,
+ width: '100%',
height: 434,
background: theme.palette.mode === 'dark' ? false : theme.palette.neutral[100],
}}
@@ -28,15 +26,15 @@ const ScoreOverview = ({ progress, scoreModifiers }) => {
Results!
-
-
+
+
-
-
-
-
+
+
diff --git a/client/src/index.js b/client/src/index.js
index bdfadee..5a46224 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -34,14 +34,17 @@ function ModeToggle() {
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => {
- setMode('dark')
+ const currentMode = localStorage.getItem('theme')
+ setMode(currentMode || 'dark')
}, [])
return (