🎨 ✨ 🚀 Overhaul UI/UX with comprehensive design system improvements
✨ 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:
parent
5afeb4d01a
commit
dc9abee715
GPG key ID:
7CC8056A5A04557E
49 changed files with 4176 additions and 2468 deletions
|
|
@ -2,6 +2,10 @@ import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
|
|||
import { getProfile } from '@utils/profileUtils';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
import '@components/EveLink';
|
||||
import '@components/General/Card';
|
||||
|
||||
@customElement('arx-nostr-card-profile')
|
||||
export class CardProfile extends LitElement {
|
||||
|
|
@ -25,50 +29,82 @@ export class CardProfile extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-base-content);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--secondary);
|
||||
color: var(--color-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.bio {
|
||||
white-space: pre-line;
|
||||
font-size: 0.9rem;
|
||||
color: var(--primary);
|
||||
margin: 0.5rem 0;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--color-base-content);
|
||||
margin: 0.75rem 0 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: var(--border) solid var(--color-base-300);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.website-link {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--accent);
|
||||
color: var(--color-accent);
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.website-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: var(--border);
|
||||
background-color: var(--color-accent);
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
.website-link:hover {
|
||||
text-decoration: underline;
|
||||
color: oklch(from var(--color-accent) l calc(c * 1.1) h);
|
||||
}
|
||||
|
||||
.website-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
router-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: calc(var(--radius-selector) / 2);
|
||||
padding: 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
router-link:hover {
|
||||
background-color: oklch(from var(--color-base-300) l c h / 0.5);
|
||||
}
|
||||
|
||||
router-link:focus-visible {
|
||||
outline: var(--border) solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
@ -101,21 +137,31 @@ export class CardProfile extends LitElement {
|
|||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="card">
|
||||
<router-link to=${this.profileUrl}>
|
||||
<arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
|
||||
<arx-card>
|
||||
<arx-eve-link href=${this.profileUrl}>
|
||||
<arx-nostr-avatar
|
||||
.profile=${this.profile}
|
||||
size="large"
|
||||
></arx-nostr-avatar>
|
||||
<div>
|
||||
<h3>${this.displayName}</h3>
|
||||
<p v-if=${this.firstLineOfAbout}>${this.firstLineOfAbout}</p>
|
||||
${when(this.firstLineOfAbout, () => html`<p>${this.firstLineOfAbout}</p>`)}
|
||||
</div>
|
||||
</router-link>
|
||||
</arx-eve-link>
|
||||
|
||||
<div v-if=${this.about} class="bio">${this.about}</div>
|
||||
|
||||
<a v-if=${this.website} href=${this.website} target="_blank" rel="noreferrer noopener" class="website-link">
|
||||
${this.website}
|
||||
</a>
|
||||
</div>
|
||||
${when(this.about, () => html`<div class="bio">${this.about}</div>`)}
|
||||
${when(
|
||||
this.website,
|
||||
() => html`<a
|
||||
href=${this.website}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
class="website-link"
|
||||
>
|
||||
${this.website}
|
||||
</a>`,
|
||||
)}
|
||||
</arx-card>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { getProfile } from '@utils/profileUtils';
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
|
||||
import '@components/EveLink';
|
||||
|
||||
@customElement('arx-nostr-large-profile')
|
||||
export class LargeProfile extends LitElement {
|
||||
@property() profile!: NDKUserProfile;
|
||||
|
|
@ -20,19 +22,58 @@ export class LargeProfile extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
a {
|
||||
color: var(--primary);
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
arx-eve-link {
|
||||
color: var(--color-base-content);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius-selector);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
arx-eve-link:hover {
|
||||
background-color: oklch(from var(--color-base-300) l c h / 0.5);
|
||||
}
|
||||
|
||||
arx-eve-link:focus-visible {
|
||||
outline: var(--border) solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 0.35rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
.bio {
|
||||
white-space: pre-line;
|
||||
font-size: 0.9rem;
|
||||
color: var(--primary);
|
||||
margin: 0.5rem 0;
|
||||
color: var(--color-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
max-width: 24rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
arx-nostr-avatar {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
arx-eve-link:hover arx-nostr-avatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
@ -49,13 +90,16 @@ export class LargeProfile extends LitElement {
|
|||
|
||||
override render() {
|
||||
return html`
|
||||
<router-link to=${this.profileUrl}>
|
||||
<arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
|
||||
<arx-eve-link href=${this.profileUrl}>
|
||||
<arx-nostr-avatar
|
||||
.profile=${this.profile}
|
||||
size="large"
|
||||
></arx-nostr-avatar>
|
||||
<div>
|
||||
<h3>${this.displayName}</h3>
|
||||
<div class="bio">${this.about}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</arx-eve-link>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,12 +22,52 @@ export class MediumProfile extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
arx-eve-link::part(link) {
|
||||
color: var(--primary);
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
arx-eve-link {
|
||||
color: var(--color-base-content);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--radius-selector);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
arx-eve-link:hover {
|
||||
background-color: oklch(from var(--color-base-300) l c h / 0.5);
|
||||
}
|
||||
|
||||
arx-eve-link:focus-visible {
|
||||
outline: var(--border) solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-base-content);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.bio {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-secondary);
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
arx-nostr-avatar {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
arx-eve-link:hover arx-nostr-avatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -18,12 +18,43 @@ export class ShortProfile extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
arx-eve-link::part(link) {
|
||||
color: var(--primary);
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
arx-eve-link {
|
||||
color: var(--color-base-content);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: var(--radius-selector);
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
arx-eve-link:hover {
|
||||
background-color: oklch(from var(--color-base-300) l c h / 0.5);
|
||||
}
|
||||
|
||||
arx-eve-link:focus-visible {
|
||||
outline: var(--border) solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
arx-nostr-avatar {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
arx-eve-link:hover arx-nostr-avatar {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue