From 2198e7a7f571d9029bc13619a910e38b7761eba1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Quentin=20Guid=C3=A9e?= <git@arra.red>
Date: Sat, 2 Mar 2024 11:38:10 -0500
Subject: [PATCH] feat: rework sider design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Quentin Guidée <git@arra.red>
---
 .../Sider/SiderCategory/index.module.css      | 17 ++++---
 .../components/Layout/Sider/index.module.css  |  5 ++-
 .../components/SiderSearch/index.module.css   | 45 ++++++++++---------
 apps/client/src/index.css                     |  2 +
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/apps/client/src/components/Layout/Sider/SiderCategory/index.module.css b/apps/client/src/components/Layout/Sider/SiderCategory/index.module.css
index 0149e34b..49be23d5 100644
--- a/apps/client/src/components/Layout/Sider/SiderCategory/index.module.css
+++ b/apps/client/src/components/Layout/Sider/SiderCategory/index.module.css
@@ -3,13 +3,16 @@
 }
 
 .categoryname {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
+  margin-left: 8px;
+  font-size: 0.9em;
+  opacity: 0.8;
 }
 
 .link {
   display: flex;
-  margin-bottom: 8px;
-  padding: 4px;
+  margin-bottom: 2px;
+  padding: 8px;
   color: white;
   text-decoration: none;
   border-radius: 6px;
@@ -26,15 +29,19 @@
 
 .linkcontent > :first-child {
   margin-right: 8px;
+  font-size: 1.25em;
 }
 
 .link > span {
   margin-right: 8px;
 }
 
+.link:has(.active) {
+    background-color: var(--secondary-dark);
+}
+
 .link:hover {
-  background: grey;
-  text-decoration: underline;
+  background-color: var(--secondary-dark-hover);
 }
 
 .active {
diff --git a/apps/client/src/components/Layout/Sider/index.module.css b/apps/client/src/components/Layout/Sider/index.module.css
index b4de25a9..7db56184 100644
--- a/apps/client/src/components/Layout/Sider/index.module.css
+++ b/apps/client/src/components/Layout/Sider/index.module.css
@@ -3,7 +3,7 @@
   overflow-y: scroll;
   background-color: black;
   color: white;
-  padding: 16px;
+  padding: 12px;
 }
 
 .root::-webkit-scrollbar {
@@ -16,7 +16,9 @@
 
 .title {
   display: block;
+  margin-top: 8px;
   margin-bottom: 32px;
+  margin-left: 8px;
   color: white;
 }
 
@@ -26,6 +28,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 8px;
+  margin-left: 8px;
 }
 
 .version {
diff --git a/apps/client/src/components/SiderSearch/index.module.css b/apps/client/src/components/SiderSearch/index.module.css
index 1b8d81f8..bc1e7505 100644
--- a/apps/client/src/components/SiderSearch/index.module.css
+++ b/apps/client/src/components/SiderSearch/index.module.css
@@ -2,14 +2,18 @@
   border: none;
   font-size: unset;
   outline: none;
-  background: white;
+  background-color: var(--secondary-dark);
+  color: white;
   border-radius: var(--radius);
   padding: 8px;
-  transition: all 250ms;
   margin-bottom: 32px;
   width: 100%;
 }
 
+.input:hover {
+  background-color: var(--secondary-dark-hover);
+}
+
 .popper {
   z-index: 10000;
 }
@@ -17,26 +21,28 @@
 .alert {
   display: block;
   text-align: center;
-  padding: 16px 0px;
+  padding: 16px 0;
 }
 
 .results {
-  padding: 8px;
-  padding-top: 16px;
+  margin-top: 4px;
+  padding: 4px;
   max-height: 50vh;
+  overflow-x: hidden;
   overflow-y: scroll;
   border-radius: var(--radius) !important;
-  overflow: auto;
 }
 
 .result {
   padding: 8px;
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
+  text-align: left;
   color: inherit;
   text-decoration: none;
   width: 100%;
+  border-radius: var(--radius);
 }
 
 .result:hover {
@@ -52,27 +58,22 @@
 
 .section {
   position: relative;
-  text-align: center;
+  text-align: left;
   font-weight: bold;
-  margin-bottom: 16px;
+  padding: 8px;
 }
 
-.section::before {
-  content: "";
-  position: absolute;
-  left: 0px;
-  top: 50%;
-  width: 40px;
-  height: 1px;
-  background-color: var(--primary);
+.section:not(:first-child) {
+  margin-top: 16px;
+  padding-top: 12px;
 }
 
-.section::after {
+.section:not(:first-child)::before {
   content: "";
+  background: var(--divider);
   position: absolute;
-  right: 0px;
-  top: 50%;
-  width: 40px;
+  top: 0;
+  left: -8px;
+  right: -8px;
   height: 1px;
-  background-color: var(--primary);
 }
diff --git a/apps/client/src/index.css b/apps/client/src/index.css
index 2db4c039..a9ba9455 100644
--- a/apps/client/src/index.css
+++ b/apps/client/src/index.css
@@ -37,6 +37,8 @@ h6 {
   --page-padding: 0 16px 16px 16px;
   --accent: #FB717B;
   --header-image-size: 60px;
+  --secondary-dark: rgba(255, 255, 255, 0.15);
+  --secondary-dark-hover: rgba(255, 255, 255, 0.25);
 }
 
 .dark-vars {