From bbf738d4e21d3230165a2d701b8224a378ee4614 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Fri, 27 Jun 2025 20:22:28 +0000
Subject: [PATCH] update

---
 readme.hints.md                   |  35 ++++--
 ts_web/elements/wcc-properties.ts | 201 ++++++++++++++++++++++--------
 2 files changed, 179 insertions(+), 57 deletions(-)

diff --git a/readme.hints.md b/readme.hints.md
index 791b3b7..9eadb15 100644
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -9,14 +9,18 @@ Updated the WCC Dashboard UI components (properties and sidebar) to use shadcn-l
    - `--background`, `--foreground`, `--card`, `--primary`, `--secondary`
    - `--muted`, `--accent`, `--border`, `--input`, `--ring`
    - Consistent dark theme with subtle borders and proper contrast
+   - Dynamic theme switching between light and dark modes
 
-2. **Properties Panel Improvements**:
+2. **Properties Panel Improvements (Updated)**: 
    - Changed from fixed 3-column grid to flexible flexbox layout
    - Properties now wrap and use space more efficiently
-   - Added rounded corners and better spacing
+   - Added rounded corners (using --radius-md) and better spacing
+   - Property items use flexbox with min-width for responsive layout
+   - Property labels now show as styled headers with type info
+   - Form controls updated with shadcn-style focus states and transitions
    - Complex properties (Objects/Arrays) show "Edit" button
    - Advanced JSON editor appears above properties panel when editing complex types
-   - Dynamic height adjustment (50px when editor is open, 100px normally)
+   - Dynamic height adjustment (50px when editor is open, 120px normally)
 
 3. **Sidebar Styling**:
    - Updated with consistent color scheme
@@ -30,12 +34,29 @@ Updated the WCC Dashboard UI components (properties and sidebar) to use shadcn-l
    - Live updates to element properties
    - Positioned above the properties panel with smooth transitions
 
+5. **Theme and Viewport Selectors (New)**:
+   - Redesigned buttons with flexbox layout for better icon/text alignment
+   - Added hover effects with transform and shadow
+   - Smooth transitions on all interactive elements
+   - Selected state uses primary color variables
+   - Icons reduced in size for better balance
+
+6. **Form Controls (New)**:
+   - Input fields and selects now have:
+     - Rounded corners (--radius-sm)
+     - Consistent padding (0.5rem 0.75rem)
+     - Focus states with ring effect using box-shadow
+     - Smooth transition animations
+   - Checkboxes use accent-color for theming
+
 ### Technical Details
-- Uses system font stack for better native appearance
-- Subtle borders with rgba values for transparency
-- Consistent spacing using CSS variables
-- Smooth transitions (0.15s ease) for interactive elements
+- Uses system font stack ('Inter' preferred) for better native appearance
+- Subtle borders with CSS variables for consistency
+- Consistent spacing using rem units
+- Smooth transitions (0.2s ease) for interactive elements
 - Custom scrollbar styling for better visual integration
+- Grid layout with 1px gaps creating subtle dividers
+- Warning display with backdrop blur and rounded corners
 
 ## Properties Panel Element Detection Issue (Fixed)
 
