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

78
src/components/Arbor/Button.ts
View file

@ -1,78 +0,0 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@components/EveLink';
@customElement('arx-arbor-button')
export class ArborButton extends LitElement {
@property({ type: String }) href = '';
@property({ type: String }) target = '';
@property({ type: String }) rel = '';
@property({ type: Boolean }) disabled = false;
get hrefValue() {
if (!this.href || this.disabled) return 'javascript:void(0)';
return this.href;
}
static override styles = [
css`
arx-eve-link::part(link) {
color: white;
text-decoration: none;
}
arx-eve-link {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
border: none;
padding: 0.75rem 0.75rem;
border-radius: 0.25rem;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: var(--shadow-sm);
gap: 5px;
}
arx-eve-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
background: color-mix(in oklch, var(--accent), black 15%);
}
arx-eve-link:focus {
outline: none;
box-shadow: var(--shadow-md);
}
arx-eve-link:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
arx-eve-link.disabled {
opacity: 0.6;
cursor: not-allowed;
}
`,
];
override render() {
return html`
<arx-eve-link
.href=${this.hrefValue}
.target=${this.target}
.rel=${this.rel}
class="${this.disabled ? 'disabled' : ''}"
>
<slot></slot>
</arx-eve-link>
`;
}
}

53
src/components/Arbor/ForumCategory.ts
View file

