update styles

Author: elpddev

src/App.tsx

@@ -3,7 +3,13 @@ import { TypingGame } from "./components/TypingGame";
 
 export function App() {
   return (
-    <MantineProvider withGlobalStyles withNormalizeCSS>
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        colorScheme: "dark",
+      }}
+    >
       <TypingGame />
     </MantineProvider>
   );

src/components/ActionBar.tsx

@@ -11,7 +11,9 @@ export function ActionBar({
 }) {
   return (
     <Group position="center">
-      <Button onClick={onRestart}>Restart</Button>
+      <Button color="yellow" uppercase onClick={onRestart}>
+        Restart
+      </Button>
     </Group>
   );
 }

src/components/LetterCard.tsx

@@ -49,26 +49,30 @@ function styleLetterCard(
 
 function styleColor(letter: Letter) {
   if (letter.successStatus === SuccessStatus.Fail) {
-    return "red";
+    return "#ed5252";
   }
 
   if (letter.successStatus === SuccessStatus.Success) {
-    return "green";
+    return "#d7d7d7";
   }
 
-  return "black";
+  return "#727272";
 }
 
 function styleBackgroundColor(isHighlight: boolean, isCurrent: boolean) {
+  /*
   if (isCurrent) {
     return "lightgreen";
   }
+  */
 
+  /*
   if (isHighlight) {
     return "#cccccc";
   }
+  */
 
-  return "#f5f5f5";
+  return "#323437";
 }
 
 export const LetterCard = memo(LetterCardFn);

src/components/StatsBar.tsx

@@ -22,7 +22,8 @@ export function StatsBar({ wpm, timeLeft }: { wpm: number; timeLeft: number }) {
 }
 
 const StatsBox = styled.div({
-  backgroundColor: "rgb(253, 253, 253)",
-  border: "1px solid lightgray",
+  // backgroundColor: "rgb(253, 253, 253)",
+  // border: "1px solid lightgray",
+  color: "#c8c7c7",
   padding: "5px",
 });

src/components/TypingAreaProvier.tsx

@@ -25,15 +25,15 @@ export function TypingAreaProvider({
   children: ReactNode;
 }) {
   const scrollToSelf = useCallback(
-    (top: number) => {
+    (target: number) => {
       if (
-        top >= viewport.current.scrollTop &&
-        top < viewport.current.scrollTop + viewport.current.clientHeight
+        target >= viewport.current.scrollTop &&
+        target < viewport.current.scrollTop + viewport.current.clientHeight
       ) {
         return;
       }
 
-      viewport.current.scrollTo({ top, behavior: "smooth" });
+      viewport.current.scrollTo({ top: target, behavior: "smooth" });
     },
     [viewport]
   );

src/components/TypingGame.tsx

@@ -14,10 +14,14 @@ export function TypingGame() {
   const { wpm, timeLeft, board, restart } = useTypingGame();
 
   return (
-    <Container sx={{ height: "100vh" }} p={25}>
+    <Container
+      sx={{ height: "100vh", backgroundColor: "#323437" }}
+      p={25}
+      fluid={true}
+    >
       <Stack align="stretch" sx={{ height: "100%" }}>
         <Group position="center">
-          <Title order={1}>Typing Test</Title>
+          <Title order={1}>T y p i n g _ T e s t</Title>
         </Group>
         <ActionBar wpm={wpm} timeLeft={timeLeft} onRestart={restart} />
         <Space h="xl" />

src/components/WordCard.tsx

@@ -30,9 +30,11 @@ function WordCardFn({
     <Group
       ref={ref as any}
       spacing={3}
-      sx={{
-        backgroundColor: isCurrent ? "#f1f1f1" : "none",
-      }}
+      sx={
+        {
+          // backgroundColor: isCurrent ? "#f1f1f1" : "none",
+        }
+      }
       p={8}
     >
       {word.letters.map((letter, index) => (

src/components/WordsCard.tsx

@@ -11,8 +11,7 @@ function WordsCardFn({ board }: { board: Board }) {
     <ScrollArea
       style={{
         height: 250,
-        backgroundColor: "#fdfdfd",
-        border: "1px solid lightgray",
+        backgroundColor: "#323437",
       }}
       p={15}
       viewportRef={viewport as any}