From faa42f08995f1e63ba5b7b32afd391c1a9babbe8 Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Mon, 11 Mar 2024 19:04:26 +0100
Subject: [PATCH] Chore: improved config list style

---
 src/routes/config/[guildId].tsx |  2 +-
 src/routes/config/index.tsx     | 92 ++++++++++++++++++---------------
 src/styles/pages/config.scss    | 82 ++++++++++++++++++++---------
 3 files changed, 109 insertions(+), 67 deletions(-)

diff --git a/src/routes/config/[guildId].tsx b/src/routes/config/[guildId].tsx
index a731964..cc91422 100644
--- a/src/routes/config/[guildId].tsx
+++ b/src/routes/config/[guildId].tsx
@@ -191,7 +191,7 @@ function config() {
 
   return (
     <Layout site="config">
-      <h3 class="text-center">Configure li&apos;l Judd in</h3>
+      <h3>Configure li&apos;l Judd in</h3>
       <div>
         <div>
           <div class="flex-row centered">
diff --git a/src/routes/config/index.tsx b/src/routes/config/index.tsx
index 0c6a405..e5630cc 100644
--- a/src/routes/config/index.tsx
+++ b/src/routes/config/index.tsx
@@ -1,8 +1,4 @@
-import {
-  faBadgeCheck,
-  faCircleExclamation,
-  faPlus,
-} from "@fortawesome/pro-regular-svg-icons";
+import { faPlusCircle, faWrench } from "@fortawesome/pro-regular-svg-icons";
 import { useLocation, useNavigate } from "@solidjs/router";
 import createClient from "openapi-fetch";
 import { For, createResource } from "solid-js";
@@ -91,44 +87,58 @@ function index() {
     { deferStream: true },
   );
 
-  const icons = [faPlus, faCircleExclamation, faBadgeCheck];
-  const colors = [undefined, "orange", "green"];
-
   return (
     <Layout site="config">
-      <h3 class="text-center">Configure li&apos;l Judd in</h3>
-      <div>
-        <For each={payload()?.guilds}>
-          {(guild, i) => {
-            return (
-              <a
-                href={
-                  i() % 3 === 0
-                    ? `/config/${guild.id}`
-                    : `https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_OAUTH2_PERMISSIONS}&scope=bot&guild_id=${guild.id}`
-                }
-                class="flex-row centered"
-              >
-                <img
-                  class="guildpfp"
-                  src={
-                    guild.icon
-                      ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
-                      : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
-                  }
-                  alt="Server pfp"
-                />
-                <h1>{guild.name}</h1>
-                <FontAwesomeIcon
-                  // beat={i() % 3 === 1}
-                  color={colors[i() % 3]}
-                  icon={icons[i() % 3]}
-                  size="xl"
-                />
-              </a>
-            );
-          }}
-        </For>
+      <div class="group">
+        <h3>Configure li&apos;l Judd in</h3>
+        <div>
+          <For each={payload()?.guilds}>
+            {(guild) => {
+              return (
+                <a href={`/config/${guild.id}`} class="flex-row centered">
+                  <img
+                    class="guildpfp"
+                    src={
+                      guild.icon
+                        ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
+                        : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
+                    }
+                    alt="Server pfp"
+                  />
+                  <h1>{guild.name}</h1>
+                  <FontAwesomeIcon icon={faWrench} size="xl" />
+                </a>
+              );
+            }}
+          </For>
+        </div>
+      </div>
+      <div class="group">
+        <h3>Add li&apos;l Judd to</h3>
+        <div>
+          <For each={payload()?.guilds}>
+            {(guild) => {
+              return (
+                <a
+                  href={`https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_OAUTH2_PERMISSIONS}&scope=bot&guild_id=${guild.id}`}
+                  class="flex-row centered"
+                >
+                  <img
+                    class="guildpfp"
+                    src={
+                      guild.icon
+                        ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
+                        : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
+                    }
+                    alt="Server pfp"
+                  />
+                  <h1>{guild.name}</h1>
+                  <FontAwesomeIcon icon={faPlusCircle} size="xl" />
+                </a>
+              );
+            }}
+          </For>
+        </div>
       </div>
     </Layout>
   );
diff --git a/src/styles/pages/config.scss b/src/styles/pages/config.scss
index 4b8b5cd..a3a5fc5 100644
--- a/src/styles/pages/config.scss
+++ b/src/styles/pages/config.scss
@@ -1,34 +1,66 @@
 .config {
-  .text-center {
-    text-align: center;
-  }
+  .group {
+    margin: 5rem;
 
-  .guildpfp {
-    width: 50px;
-    height: 50px;
-    border-radius: 100%;
-  }
+    h3 {
+      text-align: center;
+    }
 
-  label {
-    margin-right: 10px;
-  }
+    .guildpfp {
+      width: 50px;
+      height: 50px;
+      border-radius: 100%;
+    }
 
-  section,
-  a {
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 4px;
-    padding: 1rem;
-    max-width: 1100px;
-    margin: 1rem auto;
-    width: 100%;
-  }
+    label {
+      margin-right: 10px;
+    }
 
-  .sub {
-    margin-left: 10px;
+    section,
+    a {
+      transition: 0.3s;
+      transition-timing-function: ease-out;
+      background-color: rgba(0, 0, 0, 0.5);
+      border: 2px solid transparent;
+      border-radius: 4px;
+      padding: 1rem;
+      max-width: 1100px;
+      margin: 1rem auto;
+      width: 100%;
 
-    &.disabled {
-      pointer-events: none;
-      opacity: 0.5;
+      svg {
+        padding: 0 1rem;
+
+        path {
+          transition: 0.1s;
+          transform: translateX(100%);
+          opacity: 0;
+        }
+      }
+
+      &:hover {
+        transition: 1s;
+        transition-delay: 0.1s;
+        background-color: rgba(0, 0, 0, 0.4);
+        border: 2px solid rgba(255, 255, 255, 0.5);
+
+        svg path {
+          transition: 0.5s;
+          transition-delay: 0.1s;
+          transition-timing-function: ease-out;
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
+    }
+
+    .sub {
+      margin-left: 10px;
+
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.5;
+      }
     }
   }
 }