Skip to content

style: site-wide dashboard refresh within the design system #1546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LucasSantana-Dev merged 8 commits into from
Jun 23, 2026
Merged

style: site-wide dashboard refresh within the design system #1546

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9fd1d2e
style(dashboard): refresh the overview page within the design system
LucasSantana-Dev Jun 23, 2026
29a2ada
style(dashboard): refresh remaining pages within the design system
LucasSantana-Dev Jun 23, 2026
549e98b
fix(frontend): replace emoji icons with lucide in vote badge + config
LucasSantana-Dev Jun 23, 2026
2fa8d9f
style(dashboard): revert spacing churn, keep borders + labels
LucasSantana-Dev Jun 23, 2026
0660c49
fix(dashboard): one server switcher, fix avatar + button cursor
LucasSantana-Dev Jun 23, 2026
7c376df
feat(i18n): internationalize 23 dashboard pages with portuguese
LucasSantana-Dev Jun 23, 2026
ce06c24
Merge branch 'main' into chore/repaint-prototype
LucasSantana-Dev Jun 23, 2026
2cefbf0
fix(config): mark decorative chevron/arrow icons aria-hidden
LucasSantana-Dev Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/frontend/src/pages/Admin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export default function AdminPage() {
return (
<main className='bg-lucky-bg-primary min-h-screen'>
{/* Header — compact, density-first */}
<header className='border-b border-lucky-border-soft bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
<header className='border-b border-lucky-border bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
<div className='flex items-center justify-between gap-3'>
<div className='flex items-center gap-3'>
<ShieldCheck
Expand Down Expand Up @@ -150,7 +150,7 @@ export default function AdminPage() {
<div className='space-y-1'>
<h2
id='global-toggles-heading'
className='text-base font-semibold text-lucky-text-primary'
className='text-base font-semibold text-lucky-text-primary uppercase tracking-wide'
style={{ fontFamily: 'Sora' }}
>
Global Feature Toggles
Expand Down Expand Up @@ -178,7 +178,7 @@ export default function AdminPage() {
<div className='space-y-1'>
<h2
id='bot-guilds-heading'
className='text-base font-semibold text-lucky-text-primary'
className='text-base font-semibold text-lucky-text-primary uppercase tracking-wide'
style={{ fontFamily: 'Sora' }}
>
Server Management
Expand Down
6 changes: 3 additions & 3 deletions packages/frontend/src/pages/AdminSupport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function AdminSupportPage() {
<button
key={s}
onClick={() => setStatus(s)}
className={`px-3 py-1.5 rounded-full type-meta border transition-colors ${
className={`px-3 py-1.5 rounded-sm type-meta uppercase font-semibold border transition-colors ${
status === s
? 'bg-lucky-brand text-lucky-bg-primary border-lucky-brand'
: 'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border hover:text-lucky-text-primary'
Expand Down Expand Up @@ -82,7 +82,7 @@ export default function AdminSupportPage() {
<li key={r.id}>
<button
onClick={() => setSelectedId(r.id)}
className={`w-full text-left surface-panel rounded-lg border p-3 transition-colors ${
className={`w-full text-left surface-panel rounded-lg border p-3 transition-colors hover:bg-lucky-bg-active/25 ${
selectedId === r.id
? 'border-lucky-brand'
: 'border-lucky-border hover:border-lucky-text-tertiary'
Expand Down Expand Up @@ -182,7 +182,7 @@ function StatusBadge({ status }: { status: string }) {
: 'bg-lucky-warning/10 text-lucky-warning border-lucky-warning/20'
return (
<span
className={`inline-block px-2 py-0.5 rounded-full type-meta border ${tone}`}
className={`inline-block px-2 py-0.5 rounded-sm type-meta uppercase font-semibold border ${tone}`}
>
{t(`support.admin.status.${status}`, { defaultValue: status })}
</span>
Expand Down
10 changes: 5 additions & 5 deletions packages/frontend/src/pages/AutoMessages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,7 +352,7 @@ export default function AutoMessagesPage() {
: i * 0.03,
}}
>
<Card className='p-5 hover:border-lucky-border-strong transition-all'>
<Card className='p-5 border border-lucky-border hover:border-lucky-border-strong transition-all'>
<div className='flex items-start justify-between mb-3'>
<div className='flex items-center gap-2'>
<div className='p-2 rounded-lg bg-lucky-brand/15'>
Expand Down Expand Up @@ -400,7 +400,7 @@ export default function AutoMessagesPage() {
<div className='flex flex-wrap items-center gap-2'>
<Badge
variant='outline'
className='type-meta gap-1 normal-case bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary'
className='type-meta gap-1 uppercase font-semibold bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary rounded-sm'
>
<Hash
className='w-3 h-3'
Expand All @@ -410,7 +410,7 @@ export default function AutoMessagesPage() {
</Badge>
<Badge
variant='outline'
className='type-meta gap-1 normal-case bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary'
className='type-meta gap-1 uppercase font-semibold bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary rounded-sm'
>
<Clock
className='w-3 h-3'
Expand All @@ -422,14 +422,14 @@ export default function AutoMessagesPage() {
{msg.isEmbed && (
<Badge
variant='outline'
className='type-meta normal-case bg-lucky-brand/10 text-lucky-brand border-lucky-brand/20'
className='type-meta uppercase font-semibold bg-lucky-brand/10 text-lucky-brand border-lucky-brand/20 rounded-sm'
>
Embed
</Badge>
)}
<Badge
variant='outline'
className='type-meta gap-1 normal-case bg-lucky-bg-tertiary border-lucky-border text-lucky-text-tertiary'
className='type-meta gap-1 uppercase font-semibold bg-lucky-bg-tertiary border-lucky-border text-lucky-text-tertiary rounded-sm'
>
<Calendar
className='w-3 h-3'
Expand Down
38 changes: 21 additions & 17 deletions packages/frontend/src/pages/AutoMod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function FilterRow({
<div className='border-b border-lucky-border/50 last:border-b-0'>
<button
onClick={() => onToggle(!enabled)}
className='w-full flex items-center justify-between px-6 py-3 hover:bg-[rgba(236,72,153,0.02)] transition-colors'
className='w-full flex items-center justify-between px-6 py-3 hover:bg-lucky-bg-active/25 transition-colors'
>
<div className='flex items-center gap-3 flex-1 text-left'>
<Icon className='w-4 h-4 text-lucky-brand flex-shrink-0' />
Expand Down Expand Up @@ -172,7 +172,7 @@ function TagList({
<Badge
key={item}
variant='outline'
className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1'
className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1 rounded-sm uppercase font-semibold'
>
{item}
<button
Expand Down Expand Up @@ -230,7 +230,7 @@ function ChannelPicker({
<Badge
key={id}
variant='outline'
className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1'
className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1 rounded-sm uppercase font-semibold'
>
<Hash className='w-3 h-3' />
{getChannelName(id)}
Expand Down Expand Up @@ -294,7 +294,7 @@ function RolePicker({
<Badge
key={id}
variant='outline'
className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1'
className='bg-lucky-bg-tertiary border-lucky-border text-lucky-text-secondary text-xs gap-1 pr-1 rounded-sm uppercase font-semibold'
>
<Shield className='w-3 h-3' />
{getRoleName(id)}
Expand Down Expand Up @@ -358,8 +358,10 @@ function normalizeNumber(
const toValid = (candidate: number): number => {
if (!Number.isFinite(candidate)) return fallback
if (options?.integer && !Number.isInteger(candidate)) return fallback
if (options?.min !== undefined && candidate < options.min) return fallback
if (options?.max !== undefined && candidate > options.max) return fallback
if (options?.min !== undefined && candidate < options.min)
return fallback
if (options?.max !== undefined && candidate > options.max)
return fallback
return candidate
}

Expand Down Expand Up @@ -674,7 +676,7 @@ export default function AutoModPage() {
<div className='space-y-6'>
<div className='flex items-start justify-between'>
<header>
<h1 className='text-2xl font-bold text-white'>
<h1 className='text-2xl font-bold text-white uppercase tracking-wide'>
Auto-Moderation
</h1>
<p className='text-sm text-lucky-text-secondary mt-1'>
Expand Down Expand Up @@ -703,10 +705,10 @@ export default function AutoModPage() {
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0 }}
>
<Card className='p-5 space-y-4'>
<Card className='p-5 space-y-4 border border-lucky-border'>
<div className='flex items-center gap-2'>
<Sparkles className='w-5 h-5 text-lucky-warning' />
<h2 className='text-base font-semibold text-white'>
<h2 className='text-base font-semibold text-white uppercase tracking-wide'>
Templates
</h2>
</div>
Expand All @@ -724,9 +726,9 @@ export default function AutoModPage() {
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.05 }}
>
<Card className='overflow-hidden'>
<div className='px-6 py-4 border-b border-lucky-border/50'>
<h2 className='text-base font-semibold text-white'>
<Card className='overflow-hidden border border-lucky-border'>
<div className='px-6 py-4 border-b border-lucky-border'>
<h2 className='text-base font-semibold text-white uppercase tracking-wide'>
Content Filters
</h2>
</div>
Expand All @@ -748,7 +750,9 @@ export default function AutoModPage() {
<NumberInput
label='Time window (s)'
value={settings.spamTimeWindow}
onChange={(v) => update('spamTimeWindow', v)}
onChange={(v) =>
update('spamTimeWindow', v)
}
min={1}
max={60}
/>
Expand Down Expand Up @@ -848,11 +852,11 @@ export default function AutoModPage() {
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
>
<Card className='overflow-hidden'>
<div className='px-6 py-4 border-b border-lucky-border/50'>
<Card className='overflow-hidden border border-lucky-border'>
<div className='px-6 py-4 border-b border-lucky-border'>
<div className='flex items-center gap-2 mb-2'>
<CheckCircle2 className='w-5 h-5 text-lucky-success' />
<h2 className='text-base font-semibold text-white'>
<h2 className='text-base font-semibold text-white uppercase tracking-wide'>
Exemptions
</h2>
</div>
Expand All @@ -862,7 +866,7 @@ export default function AutoModPage() {
</p>
</div>
<div className='grid grid-cols-1 md:grid-cols-2'>
<div className='p-6 space-y-3 border-r border-lucky-border/50 md:border-r md:border-b-0 border-b md:border-b-0'>
<div className='p-6 space-y-3 border-r border-lucky-border md:border-r md:border-b-0 border-b md:border-b-0'>
<Label className='text-xs text-lucky-text-secondary'>
Exempt Channels
</Label>
Expand Down
8 changes: 4 additions & 4 deletions packages/frontend/src/pages/Config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function ConfigPage() {
<header className='space-y-4'>
<div className='space-y-1'>
<h1
className='text-2xl font-semibold text-lucky-text-primary'
className='text-2xl font-semibold text-lucky-text-primary uppercase tracking-wide'
style={{ fontFamily: 'Sora' }}
>
Configuration
Expand All @@ -75,10 +75,10 @@ export default function ConfigPage() {
return (
<main className='bg-lucky-bg-primary min-h-screen'>
{/* Header */}
<header className='border-b border-lucky-border-soft bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
<header className='border-b border-lucky-border bg-lucky-surface-sidebar px-4 md:px-6 py-4'>
<div className='space-y-1'>
<h1
className='text-xl font-semibold text-lucky-text-primary'
className='text-xl font-semibold text-lucky-text-primary uppercase tracking-wide'
style={{ fontFamily: 'Sora' }}
>
Configuration
Expand Down Expand Up @@ -110,7 +110,7 @@ export default function ConfigPage() {
<button
key={module.id}
type='button'
className='group relative flex items-start gap-4 p-4 rounded-lg border border-lucky-border-soft bg-lucky-surface-panel transition-colors duration-120 hover:border-lucky-border-strong hover:bg-lucky-surface-elevated focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-lucky-brand focus-visible:ring-offset-2 focus-visible:ring-offset-lucky-bg-primary'
className='group relative flex items-start gap-4 p-4 rounded-lg border border-lucky-border bg-lucky-surface-panel transition-colors duration-120 hover:border-lucky-border-strong hover:bg-lucky-surface-elevated focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-lucky-brand focus-visible:ring-offset-2 focus-visible:ring-offset-lucky-bg-primary'
onClick={() =>
handleModuleClick(module.id)
}
Expand Down
4 changes: 2 additions & 2 deletions packages/frontend/src/pages/CustomCommands.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ export default function CustomCommandsPage() {
: cmd.id,
)
}
className='w-full px-4 py-3 flex items-center gap-3 hover:bg-lucky-surface-elevated transition-colors'
className='w-full px-4 py-3 flex items-center gap-3 transition-colors hover:bg-lucky-bg-active/25'
>
<div className='p-2 rounded bg-lucky-bg-active shrink-0'>
<Code className='w-4 h-4 text-lucky-text-secondary' />
Expand All @@ -209,7 +209,7 @@ export default function CustomCommandsPage() {
</h3>
<Badge
className={cn(
'text-[10px] uppercase border shrink-0',
'text-[10px] uppercase border shrink-0 font-semibold',
CATEGORY_COLORS[cmd.category] ||
'bg-lucky-bg-active text-lucky-text-secondary border-lucky-border',
)}
Expand Down
Loading
Loading