updated Email page

Author: Yeliazar

src/components/Sidebar/NavLink/NavLink.scss

@@ -60,10 +60,10 @@
 
   .badge {
     float: right;
-    line-height: 8px;
-    margin-top: 6px;
-    margin-right: 15px;
-    padding: 7px;
+    line-height: 10px;
+    margin-top: 20px;
+    margin-right: 20px;
+    font-size: 0.875em;
     background: var(--sidebar-badge-bg);
 
     @media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {

src/components/Sidebar/NavLink/NavLink.vue

@@ -6,7 +6,7 @@
         <i v-else :class="fullIconName"></i>
       </span>
       {{header}} <sup v-if="label" :class="'text-' + labelColor" class="headerLabel">{{label}}</sup>
-      <b-badge v-if="badge" variant="info" pill>{{badge}}</b-badge>
+      <b-badge v-if="badge" class="badge" variant="info" pill>{{badge}}</b-badge>
     </router-link>
   </li>
   <li v-else-if="childrenLinks" :class="{headerLink: true, className}">

src/pages/Email/Email.vue

@@ -2,15 +2,21 @@
   <div class="email-page">
     <div class="pageTopLine">
       <h1 class="page-title">Email - <span class="fw-semi-bold">Inbox</span></h1>
-      <b-alert
-        :show="isNotificationOpen"
-        variant="success"
-        :class="{ alertTransform: true, alertAfter: alertAfter }"
-        dismissible
-      >
-        <p class="m-0 mr-4">Hey! This is a <span class="fw-semi-bold">real app</span>
-        with CRUD and Search functions. Have fun!</p>
-      </b-alert>
+<!--      <b-alert-->
+<!--        :show="isNotificationOpen"-->
+<!--        color="warning"-->
+<!--        variant="warning"-->
+<!--        :class="{ alertTransform: true, alertAfter: alertAfter }"-->
+<!--        dismissible-->
+<!--      >-->
+<!--        <p class="m-0 ms-4">Hey! This is a <span class="fw-semi-bold">real app</span>-->
+<!--        with CRUD and Search functions. Have fun!</p>-->
+<!--      </b-alert>-->
+      <div class="alert alert-warning alert-dismissible fade show" role="alert" v-if="isNotificationOpen" @click="closeNotification">
+        <p class="me-3 my-1">Hey! This is a <span class="fw-semi-bold">real app</span>
+          with CRUD and Search functions. Have fun!</p>
+        <button type="button" class="btn-close ms-2 my-1" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
     </div>
     <div class="view">
       <b-row>

src/pages/Email/components/Filters/Filters.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="col-lg-3 col-xl-2 col-xs-12">
-    <b-button
-      variant="info"
-      class="btn-block"
+    <button
+      class="btn btn-primary btn-block text-white"
       @click="compose(true)"
     >
       Compose
-    </b-button>
+    </button>
     <div class="mb mt">
       <b-button
         v-for="button in mainButtons"
@@ -16,7 +15,7 @@
         variant="transparent"
       >
         {{button.title}}
-        <b-badge v-if="button.notifications" :variant="button.lable || 'default'"  pill>
+        <b-badge v-if="button.notifications" :class="`btn-${button.lable ? button.lable : 'primary' }`" class="text-white"  pill>
           {{button.notifications}}
         </b-badge>
       </b-button>
@@ -57,9 +56,9 @@ export default {
         { id: 4, title: 'Trash', filter: 'trash' },
       ],
       quickViewButtons: [
-        { id: 0, title: 'Work', colour: 'danger' },
-        { id: 1, title: 'Private', colour: 'white' },
-        { id: 2, title: 'Saved', colour: '' },
+        { id: 0, title: 'Work', colour: 'primary' },
+        { id: 1, title: 'Private', colour: 'info' },
+        { id: 2, title: 'Saved', colour: 'success' },
       ],
     };
   },

src/pages/Email/components/MessageTable/MessageTable.vue

@@ -4,7 +4,7 @@
                   v-model="currentPage"
                   :total-rows="rows"
                   :per-page="perPage"
-                  class="ml-auto"
+                  class="ms-auto"
     ></b-pagination>
     <span v-else>
       <b-button variant="default" class="mb" @click="openMessage(null)">

src/pages/Email/components/MessageTableHeader/MessageTableHeader.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="messageTableHeader">
     <div>
-      <b-dropdown text="Select" variant="default" size="sm">
+      <b-dropdown text="Select" variant="gray-default" size="sm">
         <b-dropdown-item-button @click="chooseAll">All</b-dropdown-item-button>
         <b-dropdown-item-button @click="chooseNone">None</b-dropdown-item-button>
         <b-dropdown-divider />
         <b-dropdown-item-button @click="chooseRead">Read</b-dropdown-item-button>
         <b-dropdown-item-button @click="chooseUnread">Unread</b-dropdown-item-button>
       </b-dropdown>
-      <b-dropdown text="Actions" variant="default" size="sm" class="ml-2">
+      <b-dropdown text="Actions" variant="gray-default" size="sm" class="ms-2">
         <b-dropdown-item-button>Reply</b-dropdown-item-button>
         <b-dropdown-item-button>Forward</b-dropdown-item-button>
         <b-dropdown-item-button>Archive</b-dropdown-item-button>