diff --git a/ts_web/elements/wcc-properties.ts b/ts_web/elements/wcc-properties.ts
index dea3409..f6c7d56 100644
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@@ -38,27 +38,49 @@ export class WccProperties extends DeesElement {
     return html`
       <style>
         :host {
-          font-family: 'Roboto', sans-serif;
+          /* CSS Variables - Always dark theme */
+          --background: #0a0a0a;
+          --foreground: #e5e5e5;
+          --card: #0f0f0f;
+          --card-foreground: #f0f0f0;
+          --muted: #1a1a1a;
+          --muted-foreground: #666;
+          --accent: #222;
+          --accent-foreground: #fff;
+          --border: rgba(255, 255, 255, 0.06);
+          --input: #141414;
+          --primary: #3b82f6;
+          --primary-foreground: #fff;
+          --ring: #3b82f6;
+          --radius: 4px;
+          --radius-sm: 2px;
+          --radius-md: 4px;
+          --radius-lg: 6px;
+
+          /* Base styles */
+          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           box-sizing: border-box;
           position: absolute;
           left: 200px;
-          height: 100px;
+          height: 88px;
           bottom: 0px;
           right: 0px;
           overflow: hidden;
-          background: #111;
-          color: #fff;
+          background: var(--background);
+          color: var(--foreground);
+          border-top: 1px solid rgba(255, 255, 255, 0.08);
         }
         .grid {
           display: grid;
-          grid-template-columns: auto 150px 300px 70px;
+          grid-template-columns: 1fr 150px 300px 70px;
+          height: 100%;
         }
         .properties {
-          border-right: 1px solid #999;
-          height: 100px;
+          background: transparent;
           overflow-y: auto;
           display: grid;
-          grid-template-columns: 33% 33% 33%;
+          grid-template-columns: repeat(3, 1fr);
+          border-right: 1px solid var(--border);
         }
 
         .material-symbols-outlined {
@@ -77,81 +99,160 @@ export class WccProperties extends DeesElement {
         }
 
         .properties .property {
-          padding: 5px;
-          background: #444;
-          border: 1px solid #000;
+          padding: 0.4rem;
+          background: transparent;
+          border-right: 1px solid var(--border);
+          border-bottom: 1px solid var(--border);
+          transition: all 0.15s ease;
+        }
+        
+        .properties .property:hover {
+          background: rgba(255, 255, 255, 0.02);
+        }
+        
+        .properties .property-label {
+          font-size: 0.65rem;
+          font-weight: 400;
+          color: #888;
+          margin-bottom: 0.2rem;
+          text-transform: capitalize;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
 
-        .properties input,
+        .properties input[type="text"],
+        .properties input[type="number"],
         .properties select {
           display: block;
           width: 100%;
-          background: #333;
-          border: none;
-          color: #fff;
+          padding: 0.25rem 0.4rem;
+          background: var(--input);
+          border: 1px solid transparent;
+          color: var(--foreground);
+          border-radius: var(--radius-sm);
+          font-size: 0.7rem;
+          transition: all 0.15s ease;
+          outline: none;
+        }
+        
+        .properties input[type="text"]:focus,
+        .properties input[type="number"]:focus,
+        .properties select:focus {
+          border-color: var(--primary);
+          background: rgba(59, 130, 246, 0.1);
+        }
+        
+        .properties input[type="checkbox"] {
+          width: 1rem;
+          height: 1rem;
+          cursor: pointer;
+          accent-color: var(--primary);
         }
 
         .viewportSelector,
         .themeSelector {
           user-select: none;
-          border-right: 1px solid #999;
+          background: transparent;
+          display: flex;
+          flex-direction: column;
+          border-right: 1px solid var(--border);
         }
         .selectorButtons2 {
           display: grid;
-          grid-template-columns: 50% 50%;
+          grid-template-columns: 1fr 1fr;
+          flex: 1;
         }
         .selectorButtons4 {
           display: grid;
-          grid-template-columns: 25% 25% 25% 25%;
+          grid-template-columns: repeat(4, 1fr);
+          flex: 1;
         }
         .button {
-          padding: 10px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0.5rem 0.25rem;
           text-align: center;
-          border: 1px solid #000;
-          transition: all 0.2s;
+          background: transparent;
+          border: 1px solid var(--border);
+          transition: all 0.15s ease;
+          cursor: pointer;
+          font-size: 0.65rem;
+          gap: 0.2rem;
+          color: #999;
         }
+        
         .button:hover {
-          color: #333;
-          background: #fff;
+          background: rgba(59, 130, 246, 0.05);
+          color: #bbb;
         }
 
         .button.selected {
-          background: #455a64;
+          background: rgba(59, 130, 246, 0.15);
+          color: var(--primary);
+          border-color: rgba(59, 130, 246, 0.3);
         }
 
         .button.selected:hover {
-          color: #ffffff;
-          background: #455a64;
+          background: rgba(59, 130, 246, 0.2);
+        }
+        
+        .button .material-symbols-outlined {
+          font-size: 18px;
+          font-variation-settings: 'FILL' 0, 'wght' 300;
+        }
+        
+        .button.selected .material-symbols-outlined {
+          font-variation-settings: 'FILL' 1, 'wght' 400;
         }
 
         .panelheading {
-          padding: 5px;
-          font-weight: bold;
-          background: #444;
-          border: 1px solid #000;
+          padding: 0.3rem 0.5rem;
+          font-weight: 500;
+          font-size: 0.65rem;
+          background: rgba(59, 130, 246, 0.03);
+          border-bottom: 1px solid var(--border);
+          color: #888;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
         }
         .docs {
-          text-align: center;
-          line-height: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           text-transform: uppercase;
+          background: transparent;
+          cursor: pointer;
+          font-size: 0.65rem;
+          font-weight: 500;
+          letter-spacing: 0.08em;
+          transition: all 0.15s ease;
+          color: #666;
         }
 
         .docs:hover {
-          color: #333;
-          background: #fff;
+          background: rgba(59, 130, 246, 0.05);
+          color: #999;
         }
 
         .warning {
           position: absolute;
-          background: #222;
-          color: #CCC;
-          top: 0px;
-          bottom: 0px;
-          left: 0px;
-          right: 520px;
-          text-align: center;
-          padding: 35px;
-          font-size: 25px;
+          background: rgba(20, 20, 20, 0.8);
+          color: #888;
+          top: 0.5rem;
+          bottom: 0.5rem;
+          left: 0.5rem;
+          right: calc(520px + 0.5rem);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 1.5rem;
+          font-size: 0.85rem;
+          border-radius: var(--radius-md);
+          border: 1px solid var(--border);
+          backdrop-filter: blur(8px);
         }
       </style>
       <div class="grid">
@@ -168,7 +269,7 @@ export class WccProperties extends DeesElement {
                 this.selectTheme('dark');
               }}
             >
-              Dark<br /><i class="material-symbols-outlined">brightness_3</i>
+              Dark<i class="material-symbols-outlined">brightness_3</i>
             </div>
             <div
               class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@@ -176,7 +277,7 @@ export class WccProperties extends DeesElement {
                 this.selectTheme('bright');
               }}
             >
-              Bright<br /><i class="material-symbols-outlined">flare</i>
+              Bright<i class="material-symbols-outlined">flare</i>
             </div>
           </div>
         </div>
@@ -189,7 +290,7 @@ export class WccProperties extends DeesElement {
                 this.selectViewport('phone');
               }}
             >
-              Phone<br /><i class="material-symbols-outlined">smartphone</i>
+              Phone<i class="material-symbols-outlined">smartphone</i>
             </div>
             <div
               class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@@ -197,7 +298,7 @@ export class WccProperties extends DeesElement {
                 this.selectViewport('phablet');
               }}
             >
-              Phablet<br /><i class="material-symbols-outlined">smartphone</i>
+              Phablet<i class="material-symbols-outlined">smartphone</i>
             </div>
             <div
               class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@@ -205,7 +306,7 @@ export class WccProperties extends DeesElement {
                 this.selectViewport('tablet');
               }}
             >
-              Tablet<br /><i class="material-symbols-outlined">tablet</i>
+              Tablet<i class="material-symbols-outlined">tablet</i>
             </div>
             <div
               class="button ${this.selectedViewport === 'desktop' ||
@@ -216,7 +317,7 @@ export class WccProperties extends DeesElement {
                 this.selectViewport('native');
               }}
             >
-              Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
+              Desktop<i class="material-symbols-outlined">desktop_windows</i>
             </div>
           </div>
         </div>
@@ -356,7 +457,7 @@ export class WccProperties extends DeesElement {
           propertyArray.push(
           html`
             <div class="property">
-              ${key} / ${propertyTypeString}<br />
+              <div class="property-label">${key} (${propertyTypeString})</div>
               ${(() => {
                 switch (propertyTypeString) {
                   case 'Boolean':