feat(Notifications): Check & Fix bugs | JIRA: PT-86 (#46)

Co-authored-by: Trung-Hieu-Dev <dangtrunghieusg.com>

Author: Trung-Hieu-Dev

src/assets/css/form.scss

@@ -0,0 +1,44 @@
+body {
+  .el-form.el-form--default {
+    @apply flex flex-col items-center;
+  }
+
+  .el-form-item {
+    @apply shadow rounded overflow-hidden;
+  }
+
+  .form-icon {
+    @apply bg-white w-15/100;
+  }
+
+  //   Input
+  .el-form-item.el-form-item--default.form-input {
+    @apply w-full;
+  }
+  .el-input.el-input--default .el-input__inner {
+    @apply rounded-none bg-el-form-input p-0 focus:text-slate-400 focus:font-normal text-slate-400 font-normal focus:ring-0 focus:bg-white #{!important};
+  }
+  .el-input.el-input--default {
+    @apply w-85/100;
+  }
+  .el-form-item.checkbox {
+    @apply self-start shadow-none #{!important};
+  }
+
+  //   Checkbox
+  .el-checkbox__inner {
+    @apply rounded shadow h-4 w-4 #{!important};
+  }
+  .el-checkbox__label {
+    @apply text-mess-box-text font-normal focus:border-transparent hover:border-transparent;
+  }
+  .el-checkbox.el-checkbox--default .el-checkbox__inner {
+    @apply hover:border-transparent;
+  }
+  .el-checkbox__input.is-checked .el-checkbox__inner {
+    @apply bg-primary-blue;
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    @apply text-slate-400;
+  }
+}

src/assets/css/notifications.scss

@@ -164,6 +164,9 @@ body {
   }
 
   // Modals - Form
+  .el-dialog__body .el-icon {
+    @apply text-base #{!important};
+  }
 
   .open-form .el-dialog__header {
     @apply hidden;
@@ -197,43 +200,10 @@ body {
   .btn span {
     @apply font-semibold text-left-bar-indigo hover:text-black;
   }
-  .el-form.el-form--default {
-    @apply flex flex-col items-center;
-  }
-  .el-dialog__body .el-icon {
-    @apply text-base #{!important};
-  }
-  .form-icon {
-    @apply bg-white py-2.5 px-3 h-11 w-15/100;
-  }
-  .el-input .el-input__inner {
-    @apply h-11 rounded-none w-full bg-el-form-input;
-  }
-  .el-input.el-input--default {
-    @apply w-85/100;
-  }
-  .el-form-item__content {
-    @apply rounded-md overflow-hidden;
-  }
-  .form-input {
-    @apply rounded-md shadow;
-  }
-  .checkbox {
-    @apply self-start;
-  }
-  .el-checkbox__inner {
-    @apply rounded shadow h-4 w-4 outline-none #{!important};
-  }
-  .el-checkbox__label {
-    @apply text-mess-box-text font-normal focus:border-transparent hover:border-transparent;
-  }
-  .el-form-item.el-form-item--default.form-input {
-    @apply w-full;
-  }
 
   // Responsive
   .el-dialog {
-    @apply w-97/100 sm:w-8/12 md:w-7/12 lg:w-6/12 xl:w-5/12 rounded-md;
+    @apply w-97/100 sm:w-8/12 md:w-7/12 lg:w-6/12 xl:w-4/12 rounded-md;
   }
   .open-form {
     @apply rounded-md bg-mess-box-bg w-97/100 md:w-96 #{!important};

src/components/element-plus.ts

@@ -4,6 +4,7 @@ import 'assets/css/typography.scss'
 import 'assets/css/el-popper.scss'
 import 'assets/css/el-breadcrumb.scss'
 import 'assets/css/notifications.scss'
+import 'assets/css/form.scss'
 
 import 'assets/css/el-pagination.scss'
 import 'assets/css/el-table.scss'

src/modules/notification/views/index.vue

@@ -18,7 +18,7 @@
         <h3 class="text-md">Modals</h3>
       </div>
 
-      <div class="p-5 grid grid-cols-1 lg:grid-cols-3 lg:gap-6">
+      <div class="p-5 grid grid-cols-1 md:grid-cols-3 md:gap-6 lg:grid-cols-3 lg:gap-6">
         <!-- Modals - Default -->
         <div class="w-full mb-4">
           <el-button type="primary" size="large" class="w-full" text @click="openDefault = true"
@@ -119,7 +119,7 @@
                       <component :is="form.MailIcon" />
                     </el-icon>
                   </div>
-                  <el-input />
+                  <el-input v-model="form.email" />
                 </el-form-item>
                 <!-- Password -->
                 <el-form-item class="form-input" prop="LockClosedIcon">
@@ -128,7 +128,7 @@
                       <component :is="form.LockClosedIcon" />
                     </el-icon>
                   </div>
-                  <el-input />
+                  <el-input v-model="form.password" />
                 </el-form-item>
                 <!-- Checkbox -->
                 <el-form-item class="checkbox">