Skip to content

Commit c7881fa

Browse files
ChrispyBacon-devChrispyBacon-dev
committed
webmail - design refresh - - align with dockflare web project and copy over new dockflare logoo
1 parent 71e4c73 commit c7881fa

18 files changed

Lines changed: 186 additions & 44 deletions

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ All notable changes to this project will be documented in this file.
77

88
### Added
99
- **Webmail - Profile Settings:** New Profile section in Settings lets users update their display name. The current formatted From address (`Name <email>`) is previewed live. Changes persist immediately and reflect across the session without re-login.
10+
- **Webmail - Design Refresh:** Visual overhaul aligning the webmail with the DockFlare website design system.
11+
- **New Logo:** Replaced animated GIF with the updated static SVG logo. Light and dark variants swap automatically based on active theme.
12+
- **Aurora Background:** Animated conic-gradient aurora layer (blue-violet) added to both login and mail views, matching the website aesthetic.
13+
- **Light Mode Background:** Subtle radial blue gradient at the top of the light mode background, consistent with the website.
14+
- **Font:** Body font updated to Inter, matching the website. Outfit retained for branding text.
15+
- **Brand Orange:** Accent color aligned to `#f97316` across all components (compose button, unread indicators, active tabs, folder highlights, settings nav).
16+
- **Login Page:** Theme toggle button (sun/moon) added to the login screen. Logo enlarged and "Webmail" sub-label removed for a cleaner presentation.
17+
- **System Theme Awareness:** Dark mode now falls back to the OS `prefers-color-scheme` setting when no explicit user preference has been stored.
1018

1119
### Fixed
1220
- **Outbound - Display Name in From Header:** The display name set during mailbox creation was stored but never applied when sending. Outbound emails now correctly use `Display Name <address>` format in the `From` header. Reported by the community in [#363](https://github.com/ChrispyBacon-dev/DockFlare/issues/363).

‎webmail/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
1313
<link rel="shortcut icon" href="/favicon/favicon.ico">
1414
<link rel="preconnect" href="https://fonts.googleapis.com">
15-
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@700;800&display=swap" rel="stylesheet">
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@700;800&display=swap" rel="stylesheet">
1617
</head>
1718
<body>
1819
<div id="app"></div>

‎webmail/public/logo-dark.svg‎

Lines changed: 31 additions & 0 deletions
Loading

‎webmail/public/logo-light.svg‎

Lines changed: 31 additions & 0 deletions
Loading

‎webmail/src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const { needRefresh, updateServiceWorker } = useRegisterSW()
66
</script>
77

88
<template>
9+
<div class="aurora-layer" aria-hidden="true" />
910
<RouterView />
1011
<Transition name="slide-up">
1112
<div

‎webmail/src/assets/styles/main.css‎

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,9 @@
5050
--ring: 214 60% 23%;
5151
--radius: 0.5rem;
5252

53-
--df-accent: 38 97% 52%;
54-
--df-accent-hover: 35 97% 48%;
53+
/* Brand accent — aligned with DockFlareWeb #f97316 */
54+
--df-accent: 25 95% 53%;
55+
--df-accent-hover: 22 94% 46%;
5556
--df-blue: 204 73% 63%;
5657

5758
--df-sidebar-bg: rgba(232, 241, 255, 0.62);
@@ -66,6 +67,11 @@
6667
--df-shadow-md: 0 6px 24px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
6768
--df-shadow-lg: 0 20px 52px rgba(0,0,0,0.13), 0 6px 18px rgba(0,0,0,0.07);
6869
--df-shadow-float: 0 4px 18px rgba(0,0,0,0.10), 0 1px 5px rgba(0,0,0,0.06);
70+
71+
/* Aurora palette tokens */
72+
--color-blue-500: #3b82f6;
73+
--color-violet-500: #8b5cf6;
74+
--duration-aurora: 30s;
6975
}
7076

