Skip to content

Refresh OpenMail's mailbox, sign-in, and settings UI #6

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
eshanized merged 18 commits into from
Oct 18, 2026
Merged

Refresh OpenMail's mailbox, sign-in, and settings UI #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d37081d
style: refresh mailbox and page design system
eshanized Oct 18, 2026
2686b68
style: redesign sign-in page
eshanized Oct 18, 2026
4596fca
style: polish sign-in form and controls
eshanized Oct 18, 2026
04af5d4
style: refine settings workspace layout
eshanized Oct 18, 2026
8f4cdf4
style: refine setup wizard surface
eshanized Oct 18, 2026
6d6d4d3
style: modernize application header spacing
eshanized Oct 18, 2026
31240dc
style: polish secondary mail workspaces and mobile reader
eshanized Oct 18, 2026
8d810ac
style: unify secondary page workspace
eshanized Oct 18, 2026
599c6a5
style: unify secondary page workspace
eshanized Oct 18, 2026
4c18283
style: unify secondary page workspace
eshanized Oct 18, 2026
2f93eef
style: unify secondary page workspace
eshanized Oct 18, 2026
a00a50e
style: unify secondary page workspace
eshanized Oct 18, 2026
3629b0b
style: unify secondary page workspace
eshanized Oct 18, 2026
c863486
style: align mailbox viewport with refreshed header
eshanized Oct 18, 2026
637cbe9
style: streamline inbox header and search toolbar
eshanized Oct 18, 2026
9d35cd0
style: tune compact mailbox and sign-in layouts
eshanized Oct 18, 2026
92ef8ac
test: retain login design token hooks
eshanized Oct 18, 2026
40b4bb8
copy: clarify self-hosted sign-in privacy note
eshanized Oct 18, 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
403 changes: 403 additions & 0 deletions resources/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

166 changes: 93 additions & 73 deletions resources/views/auth/login.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,123 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="theme-color" content="#cf4234">
<meta name="application-name" content="{{ config('app.name', 'OpenMail') }}">
<title>{{ config('app.name', 'OpenMail') }} — Sign in</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])

