Rename Home.tsx to SelectTeam.tsx

Lila-Kuhlt · Jun 7, 2024 · 54a5b3b · 54a5b3b
1 parent 6d8507c
commit 54a5b3b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/liberica/src/main.tsx b/liberica/src/main.tsx
@@ -1,6 +1,6 @@
 import { CreateTeam } from "page/CreateTeam";
 import { Game } from "page/Game";
-import { Home } from "page/Home";
+import { SelectTeam } from "page/SelectTeam";
 import { Replay } from "page/Replay";
 import { Admin } from "page/Admin";
 import { Debug } from "page/Debug";
@@ -33,13 +33,13 @@ i18n.use(LanguageDetector)
             e instanceof Error && console.error("i18n init error", e.message),
     );
 
-applyTheme(THEMES["Rosé Pine"]);
+applyTheme(Object.values(THEMES)[0]);
 
 const rootElement = document.getElementById("root") as HTMLElement;
 ReactDOM.createRoot(rootElement).render(
     <BrowserRouter>
         <Routes>
-            <Route path="/" element={<Home />} />
+            <Route path="/" element={<SelectTeam />} />
             <Route path="/create" element={<CreateTeam />} />
             <Route path="/game" element={<Game />} />
             <Route path="/replay" element={<Replay />} />

diff --git a/liberica/src/page/Home.tsx → liberica/src/page/SelectTeam.tsx b/liberica/src/page/Home.tsx → liberica/src/page/SelectTeam.tsx
@@ -1,12 +1,12 @@
-import { Button } from "components/InputElements";
+import { BaseButton } from "components/lila/button";
 import { TeamCard } from "components/TeamCard";
 import { getTeams } from "lib/api";
 import { Team } from "lib/bindings";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 
-export function Home() {
+export function SelectTeam() {
     const [teams, setTeams] = useState<Team[]>([]);
     const [selected, setSelected] = useState<number | undefined>();
     const navigate = useNavigate();
@@ -22,17 +22,15 @@ export function Home() {
     }, []);
 
     const process = () => {
-        if (selected === undefined) {
-            return;
-        }
+        if (selected === undefined) return;
         navigate("/game", { state: teams[selected] });
     };
 
     return (
-        <form className="flex h-screen items-center justify-center">
+        <form className="flex h-screen items-center justify-center bg-base">
             <div className="bg-white container flex w-80 flex-col gap-4 p-8">
                 <h2 className="text-lg font-semibold">{t("SelectTeam")}</h2>
-                <div>
+                <div className="flex flex-col gap-2">
                     {teams.map((team, index) => (
                         <TeamCard
                             key={team.id}
@@ -42,15 +40,16 @@ export function Home() {
                         />
                     ))}
                 </div>
-                <Button
+                <BaseButton
+                    variant="primary"
+                    size="md-wide"
                     disabled={selected === undefined}
-                    type="button"
                     onClick={process}
                 >
                     {t("JoinTeam")}
-                </Button>
+                </BaseButton>
                 <Link
-                    className="text-slate-400 text-center underline"
+                    className="text-muted text-center underline"
                     to="/create"
                 >
                     {t("CreateTeam")}