7177
.dark {
@@ -111,18 +117,45 @@
111117
}
112118
body {
113119
@apply text-foreground;
114-
font-family: 'DM Sans', -apple-system, sans-serif;
115-
background: linear-gradient(148deg,
116-
oklch(0.89 0.028 255) 0%,
117-
oklch(0.94 0.014 215) 42%,
118-
oklch(0.90 0.022 280) 100%);
120+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
121+
background: radial-gradient(110% 55% at 50% 0%, rgba(59,130,246,0.09) 0%, #f8f9fb 55%);
119122
min-height: 100vh;
120123
}
121124
.dark body {
122-
background: linear-gradient(148deg,
123-
oklch(0.085 0.032 258) 0%,
124-
oklch(0.11 0.026 238) 42%,
125-
oklch(0.078 0.030 274) 100%);
125+
background: #0a0a1a;
126+
}
127+
}
128+
129+
/* Aurora background layer */
130+
.aurora-layer {
131+
position: fixed;
132+
inset: 0;
133+
z-index: 0;
134+
pointer-events: none;
135+
background: conic-gradient(
136+
from 230deg at 51% 52%,
137+
var(--color-violet-500) 0deg,
138+
var(--color-blue-500) 67deg,
139+
transparent 160deg,
140+
transparent 360deg
141+
);
142+
opacity: 0.06;
143+
filter: blur(48px) saturate(140%);
144+
animation: auroraMove var(--duration-aurora) ease-in-out infinite alternate;
145+
}
146+
147+
.dark .aurora-layer {
148+
opacity: 0.12;
149+
}
150+
151+
@keyframes auroraMove {
152+
from { transform: translateX(-10%); }
153+
to { transform: translateX(10%); }
154+
}
155+
156+
@media (prefers-reduced-motion: reduce) {
157+
.aurora-layer {
158+
animation: none;
126159
}
127160
}
128161

