Mostly switched to Tailwind CSS

Author: GameRoMan

src/components/GameBoard.tsx

@@ -5,7 +5,7 @@ import type { TileInfo } from "~/types";
 import Tile from "./Tile";
 
 const GameBoard = (props: { tiles: TileInfo[] }) => (
-  <div id="game-board">
+  <div class="grid grid-cols-5 gap-[5px] mb-5">
     <For each={props.tiles}>{(tile) => <Tile tile={tile} />}</For>
   </div>
 );

src/components/LeaderboardContainer.tsx

@@ -1,6 +1,6 @@
 const LeaderboardContainer = () => (
   <div class="content-container">
-    <h2>{"Leaderboard (coming soon)"}</h2>
+    <h2 class="font-bold text-2xl text-center mb-5">{"Leaderboard (not coming soon)"}</h2>
   </div>
 );
 

src/components/SettingsContainer.tsx

@@ -7,8 +7,8 @@ const SettingGroup = <T extends string>(props: {
   options: { value: T; label: string }[];
   onChange: (value: T) => void;
 }) => (
-  <div class="setting-group">
-    <label for={props.id} class="setting-label">
+  <div class="flex justify-between items-end w-full mb-4">
+    <label for={props.id} class="font-bold text-2xl">
       {props.label}
     </label>
 
@@ -29,7 +29,7 @@ const SettingsContainer = (props: {
   settings: Settings;
   updateSettings: (settings: Partial<Settings>) => void;
 }) => (
-  <div id="settings-container" class="content-container">
+  <div class="content-container">
     <SettingGroup
       id="theme-select"
       label="Theme"

src/components/StatsContainer.tsx

@@ -2,8 +2,8 @@ import { For } from "solid-js";
 import type { Stats } from "~/types";
 
 const GuessDistributionRow = (props: { v: number; i: number; p: number }) => (
-  <div class="guess-row">
-    <div class="guess-label">{props.i + 1}</div>
+  <div class="flex items-center w-9/10">
+    <div class="w-5 text-right mr-2.5 font-bold text-base">{props.i + 1}</div>
     <div class="guess-bar">
       <div class="guess-bar-fill" style={{ width: `${props.p}%` }} />
       <div class="guess-count">{props.v}</div>
@@ -12,7 +12,7 @@ const GuessDistributionRow = (props: { v: number; i: number; p: number }) => (
 );
 
 const GuessDistribution = (props: { guessDistribution: number[] }) => (
-  <div id="guess-distribution">
+  <div class="flex flex-col gap-[5px] w-full">
     <For each={props.guessDistribution}>
       {(v, i) => (
         <GuessDistributionRow
@@ -25,43 +25,41 @@ const GuessDistribution = (props: { guessDistribution: number[] }) => (
   </div>
 );
 
+const StatBox = (props: {
+  id?: string;
+  value: string | number;
+  label: string;
+}) => (
+  <div class="stat-box">
+    <div class="text-2xl font-bold mb-[5px]" id={props.id}>
+      {props.value}
+    </div>
+    <div class="text-base">{props.label}</div>
+  </div>
+);
+
+const getNormalizedPercentage = (part: number, total: number) =>
+  total === 0 ? 0 : Math.round((part / total) * 100);
+
 const StatsContainer = (props: { stats: Stats }) => (
-  <div id="stats-container" class="content-container">
-    <div id="stats-grid">
-      <div class="stat-box">
-        <div class="stat-number" id="games-played">
-          {props.stats.gamesPlayed}
-        </div>
-        <div class="stat-label">Played</div>
-      </div>
+  <div class="content-container">
+    <div class="grid grid-cols-2 gap-5 mb-5">
+      <StatBox label="Played" value={props.stats.gamesPlayed} />
 
-      <div class="stat-box">
-        <div class="stat-number" id="win-percentage">
-          {props.stats.gamesPlayed === 0
-            ? "0%"
-            : Math.round(
-                (props.stats.gamesWon / props.stats.gamesPlayed) * 100
-              ) + "%"}
-        </div>
-        <div class="stat-label">Win %</div>
-      </div>
+      <StatBox
+        label="Win %"
+        value={`${getNormalizedPercentage(
+          props.stats.gamesWon,
+          props.stats.gamesPlayed
+        )}%`}
+      />
 
-      <div class="stat-box">
-        <div class="stat-number" id="current-streak">
-          {props.stats.currentStreak}
-        </div>
-        <div class="stat-label">Current Streak</div>
-      </div>
+      <StatBox label="Current Streak" value={props.stats.currentStreak} />
 
-      <div class="stat-box">
-        <div class="stat-number" id="max-streak">
-          {props.stats.maxStreak}
-        </div>
-        <div class="stat-label">Max Streak</div>
-      </div>
+      <StatBox label="Max Streak" value={props.stats.maxStreak} />
     </div>
 
-    <h3 class="my-[10px]">Guess Distribution</h3>
+    <h3 class="font-bold text-lg text-center my-2.5">Guess Distribution</h3>
 
     <GuessDistribution guessDistribution={props.stats.guessDistribution} />
   </div>

src/components/TopBar.tsx

@@ -40,7 +40,7 @@ const TopBar = (props: {
   setCurrentSection: (section: CurrentSection) => void;
 }) => (
   <div id="top-bar">
-    <div class="top-bar-buttons-div">
+    <div class="flex flex-row gap-2.5 basis-1/3">
       <TopbarButton
         section="menu"
         currentSection={props.currentSection}
@@ -60,9 +60,9 @@ const TopBar = (props: {
       </TopbarButton>
     </div>
 
-    <h1 id="game-title">Wordle</h1>
+    <h1 id="game-title" class="font-bold text-[2em] m-0 text-center tracking-[2px] grow">Wordle</h1>
 
-    <div class="top-bar-buttons-div">
+    <div class="flex flex-row gap-2.5 basis-1/3 justify-end">
       <TopbarButton
         section="stats"
         currentSection={props.currentSection}

src/layouts/Layout.astro

@@ -12,7 +12,7 @@ interface Props {
 const { title, description, canonical, thumbnail } = Astro.props;
 ---
 
-<html lang="en">
+<html lang="en" class="h-screen">
   <head>
     <meta charset="UTF-8" />
     <meta name="referrer" content="no-referrer-when-downgrade" />

src/pages/index.astro

@@ -1,10 +1,6 @@
 ---
 import "~/styles/global.css";
-
 import "~/styles/main.css";
-import "~/styles/notifications.css";
-import "~/styles/statistics.css";
-import "~/styles/variables.css";
 
 import Layout from "~/layouts/Layout.astro";
 import Game from "~/components/Game.tsx";

src/styles/global.css

@@ -1,31 +1,6 @@
 @import "tailwindcss";
 
-/**
-
 @custom-variant dark (&:where(.dark, .dark *));
-
-/* or */
-
-/**
-
+/* or */ /**
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
 */
-
-h1,
-h2,
-h3 {
-  @apply font-bold;
-}
-
-h1 {
-  font-size: 2em;
-}
-
-h2 {
-  font-size: 1.5em;
-}
-
-h3 {
-  font-size: 1.17em;
-}