From 5ecdcefb4a373321640e15ad4a3a498c76d5af5d Mon Sep 17 00:00:00 2001
From: Hadeed Ahmad <hadeedji@gmail.com>
Date: Sat, 1 Jun 2024 09:14:51 +0400
Subject: [PATCH] Make responsive

---
 src/mainMenu.jsx   | 99 +++++++++++++++++++++++-----------------------
 tailwind.config.js |  2 +-
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/src/mainMenu.jsx b/src/mainMenu.jsx
index d9684d2..470b79d 100644
--- a/src/mainMenu.jsx
+++ b/src/mainMenu.jsx
@@ -7,63 +7,64 @@ export default () => {
   const [playerSymbol, setPlayerSymbol] = useState("cross");
 
   return (
-    <div className="flex w-[460px] flex-col items-center space-y-[40px]">
+    <div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
       <img src={logo} alt="logo" />
-      <div className="bg-navy-400 flex w-full flex-col items-center justify-center space-y-[24px] rounded-[15px] p-[24px] drop-shadow-[0_8px_0_#10212A]">
-        <h2 className="text-silver-700 text-h-xs uppercase">
+      <div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 drop-shadow-[0_8px_0_#10212A]">
+        <h2 className="mb-6 text-h-xs uppercase text-silver-700">
           Pick player 1's mark
         </h2>
-        <div className="flex w-full flex-col items-center justify-center space-y-[17px]">
-          <RadioGroup.Root
-            className="bg-navy-700 flex h-[72px] w-full items-center justify-between rounded-[10px] p-[8px]"
-            defaultValue="cross"
-            value={playerSymbol}
-            onValueChange={setPlayerSymbol}
+        <RadioGroup.Root
+          className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
+          defaultValue="cross"
+          value={playerSymbol}
+          onValueChange={setPlayerSymbol}
+          loop={false}
+        >
+          <RadioGroup.Item
+            className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
+            value="cross"
           >
-            <RadioGroup.Item
-              className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]"
-              value="cross"
+            <svg
+              className="m-auto"
+              width="32"
+              height="32"
+              viewBox="0 0 64 64"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                width="32"
-                height="32"
-                viewBox="0 0 64 64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z"
-                  fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"}
-                />
-              </svg>
-            </RadioGroup.Item>
-            <RadioGroup.Item
-              className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]"
-              value="oval"
+              <path
+                d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z"
+                fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"}
+              />
+            </svg>
+          </RadioGroup.Item>
+          <RadioGroup.Item
+            className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
+            value="oval"
+          >
+            <svg
+              className="m-auto"
+              width="32"
+              height="32"
+              viewBox="0 0 64 64"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                width="32"
-                height="32"
-                viewBox="0 0 64 64"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z"
-                  fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"}
-                />
-              </svg>
-            </RadioGroup.Item>
-          </RadioGroup.Root>
-          <p className="text-silver-700 text-base uppercase">
-            Remember : X goes first
-          </p>
-        </div>
+              <path
+                d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z"
+                fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"}
+              />
+            </svg>
+          </RadioGroup.Item>
+        </RadioGroup.Root>
+        <p className="text-base uppercase text-silver-700">
+          Remember : X goes first
+        </p>
       </div>
-      <div className="flex w-full flex-col items-center justify-between space-y-[20px]">
-        <button className="flex w-full items-center justify-center rounded-[15px] bg-yellow-700 p-[17px] drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
-          <p className="text-h-s text-navy-700 uppercase">New game (vs cpu)</p>
+      <div className="w-full space-y-5">
+        <button className="flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
+          <p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
         </button>
-        <button className="flex w-full items-center justify-center rounded-[15px] bg-blue-700 p-[17px] drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
-          <p className="text-h-s text-navy-700 uppercase">
+        <button className="flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
+          <p className="text-h-s uppercase text-navy-700">
             New game (vs player)
           </p>
         </button>
diff --git a/tailwind.config.js b/tailwind.config.js
index aa568e2..a6969cd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,7 @@ export default {
       "yellow-400": "#FFC860",
     },
     fontFamily: {
-      sans: ["Outfit"],
+      sans: ["Outfit", "sans-serif"],
     },
     fontSize: {
       base: [