diff --git a/app/globals.css b/app/globals.css index 522f2b3..445a36a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -39,9 +39,48 @@ --sidebar-ring: oklch(0.708 0 0); /** Fond chrome (layout mail : header, rails, sidebar). */ --app-canvas: #fafbfc; + --mail-surface: #ffffff; + --mail-surface-elevated: #ffffff; + --mail-surface-muted: #f1f3f4; + --mail-border: #dadce0; + --mail-border-subtle: #eceff1; + --mail-text: #3c4043; + --mail-text-strong: #202124; + --mail-text-muted: #5f6368; + --mail-hover: #f1f3f4; + --mail-active: #e8f0fe; + --mail-row-unread: #ffffff; + --mail-row-read: #f5f5f5; + --mail-row-selected: #e8f0fe; + --mail-row-active-split: #e8f0fe; + --mail-nav-selected: #d3e3fd; + --mail-nav-selected-fg: #202124; + --mail-nav-hover: #f1f3f4; + --mail-nav-drop: #fef7cd; + --mail-invitation: #e8f0fe; } .dark { + --app-canvas: #202124; + --mail-surface: #2d2e30; + --mail-surface-elevated: #35363a; + --mail-surface-muted: #3c4043; + --mail-border: #5f6368; + --mail-border-subtle: #3c4043; + --mail-text: #e8eaed; + --mail-text-strong: #ffffff; + --mail-text-muted: #9aa0a6; + --mail-hover: #3c4043; + --mail-active: #394457; + --mail-row-unread: #2d2e30; + --mail-row-read: #35363a; + --mail-row-selected: #394457; + --mail-row-active-split: #394457; + --mail-nav-selected: #394457; + --mail-nav-selected-fg: #e8eaed; + --mail-nav-hover: #3c4043; + --mail-nav-drop: #4a4428; + --mail-invitation: #2d3a4d; --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); @@ -116,6 +155,12 @@ --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-app-canvas: var(--app-canvas); + --color-mail-surface: var(--mail-surface); + --color-mail-surface-elevated: var(--mail-surface-elevated); + --color-mail-surface-muted: var(--mail-surface-muted); + --color-mail-border: var(--mail-border); + --color-mail-border-subtle: var(--mail-border-subtle); + --color-mail-invitation: var(--mail-invitation); } @layer base { @@ -295,3 +340,262 @@ body { animation: long-press-ack 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: center; } + +/* ── Mail : fond décoratif plein écran (derrière toute l’UI) ── */ +html { + background-color: var(--mail-bg-fallback, var(--app-canvas)); +} + +html::before { + content: ''; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background-color: var(--mail-bg-fallback, transparent); + background-image: var(--mail-bg-layer, none); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + opacity: 0; + transition: opacity 0.25s ease; +} + +html[data-mail-background]:not([data-mail-background='none'])::before { + opacity: 1; +} + +html[data-mail-background]:not([data-mail-background='none']) .ultimail-app { + background-color: transparent !important; +} + +html[data-mail-background]:not([data-mail-background='none']) .ultimail-app :where(.bg-app-canvas) { + background-color: color-mix(in srgb, var(--app-canvas) 78%, transparent) !important; +} + +html[data-mail-background]:not([data-mail-background='none']) + .ultimail-app + :where(.bg-mail-surface, .bg-white) { + background-color: color-mix(in srgb, var(--mail-surface) 88%, transparent) !important; +} + +.ultimail-app { + position: relative; + isolation: isolate; +} + +/* Lignes de liste */ +.bg-mail-row-unread { + background-color: var(--mail-row-unread); +} +.bg-mail-row-read { + background-color: var(--mail-row-read); +} +.bg-mail-row-selected { + background-color: var(--mail-row-selected); +} +.bg-mail-row-active-split { + background-color: var(--mail-row-active-split); +} +.bg-mail-nav-selected { + background-color: var(--mail-nav-selected); +} +.text-mail-nav-selected { + color: var(--mail-nav-selected-fg); +} +.bg-mail-nav-hover { + background-color: var(--mail-nav-hover); +} +.bg-mail-nav-drop { + background-color: var(--mail-nav-drop); +} +.bg-mail-invitation { + background-color: var(--mail-invitation); +} + +/* ── Mail : mode sombre (surcharges ciblées dans le shell) ── */ +html.dark .ultimail-app { + color-scheme: dark; +} + +html.dark .ultimail-app :where(.bg-white) { + background-color: var(--mail-surface) !important; +} + +html.dark .ultimail-app :where( + .bg-\[\#f1f3f4\], + .bg-\[\#f8f9fa\], + .bg-\[\#fafbfc\], + .bg-\[\#edf2fc\], + .bg-\[\#eaf1fb\], + .bg-\[\#f6f9fe\], + .bg-\[\#f5f5f5\], + .bg-\[\#e8eaed\] +) { + background-color: var(--mail-surface-muted) !important; +} + +html.dark .ultimail-app :where(.bg-\[\#e8f0fe\]) { + background-color: var(--mail-active) !important; +} + +html.dark .ultimail-app :where([class*='bg-white/']) { + background-color: color-mix(in srgb, var(--mail-surface) 82%, transparent) !important; +} + +html.dark .ultimail-app :where(.bg-gray-200) { + background-color: var(--mail-surface-muted) !important; +} + +html.dark .ultimail-app :where(.hover\:bg-\[\#f1f3f4\]:hover, .hover\:bg-\[\#f6f9fe\]:hover, .hover\:bg-gray-100:hover) { + background-color: var(--mail-hover) !important; +} + +html.dark .ultimail-app :where(.border-gray-200, .border-\[\#dadce0\], .border-\[\#eceff1\]) { + border-color: var(--mail-border-subtle) !important; +} + +html.dark .ultimail-app :where(.divide-gray-200 > :not(:last-child), .divide-\[\#eceff1\] > :not(:last-child)) { + border-color: var(--mail-border-subtle) !important; +} + +html.dark .ultimail-app :where(.text-gray-900, .text-gray-800, .text-gray-700, .text-\[\#202124\], .text-\[\#3c4043\], .text-\[\#1f1f1f\]) { + color: var(--mail-text) !important; +} + +html.dark .ultimail-app :where(.text-gray-600, .text-gray-500, .text-\[\#5f6368\], .text-\[\#444746\]) { + color: var(--mail-text-muted) !important; +} + +html.dark .ultimail-app :where(.text-gray-400, .text-\[\#c2c2c2\]) { + color: #80868b !important; +} + +html.dark .ultimail-app :where(.shadow-sm, .shadow-lg) { + --tw-shadow-color: rgb(0 0 0 / 0.35); +} + +html.dark .ultimail-app :where(input, textarea, select) { + background-color: var(--mail-surface-muted); + color: var(--mail-text); + border-color: var(--mail-border-subtle); +} + +html.dark .ultimail-app :where(.tiptap blockquote) { + border-left-color: var(--mail-border); + color: var(--mail-text-muted); +} + +html.dark .ultimail-app :where(.tiptap code, .tiptap pre) { + background-color: var(--mail-surface-muted); +} + +/* ── Dark : portails Radix & toasts (rendus hors .ultimail-app) ── */ +html.dark [data-slot='dropdown-menu-content'], +html.dark [data-slot='dropdown-menu-sub-content'], +html.dark [data-slot='context-menu-content'], +html.dark [data-slot='context-menu-sub-content'], +html.dark [data-slot='popover-content'], +html.dark [data-slot='select-content'], +html.dark [data-slot='menubar-content'] { + background-color: var(--popover) !important; + color: var(--popover-foreground) !important; + border-color: var(--border) !important; +} + +html.dark [data-slot='dropdown-menu-item']:focus, +html.dark [data-slot='dropdown-menu-item'][data-highlighted], +html.dark [data-slot='dropdown-menu-sub-trigger']:focus, +html.dark [data-slot='dropdown-menu-sub-trigger'][data-state='open'], +html.dark [data-slot='context-menu-item']:focus, +html.dark [data-slot='context-menu-item'][data-highlighted], +html.dark [data-slot='context-menu-sub-trigger']:focus, +html.dark [data-slot='context-menu-sub-trigger'][data-state='open'] { + background-color: var(--accent) !important; + color: var(--accent-foreground) !important; +} + +html.dark [data-slot='dropdown-menu-separator'], +html.dark [data-slot='context-menu-separator'] { + background-color: var(--border) !important; +} + +html.dark .ultimail-app :where(.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover) { + background-color: var(--mail-nav-hover) !important; +} + +html.dark .ultimail-app :where(.bg-\[\#d3e3fd\]) { + background-color: var(--mail-nav-selected) !important; +} + +html.dark .ultimail-app :where(.bg-yellow-100) { + background-color: var(--mail-nav-drop) !important; +} + +html.dark .ultimail-app :where(.text-\[#0f172a\], .text-\[#0b57d0\]) { + color: var(--foreground) !important; +} + +html.dark .ultimail-app :where([data-slot='checkbox']) { + background-color: transparent; + border-color: #9aa0a6; +} + +html.dark .ultimail-app :where([data-slot='checkbox'][data-state='checked']) { + background-color: #1a73e8; + border-color: #1a73e8; +} + +/* ── Dark : fenêtre de composition ── */ +html.dark [data-compose-window] { + color: var(--foreground); +} + +html.dark [data-compose-window] :where(.text-\[\#202124\], .text-\[\#3c4043\]) { + color: var(--foreground) !important; +} + +html.dark [data-compose-window] :where(.text-\[\#5f6368\], .text-\[\#80868b\]) { + color: var(--muted-foreground) !important; +} + +html.dark [data-compose-window] :where(.hover\:bg-\[\#f1f3f4\]:hover, .hover\:bg-\[\#f6f9fe\]:hover) { + background-color: var(--accent) !important; +} + +html.dark [data-compose-window] :where(.bg-\[\#e8eaed\], .bg-\[\#e8f0fe\]) { + background-color: var(--accent) !important; + color: var(--accent-foreground) !important; +} + +html.dark [data-compose-window] .compose-toolbar :where(.bg-\[\#e8eaed\]) { + background-color: var(--accent) !important; +} + +/* Iframes d’aperçu mail : fond du navigateur, pas blanc par défaut */ +html.dark .ultimail-app iframe[title='Contenu du message'], +html.dark .ultimail-app iframe[title='Sujet du message'] { + background: transparent !important; + color-scheme: dark; +} + +/* ── Dark : panneau Contacts (formulaires) ── */ +html.dark :where([data-contacts-panel] .bg-white) { + background-color: var(--mail-surface) !important; +} + +html.dark :where([data-contacts-panel] .text-\[\#1f1f1f\], [data-contacts-panel] .text-\[\#3c4043\]) { + color: var(--foreground) !important; +} + +html.dark :where([data-contacts-panel] .text-\[\#5f6368\]) { + color: var(--muted-foreground) !important; +} + +html.dark :where([data-contacts-panel] .hover\:bg-gray-100:hover, [data-contacts-panel] .hover\:bg-\[\#f5f5f5\]:hover) { + background-color: var(--accent) !important; +} + +html.dark :where([data-contacts-panel] .border-gray-200, [data-contacts-panel] .border-gray-300) { + border-color: var(--border) !important; +} diff --git a/app/layout.tsx b/app/layout.tsx index c250026..d7b36f2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' +import { ThemeInitScript } from '@/components/theme-init-script' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); @@ -27,8 +28,9 @@ export default function RootLayout({ children: React.ReactNode }>) { return ( - - + + + {children} {process.env.NODE_ENV === 'production' && } diff --git a/app/mail/mail-app-shell.tsx b/app/mail/mail-app-shell.tsx index a2b3306..187f249 100644 --- a/app/mail/mail-app-shell.tsx +++ b/app/mail/mail-app-shell.tsx @@ -7,13 +7,13 @@ import { useLayoutEffect, useMemo, useState, - type CSSProperties, } from "react" import { useIsXs } from "@/hooks/use-xs" import { readTouchNavMatches, useTouchNav } from "@/hooks/use-touch-nav" import { useMailSplitView } from "@/hooks/use-mail-split-view" import { MobileBottomBar } from "@/components/gmail/mobile-bottom-bar" -import { Toaster } from "sonner" +import type { MailXsViewChrome } from "@/lib/mail-xs-view-chrome" +import { MailToaster } from "@/components/gmail/mail-toaster" import { useRouter, usePathname } from "next/navigation" import { Sidebar } from "@/components/gmail/sidebar" import { Header } from "@/components/gmail/header" @@ -35,6 +35,9 @@ import { type MailRouteState, } from "@/lib/mail-url" import { cn } from "@/lib/utils" +import { ThemeProvider } from "@/components/theme-provider" +import { MailThemeApplier } from "@/components/gmail/mail-theme-applier" +import { QuickSettingsRoot } from "@/components/gmail/quick-settings/quick-settings-root" function segmentsFromPathname(pathname: string | null): string[] | undefined { if (!pathname?.startsWith("/mail")) return undefined @@ -70,6 +73,7 @@ function MailAppInner() { const [folderUnreadCounts, setFolderUnreadCounts] = useState< Record >({}) + const [xsViewChrome, setXsViewChrome] = useState(null) const navigateRoute = useCallback( (patch: Partial) => { @@ -125,7 +129,7 @@ function MailAppInner() {
{!sidebarCollapsed && touchNav && ( @@ -154,8 +158,10 @@ function MailAppInner() { />
@@ -169,6 +175,7 @@ function MailAppInner() { onMailRouteNavigate={navigateRoute} onSelectFolder={handleSelectFolder} onFolderUnreadCountsChange={setFolderUnreadCounts} + onXsViewChromeChange={setXsViewChrome} />
@@ -186,6 +193,7 @@ function MailAppInner() { setSidebarCollapsed((c) => !c)} + xsViewChrome={xsViewChrome} /> ) : null}
@@ -211,6 +219,7 @@ export function MailAppShell({ }, []) return ( + @@ -224,24 +233,14 @@ export function MailAppShell({ > + + - + + ) } diff --git a/app/mail/settings/page.tsx b/app/mail/settings/page.tsx new file mode 100644 index 0000000..b45002b --- /dev/null +++ b/app/mail/settings/page.tsx @@ -0,0 +1,10 @@ +export default function MailSettingsPage() { + return ( +
+

Paramètres

+

+ Page en cours de construction. +

+
+ ) +} diff --git a/components/gmail/account-avatar.tsx b/components/gmail/account-avatar.tsx new file mode 100644 index 0000000..832f8cb --- /dev/null +++ b/components/gmail/account-avatar.tsx @@ -0,0 +1,57 @@ +"use client" + +import { useState } from "react" +import type { UserAccount } from "@/lib/accounts/types" +import { avatarColor, senderInitial } from "@/lib/sender-display" +import { cn } from "@/lib/utils" + +interface AccountAvatarProps { + account: UserAccount + size?: "sm" | "md" | "lg" + className?: string +} + +const sizeClasses = { + sm: "size-8 text-sm", + md: "size-10 text-base", + lg: "size-20 text-3xl", +} as const + +export function AccountAvatar({ + account, + size = "md", + className, +}: AccountAvatarProps) { + const [imageFailed, setImageFailed] = useState(false) + const initial = senderInitial(account.displayName) + const color = avatarColor(account.displayName) + + if (account.avatarUrl && !imageFailed) { + return ( + setImageFailed(true)} + /> + ) + } + + return ( +
+ {initial} +
+ ) +} diff --git a/components/gmail/account-switcher-dropdown.tsx b/components/gmail/account-switcher-dropdown.tsx new file mode 100644 index 0000000..36cd2af --- /dev/null +++ b/components/gmail/account-switcher-dropdown.tsx @@ -0,0 +1,219 @@ +"use client" + +import { useEffect, useRef, type RefObject } from "react" +import { Icon, addCollection } from "@iconify/react" +import { icons as mdiIcons } from "@iconify-json/mdi" +import { Camera, ChevronDown, ChevronUp, LogOut, Plus, X } from "lucide-react" +import { AccountAvatar } from "@/components/gmail/account-avatar" +import { Button } from "@/components/ui/button" +import { MOCK_USER_ACCOUNTS, STORAGE_USAGE } from "@/lib/accounts/mock-accounts" +import type { UserAccount } from "@/lib/accounts/types" +import { + useAccountStore, + useActiveAccount, +} from "@/lib/stores/account-store" +addCollection(mdiIcons) + +interface AccountSwitcherDropdownProps { + open: boolean + onOpenChange: (open: boolean) => void + /** Clicks inside this node (e.g. avatar trigger) do not close the panel. */ + containerRef: RefObject +} + +function AccountRow({ + account, + onSelect, +}: { + account: UserAccount + onSelect: () => void +}) { + return ( + + ) +} + +export function AccountSwitcherDropdown({ + open, + onOpenChange, + containerRef, +}: AccountSwitcherDropdownProps) { + const panelRef = useRef(null) + const activeAccount = useActiveAccount() + const activeAccountId = useAccountStore((s) => s.activeAccountId) + const otherAccountsExpanded = useAccountStore((s) => s.otherAccountsExpanded) + const setActiveAccount = useAccountStore((s) => s.setActiveAccount) + const toggleOtherAccountsExpanded = useAccountStore( + (s) => s.toggleOtherAccountsExpanded, + ) + const signOutAll = useAccountStore((s) => s.signOutAll) + + const otherAccounts = MOCK_USER_ACCOUNTS.filter((a) => a.id !== activeAccountId) + + useEffect(() => { + if (!open) return + function handleClickOutside(event: MouseEvent) { + if ( + containerRef.current && + !containerRef.current.contains(event.target as Node) + ) { + onOpenChange(false) + } + } + function handleEscape(event: KeyboardEvent) { + if (event.key === "Escape") onOpenChange(false) + } + document.addEventListener("mousedown", handleClickOutside) + document.addEventListener("keydown", handleEscape) + return () => { + document.removeEventListener("mousedown", handleClickOutside) + document.removeEventListener("keydown", handleEscape) + } + }, [open, onOpenChange, containerRef]) + + if (!open) return null + + const handleSelectAccount = (id: string) => { + setActiveAccount(id) + onOpenChange(false) + } + + return ( +
+ {/* Current account header */} +
+

+ {activeAccount.email} +

+ + +
+
+ + + + +
+

+ Bonjour {activeAccount.firstName} ! +

+ +
+
+ + {/* Other accounts + actions */} +
+
+ + + {otherAccountsExpanded && ( +
+ {otherAccounts.map((account) => ( + handleSelectAccount(account.id)} + /> + ))} +
+ )} + +
+ + +
+
+ + {/* Storage */} +
+ + + {STORAGE_USAGE.percentUsed} % utilisé(s) sur {STORAGE_USAGE.totalLabel} + +
+ + {/* Footer links */} +
+ + · + +
+
+
+ ) +} diff --git a/components/gmail/calendar-invitation-preview.tsx b/components/gmail/calendar-invitation-preview.tsx index c865352..cf0cd37 100644 --- a/components/gmail/calendar-invitation-preview.tsx +++ b/components/gmail/calendar-invitation-preview.tsx @@ -11,6 +11,7 @@ import { } from "@/lib/calendar-invitation" import { ensureVcLogosCollection } from "@/lib/register-vc-logos" import { cn } from "@/lib/utils" +import { MAIL_INVITATION_CARD_CLASS } from "@/lib/mail-chrome-classes" function attendeeDisplayList(inv: ParsedCalendarInvitation): { organizerLine?: string @@ -40,7 +41,7 @@ const RSVP_BTN = "rounded-full bg-[#1a73e8] px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-[#1557b0]" const RSVP_SECONDARY = - "rounded-full border border-[#dadce0] bg-[#e8f0fe] px-4 py-2 text-sm font-medium text-[#1a73e8] transition-colors hover:bg-[#d2e3fc]" + "rounded-full border border-border bg-mail-surface px-4 py-2 text-sm font-medium text-primary transition-colors hover:bg-accent" export function CalendarInvitationPreview({ invitation, @@ -63,35 +64,35 @@ export function CalendarInvitationPreview({ return (
-
+
-

+

{invitation.summary}

{organizerLine && ( -

{organizerLine}

+

{organizerLine}

)} {othersLine && ( -

- +

+ {othersLine}

)}
-
+
-
-

Dans votre agenda

+
+

Dans votre agenda

Aucun autre événement à cette date

@@ -122,14 +123,14 @@ export function CalendarInvitationPreview({
-
+
D’après cet e-mail
Correct ? diff --git a/components/gmail/compact-inbox-category-tabs.tsx b/components/gmail/compact-inbox-category-tabs.tsx index 8436783..c7a09b2 100644 --- a/components/gmail/compact-inbox-category-tabs.tsx +++ b/components/gmail/compact-inbox-category-tabs.tsx @@ -3,6 +3,9 @@ import { memo, useEffect, useLayoutEffect, useRef, useState } from "react" import { Icon } from "@iconify/react" import { inboxTabActiveAccentColor } from "@/lib/inbox-category-tabs" +import { + MAIL_INBOX_CATEGORY_TAB_CONTENT_DARK_CLASS, +} from "@/lib/mail-chrome-classes" import { inboxTabShowsInactiveMeta } from "@/lib/mail-url" import { cn } from "@/lib/utils" @@ -17,7 +20,7 @@ const TAB_ICON_CLASS = "h-4 w-4 shrink-0" function inboxTabBadgeDotClass(badgeColor: string) { return cn( - "absolute -right-0.5 -top-0.5 size-2 rounded-full ring-2 ring-white", + "absolute -right-0.5 -top-0.5 size-2 rounded-full ring-2 ring-mail-surface", badgeColor ) } @@ -130,7 +133,7 @@ export const CompactInboxCategoryTabs = memo(function CompactInboxCategoryTabs({ "relative z-[1] flex min-h-10 cursor-pointer items-center justify-center px-1", "transition-colors duration-200 motion-reduce:transition-none", isActive ? "shrink-0 flex-none" : "min-w-0 flex-1 overflow-hidden", - !isActive && "hover:bg-[#f1f3f4]" + !isActive && "hover:bg-mail-nav-hover" )} >
{isActive ? ( {tab.label} diff --git a/components/gmail/compose-modal.tsx b/components/gmail/compose-modal.tsx index 6da9082..fd4efc3 100644 --- a/components/gmail/compose-modal.tsx +++ b/components/gmail/compose-modal.tsx @@ -81,6 +81,14 @@ import { import { toast } from "sonner" import { showPendingSendToast } from "@/lib/pending-send-toast" import { cn, getNextLocalWallClockDate } from "@/lib/utils" +import { + MAIL_COMPOSE_MENU_SELECTED_CLASS, + MAIL_COMPOSE_POPOVER_CLASS, + MAIL_COMPOSE_TITLEBAR_CLASS, + MAIL_ICON_BTN, + MAIL_MENU_SURFACE_CLASS, +} from "@/lib/mail-chrome-classes" +import { useTheme } from "next-themes" import { DropdownMenu, DropdownMenuContent, @@ -101,13 +109,14 @@ import data from "@emoji-mart/data" const LazyPicker = lazy(() => import("@emoji-mart/react")) function EmojiPicker({ onSelect }: { onSelect: (emoji: { native: string }) => void }) { + const { resolvedTheme } = useTheme() return ( - Chargement…
}> + Chargement…
}>
{showSuggestions && suggestions.length > 0 && ( -
+
{suggestions.map((s, idx) => ( @@ -1028,7 +1037,7 @@ function SignatureButton({ { @@ -1045,7 +1054,7 @@ function SignatureButton({ replaceSignature(null)} - className={cn("gap-2", !compose.signatureId && "bg-[#e8eaed]")} + className={cn("gap-2", !compose.signatureId && MAIL_COMPOSE_MENU_SELECTED_CLASS)} > {!compose.signatureId && } @@ -1056,7 +1065,7 @@ function SignatureButton({ replaceSignature(sig.id)} - className={cn("gap-2", compose.signatureId === sig.id && "bg-[#e8eaed]")} + className={cn("gap-2", compose.signatureId === sig.id && MAIL_COMPOSE_MENU_SELECTED_CLASS)} > {compose.signatureId === sig.id && } @@ -1689,10 +1698,11 @@ export function ComposeWindow({ const modalContent = (
- + {titleText} @@ -2205,7 +2218,7 @@ export function ComposeWindow({ e.stopPropagation() handleClose() }} - className="flex h-6 w-6 items-center justify-center rounded-full text-[#5f6368] hover:text-[#202124] hover:bg-black/5" + className={cn("flex h-6 w-6 items-center justify-center rounded-full", MAIL_ICON_BTN)} > diff --git a/components/gmail/contact-hover-card.tsx b/components/gmail/contact-hover-card.tsx index bfa1272..e87354d 100644 --- a/components/gmail/contact-hover-card.tsx +++ b/components/gmail/contact-hover-card.tsx @@ -170,7 +170,7 @@ export function ContactHoverCard({ align={align} sideOffset={8} className={cn( - "min-w-[380px] w-max max-w-[min(440px,calc(100vw-24px))] rounded-2xl border border-[#e8eaed] bg-white p-0 shadow-lg", + "min-w-[380px] w-max max-w-[min(440px,calc(100vw-24px))] rounded-2xl border border-border bg-popover p-0 text-popover-foreground shadow-lg", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 outline-hidden" )} > @@ -220,21 +220,21 @@ export function ContactHoverCard({ )}
{visible.length === 0 && ( -

+

Aucune suggestion disponible

)} @@ -60,8 +67,8 @@ export function AddCoordinatesView() { const initial = senderInitial(name) return ( -
-

Contact à modifier

+
+

Contact à modifier

{contact.avatarUrl ? ( {name} @@ -74,32 +81,30 @@ export function AddCoordinatesView() {
)}
-

{name}

+

{name}

{contact.emails[0] && ( -

{contact.emails[0].value}

+

{contact.emails[0].value}

)} {contact.phones[0] && ( -

{contact.phones[0].value} ({contact.phones[0].label})

+

+ {contact.phones[0].value} ({contact.phones[0].label}) +

)}
-
-

Détails à ajouter

-

{suggestedValue}

+
+

Détails à ajouter

+

{suggestedValue}

- diff --git a/components/gmail/contacts-page/bulk-create-dialog.tsx b/components/gmail/contacts-page/bulk-create-dialog.tsx index 92a3b45..a171885 100644 --- a/components/gmail/contacts-page/bulk-create-dialog.tsx +++ b/components/gmail/contacts-page/bulk-create-dialog.tsx @@ -10,6 +10,12 @@ import { import { Button } from "@/components/ui/button" import { useContactsStore } from "@/lib/contacts/contacts-store" import { parseBulkContactText } from "@/lib/contacts/import-parsers" +import { + CONTACTS_MUTED_TEXT, + CONTACTS_PAGE_LINK_BTN_CLASS, + CONTACTS_PAGE_TEXTAREA_CLASS, +} from "@/lib/contacts-chrome-classes" +import { cn } from "@/lib/utils" interface BulkCreateDialogProps { open: boolean @@ -37,28 +43,31 @@ export function BulkCreateDialog({ open, onOpenChange, onOpenImport }: BulkCreat Créer plusieurs contacts
-

+

Ajoutez des noms, des adresses e-mail ou les deux