ui

frontend/angular-clarity-master/UI_ENHANCEMENT_RULES.md

@@ -0,0 +1,184 @@
+# UI Enhancement Rules
+
+This document outlines the standard UI enhancement patterns to be followed across all components in the application.
+
+## 1. ThemeService Integration
+
+All styling must use ThemeService variables instead of hardcoded colors or values:
+- Use `var(--theme-primary)`, `var(--theme-accent)`, etc. for colors
+- Use `var(--theme-font-primary)`, `var(--theme-font-secondary)` for fonts
+- Use `var(--theme-surface)`, `var(--theme-background)` for backgrounds
+- Use `var(--theme-text)`, `var(--theme-text-secondary)` for text colors
+
+## 2. Modern Component Layout
+
+### Hero Section
+- Implement a hero section with gradient background:
+  ```scss
+  .component-hero {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 32px;
+    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
+    color: white;
+    border-radius: 16px;
+    margin-bottom: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  ```
+
+### Container Styling
+- Use consistent container styling with rounded corners and shadows:
+  ```scss
+  .component-container {
+    background: var(--theme-surface);
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    margin-bottom: 24px;
+  }
+  ```
+
+## 3. Button Styling
+
+Use the standardized button classes with ThemeService integration:
+
+### Base Button Class
+```scss
+.sq-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 200ms ease-out;
+  text-decoration: none;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--theme-font-primary);
+  z-index: 1;
+}
+```
+
+### Button Variants
+- Primary: `.sq-btn.sq-btn-primary` (gradient background)
+- Outline: `.sq-btn.sq-btn-outline` (transparent background with border)
+- Error: `.sq-btn.sq-btn-error` (error color styling)
+- Ghost: `.sq-btn.sq-btn-ghost` (minimal styling)
+
+### Button Sizes
+- Small: `.sq-btn.sq-btn-sm`
+- Medium: `.sq-btn.sq-btn-md`
+- Large: `.sq-btn.sq-btn-lg`
+
+## 4. Form Enhancement
+
+### Form Labels
+```scss
+.sq-form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--theme-text);
+  margin-bottom: 8px;
+  font-family: var(--theme-font-primary);
+}
+```
+
+### Form Inputs
+```scss
+.sq-form-input {
+  width: 100%;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--theme-text);
+  background: var(--theme-surface);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  transition: all 200ms ease-out;
+}
+```
+
+## 5. Card-Based Design
+
+Implement responsive card layouts for data display:
+```scss
+.sq-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.sq-card-item {
+  background: var(--theme-surface);
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: all 200ms ease-out;
+}
+```
+
+## 6. Modal Enhancement
+
+Enhance modals with consistent styling:
+- Gradient headers
+- Proper padding
+- Consistent footer styling
+- ThemeService integration for all elements
+
+## 7. Data Grid Enhancement
+
+Improve data grids with:
+- Custom column styling
+- Enhanced row hover effects
+- Better pagination styling
+- Consistent action overflow menus
+
+## 8. Responsive Design
+
+Ensure all components are responsive:
+- Mobile-first approach
+- Flexible grid layouts
+- Appropriate breakpoints
+- Touch-friendly elements
+
+## 9. Typography
+
+Use consistent typography with ThemeService:
+- Primary font for general text: `var(--theme-font-primary)`
+- Secondary font for headings: `var(--theme-font-secondary)`
+- Proper font weights and sizes
+- Consistent text colors
+
+## 10. Spacing and Layout
+
+Follow consistent spacing rules:
+- 8px baseline grid
+- Consistent padding and margins
+- Proper visual hierarchy
+- Balanced whitespace
+
+## Implementation Checklist
+
+When enhancing any component, ensure:
+- [ ] ThemeService is used for all colors and fonts
+- [ ] Hero section is implemented with gradient background
+- [ ] All buttons use sq-btn classes with appropriate variants
+- [ ] Forms are properly styled with consistent labels and inputs
+- [ ] Card view is implemented for data display where appropriate
+- [ ] Modals are enhanced with modern styling
+- [ ] Data grids are customized with improved styling
+- [ ] Component is fully responsive
+- [ ] Typography follows ThemeService guidelines
+- [ ] Spacing and layout follow the 8px grid system