restore css

Author: paulb777

ai/ai-react-app/src/components/Layout/LeftSidebar.module.css

@@ -1,93 +1,114 @@
 .sidebar {
-  background-color: var(--color-surface-secondary);
-  padding: 1rem;
+  background-color: var(--color-surface-primary);
+  padding: 24px 0;
   height: 100%;
   border-right: 1px solid var(--color-border-primary);
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 16px;
 }
 
 .sidebar ul {
   list-style: none;
-  padding: 0;
+  padding: 0 12px;
   margin: 0;
 }
 
+.sidebar li {
+  margin-bottom: 4px;
+}
+
 .navButton {
   background-color: transparent;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 0.375rem;
-  padding: 0.75rem 1rem;
-  width: 100%;
+  border: none;
+  color: var(--color-text-secondary);
+  padding: 8px 12px;
   text-align: left;
+  width: 100%;
   cursor: pointer;
-  font-size: 1rem;
-  color: var(--color-text-primary);
+  border-radius: 4px;
+  font-size: 0.875rem;
   transition:
-    background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out;
+    background-color 0.15s ease,
+    color 0.15s ease;
+  font-weight: 500;
 }
 
 .navButton:hover {
   background-color: var(--color-surface-tertiary);
+  color: var(--color-text-primary);
 }
 
 .navButton.active {
-  background-color: var(--color-surface-interactive);
-  color: var(--color-text-on-interactive);
-  border-color: var(--color-surface-interactive);
+  background-color: var(--color-surface-tertiary);
+  color: var(--color-text-accent);
+  font-weight: 500;
 }
 
 .navButton.active:hover {
-  background-color: var(--color-surface-interactive-hover);
-  border-color: var(--color-surface-interactive-hover);
+  background-color: var(--brand-gray-40);
 }
 
-
 .backendSelector,
 .personaSelector {
+  margin-top: 24px;
+  padding: 0 12px;
   border-top: 1px solid var(--color-border-primary);
-  padding-top: 1rem;
+  padding-top: 16px;
 }
 
 .selectorTitle {
-  font-size: 0.875rem;
-  font-weight: 600;
   color: var(--color-text-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin: 0 0 8px 0;
   text-transform: uppercase;
-  margin-bottom: 0.75rem;
+  letter-spacing: 0.5px;
 }
 
 .radioGroup {
-  margin-bottom: 0.5rem;
+  margin-bottom: 6px;
 }
 
 .radioGroup label {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  font-size: 0.95rem;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
   cursor: pointer;
 }
 
+.radioGroup input[type="radio"] {
+  margin-right: 8px;
+  accent-color: var(--brand-google-blue);
+}
+
 .personaDropdown {
   width: 100%;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--color-border-secondary);
-  font-size: 0.9rem;
+  padding: 8px 12px;
   background-color: var(--color-surface-primary);
+  border: 1px solid var(--color-border-secondary);
+  color: var(--color-text-primary);
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 0.875rem;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
 }
 
 .customPersonaTextarea {
   width: 100%;
-  margin-top: 0.5rem;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--color-border-secondary);
-  font-size: 0.9rem;
-  resize: vertical;
+  margin-top: 8px;
+  padding: 8px 12px;
   background-color: var(--color-surface-primary);
+  border: 1px solid var(--color-border-secondary);
   color: var(--color-text-primary);
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 0.875rem;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+  resize: vertical;
 }