Update 16px calendar icon

lumen-notes · Sep 17, 2023 · 9a947be · 9a947be
1 parent 5d2099a
commit 9a947be
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/components/command-menu.tsx b/src/components/command-menu.tsx
@@ -133,7 +133,7 @@ export function CommandMenu() {
             <Command.Group heading="Date">
               <CommandItem
                 key={dateString}
-                icon={<CalendarIcon16 />}
+                icon={<CalendarIcon16 date={new Date(dateString).getUTCDate()} />}
                 description={formatDateDistance(dateString)}
                 onSelect={() => navigate(`/calendar?date=${dateString}`)}
               >

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -146,7 +146,7 @@ export function CalendarFillIcon24({ date }: { date?: number }) {
   )
 }
 
-export function CalendarIcon16() {
+export function CalendarIcon16({ date }: { date?: number }) {
   return (
     <svg className="h-4 w-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
       <path d="M13 4H3v1.5h10V4Z" />
@@ -155,6 +155,16 @@ export function CalendarIcon16() {
         clipRule="evenodd"
         d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2-.5h12a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5Z"
       />
+      <text
+        textAnchor="middle"
+        x={8}
+        y={12.5}
+        fontSize="7.5px"
+        fill="currentColor"
+        className="font-mono font-bold leading-none"
+      >
+        {date}
+      </text>
     </svg>
   )
 }

diff --git a/src/panels/calendar.tsx b/src/panels/calendar.tsx
@@ -36,7 +36,7 @@ export function CalendarPanel({ id, onClose }: PanelProps) {
 
   if (!isValidDate) {
     return (
-      <Panel id={id} title={date} icon={<CalendarIcon24 />} onClose={onClose}>
+      <Panel id={id} title={date} icon={<CalendarIcon16 />} onClose={onClose}>
         Invalid date
       </Panel>
     )
@@ -47,7 +47,7 @@ export function CalendarPanel({ id, onClose }: PanelProps) {
       id={id}
       title={formatDate(date)}
       description={formatDateDistance(date)}
-      icon={<CalendarIcon16 />}
+      icon={<CalendarIcon16 date={new Date(date).getUTCDate()} />}
       onClose={onClose}
       actions={
         <>