devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 40 Packages Projects Releases 1 Wiki Activity

feat: Phase 4 Aether Drift — auth, modals & UI component token migration

Browse Source 
Migrate all auth pages, modals, and shared UI components from Discord
visual language to Aether Drift design tokens. Zero discord-* classes
or raw Tailwind palette colors remain in components/auth/, modals/, ui/.

- Avatar: status dots use status-online/idle/dnd/offline tokens
- Tooltip, ContextMenu, UserProfilePopout: z-index raised to z-[200]
- LoginPage, RegisterPage: warm bg-surface-base with lavender glow
- All modals: inputs use surface-input, buttons use accent-primary
- Toggles: bg-status-online (on), bg-surface-input (off)
- ServerSettings: slider tracks, pills, danger zone fully tokenized
- Purged raw Tailwind green-500 leak in StreamingLimitsPanel success msg
This commit is contained in:
Jannis Braun
2026-03-02 00:01:24 +01:00
parent 7172091159
commit d0e696e03c
15 changed files with 173 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/AddDmMemberModal.tsx
+10 -10
View File
@@ -80,10 +80,10 @@ export function AddDmMemberModal() {
<Modal isOpen={isOpen} onClose={closeModal} title="Add Friends to DM">
<div className="space-y-3">
<div className="flex items-center justify-between">
<p className="text-[13px] text-discord-text-muted">
<p className="text-[13px] text-txt-tertiary">
Search for a user to add to this conversation.
</p>
<span className="text-[12px] text-discord-text-muted flex-shrink-0 ml-2">
<span className="text-[12px] text-txt-tertiary flex-shrink-0 ml-2">
{memberCount}/10
</span>
</div>
@@ -94,25 +94,25 @@ export function AddDmMemberModal() {
value={query}
onChange={(e) => handleSearch(e.target.value)}
placeholder="Search for a user..."
className="w-full px-3 py-2 bg-discord-bg-tertiary text-discord-text-primary placeholder-discord-text-muted/60 rounded-[4px] text-[14px] outline-none focus:ring-1 focus:ring-discord-blurple"
className="w-full px-3 py-2 bg-surface-input text-txt-primary placeholder-txt-tertiary/60 rounded-[4px] text-[14px] outline-none focus:ring-1 focus:ring-accent-primary"
disabled={memberCount >= 10}
/>
{memberCount >= 10 && (
<p className="text-discord-red text-[13px]">This group DM has reached the 10-member limit.</p>
<p className="text-txt-danger text-[13px]">This group DM has reached the 10-member limit.</p>
)}
{error && (
<p className="text-discord-red text-[13px]">{error}</p>
<p className="text-txt-danger text-[13px]">{error}</p>
)}
<div className="max-h-[300px] overflow-y-auto space-y-[2px]">
{isSearching && (
<div className="py-4 text-center text-discord-text-muted text-[14px]">Searching...</div>
<div className="py-4 text-center text-txt-tertiary text-[14px]">Searching...</div>
)}
{!isSearching && query.trim().length >= 2 && results.length === 0 && (
<div className="py-4 text-center text-discord-text-muted text-[14px]">No users found</div>
<div className="py-4 text-center text-txt-tertiary text-[14px]">No users found</div>
)}
{results.map((user) => (
@@ -120,14 +120,14 @@ export function AddDmMemberModal() {
key={user.id}
onClick={() => handleSelectUser(user)}
disabled={isAdding}
className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-discord-modifier-hover transition-colors text-left disabled:opacity-50"
className="w-full flex items-center gap-3 px-3 py-2 rounded-[4px] hover:bg-interactive-hover transition-colors text-left disabled:opacity-50"
>
<Avatar src={user.avatar} name={user.displayName ?? user.username} size={36} status={user.status as any} />
<div className="flex-1 min-w-0">
<div className="text-[14px] font-medium text-discord-text-primary truncate">
<div className="text-[14px] font-medium text-txt-primary truncate">
{user.displayName ?? user.username}
</div>
<div className="text-[12px] text-discord-text-muted truncate">@{user.username}</div>
<div className="text-[12px] text-txt-tertiary truncate">@{user.username}</div>
</div>
</button>
))}