feat(frontend)::guitar: Adding card components || JIRA: PT-18

components.d.ts

@@ -5,16 +5,22 @@
 declare module 'vue' {
   export interface GlobalComponents {
     ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']

src/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, watch, onMounted } from 'vue'
+import { defineComponent, inject } from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import DefaultLayout from './layouts/default-layout.vue'
 import AuthLayout from 'layouts/auth-layout.vue'

src/assets/css/el-alert.scss

@@ -0,0 +1,6 @@
+.el-alert {
+  border-radius: 0.25rem !important; /* 4px */
+}
+.el-alert .el-alert__content .el-icon.el-alert__close-btn {
+  @apply py-3 text-slate-50 hover:text-slate-200;
+}

src/assets/css/el-button.scss

@@ -13,11 +13,15 @@ body {
     --el-button-border-color: var(--button-border-color) !important;
     --el-button-hover-border-color: var(--button-hover-border-color) !important;
     --el-button-active-border-color: var(--button-active-border-color) !important;
+
+    @apply hover:pt-1.5 hover:shadow-sm;
   }
 
   @each $type in $types {
     .el-button--#{$type} {
+      @if $type == 'primary' {
         background-color: var(--button-bg-color-#{$type}) !important;
+      }
         --el-button-bg-color: var(--button-bg-color-#{$type}) !important;
         --el-button-hover-bg-color: var(--button-hover-bg-color-#{$type}) !important;
         --el-button-active-bg-color: var(--button-active-bg-color-#{$type}) !important;
@@ -29,21 +33,23 @@ body {
         --el-button-text-color: var(--button-text-color-#{$type});
         --el-button-hover-text-color: var(--button-hover-text-color-#{$type}) !important;
         --el-button-active-text-color: var(--button-active-text-color-#{$type}) !important;
-
-        &:active {
-          filter: drop-shadow(0 0 #0000);
-          background-color: var(--button-active-bg-color-#{$type}) !important;
-        }
 
         @if $type == 'secondary' {
           @apply shadow-lg;
         }
 
-        &:hover {
+        &:hover, &:focus {
           filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
           background: var(--button-hover-bg-color-#{$type});
         }
     }
+    .el-button--#{$type}:active {
+      filter: drop-shadow(0 0 #0000);
+      background-color: var(--button-active-bg-color-#{$type});
+      @if $type == 'primary' {
+        background-color: var(--button-active-bg-color-#{$type}) !important;
+      }
+    }
 
     .el-button.el-button--#{$type}.is-plain {
       background: none !important;
@@ -68,7 +74,7 @@ body {
         @apply shadow-none border-none;
       }
 
-      &:hover {
+      &:hover, &:focus {
         filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
         background: var(--button-hover-bg-color-#{$type}) !important;
       }

src/assets/css/el-card.scss

@@ -0,0 +1,6 @@
+
+body {
+  .el-card {
+    --el-card-bg-color: white !important
+  }
+}

src/assets/css/el-checkbox.scss

@@ -0,0 +1,7 @@
+.el-table .el-checkbox {
+  --el-checkbox-checked-icon-color: var(--el-color-primary-light-2) !important;
+}
+
+.el-table th.is-leaf .el-checkbox .el-checkbox__inner {
+  --el-checkbox-checked-icon-color: var(--el-text-color-primary) !important;
+}

src/assets/css/el-dropdown.scss

@@ -0,0 +1,20 @@
+.el-dropdown {
+  @apply rounded-full shadow-teal-400;
+}
+
+.el-dropdown .el-button-group .el-button:first-child {
+  @apply rounded-l-full border-solid border-slate-300 border-r-0 text-black;
+}
+
+.el-dropdown .el-button-group .el-dropdown__caret-button {
+  @apply rounded-r-full border-solid border-slate-300 border-l-0 text-black;
+}
+
+.el-dropdown .el-button-group .el-button.el-button.el-button--small {
+  @apply border-none;
+}
+
+.el-dropdown .el-button:first-child, 
+.el-dropdown .el-button-group .el-dropdown__caret-button {
+  @apply bg-white font-sans hover:bg-slate-100;
+}

src/assets/css/el-tag.scss

@@ -0,0 +1,13 @@
+.el-tag {
+  width: 5rem; /* 80px */
+  border-radius: 9999px !important;
+  font-weight: 300 !important;
+}
+
+.el-tag.el-tag--success {
+  @apply bg-[#7ACCC8] border-[#7ACCC8];
+}
+
+.el-tag.el-tag--danger {
+  @apply bg-[#E14E58] border-[#E14E58];
+}

src/assets/css/var.scss

@@ -17,7 +17,9 @@ $colors: 'default' '#b4ffff' '#000000' '#b4ffff' '#bbffff' '#bbffff' '#000000' '
 
   --button-text-color: #000000;
   --button-hover-text-color: #000000;
-  --button-active-text-color: #000000;
+  --button-active-text-color: #000000;  
+
+  --el-table-checked-fill-base: #E14E58;
 
   @each $type, $bg, $color, $bd, $bg-hv, $bd-hv, $color-hv, $bg-active in $colors {
     @debug $bg-hv;

src/components/element-plus.ts

@@ -3,12 +3,14 @@ import 'assets/css/var.scss'
 import 'assets/css/el-button.scss'
 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-dropdown.scss'
+import 'assets/css/el-alert.scss'
+import 'assets/css/el-checkbox.scss'
 
 import 'assets/css/el-message.css'
 import 'assets/css/typography.scss'
+import 'assets/css/el-card.scss'
+import 'assets/css/el-tag.scss'
 
 
 import 'element-plus/dist/index.css'