‎webmail/src/components/mail/ComposeDialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -576,7 +576,7 @@ onUnmounted(() => document.removeEventListener('mousedown', onEmojiClickOutside)
576576
<!-- Bottom Action Bar -->
577577
<div class="flex items-center justify-between gap-2 border-t border-border px-4 py-2.5 flex-shrink-0">
578578
<div class="flex items-center gap-1">
579-
<Button as="button" type="button" size="sm" class="rounded-full px-5 font-semibold tracking-wide" style="background: #FBA612; color: white; box-shadow: 0 2px 10px rgba(251,166,18,0.32); border: none;" @click.prevent="send" :disabled="sending || (!toTags.length && !toInput)">
579+
<Button as="button" type="button" size="sm" class="rounded-full px-5 font-semibold tracking-wide" style="background: hsl(var(--df-accent)); color: white; box-shadow: 0 2px 10px hsl(var(--df-accent) / 0.32); border: none;" @click.prevent="send" :disabled="sending || (!toTags.length && !toInput)">
580580
{{ sending ? 'Sending…' : 'Send' }}
581581
</Button>
582582
<button type="button" class="ml-1 rounded p-1.5 transition-colors" :class="savedDraft ? 'text-green-500' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'" :disabled="savingDraft" title="Save draft" @click="saveDraft">

‎webmail/src/components/mail/FolderNav.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ const confirmEdit = async () => {
215215
<span
216216
v-if="f.unread_count"
217217
class="rounded-full px-1.5 py-0.5 text-[10.5px] font-bold leading-none flex items-center"
218-
style="background: rgba(251,166,18,0.12); color: #FBA612;"
218+
style="background: hsl(var(--df-accent) / 0.12); color: hsl(var(--df-accent));"
219219
>{{ f.unread_count }}</span>
220220
<span v-if="!f.unread_count">{{ f.total_count }}</span>
221221
</span>
@@ -273,7 +273,7 @@ const confirmEdit = async () => {
273273
<component :is="getIcon(f.name, store.currentFolder === f.name)" class="size-4 flex-shrink-0" :style="f.color && store.currentFolder !== f.name ? `color:${f.color}` : ''" />
274274
<span class="truncate">{{ f.name }}</span>
275275
<span v-if="f.total_count > 0" :class="cn('ml-auto text-xs flex-shrink-0 flex gap-1', store.currentFolder === f.name ? 'opacity-90' : 'text-muted-foreground')">
276-
<span v-if="f.unread_count" class="rounded-full px-1.5 py-0.5 text-[10.5px] font-bold leading-none flex items-center" style="background: rgba(251,166,18,0.12); color: #FBA612;">{{ f.unread_count }}</span>
276+
<span v-if="f.unread_count" class="rounded-full px-1.5 py-0.5 text-[10.5px] font-bold leading-none flex items-center" style="background: hsl(var(--df-accent) / 0.12); color: hsl(var(--df-accent));">{{ f.unread_count }}</span>
277277
<span v-if="!f.unread_count">{{ f.total_count }}</span>
278278
</span>
279279
</button>

‎webmail/src/components/mail/MailLayout.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const mobileTitle = computed(() => {
7676
<ChevronLeft class="size-5" />
7777
</button>
7878
<span v-else class="font-['Outfit'] font-extrabold text-[19px] tracking-[-0.01em] leading-none select-none h-10 flex items-center px-1">
79-
<span class="text-[#194466] dark:text-[#5EB1E5]">Dock</span><span class="text-[#FBA612]">Flare</span>
79+
<span class="text-[#194466] dark:text-[#5EB1E5]">Dock</span><span class="text-df-accent">Flare</span>
8080
</span>
8181

8282
<!-- Center: title (only for list/detail, not folders since wordmark is there) -->
@@ -138,7 +138,7 @@ const mobileTitle = computed(() => {
138138
<button
139139
class="flex flex-col items-center gap-1 px-6 py-2 rounded-xl transition-colors min-h-[44px] justify-center"
140140
:class="mobilePanel === 'folders' ? '' : 'text-muted-foreground'"
141-
:style="mobilePanel === 'folders' ? 'color: #FBA612;' : ''"
141+
:style="mobilePanel === 'folders' ? 'color: hsl(var(--df-accent))' : ''"
142142
@click="mobilePanel = 'folders'"
143143
>
144144
<Menu class="size-5" />
@@ -147,7 +147,7 @@ const mobileTitle = computed(() => {
147147

148148
<button
149149
class="flex items-center justify-center h-12 w-12 rounded-full shadow-lg transition-colors flex-shrink-0"
150-
style="background: #FBA612; color: white; box-shadow: 0 2px 10px rgba(251,166,18,0.38);"
150+
style="background: hsl(var(--df-accent)); color: white; box-shadow: 0 2px 10px hsl(var(--df-accent) / 0.38);"
151151
@click="compose"
152152
>
153153
<PenSquare class="size-5" />
@@ -156,7 +156,7 @@ const mobileTitle = computed(() => {
156156
<button
157157
class="flex flex-col items-center gap-1 px-6 py-2 rounded-xl transition-colors min-h-[44px] justify-center"
158158
:class="mobilePanel === 'list' ? '' : 'text-muted-foreground'"
159-
:style="mobilePanel === 'list' ? 'color: #FBA612;' : ''"
159+
:style="mobilePanel === 'list' ? 'color: hsl(var(--df-accent))' : ''"
160160
@click="mobilePanel = 'list'"
161161
>
162162
<Columns2 class="size-5" />
@@ -184,11 +184,11 @@ const mobileTitle = computed(() => {
184184
<!-- Header: wordmark + collapse toggle -->
185185
<div class="h-[54px] flex items-center justify-center px-[14px] flex-shrink-0">
186186
<template v-if="!store.isCollapsed">
187-
<img src="/logo.gif" alt="DockFlare" class="h-7 w-auto select-none" draggable="false" />
187+
<img :src="store.isDark ? '/logo-dark.svg' : '/logo-light.svg'" alt="DockFlare" class="h-10 w-auto select-none" draggable="false" />
188188
</template>
189189
<template v-else>
190190
<span class="font-['Outfit'] font-extrabold text-[15px] leading-none select-none mx-auto">
191-
<span class="text-[#194466] dark:text-[#5EB1E5]">D</span><span class="text-[#FBA612]">F</span>
191+
<span class="text-[#194466] dark:text-[#5EB1E5]">D</span><span style="color: var(--df-accent)">F</span>
192192
</span>
193193
</template>
194194
</div>
@@ -414,11 +414,11 @@ const mobileTitle = computed(() => {
414414
transition: width 0.22s ease;
415415
}
416416
.df-compose-btn {
417-
background: #FBA612;
417+
background: hsl(var(--df-accent));
418418
color: white;
419-
box-shadow: 0 2px 10px rgba(251,166,18,0.32);
419+
box-shadow: 0 2px 10px hsl(var(--df-accent) / 0.32);
420420
}
421421
.df-compose-btn:hover {
422-
box-shadow: 0 4px 16px rgba(251,166,18,0.45);
422+
box-shadow: 0 4px 16px hsl(var(--df-accent) / 0.45);
423423
}
424424
</style>

0 commit comments

Comments
 (0)