feat: Update ui styles

* feat: Refine ui styles

* feat: Move fixed styles to style files

Author: cizil-keyvalue

package-lock.json

@@ -65,6 +65,6 @@
     "license"
   ],
   "dependencies": {
-    "test_notification": "1.0.27"
+    "test_notification": "1.0.20"
   }
 }

package.json

@@ -12,8 +12,8 @@
       @click="handleClearAllNotification"
       @keydown="handleClearAllNotification"
       :style="{
-        opacity: !enableClearAll ? 0.5 : 1,
-        cursor: enableClearAll ? 'pointer' : 'default',
+        opacity: !enableClearAll ? 0.4 : 1,
+        cursor: enableClearAll ? 'pointer' : 'not-allowed',
       }"
       class="siren-sdk-header-right-container"
     >

src/assets/dark/emptyIconDark.svg

@@ -12,6 +12,7 @@
     <img
       :src="notification?.message?.avatar?.imageUrl ?? defaultAvatar"
       alt="avatar"
+      class="siren-sdk-card-avatar"
       :style="styles.cardIconRound"
       v-if="!cardProps?.hideAvatar"
     />
@@ -33,7 +34,7 @@
           :fill="styles?.timerIcon?.color"
           :size="String(styles?.timerIcon?.size)"
         />
-        <div :style="styles.dateStyle">
+        <div :style="styles.dateStyle" class="siren-sdk-card-date-style">
           {{ generateElapsedTimeText(notification?.createdAt) }}
         </div>
       </div>

src/assets/light/emptyIconLight.svg

@@ -34,6 +34,7 @@
           :showNotifications="showNotifications"
           :noOfNotificationsPerFetch="noOfNotificationsPerFetch"
           :hideClearAll="hideClearAll"
+          :cardProps="cardProps ?? { hideAvatar: false, showMedia: false }"
           >
           <template #loadMoreComponent>
             <slot name="loadMoreComponent" />

src/components/HeaderComponent.vue

@@ -36,7 +36,7 @@
             <div v-for="notification in notificationsContent" :key="notification?.id">
               <slot name="customNotificationCard">
                 <NotificationCard :notification="notification"
-                  :cardProps="{ hideAvatar: false, showMedia: true }"
+                  :cardProps="cardProps"
                   :onNotificationCardClick="onNotificationCardClick"
                   :deleteNotificationById="deleteNotificationById"
                   :styles="styles" :darkMode="darkMode" />

src/components/NotificationCard.vue

@@ -10,9 +10,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     badgeType: {
-      description: 'To select the badge type',
-      control: { type: 'select' },
-      options: BadgeType
+      description: 'To select the badge type'
     },
     darkMode: {
       description: 'Sets the theme mode for the icon component'

src/components/SirenInbox.vue

@@ -1,7 +1,7 @@
 .siren-sdk-card-container {
   display: grid;
   grid-template-columns: max-content auto max-content;
-  gap: 15px;
+  gap: 16px;
 }
 .siren-sdk-hide-avatar-card-container {
   display: grid;
@@ -17,7 +17,6 @@
 }
 .siren-sdk-delete-button {
   cursor: pointer;
-  padding-right: 10px;
 }
 .siren-sdk-card-text-break {
   word-break: break-word;
@@ -40,4 +39,12 @@
 .siren-sdk-card-msg-body {
   margin-top: 5px;
   margin-bottom: 5px;
+  font-weight: 400;
+}
+.siren-sdk-card-avatar{
+  overflow: 'hidden',
 }
+
+.siren-sdk-card-date-style{
+  line-height: 16px;
+}