refactor: Update dropdown items to include active state, enhance List and DropDownList components, and improve sidebar styles for better layout and accessibility

app/src/styles/components/lists.scss

@@ -34,9 +34,8 @@
     padding: 12px;
   }
 
-  .list-container {
+  li.list-container {
     padding: 2px;
-    // margin-left: 10px;
     overflow: hidden;
 
     .list-item {
@@ -45,11 +44,13 @@
       text-align: center;
       padding: 4px 8px;
       border-radius: #{$border-radius-large};
-
-      .value {
-        width: 100%;
-        text-align: start;
-        max-width: 180px;
+      .zone-header{
+        @include flex-center;
+        .value {
+          width: 100%;
+          text-align: start;
+          max-width: 180px;
+        }
       }
 
       .options-container {
@@ -61,11 +62,18 @@
           cursor: pointer;
         }
       }
+      &:first-child{
+        background: var(--highlight-accent-color);
+        .input-value{
+          color: var(--highlight-text-color);
+        }
+      }
     }
-
     .active {
       background: var(--highlight-accent-color);
-      color: var(--primary-color);
+      .input-value{
+        color: var(--highlight-text-color);
+      }
     }
   }