Chore: improved config list style

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">

src/routes/config/index.tsx

@@ -1,8 +1,4 @@
-import {
+import { faPlusCircle, faWrench } from "@fortawesome/pro-regular-svg-icons";
-  faBadgeCheck,
-  faCircleExclamation,
-  faPlus,
-} from "@fortawesome/pro-regular-svg-icons";
 import { useLocation, useNavigate } from "@solidjs/router";
 import createClient from "openapi-fetch";
 import { For, createResource } from "solid-js";
@@ -91,22 +87,40 @@ 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 class="group">
+        <h3>Configure li&apos;l Judd in</h3>
         <div>
           <For each={payload()?.guilds}>
-          {(guild, i) => {
+            {(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={
+                  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}`}
-                  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
@@ -119,17 +133,13 @@ function index() {
                     alt="Server pfp"
                   />
                   <h1>{guild.name}</h1>
-                <FontAwesomeIcon
+                  <FontAwesomeIcon icon={faPlusCircle} size="xl" />
-                  // beat={i() % 3 === 1}
-                  color={colors[i() % 3]}
-                  icon={icons[i() % 3]}
-                  size="xl"
-                />
                 </a>
               );
             }}
           </For>
         </div>
+      </div>
     </Layout>
   );
 }

src/styles/pages/config.scss

@@ -1,5 +1,8 @@
 .config {
-  .text-center {
+  .group {
+    margin: 5rem;
+
+    h3 {
       text-align: center;
     }
 
@@ -15,12 +18,40 @@
 
     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%;
+
+      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 {
@@ -31,4 +62,5 @@
         opacity: 0.5;
       }
     }
+  }
 }