@ -1,6 +1,8 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@components/General/Button';
@customElement('arx-arbor-forum-category')
export class ArborForumCategory extends LitElement {
@property({ type: String }) override title = '';
@ -9,21 +11,45 @@ export class ArborForumCategory extends LitElement {
static override styles = [
css`
.forum-category {
background: oklch(100% 0 0);
border-radius: 0.5rem;
box-shadow: var(--shadow-xl);
margin-block-end: 1.5rem;
background: var(--color-base-100);
border-radius: var(--radius-box);
border: var(--border) solid var(--color-base-300);
margin-block-end: 2rem;
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);
overflow: hidden;
}
.category-header {
background: var(--primary);
color: oklch(100% 0 0);
padding: 1rem 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
font-weight: 500;
background: var(--color-secondary);
color: var(--color-secondary-content);
padding: 1.25rem 1.75rem;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.01em;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border) solid var(--color-base-300);
}
::slotted(:first-child) {
margin-top: 1rem;
}
::slotted(:last-child) {
margin-bottom: 1rem;
}
.empty-state {
padding: 2rem 1.75rem;
color: var(--color-secondary);
font-style: italic;
text-align: center;
}
`,
];
@ -33,12 +59,13 @@ export class ArborForumCategory extends LitElement {
<div class="forum-category">
<div class="category-header">
<span>${this.title}</span>
<arx-arbor-button href="/arbor/new-topic/${this.id}">
New Topic
</arx-arbor-button>
<arx-button
label="New Topic"
href="/arbor/new-topic/${this.id}"
></arx-button>
</div>
<slot>
<div style="padding: 1rem 1.5rem">No topics...</div>
<div class="empty-state">No topics yet...</div>
</slot>
</div>
`;

200
src/components/Arbor/ForumPost.ts
View file

@ -19,47 +19,50 @@ export class ForumPost extends LitElement {
.post {
display: flex;
flex-direction: row;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04),
0 1px 3px rgba(0, 0, 0, 0.03);
margin-block-end: 0.75rem;
border-radius: var(--radius-box);
background: var(--color-base-100);
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);
margin-block-end: 1rem;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
isolation: isolate;
border: var(--border) solid var(--color-base-300);
will-change: transform;
}
&:hover {
transform: translateY(2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.04);
}
.post:hover {
transform: translateY(-2px);
box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 6px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.post--highlighted {
position: relative;
border-inline-start: none;
}
&::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 4px;
background: #4361ee;
border-radius: 4px 0 0 4px;
}
.post--highlighted::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--color-accent);
border-radius: 4px 0 0 4px;
}
.post__sidebar {
padding: clamp(1rem, 4vw, 1.5rem);
border-right: 1px solid rgba(0, 0, 0, 0.06);
border-right: var(--border) solid var(--color-base-300);
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.01);
background: var(--color-base-200);
}
.post__main {
@ -73,10 +76,8 @@ export class ForumPost extends LitElement {
display: flex;
align-items: center;
padding: 1rem clamp(1rem, 4vw, 1.5rem);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.01);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: var(--border) solid var(--color-base-300);
background: var(--color-base-200);
}
.post__time {
@ -84,17 +85,18 @@ export class ForumPost extends LitElement {
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.6);
color: var(--color-secondary);
font-weight: 500;
}
& iconify-icon {
color: rgba(0, 0, 0, 0.4);
}
.post__time iconify-icon {
color: var(--color-secondary);
opacity: 0.7;
}
.post__permalink {
margin-inline-start: auto;
color: #4361ee;
color: var(--color-accent);
border: none;
background: transparent;
cursor: pointer;
@ -104,22 +106,16 @@ export class ForumPost extends LitElement {
display: grid;
place-items: center;
transition: all 0.2s ease;
}
&:hover {
background: rgba(67, 97, 238, 0.08);
transform: scale(1.05);
}
&:focus-visible {
outline: 2px solid #4361ee;
outline-offset: 2px;
}
.post__permalink:hover {
transform: scale(1.05);
}
.post__content {
padding: clamp(1.25rem, 5vw, 1.75rem);
line-height: 1.7;
color: rgba(0, 0, 0, 0.87);
color: var(--color-base-content);
overflow-wrap: break-word;
flex: 1;
font-size: clamp(0.95rem, 2vw, 1rem);
@ -129,90 +125,25 @@ export class ForumPost extends LitElement {
.post__actions {
display: flex;
padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem);
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-top: var(--border) solid var(--color-base-300);
gap: clamp(0.5rem, 2vw, 0.75rem);
background: rgba(0, 0, 0, 0.01);
}
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 10px;
background: transparent;
border: none;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
transition: all 0.2s ease;
& iconify-icon {
font-size: 1.25rem;
}
&:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.87);
transform: translateY(-1px);
}
&:focus-visible {
outline: 2px solid rgba(0, 0, 0, 0.2);
outline-offset: 1px;
}
&:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.action-button--primary {
color: #4361ee;
&:hover:not(:disabled) {
background: rgba(67, 97, 238, 0.08);
}
&:focus-visible {
outline-color: #4361ee;
}
background: var(--color-base-200);
}
@media (max-width: 768px) {
.post {
flex-direction: column;
margin-inline: -1rem;
border-radius: 0;
margin-block-end: 1.5rem;
}
.post__sidebar {
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: var(--border) solid var(--color-base-300);
padding: 1rem;
flex-direction: row;
justify-content: flex-start;
gap: 1rem;
}
.action-button {
padding: 0.625rem;
justify-content: center;
flex: 1;
border-radius: 10px;
& span {
display: none;
}
}
}
@media (max-width: 480px) {
@ -290,13 +221,13 @@ export class ForumPost extends LitElement {
${formatDateTime(this.date)}
</div>
<button
<arx-button
class="post__permalink"
title="Copy permalink"
@click=${this._copyPermalink}
>
<iconify-icon icon="mdi:link-variant"></iconify-icon>
</button>
<iconify-icon slot="label" icon="mdi:link-variant"></iconify-icon>
</arx-button>
</div>
<div class="post__content">
@ -306,33 +237,30 @@ export class ForumPost extends LitElement {
</div>
<div class="post__actions">
<button
class="action-button action-button--primary"
@click=${this._handleReply}
disabled
>
<iconify-icon icon="mdi:reply"></iconify-icon>
<span>Reply</span>
</button>
<arx-button label="Reply" @click=${this._handleReply} disabled>
<iconify-icon slot="prefix" icon="mdi:reply"></iconify-icon>
</arx-button>
<a href=${permalink} class="action-button">
<iconify-icon icon="mdi:link-variant"></iconify-icon>
<span>Permalink</span>
</a>
<arx-button href=${permalink} label="Permalink">
<iconify-icon
slot="prefix"
icon="mdi:link-variant"
></iconify-icon>
</arx-button>
<button class="action-button" @click=${this._handleZap} disabled>
<iconify-icon icon="mdi:lightning-bolt"></iconify-icon>
<span>Zap</span>
</button>
<arx-button label="Zap" @click=${this._handleZap} disabled>
<iconify-icon
slot="prefix"
icon="mdi:lightning-bolt"
></iconify-icon>
</arx-button>
<button
class="action-button"
@click=${this._handleDownzap}
disabled
>
<iconify-icon icon="mdi:lightning-bolt-outline"></iconify-icon>
<span>Downzap</span>
</button>
<arx-button label="Downzap" @click=${this._handleDownzap} disabled>
<iconify-icon
slot="prefix"
icon="mdi:lightning-bolt-outline"
></iconify-icon>
</arx-button>
</div>
</div>
</div>

71
src/components/Arbor/ForumTopic.ts
View file

@ -12,26 +12,40 @@ export class ArborForumTopic extends LitElement {
display: grid;
grid-template-columns: 3fr 1fr;
padding: 1.75rem;
border-radius: 12px;
border-radius: var(--radius-box);
margin-bottom: 1rem;
box-shadow: var(--shadow-md);
border: var(--border) solid var(--color-base-300);
background-color: var(--color-base-200);
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);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topic:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.15),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-100) l c h / 0.5);
}
.topic-icon {
inline-size: 40px;
block-size: 40px;
background: var(--accent);
border-radius: 10px;
background: var(--color-accent);
border-radius: calc(var(--radius-selector) * 1.5);
flex-shrink: 0;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.topic-icon::after {
@ -41,7 +55,7 @@ export class ArborForumTopic extends LitElement {
background: linear-gradient(
45deg,
transparent,
oklch(from var(--accent) l c h / 0.2)
oklch(from var(--color-accent) l c h / 0.2)
);
}
@ -62,24 +76,25 @@ export class ArborForumTopic extends LitElement {
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--primary);
color: var(--color-base-content);
transition: all 0.2s ease;
&:hover {
color: var(--secondary);
transform: translateX(4px);
}
}
arx-eve-link:hover::part(link) {
color: var(--color-accent);
transform: translateX(4px);
}
.topic-details p {
margin: 0;
font-size: 0.975rem;
line-height: 1.6;
color: var(--secondary);
color: var(--color-secondary);
}
.new-status {
position: relative;
color: var(--accent);
color: var(--color-accent);
}
.new-status::after {
@ -90,15 +105,17 @@ export class ArborForumTopic extends LitElement {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
background: var(--accent);
color: var(--light);
background: var(--color-accent);
color: var(--color-accent-content);
padding: 2px 8px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.hot-status {
color: var(--error);
color: var(--color-error);
}
.hot-status::before {
@ -111,29 +128,31 @@ export class ArborForumTopic extends LitElement {
flex-direction: column;
gap: 1rem;
padding-left: 1.5rem;
border-left: 2px solid var(--border);
border-left: var(--border) solid var(--color-base-300);
}
.last-post-section {
background: oklch(from var(--primary) 98% calc(c * 0.2) h);
background: oklch(from var(--color-base-200) l c h);
padding: 0.875rem;
border-radius: 8px;
box-shadow: var(--shadow-sm);
border-radius: var(--radius-field);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.1);
}
.last-post-section > div:first-of-type {
font-size: 0.875rem;
font-weight: 500;
color: var(--secondary);
color: var(--color-secondary);
margin-bottom: 0.5rem;
}
.last-post-info {
color: var(--secondary);
color: var(--color-secondary);
font-size: 0.875rem;
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 1px solid var(--border);
border-top: var(--border) solid var(--color-base-300);
}
@media (max-width: 968px) {
@ -147,7 +166,7 @@ export class ArborForumTopic extends LitElement {
padding-left: 0;
border-left: none;
padding-top: 1rem;
border-top: 2px solid var(--border);
border-top: var(--border) solid var(--color-base-300);
}
}
`,