Merge pull request #360 from quentinguidee/feat/rework-sider

feat: rework sider design
Yooooomi · Mar 10, 2024 · e6ad0bc · e6ad0bc
2 parents ca773fd + 2198e7a
commit e6ad0bc
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 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
@@ -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
@@ -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
@@ -2,41 +2,47 @@
   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;
 }
 
 .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
@@ -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 {