Arx/Eve
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

🎨 ✨ 🚀 Overhaul UI/UX with comprehensive design system improvements

Browse source 
✨ Features added:

- 🔍 Implement functional search in header navigation
- ⚙️ Add basic user settings page
- 📱 Make dashboard fully responsive

🔧 Enhancements:

- 🎭 Standardize CSS with consistent theming across components
- 🧹 Remove unused CSS for better performance
- 📊 Improve dashboard layout and visual hierarchy
- 📦 Redesign last block widget for better usability

💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.
This commit is contained in:
Danny Morabito 2025-03-20 09:46:13 +01:00
parent 5afeb4d01a
commit dc9abee715
Signed by: dannym
GPG key ID: 7CC8056A5A04557E
49 changed files with 4176 additions and 2468 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/Breadcrumbs.ts
View file

@ -1,8 +1,9 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import './BreadcrumbsItem';
import { map } from 'lit/directives/map.js';
import '@components/BreadcrumbsItem';
@customElement('arx-breadcrumbs')
export class Breadcrumbs extends LitElement {
@property({ type: Array }) items: { text: string; href?: string }[] = [];
@ -11,27 +12,23 @@ export class Breadcrumbs extends LitElement {
css`
:host {
display: block;
--breadcrumb-bg: var(--surface, #ffffff);
--breadcrumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
--breadcrumb-border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
--breadcrumb-radius: 8px;
--breadcrumb-padding: 0.75rem 1.25rem;
--breadcrumb-font: var(--font-family, system-ui, sans-serif);
--breadcrumb-text-color: var(--text-primary, #333);
--breadcrumb-separator-color: var(--text-secondary, #666);
--breadcrumb-accent-color: var(--accent, #0066cc);
--breadcrumb-hover-color: var(--accent-dark, #004c99);
--breadcrumb-active-bg: var(--accent-light, rgba(0, 102, 204, 0.1));
}
nav {
max-width: 1200px;
margin: 1.25rem auto;
background-color: var(--breadcrumb-bg);
border-radius: var(--breadcrumb-radius);
box-shadow: var(--breadcrumb-shadow);
background-color: var(--color-base-200);
border-radius: var(--radius-box);
border: var(--border) solid var(--color-base-300);
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px)
oklch(from var(--color-base-100) l c h / 0.4);
}
ol {
@ -43,6 +40,11 @@ export class Breadcrumbs extends LitElement {
align-items: center;
overflow-x: auto;
scrollbar-width: none;
color: var(--color-base-content);
}
ol::-webkit-scrollbar {
display: none;
}
@media (max-width: 640px) {