Better Lobby

leaky-ships/components/Lobby/SettingsFrame/Setting.tsx

@@ -15,25 +15,20 @@ function Setting({
   }
 }) {
   return (
-    <>
-      <label
-        htmlFor={key}
-        className="col-span-2 my-4 select-none text-8xl text-white drop-shadow-md"
-      >
+    <label className="flex items-center justify-between" htmlFor={key}>
+      <span className="col-span-2 w-96 select-none text-5xl text-white drop-shadow-md">
         {key}
-      </label>
-      <label
-        htmlFor={key}
-        className={state ? "rounded-full bg-gray-300 px-2 transition-all" : ""}
-      >
-        <FontAwesomeIcon
-          className={classNames(
-            "w-24 drop-shadow-md",
-            state ? "text-blue-500" : "text-gray-700"
-          )}
-          icon={state ? faToggleLargeOn : faToggleLargeOff}
-        />
-      </label>
+      </span>
+      <FontAwesomeIcon
+        className={classNames(
+          "text-md mx-auto w-24 rounded-full px-4 drop-shadow-md transition-all",
+          state ? "text-blue-500" : "text-gray-800",
+          {
+            "bg-gray-300 ": state,
+          }
+        )}
+        icon={state ? faToggleLargeOn : faToggleLargeOff}
+      />
       <input
         className="bg-none"
         checked={state}
@@ -42,7 +37,7 @@ function Setting({
         onChange={onClick}
         hidden={true}
       />
-    </>
+    </label>
   )
 }