feat(account): Refactor account UI styles into reusable design tokens, apply updated styles across views and fix login submit behavior

ts_web/elements/account/views/baseview.ts

@@ -11,7 +11,7 @@ import {
   directives,
 } from '@design.estate/dees-element';
 
-import sharedStyles from '../sharedstyles.js';
+import sharedStyles, { accountDesignTokens, cardStyles, typographyStyles } from '../sharedstyles.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -52,34 +52,75 @@ export class BaseView extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-    sharedStyles,
+    accountDesignTokens,
+    cardStyles,
+    typographyStyles,
     css`
       :host {
         display: block;
-        max-width: 900px;
-        margin: auto;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        padding: 48px;
       }
+
+      .viewHost {
+        max-width: 600px;
+        margin: 0 auto;
+      }
+
+      .card {
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 32px;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+      }
+
       .slug {
-        color: orange;
+        color: var(--foreground);
+        font-weight: 600;
+        font-family: 'Geist Mono', monospace;
+      }
+
+      .hint {
+        display: block;
+        font-size: 13px;
+        color: var(--muted-foreground);
+        margin: 16px 0;
+        padding: 12px 16px;
+        background: var(--muted);
+        border-radius: 8px;
+      }
+
+      dees-form {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        margin-top: 24px;
       }
 
       .orgGrid {
         display: grid;
         grid-gap: 16px;
-        grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        margin-top: 24px;
       }
 
       .org {
-        padding: 16px;
-        border-top: 1px solid #444;
-        background: ${cssManager.bdTheme('#ccc', '#222')};
-        border-radius: 16px;
+        padding: 20px;
+        background: var(--card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        color: var(--foreground);
+        transition: all 0.15s ease;
+        cursor: pointer;
       }
 
       .org:hover {
-        cursor: default;
-        background: ${cssManager.bdTheme('#CCC', '#333')};
+        background: var(--muted);
+        border-color: var(--muted-foreground);
+      }
+
+      .org dees-icon {
+        opacity: 0.7;
       }
     `,
   ];
@@ -100,24 +141,26 @@ export class BaseView extends DeesElement {
     if (state.accountState.getState().organizations.length === 0) {
       render(
         html`
-          <h1>Setup Your Account</h1>
-          <p>
-            There are no organizations for your account. Please create one now. Alternatively you
-            can ask an admin of an existing organization to invite you.
-          </p>
-          <dees-form>
-            <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
-          </dees-form>
-          <p>
-            The organization slug corresponds to the organization name:<br />
-            <span class="slug"
-              >${directives.subscribe(
-                state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
-              )}</span
-            >
-          </p>
-          <span class="hint"></span>
-          <dees-button .disabled=${true}>Create the Organization</dees-button>
+          <div class="card">
+            <h1>Setup Your Account</h1>
+            <p>
+              There are no organizations for your account. Please create one now. Alternatively you
+              can ask an admin of an existing organization to invite you.
+            </p>
+            <dees-form>
+              <dees-input-text .label=${'Organization Name'} .key=${'orgName'}></dees-input-text>
+            </dees-form>
+            <p>
+              The organization slug will be:<br />
+              <span class="slug"
+                >${directives.subscribe(
+                  state.accountState.select((stateArg) => stateArg.newOrg.chosenSlug)
+                )}</span
+              >
+            </p>
+            <span class="hint"></span>
+            <dees-button .disabled=${true}>Create the Organization</dees-button>
+          </div>
         `,
         viewHost
       );
@@ -169,6 +212,7 @@ export class BaseView extends DeesElement {
       render(
         html`
           <h1>Select An Organization</h1>
+          <p>Choose an organization to manage its settings and billing.</p>
           <div class="orgGrid">
             ${state.accountState.getState().organizations.map((orgArg) => {
               return html`
@@ -180,7 +224,7 @@ export class BaseView extends DeesElement {
                     parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
                   }}
                 >
-                  <dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
+                  <dees-icon .icon=${'lucide:building2'} style="display: inline-block; transform: translateY(3px); padding-right: 8px;"></dees-icon> ${orgArg.data.name}
                 </div>
               `;
             })}