From 712affc83d6fa7ab1765e17edb2a0bab2056d4ca Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Sat, 6 Jan 2024 03:30:33 +0100
Subject: [PATCH] feat: added styling to config page

---
 src/routes/config.tsx        | 130 ++++++++++++++---------------------
 src/styles/pages/config.scss |  38 ++++++++++
 2 files changed, 89 insertions(+), 79 deletions(-)
 create mode 100644 src/styles/pages/config.scss

diff --git a/src/routes/config.tsx b/src/routes/config.tsx
index 95ffb6b..de20950 100644
--- a/src/routes/config.tsx
+++ b/src/routes/config.tsx
@@ -1,85 +1,57 @@
-function config() {
-  return (
-    <>
-      <h1>Configure li&apos;l Judd</h1>
+import "../styles/pages/config.scss";
 
-      <div>
+function config() {
+    return (
         <div>
-          <img src="" alt="Server pfp" />
-          <label>
-            <select>
-              <option value="">--Please choose a server--</option>
-              <option value="server id">Server 1</option>
-              <option value="server id">Server 2</option>
-              <option value="server id">Server 3</option>
-              <option value="server id">Server 4</option>
-              <option value="server id">Server 5</option>
-            </select>
-          </label>
+            <h3 class={"centered"}>Configure li&apos;l Judd in</h3>
+            <div class={"config"}>
+                <div>
+                    <div class={"horizontal centered"}>
+                        <img class={"guildpfp"} src="https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240" alt="Server pfp" />
+                        <h1>li'l Judds home base</h1>
+                    </div>
+                </div>
+
+                <article>
+                    <h2>Timezone</h2>
+                    <p>Set the timezone for your server.</p>
+                    <label>
+                        <select>
+                            <option value="-1">UTC-1:00</option>
+                            <option value="0">UTC+0:00</option>
+                            <option value="1">UTC+1:00</option>
+                        </select>
+                    </label>
+                </article>
+                <section>
+                    <div class={"centered"}>
+                        <h2>Features</h2>
+                        <p>Configure the features of the bot</p>
+                    </div>
+                    <article>
+                        <div class={"horizontal"}>
+                            <h3>Time Planning</h3>
+                            <input type="checkbox" id="time planning" />
+                        </div>
+                        <label class={"horizontal"}>
+                            <p class={"marg_right_5px"}>Target channel:</p>
+                            <select>
+                                <option value="id">Channel 1</option>
+                                <option value="id">Channel 2</option>
+                                <option value="id">Channel 3</option>
+                                <option value="id">Channel 4</option>
+                            </select>
+                        </label>
+                        <div class={"horizontal"}>
+                            <h4>Enable pingable Roles</h4>
+                            <input type="checkbox" id="pingableroles" />
+                        </div>
+                    </article>
+                </section>
+                <button>Apply</button>
+            </div>
         </div>
-        <article>
-          <h2>Timezone</h2>
-          <p>Set the timezone for your server.</p>
-          <label>
-            <select>
-              <option value="-11">UTC-11:00</option>
-              <option value="-10">UTC-10:00</option>
-              <option value="-9">UTC-09:00</option>
-              <option value="-8">UTC-08:00</option>
-              <option value="-7">UTC-07:00</option>
-              <option value="-6">UTC-06:00</option>
-              <option value="-5">UTC-05:00</option>
-              <option value="-4">UTC-04:00</option>
-              <option value="-3">UTC-03:00</option>
-              <option value="-2">UTC-02:00</option>
-              <option value="-1">UTC-01:00</option>
-              <option value="0">UTC+00:00</option>
-              <option value="1">UTC+01:00</option>
-              <option value="2">UTC+02:00</option>
-              <option value="3">UTC+03:00</option>
-              <option value="4">UTC+04:00</option>
-              <option value="5">UTC+05:00</option>
-              <option value="6">UTC+06:00</option>
-              <option value="7">UTC+07:00</option>
-              <option value="8">UTC+08:00</option>
-              <option value="9">UTC+09:00</option>
-              <option value="10">UTC+10:00</option>
-              <option value="11">UTC+11:00</option>
-              <option value="12">UTC+12:00</option>
-            </select>
-          </label>
-        </article>
-        <section>
-          <h2>Features</h2>
-          <p>Configure the features of the bot</p>
-          <article>
-            <h3>Time Planning</h3>
-            <input type="checkbox" id="timeplanning" />
-            <p>Make the bot send a planner into a channel</p>
-            <p>Select </p>
-            <label>
-              <select>
-                <option value="id">Channel 1</option>
-                <option value="id">Channel 2</option>
-                <option value="id">Channel 3</option>
-                <option value="id">Channel 4</option>
-              </select>
-            </label>
-          </article>
-          <article>
-            <h3>Planning Roles</h3>
-            <input type="checkbox" id="planningroles" />
-            <p>Add roles to the "Time Planning" feature.</p>
-            <p>
-              This feature is bound to the "Time Planning" feature. It will be
-              activated in the same channel.
-            </p>
-          </article>
-        </section>
-        <button>Apply</button>
-      </div>
-    </>
-  );
+    );
 }
 
 export default config;
diff --git a/src/styles/pages/config.scss b/src/styles/pages/config.scss
new file mode 100644
index 0000000..0b03502
--- /dev/null
+++ b/src/styles/pages/config.scss
@@ -0,0 +1,38 @@
+.guildpfp {
+  width: 50px;
+  height: 50px;
+  border-radius: 100%;
+}
+
+.horizontal {
+  display: flex;
+  flex-direction: row;
+  h1 {
+    margin-left: 10px;
+  }
+  p, h3, h4 {
+    margin-right: 10px;
+  }
+}
+
+.marg_right_5px {
+  margin-right: 10px;
+}
+
+.centered {
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.config {
+  article {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    padding: 1rem;
+    max-width: 1100px;
+    margin: 1rem auto;
+    width: 100%;
+
+  }
+}