feat(frontend)::guitar:Adding notification || JIRA: PT-9

components.d.ts

@@ -4,8 +4,10 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']

package.json

@@ -26,6 +26,7 @@
     "vee-validate": "^4.4.7",
     "vue": "^3.2.27",
     "vue-router": "^4.0.8",
+    "vue-sweetalert2": "^5.0.5",
     "vuex": "^4.0.2",
     "yup": "^0.32.9"
   },

src/assets/css/el-alert.css

@@ -0,0 +1,3 @@
+.el-alert {
+  @apply rounded pl-8 !important;
+}

src/assets/css/el-message.css

@@ -0,0 +1,27 @@
+.el-message.el-message--info {
+  @apply bg-slate-700 border-slate-700 py-8 !important;
+}
+
+.el-message.el-message--info.infoNotifClass {
+  @apply bg-cyan-400 border-cyan-400 py-8 !important;
+}
+
+.el-message.el-message--warning {
+  @apply bg-orange-500 border-orange-400 py-8 !important;
+}
+
+.el-message.el-message--error {
+  @apply bg-rose-500 border-rose-500 py-8 !important;
+}
+
+.el-message.el-message--success {
+  @apply bg-emerald-400 border-emerald-400 py-8 !important;
+}
+
+.el-message .el-icon.el-message__closeBtn {
+  @apply text-slate-200 pb-12 hover:text-slate-50;
+}
+
+.el-message .el-icon.el-message__icon {
+  @apply text-slate-100 pb-6;
+}

src/assets/css/el-table-column.css

@@ -1,7 +1,7 @@
 .el-table .success-row {
-  --el-table-tr-bg-color: var(--el-color-success-light);
+  @apply bg-gradient-to-r from-lime-100 to-lime-50;
 }
 
 .el-table .primary-row {
-  --el-table-tr-bg-color: var(--el-color-primary-light-8);
+  @apply bg-gradient-to-r from-cyan-100 to-cyan-50;
 }

src/assets/css/el-table.css

@@ -1,5 +1,5 @@
 .el-table__header thead {
-  @apply font-bold text-base font-sans decoration-stone-400 !important;
+  @apply font-bold text-base font-sans text-slate-400 !important;
 }
 
 .el-table {
@@ -33,9 +33,6 @@
 
 .el-table__row,
 .el-table__row.hover-row {
-  @apply hover:bg-slate-300 !important;
+  @apply hover:bg-gray-200 !important;
 }
 
-.el-table--enable-row-hover .el-table__body tr:hover > td {
-  @apply bg-slate-300 hover:bg-slate-300 text-neutral-500 !important;
-}

src/assets/css/el-tag.css

@@ -1,3 +1,11 @@
 .el-tag {
   @apply w-20 rounded-full font-light !important;
+}
+
+.el-tag.el-tag--success {
+  @apply bg-emerald-300 border-emerald-300 !important;
+}
+
+.el-tag.el-tag--danger {
+  @apply bg-rose-500 border-rose-500 !important;
 }

src/components/element-plus.ts

@@ -4,6 +4,10 @@ import 'assets/css/el-table.css'
 import 'assets/css/el-table-column.css'
 import 'assets/css/el-dropdown.css'
 import 'assets/css/el-tag.css'
+import 'assets/css/el-alert.css'
+
+import 'assets/css/el-message.css'
+
 
 import 'element-plus/dist/index.css'
 import 'element-plus/es/components/message/style/css'

src/main.ts

@@ -4,6 +4,9 @@ import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import App from './App.vue'
 import AppComponents from './components'
+import VueSweetAlert2 from 'vue-sweetalert2'
+import 'sweetalert2/dist/sweetalert2.min.css'
+
 import './index.css'
 import router from './router'
 // create new app instance
@@ -17,6 +20,8 @@ const createNewApp = () => {
   app.use(ElementPlus)
   app.use(AppComponents)
   app.use(createPinia())
+  app.use(VueSweetAlert2)
+
   app.mount('#app')
   app.config.performance = true
 }