improve unread email icon

(its kinda lucide icon but also failing their guidelines so 🤷)
RiskyMH · Oct 7, 2024 · 5a0da2b · 5a0da2b
1 parent 9e541aa
commit 5a0da2b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/app/(email)/mail/[mailbox]/(email-list)/email-item.tsx b/app/(email)/mail/[mailbox]/(email-list)/email-item.tsx
@@ -102,7 +102,7 @@ export function EmailItem({ email, mailboxId, type, categories }: EmailItemProps
                     />
                     <div className="float-right ms-auto me-1.5 hidden w-auto shrink-0 gap-4 self-center text-right text-muted-foreground text-xs group-hover:sm:flex">
                         <ContextMenuAction
-                            icon={email.isRead ? "BellDotIcon" : "MailOpenIcon"}
+                            icon={email.isRead ? "MailUnreadIcon" : "MailOpenIcon"}
                             action={updateEmail.bind(null, {
                                 isRead: !email.isRead,
                             })}
@@ -183,7 +183,7 @@ export function EmailItem({ email, mailboxId, type, categories }: EmailItemProps
                         )}
                         <ContextMenuItem className="flex w-full cursor-pointer gap-2" asChild>
                             <ContextMenuAction
-                                icon={email.isRead ? "BellDotIcon" : "MailOpenIcon"}
+                                icon={email.isRead ? "MailUnreadIcon" : "MailOpenIcon"}
                                 action={updateEmail.bind(null, {
                                     isRead: !email.isRead,
                                 })}

diff --git a/app/(email)/mail/[mailbox]/components.client.tsx b/app/(email)/mail/[mailbox]/components.client.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import MailUnreadIcon from "@/components/icons/mail-unread";
 import TooltipText from "@/components/tooltip-text";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/utils/tw";
@@ -62,6 +63,7 @@ function EmptyIcon(props: any) {
 const iconMap: Record<string, LucideIcon> = {
     StarIcon: StarIcon,
     BellDotIcon: BellDotIcon,
+    MailUnreadIcon: MailUnreadIcon,
     Trash2Icon: Trash2Icon,
     ArchiveRestoreIcon: ArchiveRestoreIcon,
     MailOpenIcon: MailOpenIcon,

diff --git a/app/components/icons/mail-unread.tsx b/app/components/icons/mail-unread.tsx
@@ -0,0 +1,17 @@
+/** Lucide inspired icon combining "mail" and "monitor-dot" (its dot) */
+
+import { cn } from "@/utils/tw";
+
+export default function MailUnreadIcon(props: any) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" className={cn("lucide lucide-mail-dot", props.className)}>
+            <title>Mail Unread</title>
+            <path d="M10.97 12.7 2 7" />
+            <path d="M13 12.713a1.94 1.94 0 0 1-2.06 0" />
+            <path d="m15.5 11-2.47 1.7" />
+            <path d="M22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9.5" />
+            {/* <circle cx="20" cy="5.5" r="3" fill="currentColor" /> */}
+            <circle cx="20" cy="5.5" r="3" />
+        </svg>
+    );
+}