feat: :sparkles: feat (layout) ajustes layout

ajustado layout das notificacoes

fase:dev | origin:escopo

src/css/app.scss

@@ -259,17 +259,6 @@ box-shadow: 1px 4px 4px 0px rgba(0,0,0,0.2);
   line-height: 1.05;
 }
 
-
-
-
-
-
-
-
-
-
-
-
 .font8 {
   font-size: 8px;
 }
@@ -294,11 +283,6 @@ box-shadow: 1px 4px 4px 0px rgba(0,0,0,0.2);
   font-size: 16px;
 }
 
-
-
-
-
-
 .fontbold {
   font-weight: 700;
 }
@@ -316,14 +300,6 @@ box-shadow: 1px 4px 4px 0px rgba(0,0,0,0.2);
 }
 
 
-
-
-
-
-
-
-
-
 // customizando calendario das agendas para padrao do figma
 .calendar-custom {
   border-radius: 20px;

src/pages/notifications/NotificationsPage.vue

@@ -13,7 +13,7 @@
         @click="router.back()"
       />
 
-      <div class="header-title font16 fontbold gradient-diarista">
+      <div class="header-title font16 fontbold">
         {{ $t('notifications.title') }}
       </div>
 
@@ -22,14 +22,14 @@
     <!-- ACTIONS -->
     <div class="actions row justify-between items-center">
 
-      <div class="text-text font14 fontmedium">
+      <div class="unread-text font13">
         {{ $t('notifications.unread') }} {{ unreadCount }}
       </div>
 
       <q-btn
         flat
         no-caps
-        class="mark-read-btn"
+        class="mark-read-btn font12"
         label="✓ Marcar todas como lidas"
         @click="markAllAsRead"
       />
@@ -42,26 +42,26 @@
       <q-card
         v-for="item in notifications"
         :key="item.id"
-        :flat="false"
+        flat
         clickable
-        class="notification-card shadow-card"
+        class="notification-card"
         :class="{ unread: !item.read }"
-       @click="handleNotification(item)"
+        @click="handleNotification(item)"
       >
 
-        <div class="notification-wrapper">
+        <div class="row no-wrap items-start">
 
           <!-- AVATAR -->
-          <q-avatar size="44px" class="notification-avatar">
+          <q-avatar size="42px" class="q-mr-md">
             <img :src="getNotificationIcon(item.type)" />
           </q-avatar>
 
           <!-- CONTENT -->
-          <div class="notification-content">
+          <div class="col">
 
-            <div class="notification-header">
+            <div class="row justify-between items-start">
 
-              <div class="notification-title text-grey-7 font14 fontbold">
+              <div class="notification-title font14 fontbold">
                 {{ item.title }}
               </div>
 
@@ -73,11 +73,11 @@
 
             </div>
 
-            <div class="notification-description text-grey-7 font12 fontmedium">
+            <div class="notification-description font12">
               {{ item.description }}
             </div>
 
-            <div class="notification-time font12 fontmedium text-grey-7">
+            <div class="notification-time font11">
               {{ item.time }}
             </div>
 
@@ -114,11 +114,8 @@ const unreadCount = computed(() => {
 
 const loadNotifications = async () => {
   try {
-
     const response = await api.get('/notifications')
-
     notifications.value = response.data.payload || []
-
   } catch (error) {
     console.error(error)
   }
@@ -126,21 +123,13 @@ const loadNotifications = async () => {
 
 const markAsRead = async (id) => {
   try {
-
     await api.put(`/notifications/${id}/read`)
-
     notifications.value = notifications.value.map((notification) => {
-
       if (notification.id === id) {
-        return {
-          ...notification,
-          read: true
-        }
+        return { ...notification, read: true }
       }
-
       return notification
     })
-
   } catch (error) {
     console.error(error)
   }
@@ -148,52 +137,29 @@ const markAsRead = async (id) => {
 
 const markAllAsRead = async () => {
   try {
-
     await api.put('/notifications/read-all')
-
     notifications.value = notifications.value.map((notification) => ({
       ...notification,
       read: true
     }))
-
   } catch (error) {
     console.error(error)
   }
 }
 
 const handleNotification = async (notification) => {
-
   if (!notification.read) {
     await markAsRead(notification.id)
   }
-
-  // if (
-  //   notification.origin === 'schedule'
-  //   && notification.origin_id
-  // ) {
-  //   router.push(`/schedule/${notification.origin_id}`)
-  // }
 }
 
 const getNotificationIcon = (type) => {
-
   switch (type) {
-
     case 'schedule_client_provider_accepted':
-      return logoDiaria
-
     case 'schedule_client_provider_refused':
-      return logoDiaria
-
     case 'schedule_client_provider_cancelled':
-      return logoDiaria
-
     case 'schedule_client_provider_coming':
-      return logoDiaria
-
     case 'schedule_client_provider_finished':
-      return logoDiaria
-
     default:
       return logoDiaria
   }
@@ -202,16 +168,15 @@ const getNotificationIcon = (type) => {
 
 <style scoped lang="scss">
 .notifications-page {
-  background: #f4f4f5;
+  background: #f5f5f7;
   min-height: 100vh;
 }
 
+/* HEADER */
 .header {
   position: relative;
-
   padding: 18px 16px 12px;
-
-  background: #fff;
+  background: white;
 }
 
 .back-btn {
@@ -222,99 +187,69 @@ const getNotificationIcon = (type) => {
 .header-title {
   width: 100%;
   text-align: center;
+  color: #8B5CF6;
 }
 
+/* ACTIONS */
 .actions {
-  padding: 14px 16px 10px;
+  padding: 14px 16px;
 }
 
-.unread-ext {
-
-  color: #6b7280;
+.unread-text {
+  color: #666;
 }
 
 .mark-read-btn {
   color: #ff4fd8;
 }
 
+/* LIST */
 .notifications-list {
   display: flex;
   flex-direction: column;
-
-  gap: 12px;
-
-  padding: 0 14px 24px;
 }
 
+/* CARD */
 .notification-card {
-  background: #ffffff;
-
-  border-radius: 24px;
-
-  padding: 16px 16px;
-
+  border-radius: 0;
+  padding: 16px;
+  background: white;
+  border-bottom: 1px solid #ececec;
   transition: 0.2s ease;
 }
 
 .notification-card.unread {
-  background: #ffffff;
-}
-
-.notification-wrapper {
-  display: flex;
-
-  align-items: center;
-
-  gap: 12px;
-}
-
-.notification-avatar {
-  flex-shrink: 0;
-
-  width: 44px !important;
-  height: 44px !important;
-}
-
-.notification-content {
-  flex: 1;
-
-  min-width: 0;
-}
-
-.notification-header {
-  display: flex;
-
-  align-items: flex-start;
-
-  justify-content: space-between;
-
-  gap: 10px;
+  background: #f8eff7;
 }
 
+/* TITLE */
 .notification-title {
-  line-height: 1.1;
+  color: #555;
 }
 
+/* DESCRIPTION */
 .notification-description {
   margin-top: 4px;
-
-  line-height: 1.35;
-
+  line-height: 1.4;
+  color: #777;
 }
 
+/* TIME */
 .notification-time {
-  margin-top: 8px;
+  margin-top: 10px;
+  color: #aaa;
 }
 
+/* STATUS */
 .status-dot {
-  width: 14px;
-  height: 14px;
-  border-radius: 999px;
-  background: #e6e6e6;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #ddd;
   flex-shrink: 0;
 }
 
 .status-dot.active {
-  background: #1fa31b;
+  background: #ff5be1;
 }
-</style>
+</style>