feat(js): update icons and add backdrop-filter (#6629)

novuhq · Oct 7, 2024 · 6fc8a05 · 6fc8a05
1 parent a20783f
commit 6fc8a05
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/js/src/ui/components/Notification/DefaultNotification.tsx b/packages/js/src/ui/components/Notification/DefaultNotification.tsx
@@ -101,7 +101,7 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
           <div
             class={style(
               'notificationDefaultActions',
-              `nt-transition nt-duration-100 nt-ease-out nt-gap-2 nt-flex nt-shrink-0 nt-opacity-0 group-hover:nt-opacity-100 nt-justify-center nt-items-center nt-absolute nt-top-0 nt-right-0 nt-bg-neutral-alpha-50 nt-rounded-lg`
+              `nt-transition nt-duration-100 nt-ease-out nt-gap-2 nt-flex nt-shrink-0 nt-opacity-0 group-hover:nt-opacity-100 nt-justify-center nt-items-center nt-absolute nt-top-0 nt-right-0 nt-bg-neutral-alpha-50 nt-rounded-lg nt-backdrop-blur-md nt-p-0.5`
             )}
           >
             <Show when={status() !== NotificationStatus.ARCHIVED}>
@@ -120,7 +120,7 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
                             e.stopPropagation();
                             props.notification.read();
                           }}
-                          class="hover:nt-bg-neutral-alpha-50 nt-py-0.5"
+                          class="hover:nt-bg-neutral-alpha-50 nt-p-0.5"
                         >
                           <ReadAll />
                         </Button>
@@ -144,7 +144,7 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
                           e.stopPropagation();
                           props.notification.unread();
                         }}
-                        class="hover:nt-bg-neutral-alpha-50 nt-py-0.5"
+                        class="hover:nt-bg-neutral-alpha-50 nt-p-0.5"
                       >
                         <Unread />
                       </Button>
@@ -171,7 +171,7 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
                           e.stopPropagation();
                           props.notification.archive();
                         }}
-                        class="hover:nt-bg-neutral-alpha-50 nt-py-0.5"
+                        class="hover:nt-bg-neutral-alpha-50 nt-p-0.5"
                       >
                         <Archive />
                       </Button>
@@ -195,7 +195,7 @@ export const DefaultNotification = (props: DefaultNotificationProps) => {
                         e.stopPropagation();
                         props.notification.unarchive();
                       }}
-                      class="hover:nt-bg-neutral-alpha-50 nt-py-0.5"
+                      class="hover:nt-bg-neutral-alpha-50 nt-p-0.5"
                     >
                       <Unarchive />
                     </Button>

diff --git a/packages/js/src/ui/icons/Archive.tsx b/packages/js/src/ui/icons/Archive.tsx
@@ -6,7 +6,7 @@ export const Archive = (props?: JSX.HTMLAttributes<SVGSVGElement>) => {
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20" {...props}>
       <path
         fill="currentColor"
-        d="M17.117 4.358l-1.159-1.4A1.21 1.21 0 0015 2.5H5c-.392 0-.733.175-.967.458l-1.15 1.4A1.632 1.632 0 002.5 5.417v10.416c0 .917.75 1.667 1.667 1.667h11.666c.917 0 1.667-.75 1.667-1.667V5.417c0-.4-.142-.775-.383-1.059zM5.2 4.167h9.6l.675.808H4.533l.667-.808zM4.167 15.833V6.667h11.666v9.166H4.167zm7.041-7.5H8.792v2.5H6.667L10 14.167l3.333-3.334h-2.125v-2.5z"
+        d="M16.25 15V6.875L15 4.375H5L3.75 6.877V15c0 .345.28.625.625.625h11.25c.345 0 .625-.28.625-.625zM5 8.125h10v6.25H5v-6.25zm.772-2.5h8.455l.625 1.25H5.148l.625-1.25zm6.103 3.75h-3.75v1.25h3.75v-1.25z"
       ></path>
     </svg>
   );

diff --git a/packages/js/src/ui/icons/Unread.tsx b/packages/js/src/ui/icons/Unread.tsx
@@ -6,7 +6,7 @@ export const Unread = (props?: JSX.HTMLAttributes<SVGSVGElement>) => {
       <path
         fill="currentColor"
         // eslint-disable-next-line max-len
-        d="M18.334 5.817v7.516c0 .917-.75 1.667-1.667 1.667H5l-3.333 3.333v-15c0-.916.75-1.666 1.667-1.666h8.416c-.05.266-.083.55-.083.833 0 .283.033.567.083.833H3.334v10h13.333v-6.75a4.127 4.127 0 001.667-.766zm-5-3.317c0 1.383 1.116 2.5 2.5 2.5 1.383 0 2.5-1.117 2.5-2.5S17.217 0 15.834 0a2.497 2.497 0 00-2.5 2.5z"
+        d="M10 15v1.25H4.996a.625.625 0 01-.621-.62V4.37c0-.342.28-.62.624-.62H12.5l3.125 3.125v4.375h-1.25V7.5h-2.5V5h-6.25v10H10zm1.54-.335l2.21 2.21 3.094-3.093-.884-.884-2.21 2.21-1.326-1.326-.884.883z"
       ></path>
     </svg>
   );