wip: zen

packages/console/app/src/routes/workspace/[id].css

@@ -97,7 +97,6 @@
         gap: var(--space-6);
       }
 
-      /* Section titles */
       [data-slot="section-title"] {
         display: flex;
         flex-direction: column;
@@ -110,7 +109,6 @@
           letter-spacing: -0.03125rem;
           margin: 0;
           color: var(--color-text-secondary);
-          text-transform: uppercase;
 
           @media (max-width: 30rem) {
             font-size: var(--font-size-md);
@@ -131,6 +129,13 @@
           }
         }
       }
+
+      [data-slot="section-content"] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        margin-top: var(--space-8);
+      }
     }
 
     section:not(:last-child) {
@@ -144,7 +149,7 @@
   }
 
   /* Title section */
-  [data-component="title-section"] {
+  [data-component="header-section"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-2);

packages/console/app/src/routes/workspace/[id]/billing/billing-section.module.css

@@ -1,10 +1,4 @@
 .root {
-  [data-slot="section-content"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
   [data-slot="reload-error"] {
     display: flex;
     align-items: center;
@@ -29,6 +23,7 @@
       flex-shrink: 0;
     }
   }
+
   [data-slot="payment"] {
     display: flex;
     flex-direction: column;
@@ -86,7 +81,7 @@
       @media (max-width: 30rem) {
         flex-direction: column;
 
-        > button {
+        >button {
           width: 100%;
         }
       }
@@ -96,19 +91,21 @@
       }
 
       /* Make Enable Billing button full width when it's the only button */
-      > button {
+      >button {
         flex: 1;
       }
     }
   }
+
   [data-slot="usage"] {
     p {
       font-size: var(--font-size-sm);
       line-height: 1.5;
       color: var(--color-text-secondary);
+
       b {
         font-weight: 600;
       }
     }
   }
-}
+}

packages/console/app/src/routes/workspace/[id]/billing/monthly-limit-section.module.css

@@ -1,10 +1,4 @@
 .root {
-  [data-slot="section-content"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-3);
-  }
-
   [data-slot="balance"] {
     display: flex;
     flex-direction: column;
@@ -99,4 +93,4 @@
     margin: 0;
     line-height: 1.4;
   }
-}
+}

packages/console/app/src/routes/workspace/[id]/index.tsx

@@ -13,7 +13,7 @@ export default function () {
 
   return (
     <div data-page="workspace-[id]">
-      <section data-component="title-section">
+      <section data-component="header-section">
         <IconLogo />
         <p>
           Curated list of models provided by opencode.{" "}

packages/console/app/src/routes/workspace/[id]/model-section.module.css

@@ -1,22 +1,3 @@
-[data-slot="section-title"] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-[data-slot="section-title"] h2 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-[data-slot="section-title"] p {
-  margin: 0;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-}
-
 [data-slot="models-list"] {
   display: flex;
   flex-direction: column;

packages/console/app/src/routes/workspace/[id]/new-user-section.module.css

@@ -53,26 +53,6 @@
     flex-direction: column;
     gap: var(--space-6);
 
-    [data-slot="section-title"] {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-1);
-
-      h2 {
-        font-size: var(--font-size-md);
-        font-weight: 600;
-        line-height: 1.2;
-        letter-spacing: -0.03125rem;
-        margin: 0;
-        color: var(--color-text-secondary);
-        text-transform: uppercase;
-
-        @media (max-width: 30rem) {
-          font-size: var(--font-size-md);
-        }
-      }
-    }
-
     [data-slot="key-display"] {
       display: flex;
       flex-direction: column;
@@ -160,4 +140,4 @@
       }
     }
   }
-}
+}

packages/console/app/src/routes/workspace/[id]/settings/settings-section.tsx

@@ -79,7 +79,7 @@ export function SettingsSection() {
       </div>
       <div data-slot="section-content">
         <div data-slot="setting">
-          <p>Workspace Name</p>
+          <p>Workspace name</p>
           <Show
             when={!store.show}
             fallback={