update

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)