Refine UI styling for toggler, settings lists, and section components with consistent spacing and visual updates

Author: robertpiosik

packages/ui/src/components/editor/common/Toggler/Toggler.module.scss

@@ -19,15 +19,14 @@
   right: 0;
   bottom: 0;
   background-color: var(--cwc-bg-primary);
-  border: 1px solid var(--cwc-border-color);
   transition: var(--transition-duration-250);
-  border-radius: 20px;
+  border-radius: 10px;
 
   &::before {
     position: absolute;
     content: '';
-    height: 12px;
-    width: 12px;
+    height: 14px;
+    width: 14px;
     left: 3px;
     bottom: 3px;
     background-color: white;
@@ -39,7 +38,6 @@
 
 input:checked + .slider {
   background-color: var(--vscode-button-background);
-  border-color: transparent;
 }
 
 input:checked + .slider:before {

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.module.scss

@@ -1,40 +1,43 @@
 .container {
   display: flex;
   flex-direction: column;
+  --row-height: 40px;
 }
 
 .header {
   display: flex;
-  padding: 12px 12px 12px 16px;
+  padding: 0 12px 0 16px;
   align-items: center;
   justify-content: space-between;
+  height: var(--row-height);
 
   &__left {
     display: flex;
     align-items: center;
     gap: 5px;
 
     &__amount {
-      font-weight: 600;
+      font-weight: 500;
     }
   }
 }
 
 .list {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  border-top: 1px solid var(--cwc-bg-secondary);
+  border-bottom: 1px solid var(--cwc-bg-secondary);
 }
 
 .row {
   display: flex;
   align-items: center;
-  height: 40px;
+  height: var(--row-height);
   gap: 12px;
   padding: 0 12px;
   user-select: text;
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background-color: var(--cwc-bg-tertiary);
   }
 
@@ -58,7 +61,7 @@
 
 .drag-handle {
   cursor: grab;
-  opacity: 0.5;
+  opacity: var(--drag-handle-opacity);
 
   &:active {
     cursor: grabbing;

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.tsx

@@ -126,7 +126,6 @@ export const ConfigurationsList: React.FC<ConfigurationsList.Props> = (
                 }
               }}
               tag="div"
-              handle={`.${styles['drag-handle']}`}
               animation={150}
             >
               {props.configurations.map((item, index) =>

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.module.scss

@@ -1,34 +1,37 @@
 .container {
   display: flex;
   flex-direction: column;
+  --row-height: 40px;
 }
 
 .header {
   display: flex;
-  padding: 12px 12px 12px 16px;
+  padding: 0 12px 0 16px;
+  height: var(--row-height);
   align-items: center;
   justify-content: space-between;
 
   &__amount {
-    font-weight: 600;
+    font-weight: 500;
   }
 }
 
 .list {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  border-top: 1px solid var(--cwc-bg-secondary);
+  border-bottom: 1px solid var(--cwc-bg-secondary);
 }
 
 .row {
   display: flex;
   align-items: center;
-  height: 40px;
+  height: var(--row-height);
   padding: 0 12px;
   gap: 12px;
   user-select: text;
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background-color: var(--cwc-bg-tertiary);
   }
 
@@ -72,7 +75,7 @@
 
 .drag-handle {
   cursor: grab;
-  opacity: 0.5;
+  opacity: var(--drag-handle-opacity);
 
   &:active {
     cursor: grabbing;

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.tsx

@@ -109,7 +109,6 @@ export const ModelProviders: React.FC<ModelProviders.Props> = (props) => {
               }
             }}
             tag="div"
-            handle={`.${styles['drag-handle']}`}
             animation={150}
           >
             {props.providers.map((p, i) => render_item(p, i))}

packages/ui/src/components/editor/settings/Section/Section.module.scss

@@ -49,6 +49,12 @@
     gap: 16px;
   }
 
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
   &__group {
     font-weight: 400;
     color: var(--vscode-textLink-foreground);

packages/ui/src/components/editor/settings/Section/Section.tsx

@@ -92,17 +92,19 @@ export const Section = forwardRef<HTMLDivElement, Props>((props, ref) => {
       >
         <div className={styles.header__marker} ref={marker_ref} />
         <div className={styles.header__top}>
-          <div className={styles.header__title}>
-            {props.group && (
-              <span className={styles.header__group}>{props.group}: </span>
-            )}
-            {props.title}
+          <div className={styles.header__content}>
+            <div className={styles.header__title}>
+              {props.group && (
+                <span className={styles.header__group}>{props.group}: </span>
+              )}
+              {props.title}
+            </div>
+            <div className={styles.header__subtitle}>{props.subtitle}</div>
           </div>
           {props.actions && (
             <div className={styles.header__actions}>{props.actions}</div>
           )}
         </div>
-        <div className={styles.header__subtitle}>{props.subtitle}</div>
       </div>
       {props.children}
     </div>

packages/ui/src/styles/foundation/_variables.scss

@@ -3,7 +3,7 @@
 
   --disabled-opacity: 0.5;
   --dimmed-opacity: 0.7;
-  --drag-handle-opacity: 0.5;
+  --drag-handle-opacity: 0.6;
 
   --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   --transition-duration-150: 0.15s;