Add play button in header

Qqkyu · Sep 5, 2023 · 3441782 · 3441782
1 parent 41c94a5
commit 3441782
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 22 deletions.
diff --git a/frontend/src/components/header/_components/theme-toggle/theme-toggle.component.tsx b/frontend/src/components/header/_components/theme-toggle/theme-toggle.component.tsx
@@ -20,23 +20,23 @@ export const ThemeToggle: FunctionComponent = () => {
   const initialTheme = useMemo(() => theme, []);
 
   const handleClick = () => {
-    theme === "pastel" ? setTheme("dark") : setTheme("pastel");
+    theme === "light" ? setTheme("dark") : setTheme("light");
   };
 
   return isMounted ? (
     <label className="swap swap-rotate">
       <input type="checkbox" onClick={handleClick} />
 
       <Icon
-        color="hsl(var(--pc))"
+        color="hsl(var(--bc))"
         type="sun"
-        className={`w-6 sm:w-7 lg:w-8 ${initialTheme === "pastel" ? "swap-on" : "swap-off"}`}
+        className={`w-6 sm:w-7 lg:w-8 ${initialTheme === "light" ? "swap-on" : "swap-off"}`}
       />
 
       <Icon
-        color="hsl(var(--pc))"
+        color="hsl(var(--bc))"
         type="moon"
-        className={`w-6 sm:w-7 lg:w-8 ${initialTheme === "pastel" ? "swap-off" : "swap-on"}`}
+        className={`w-6 sm:w-7 lg:w-8 ${initialTheme === "light" ? "swap-off" : "swap-on"}`}
       />
     </label>
   ) : (

diff --git a/frontend/src/components/header/header.astro b/frontend/src/components/header/header.astro
@@ -9,10 +9,10 @@ const t = useTranslations(lang); // eslint-disable-line react-hooks/rules-of-hoo
 ---
 
 <div class="navbar bg-base-300 h-16 p-3 sm:h-20 sm:p-4">
-  <div class="navbar-start w-1/4 gap-2 sm:gap-3">
+  <div class="navbar-start w-7/12 sm:w-1/4 gap-2 sm:gap-3">
     <div class="dropdown">
       <div tabIndex={0} class="btn btn-xs sm:btn-sm btn-ghost lg:hidden">
-        <Icon color="hsl(var(--pc))" type="burger-menu" className="h-4 w-4 sm:h-5 sm:w-5" />
+        <Icon color="hsl(var(--bc))" type="burger-menu" className="h-4 w-4 sm:h-5 sm:w-5" />
       </div>
       <ul tabIndex={0} class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
         <li>
@@ -40,12 +40,18 @@ const t = useTranslations(lang); // eslint-disable-line react-hooks/rules-of-hoo
     </div>
     <a
       href={`/${lang}/`}
-      class="btn-ghost btn btn-xs sm:btn-sm lg:btn-md text-primary-content text-sm normal-case sm:text-lg lg:text-xl"
+      class="btn-ghost btn btn-primary btn-xs sm:btn-sm lg:btn-md text-sm normal-case sm:text-lg lg:text-xl"
     >
       Taboo cards API
     </a>
   </div>
-  <div class="navbar-end w-3/4 flex gap-3 sm:gap-4 lg:gap-5 lg:pr-4">
+  <div class="navbar-end w-5/12 sm:w-3/4 flex gap-3 sm:gap-4 lg:gap-5 lg:pr-4">
+    <a
+      href={`/${lang}/play`}
+      class="btn btn-outline btn-secondary btn-xs sm:btn-sm lg:btn-md text-sm normal-case sm:text-lg lg:text-xl"
+    >
+      {t("header.play")}
+    </a>
     <ul class="menu menu-horizontal hidden gap-2 lg:flex">
       <li>
         <a href={`/${lang}/about`} class="prose prose-xl text-base-content font-medium">

diff --git a/frontend/src/components/playground/playground.component.tsx b/frontend/src/components/playground/playground.component.tsx
@@ -113,7 +113,7 @@ export const Playground: FunctionComponent<Props> = ({ lang, initialData }) => {
         </div>
         <button
           onClick={handleClick}
-          className="btn bg-base-300 join-item block rounded-lg border sm:hidden"
+          className="btn bg-base-300 join-item block border sm:hidden"
           style={{ borderColor: "hsl(var(--b3))" }}
         >
           Request
@@ -125,7 +125,7 @@ export const Playground: FunctionComponent<Props> = ({ lang, initialData }) => {
           <Font.P1 color="text-error-content">Error! Invalid URL.</Font.P1>
         </div>
       ) : (
-        <div className="mockup-code bg-base-300">
+        <div className="mockup-code">
           {response.split("\n").map((line, idx) => (
             <pre key={idx}>
               <code>{line}</code>

diff --git a/frontend/src/i18n/ui.ts b/frontend/src/i18n/ui.ts
@@ -7,6 +7,7 @@ export const defaultLang = "en";
 
 export const ui = {
   en: {
+    "header.play": "Play",
     "header.about": "About",
     "header.docs": "Docs",
     "header.playground": "Playground",
@@ -28,6 +29,7 @@ export const ui = {
     "playground.copy_to_clipboard": "Copy to clipboard",
   },
   pl: {
+    "header.play": "Graj",
     "header.about": "O nas",
     "header.docs": "Dokumentacja",
     "header.playground": "Plac zabaw",

diff --git a/frontend/src/layouts/DocsLayout.astro b/frontend/src/layouts/DocsLayout.astro
@@ -22,7 +22,7 @@ const lang = getLangFromUrl(Astro.url);
         if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
           return localStorage.getItem("theme");
         }
-        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "pastel";
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       })();
 
       document.documentElement.setAttribute("data-theme", theme);

diff --git a/frontend/src/layouts/GameLayout.astro b/frontend/src/layouts/GameLayout.astro
@@ -22,7 +22,7 @@ const lang = getLangFromUrl(Astro.url);
         if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
           return localStorage.getItem("theme");
         }
-        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "pastel";
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       })();
 
       document.documentElement.setAttribute("data-theme", theme);

diff --git a/frontend/src/pages/en/index.astro b/frontend/src/pages/en/index.astro
@@ -12,13 +12,10 @@ const cards = await getCards({ lang: "en" });
   <div class="gap-5 sm:gap-10 lg:gap-20 flex flex-col items-center">
     <section class="flex flex-col items-center gap-3 sm:gap-5 lg:gap-10">
       <Font.H1 color="text-base-content">First ever free taboo cards API</Font.H1>
-      <div class="indicator">
-        <span class="indicator-item indicator-center badge badge-secondary">Coming soon</span>
-        <a href="/en/play" class="btn btn-primary btn-wide btn-md sm:btn-lg">Play now</a>
-      </div>
+      <a href="/en/play" class="btn btn-primary btn-wide btn-md sm:btn-lg">Play</a>
     </section>
     <CardsCarousel cards={cards} />
-    <div class="stats stats-vertical xl:stats-horizontal shadow">
+    <div class="stats bg-base-200 stats-vertical xl:stats-horizontal shadow">
       <div class="stat gap-x-2 px-2 sm:gap-x-2 sm:px-6">
         <div class="stat-figure text-primary">
           <Icon type="language" color="hsl(var(--p))" className="inline-block w-6 sm:w-8" />

diff --git a/frontend/src/pages/pl/index.astro b/frontend/src/pages/pl/index.astro
@@ -12,10 +12,7 @@ const cards = await getCards({ lang: "pl" });
   <div class="gap-5 sm:gap-10 lg:gap-20 flex flex-col items-center">
     <section class="text-center flex flex-col items-center gap-3 sm:gap-5 lg:gap-10">
       <Font.H1 color="text-base-content">Pierwsze darmowe API do kart taboo</Font.H1>
-      <div class="indicator">
-        <span class="indicator-item indicator-center badge badge-secondary">Wkrótce</span>
-        <a href="/en/play" class="btn btn-primary btn-wide btn-md sm:btn-lg">Graj</a>
-      </div>
+      <a href="/en/play" class="btn btn-primary btn-wide btn-md sm:btn-lg">Graj</a>
     </section>
     <CardsCarousel cards={cards} />
     <div class="stats stats-vertical xl:stats-horizontal shadow">