<script @cspNonceAttribute>
(function() {
var theme = localStorage.getItem('theme') || 'system';
var density = localStorage.getItem('density') || 'regular';
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (theme === 'dark' || (theme === 'system' && prefersDark)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
try {
var theme = localStorage.getItem('theme') || 'system';
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (theme === 'dark' || (theme === 'system' && prefersDark)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
document.documentElement.classList.add('density-' + (localStorage.getItem('density') || 'regular'));
document.documentElement.dataset.themeInitialized = 'true';
} catch (error) {
document.documentElement.dataset.themeInitialized = 'true';
}
document.documentElement.classList.add('density-' + density);
document.documentElement.dataset.themeInitialized = 'true';
})();
</script>
</head>
<body class="bg-surface min-h-[100dvh] antialiased">
<body class="auth-body bg-surface antialiased">
<main class="auth-layout min-h-[100dvh] flex">
<section class="auth-brand-panel hidden lg:flex lg:w-[44%] xl:w-[46%] flex-col justify-between p-10 xl:p-14" aria-label="About OpenMail">
<a href="/" class="auth-brand-lockup inline-flex items-center gap-3 w-fit" aria-label="OpenMail home">
<span class="auth-brand-mark" aria-hidden="true">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</span>
<span class="text-base font-semibold tracking-tight text-ink">{{ config('app.name', 'OpenMail') }}</span>
</a>

{{--
Login page — editorial, calm, trustworthy
NOT: giant black background, glowing blue logo, oversized card
Design: clean two-section layout, warm light background, tight typography
--}}
<div class="auth-brand-content">
<span class="auth-eyebrow"><span class="auth-eyebrow-dot"></span> PRIVATE BY DESIGN</span>
<h1 class="auth-brand-title">A calmer place<br>for <span>your email.</span></h1>
<p class="auth-brand-description">All your conversations, thoughtfully organized. Connect to your existing mail server and get a focused workspace that stays yours.</p>

<div class="min-h-[100dvh] flex">
{{-- Left panel: branding + identity --}}
<div class="hidden lg:flex lg:w-5/12 xl:w-1/2 flex-col justify-between bg-surface-sunken border-r border-border p-10 xl:p-14">
{{-- Logo --}}
<div class="flex items-center gap-2.5">
<svg class="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span class="text-sm font-semibold text-ink tracking-tight">{{ config('app.name', 'OpenMail') }}</span>
</div>

{{-- Main editorial statement --}}
<div>
<h1 class="text-3xl xl:text-4xl font-bold text-ink tracking-tight leading-snug mb-4">
Company email,<br>without the clutter.
</h1>
<p class="text-base text-ink-secondary leading-relaxed max-w-sm">
A focused, professional webmail experience built for serious work. Connect to your existing mail infrastructure.
</p>
<div class="auth-feature-list">
<div class="auth-feature-item">
<span class="auth-feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3l7 3v5c0 4.5-3 7.5-7 10-4-2.5-7-5.5-7-10V6l7-3z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4"/></svg>
</span>
<span><strong>Your infrastructure</strong><small>Self-hosted and connected to your existing IMAP/SMTP server.</small></span>
</div>
<div class="auth-feature-item">
<span class="auth-feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 7l9 6 9-6"/></svg>
</span>
<span><strong>Everything in its place</strong><small>Threads, folders, labels, and search in one uncluttered inbox.</small></span>
</div>
<div class="auth-feature-item">
<span class="auth-feature-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path stroke-linecap="round" stroke-linejoin="round" d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></svg>
</span>
<span><strong>No third-party AI analysis</strong><small>Your mail content is not sent to external AI services.</small></span>
</div>
</div>

{{-- Feature points — clean, no icons --}}
<div class="mt-8 space-y-2.5">
@foreach(['IMAP & SMTP compatible', 'Self-hosted, no data sharing', 'Keyboard-first workflow', 'Thread and label support'] as $feature)
<div class="flex items-center gap-2.5 text-sm text-ink-secondary">
<span class="w-1 h-1 rounded-full bg-ink-tertiary flex-shrink-0"></span>
<span>{{ $feature }}</span>
</div>
@endforeach
<div class="auth-preview" aria-hidden="true">
<div class="auth-preview-top">
<span class="auth-preview-dots"><i></i><i></i><i></i></span>
<span class="auth-preview-caption">Your workspace</span>
<span class="auth-preview-status"><span></span> Private</span>
</div>
<div class="auth-preview-search"><span class="auth-preview-search-icon"></span> Search your mail</div>
<div class="auth-preview-mail">
<span class="auth-preview-avatar auth-preview-avatar-coral">A</span>
<span class="auth-preview-mail-copy"><strong>Alex Morgan</strong><span>Project update and next steps</span></span>
<span class="auth-preview-time">09:41</span>
</div>
<div class="auth-preview-mail">
<span class="auth-preview-avatar auth-preview-avatar-slate">S</span>
<span class="auth-preview-mail-copy"><strong>Sarah Chen</strong><span>Re: Design review</span></span>
<span class="auth-preview-time">Yesterday</span>
</div>
</div>
</div>

{{-- Attribution — subtle --}}
<p class="text-xs text-ink-tertiary">
OpenMail by <span class="text-ink-secondary">Tonmoy Infrastructure</span>
</p>
</div>
<p class="auth-brand-footer">OpenMail <span>·</span> by Tonmoy Infrastructure &amp; Vision</p>
</section>

{{-- Right panel: sign in form --}}
<div class="flex-1 flex flex-col justify-center px-4 py-8 sm:px-10 lg:px-16 xl:px-20">
{{-- Mobile logo (hidden on lg+) --}}
<div class="flex items-center gap-2 mb-6 sm:mb-10 lg:hidden">
<svg class="w-4.5 h-4.5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span class="text-sm font-semibold text-ink">{{ config('app.name', 'OpenMail') }}</span>
<section class="auth-main flex-1 flex flex-col items-center justify-center px-4 py-8 sm:px-8 lg:px-12" aria-label="Sign in">
<div class="auth-mobile-brand lg:hidden">
<span class="auth-brand-mark" aria-hidden="true">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</span>
<span>{{ config('app.name', 'OpenMail') }}</span>
</div>

<div class="w-full max-w-sm bg-surface-raised sm:border sm:border-border sm:p-6 rounded sm:shadow-xs">
{{-- Heading --}}
<div class="mb-5">
<h2 class="text-xl font-semibold text-ink tracking-tight">
Sign in
</h2>
<p class="mt-1 text-xs text-ink-secondary">
Access your mailbox
</p>
<div class="auth-card w-full bg-surface-raised border border-border">
<div class="auth-card-heading">
<span class="auth-card-kicker">WELCOME BACK</span>
<h2>Sign in to your inbox</h2>
<p>Use your OpenMail account to continue.</p>
</div>

{{-- Form --}}
@livewire('login-form')

{{-- Footer --}}
<p class="mt-8 text-xs text-ink-tertiary text-center lg:text-left">
Secure company webmail &middot;
<span class="text-ink-secondary">Tonmoy Infrastructure</span>
</p>
<div class="auth-security-note">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3l7 3v5c0 4.5-3 7.5-7 10-4-2.5-7-5.5-7-10V6l7-3z"/></svg>
<span>Your sign-in is handled by your own OpenMail server.</span>
</div>
</div>
</div>
</div>

<footer class="auth-main-footer">
<span>Secure, self-hosted webmail</span>
<span class="auth-footer-separator">·</span>
<span>Tonmoy Infrastructure &amp; Vision</span>
</footer>
</section>
</main>
</body>
</html>
2 changes: 1 addition & 1 deletion resources/views/delivery-activity-page.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@endsection

@section('mailbox-content')
<div class="mx-auto w-full max-w-5xl space-y-4">
<div class="utility-workspace mx-auto w-full max-w-5xl space-y-4">
<div class="flex flex-col gap-2 border-b border-border pb-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<a href="{{ route('mailbox') }}" wire:navigate class="mb-1 inline-flex items-center gap-1.5 text-xs text-ink-tertiary hover:text-ink">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/follow-up-reminders-page.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@endsection

@section('mailbox-content')
<div class="mx-auto w-full max-w-5xl space-y-4">
<div class="utility-workspace mx-auto w-full max-w-5xl space-y-4">
<div class="flex flex-col gap-2 border-b border-border pb-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<a href="{{ route('mailbox') }}" wire:navigate class="mb-1 inline-flex items-center gap-1.5 text-xs text-ink-tertiary hover:text-ink">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/layouts/app.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class="pointer-events-none fixed inset-0 z-[9999] opacity-0 transition-opacity d
{{-- Application header — minimal, recedes behind content --}}
<nav class="app-topbar bg-surface-raised border-b border-border sticky top-0 z-30 w-full shrink-0">
<div class="w-full px-2.5 sm:px-6 lg:px-8">
<div class="flex justify-between h-14 items-center gap-1.5 sm:gap-4">
<div class="flex justify-between h-16 items-center gap-1.5 sm:gap-4">
{{-- Left: Brand & Navigation --}}
<div class="flex items-center gap-1.5 sm:gap-3 min-w-0">
@hasSection('mobile-nav-toggle')
Expand Down
2 changes: 1 addition & 1 deletion resources/views/layouts/mailbox.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ class="lg:hidden p-1 -ml-1 text-ink-secondary hover:text-ink hover:bg-hover roun
@endsection

@section('content')
<div class="mailbox-workspace flex-1 flex overflow-hidden w-full h-[calc(100vh-3.5rem)] min-h-[calc(100dvh-3.5rem)] relative"
<div class="mailbox-workspace flex-1 flex overflow-hidden w-full h-[calc(100vh-4rem)] min-h-[calc(100dvh-4rem)] relative"
x-data="{
sidebarOpen: false,
closeSidebar() {
Expand Down
Loading
Loading