Selected Server Animation

apps/static/css/index.css

@@ -265,3 +265,9 @@ body {
     -moz-animation: spinning-360-anim 1s ease-in-out infinite;
     -webkit-animation: spinning-360-anim 1s ease-in-out infinite;  
 }
+
+/* Server List */
+
+#serverList .server-item img { 
+    transition: border-radius .15s ease-in;
+}

apps/static/js/home.js

@@ -166,15 +166,13 @@ async function registerNewServer(serverName, serverGuildId, serverIconHash) {
 }
 
 function selectServer(primaryKey) {
-
     var server = loadedServers[primaryKey];
+    
+    // Change shape of selected vs none-selected items
+    $("#serverList .server-item button img").removeClass("rounded-3").addClass("rounded-circle");
+    $(`#serverList .server-item[data-id=${primaryKey}] button img`).removeClass("rounded-circle").addClass("rounded-3");
 
-    // var sideElem = $("")
-    //     name = sideElem.attr("data-name");
-    //     guildId = sideElem.attr("data-guild-id");
-    //     icon = sideElem.attr("data-icon");
-    //     primaryKey = sideElem.attr("data-id");
-
+    // Display details of the selected server
     $("#selectedServerContainer .selected-server-name").text(server.name);
     $("#selectedServerContainer .selected-server-id").text(server.guild_id);
     $("#selectedServerContainer .selected-server-icon").attr("src", `https://cdn.discordapp.com/icons/${server.guild_id}/${server.icon}.webp?size=80`);

apps/templates/home/index.html

@@ -80,8 +80,8 @@
 
 <script id="serverItemTemplate" type="text/template">
     <div class="server-item layer mb-2" data-id="" data-guild-id="" data-name="" data-icon="">
-        <button type="button" class="rounded-3 p-1 bg-body bd">
-            <img src="" class="rounded-3" alt="" width="50" height="50">
+        <button type="button" class="bg-none border-0">
+            <img src="" class="rounded-circle" alt="" width="50" height="50">
         </button>
     </div>
 </script>