Reorganizes and optimizes shared CSS components

Consolidates UI components into a centralized components.css file
Removes duplicate styles across multiple CSS files
Adds utility classes in a new utilities.css file
Reduces overall CSS complexity and improves maintainability

Removes quick-stats.css and redistributes its styles
Updates layout and stylesheet references accordingly
This commit is contained in:
Janus C. H. Knudsen 2026-01-13 00:09:46 +01:00
parent 15579acba8
commit 2e6207bb0b
33 changed files with 971 additions and 796 deletions

View file

@ -2,6 +2,8 @@
* Waitlist CSS
*
* Styling for waitlist mini card and drawer items
*
* Reuses: swp-btn, swp-avatar (components.css)
*/
/* ===========================================
@ -84,19 +86,7 @@ swp-waitlist-customer {
gap: var(--spacing-6);
}
swp-waitlist-customer swp-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--color-teal);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
/* Avatar base styles in components.css */
swp-waitlist-customer-info {
flex: 1;
@ -191,39 +181,9 @@ swp-waitlist-actions {
border-top: 1px solid var(--color-border);
}
/* Button base styles in components.css */
swp-waitlist-actions swp-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
swp-waitlist-actions swp-btn.secondary {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
}
swp-waitlist-actions swp-btn.secondary:hover {
background: var(--color-background-hover);
}
swp-waitlist-actions swp-btn.primary {
background: var(--color-teal);
color: white;
}
swp-waitlist-actions swp-btn.primary:hover {
opacity: 0.9;
}
/* ===========================================