From 76163c96d3efb4a921d89550bf565029f4bfee84 Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <tuckerj0606@icloud.com>
Date: Wed, 27 Dec 2023 03:31:32 -0700
Subject: [PATCH] Fixup settings for mobile and niceness

---
 src/pages/Settings/Customization.tsx | 2 +-
 src/pages/Settings/Misc.tsx          | 2 +-
 src/pages/Settings/TabSettings.tsx   | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx
index 6674aef..3db78aa 100644
--- a/src/pages/Settings/Customization.tsx
+++ b/src/pages/Settings/Customization.tsx
@@ -10,7 +10,7 @@ const Customization = ({ id, active }) => (
     animate={active ? "active" : "inactive"}
     initial="inactive"
   >
-    <motion.div variants={settingsPageVariant} className="content-card">
+    <motion.div variants={settingsPageVariant} className="content-card text-center w-full flex flex-col justify-center items-center">
       <img src="/comingsoonsnake.png" class="h-72 w-72"></img>
       <h1 class="font-roboto text-3xl">Coming soon!</h1>
     </motion.div>
diff --git a/src/pages/Settings/Misc.tsx b/src/pages/Settings/Misc.tsx
index 84412de..a8b461f 100644
--- a/src/pages/Settings/Misc.tsx
+++ b/src/pages/Settings/Misc.tsx
@@ -23,7 +23,7 @@ const Misc = ({ id, active }) => {
     >
       <motion.div
         variants={settingsPageVariant}
-        className="content-card flex flex-row flex-wrap justify-around"
+        className="content-card flex flex-row flex-wrap justify-center w-full gap-4"
       >
         <div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
           <div class="text-3xl">{t("settings.languages.title")}</div>
diff --git a/src/pages/Settings/TabSettings.tsx b/src/pages/Settings/TabSettings.tsx
index 9d1bddb..dd0e23e 100644
--- a/src/pages/Settings/TabSettings.tsx
+++ b/src/pages/Settings/TabSettings.tsx
@@ -10,8 +10,8 @@ const TabSettings = ({ id, active }) => (
     animate={active ? "active" : "inactive"}
     initial="inactive"
   >
-    <motion.div variants={settingsPageVariant} className="content-card">
-      <img src="/comingsoonsnake.png" class="h-72"></img>
+    <motion.div variants={settingsPageVariant} className="content-card text-center w-full flex flex-col justify-center items-center">
+      <img src="/comingsoonsnake.png" class="h-72 w-72"></img>
       <h1 class="font-roboto text-3xl">Coming soon!</h1>
     </motion.div>
   </motion.div>