From 23d2d44c04c050be970c217e0392995c7700712d Mon Sep 17 00:00:00 2001
From: Corban-Lee Jones <corbz.jones@gmail.com>
Date: Mon, 30 Sep 2024 13:12:00 +0100
Subject: [PATCH] cleaner servertabs look & remove unused css

---
 apps/home/static/home/css/index.css | 29 ++++++++++-------------------
 apps/home/templates/home/index.html | 24 ++++++++++++++++++------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/apps/home/static/home/css/index.css b/apps/home/static/home/css/index.css
index 324ceef..a6ef60e 100644
--- a/apps/home/static/home/css/index.css
+++ b/apps/home/static/home/css/index.css
@@ -13,22 +13,6 @@
 .bump {
     animation: bump .2s ease-out;
 }
-/* 
-.server-item.active img {
-    border-radius: .75rem !important;
-}
-
-.server-item-selector:hover img, .server-item-selector:focus img, .server-item-selector:focus-visible img {
-    border-radius: .75rem !important;
-}
-
-.server-item-selector:active, .server-item-selector:focus, .server-item-selector:focus-visible {
-    animation: bump .2s ease-out;
-}
-
-.server-item-selector img { 
-    transition: border-radius .15s ease-in;
-} */
 
 .server-sidebar {
   width: 16rem;
@@ -96,11 +80,18 @@
   max-width: 3.5rem;
 }
 
-#serverTabs .nav-link {
-  border-radius: 0;
+
+/* Server Tabs */
+
+#serverTabs .nav-item:not(:last-child) {
+  margin-right: 1rem;
 }
 
-#serverTabs .nav-link:not(.active) {
+#serverTabs .nav-item .nav-link:hover:not(.active) {
+  background-color: var(--bs-secondary-bg);
+}
+
+#serverTabs .nav-item .nav-link:not(.active) {
   color: var(--bs-text-body);
 }
 
diff --git a/apps/home/templates/home/index.html b/apps/home/templates/home/index.html
index fb9738e..0e9ff2d 100644
--- a/apps/home/templates/home/index.html
+++ b/apps/home/templates/home/index.html
@@ -124,32 +124,44 @@
                     </div>
                 </div>
 
-                <div class="col-12">
-                    <ul id="serverTabs" class="nav py-3 text-start" role="tablist">
+                <div class="col-12 bg-body-tertiary">
+                    <ul id="serverTabs" class="nav nav-pills py-3 text-start px-sm-3" role="tablist">
                         <li class="nav-item" role="presentation">
-                            <button id="subscriptionsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">
+                            <button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">
                                 <i class="bi bi-layers me-2"></i>
                                 Subscriptions
                             </button>
                         </li>
                         <li class="nav-item" role="presentation">
-                            <button id="filtersTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">
+                            <button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">
                                 <i class="bi bi-funnel me-2"></i>
                                 Content Filters
                             </button>
                         </li>
                         <li class="nav-item" role="presentation">
-                            <button id="contentTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">
+                            <button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">
                                 <i class="bi bi-archive me-2"></i>
                                 Tracked Content
                             </button>
                         </li>
                         <li class="nav-item" role="presentation">
-                            <button id="stylesTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#stylesTabPane" type="button" aria-controls="stylesTabPane" aria-selected="false">
+                            <button id="stylesTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#stylesTabPane" type="button" aria-controls="stylesTabPane" aria-selected="false">
                                 <i class="bi bi-border-style me-2"></i>
                                 Message Styles
                             </button>
                         </li>
+                        <li class="nav-item ms-auto">
+                            <div class="dropdown">
+                                <button class="nav-link rounded-1 dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                                    <i class="bi bi-gear"></i>
+                                </button>
+                                <ul class="dropdown-menu">
+                                    <li>
+                                        <button type="button" class="dropdown-item">-- todo --</button>
+                                    </li>
+                                </ul>
+                            </div>
+                        </li>
                     </ul>
                 </div>