feat: :sparkles: feat (modulo-de-notificação) Finalizando o template para que ele fique igual ao figma

Finalizando o template para que ele fique fiel ao designe do figma

fase:dev | origin:escopo

src/pages/notifications/NotificationsPage.vue

@@ -49,17 +49,17 @@
         @click="markAsRead(item.id)"
       >
 
-        <div class="row no-wrap items-start">
+        <div class="notification-wrapper">
 
           <!-- AVATAR -->
-          <q-avatar size="42px" class="q-mr-md">
-            <img :src="item.avatar" />
+          <q-avatar size="44px" class="notification-avatar">
+            <img :src="logoDiaria" />
           </q-avatar>
 
           <!-- CONTENT -->
-          <div class="col">
+          <div class="notification-content">
 
-            <div class="row justify-between items-start">
+            <div class="notification-header">
 
               <div class="notification-title">
                 {{ item.title }}
@@ -96,8 +96,9 @@
 import { computed, ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-const router = useRouter()
+import logoDiaria from 'src/assets/logo_diaria_colorido_sem_texto.svg'
 
+const router = useRouter()
 
 const route = useRoute()
 
@@ -134,15 +135,17 @@ const markAllAsRead = () => {
 
 <style scoped lang="scss">
 .notifications-page {
-  background: #f5f5f7;
+  background: #f4f4f5;
   min-height: 100vh;
 }
 
 /* HEADER */
 .header {
   position: relative;
+
   padding: 18px 16px 12px;
-  background: white;
+
+  background: #fff;
 }
 
 .back-btn {
@@ -152,9 +155,10 @@ const markAllAsRead = () => {
 
 .header-title {
   width: 100%;
+
   text-align: center;
 
-  font-size: 16px;
+  font-size: 17px;
   font-weight: 700;
 
   color: #8B5CF6;
@@ -162,16 +166,20 @@ const markAllAsRead = () => {
 
 /* ACTIONS */
 .actions {
-  padding: 14px 16px;
+  padding: 14px 16px 10px;
 }
 
 .unread-text {
   font-size: 13px;
-  color: #666;
+  font-weight: 500;
+
+  color: #6b7280;
 }
 
 .mark-read-btn {
   font-size: 12px;
+  font-weight: 600;
+
   color: #ff4fd8;
 }
 
@@ -179,28 +187,73 @@ const markAllAsRead = () => {
 .notifications-list {
   display: flex;
   flex-direction: column;
+
+  gap: 12px;
+
+  padding: 0 14px 24px;
 }
 
 /* CARD */
 .notification-card {
-  border-radius: 0;
-  padding: 16px;
-  background: white;
+  background: #ffffff;
 
-  border-bottom: 1px solid #ececec;
+  border-radius: 24px;
+
+  padding: 16px 16px;
+
+  box-shadow:
+    0 2px 10px rgba(0, 0, 0, 0.05);
 
   transition: 0.2s ease;
 }
 
 .notification-card.unread {
-  background: #f8eff7;
+  background: #ffffff;
+}
+
+/* WRAPPER */
+.notification-wrapper {
+  display: flex;
+
+  align-items: center;
+
+  gap: 12px;
+}
+
+/* AVATAR */
+.notification-avatar {
+  flex-shrink: 0;
+
+  width: 44px !important;
+  height: 44px !important;
+}
+
+/* CONTENT */
+.notification-content {
+  flex: 1;
+
+  min-width: 0;
+}
+
+/* HEADER */
+.notification-header {
+  display: flex;
+
+  align-items: flex-start;
+
+  justify-content: space-between;
+
+  gap: 10px;
 }
 
 /* TITLE */
 .notification-title {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 700;
-  color: #555;
+
+  color: #5b5b5b;
+
+  line-height: 1.1;
 }
 
 /* DESCRIPTION */
@@ -208,29 +261,36 @@ const markAllAsRead = () => {
   margin-top: 4px;
 
   font-size: 12px;
-  line-height: 1.4;
+  font-weight: 500;
 
-  color: #777;
+  line-height: 1.35;
+
+  color: #8f8f8f;
 }
 
 /* TIME */
 .notification-time {
-  margin-top: 10px;
+  margin-top: 8px;
 
   font-size: 11px;
-  color: #aaa;
+  font-weight: 500;
+
+  color: #b5b5b5;
 }
 
 /* STATUS */
 .status-dot {
-  width: 10px;
-  height: 10px;
+  width: 14px;
+  height: 14px;
+
+  border-radius: 999px;
+
+  background: #e6e6e6;
 
-  border-radius: 50%;
-  background: #ddd;
+  flex-shrink: 0;
 }
 
 .status-dot.active {
-  background: #ff5be1;
+  background: #d8d8d8;
 }
 </style>