Fix(Components): Refactor Code | JIRA: PT-207 (#127)

* Fix(Components): Refactor Icons | JIRA: PT-207 * Fix(Components): Fix color | JIRA: PT-207
ltv · Jul 6, 2022 · 53eea5f · 53eea5f
1 parent 359fa19
commit 53eea5f
Show file tree

Hide file tree

Showing 22 changed files with 236 additions and 1,043 deletions.
diff --git a/src/assets/css/el-button.scss b/src/assets/css/el-button.scss
@@ -116,7 +116,7 @@ body {
     }
 
     &:active {
-      @apply bg-primary-blue shadow-none #{!important};
+      @apply bg-primary shadow-none #{!important};
     }
   }
 

diff --git a/src/assets/css/el-card.scss b/src/assets/css/el-card.scss
@@ -1,11 +1,11 @@
 body {
   .el-card {
-    @apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-[5px] shadow-card cursor-auto text-primary #{!important};
+    @apply relative flex flex-col bg-clip-border break-words min-w-0 rounded-[5px] shadow-card cursor-auto text-primary-dark #{!important};
     --el-card-bg-color: white !important;
   }
   .el-card .card-header {
     h3 {
-      @apply mb-0 cursor-auto text-primary;
+      @apply mb-0 cursor-auto text-primary-dark;
     }
   }
   .el-card .el-card__header {

diff --git a/src/assets/css/typography.scss b/src/assets/css/typography.scss
@@ -6,7 +6,7 @@ body {
   h4,
   h5,
   h6 {
-    @apply text-primary font-semibold leading-normal #{!important};
+    @apply text-primary-dark font-semibold leading-normal #{!important};
   }
   h1 {
     @apply text-1.625;
@@ -37,7 +37,7 @@ body {
   .h4,
   .h5,
   .h6 {
-    @apply text-primary font-semibold leading-normal #{!important};
+    @apply text-primary-dark font-semibold leading-normal #{!important};
   }
   .h1 {
     @apply text-1.625;
@@ -63,7 +63,7 @@ body {
   .display-2,
   .display-3,
   .display-4 {
-    @apply text-primary font-semibold break-all sm:break-normal;
+    @apply text-primary-dark font-semibold break-all sm:break-normal;
   }
   .display-1 {
     @apply text-3.3;
@@ -80,10 +80,10 @@ body {
 
   // Specialized title
   .heading {
-    @apply uppercase text-0.95 text-primary font-semibold tracking-wide #{!important};
+    @apply uppercase text-0.95 text-primary-dark font-semibold tracking-wide #{!important};
   }
   .heading-title {
-    @apply uppercase text-1.375 text-primary font-semibold tracking-wide;
+    @apply uppercase text-1.375 text-primary-dark font-semibold tracking-wide;
   }
   .lead {
     @apply text-xl font-light leading-1.7;

diff --git a/src/components/Navigation/DefaultNav.vue b/src/components/Navigation/DefaultNav.vue
@@ -60,7 +60,7 @@
                   <el-dropdown-item class="m-0 hover:bg-white">
                     <div class="flex items-center w-full py-2.5 cursor-default">
                       <span class="text-sm text-slate-400 font-semibold m-0">
-                        You have <strong class="text-primary-blue">13</strong> notifications.
+                        You have <strong class="text-primary">13</strong> notifications.
                       </span>
                     </div>
                   </el-dropdown-item>
@@ -88,7 +88,7 @@
                     <div class="flex items-center w-full py-2">
                       <a
                         href="#!"
-                        class="mx-auto text-center text-primary-blue font-semibold text-medium"
+                        class="mx-auto text-center text-primary font-semibold text-medium"
                         >View all</a
                       >
                     </div>
@@ -245,7 +245,7 @@
               <el-dropdown-menu>
                 <el-dropdown-item class="m-0 hover:bg-white">
                   <div class="flex items-center w-full pt-1 cursor-default">
-                    <h6 class="truncate m-0 text-primary">WELCOME!</h6>
+                    <h6 class="truncate m-0 text-primary-dark">WELCOME!</h6>
                   </div>
                 </el-dropdown-item>
                 <el-dropdown-item class="mx-0 my-2 hover:bg-slate-100 text-zinc-800">

diff --git a/src/modules/buttons/views/index.vue b/src/modules/buttons/views/index.vue
@@ -2,7 +2,7 @@
   <div class="w-full block mx-auto h-auto lg:max-w-2/3">
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Styles</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Styles</h3>
       </template>
       <div>
         <StyleButtons />
@@ -11,7 +11,7 @@
 
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Colors</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Colors</h3>
       </template>
       <div>
         <ColorButtons />
@@ -20,7 +20,7 @@
 
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Outline</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Outline</h3>
       </template>
       <div>
         <OutlineButtons />
@@ -29,7 +29,7 @@
 
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Sizes</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Sizes</h3>
       </template>
 
       <div>
@@ -39,7 +39,7 @@
 
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Group</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Group</h3>
       </template>
 
       <div>
@@ -48,7 +48,7 @@
     </el-card>
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Social</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Social</h3>
       </template>
       <div>
         <SocialButtons />

diff --git a/src/modules/cards/views/components/ContactCard.vue b/src/modules/cards/views/components/ContactCard.vue
@@ -12,7 +12,7 @@
             <el-link
               :underline="false"
               href="#index"
-              class="text-15 text-primary font-semibold hover:text-[#233dd2]"
+              class="text-15 text-primary-dark font-semibold hover:text-[#233dd2]"
               >{{ name }}</el-link
             >
           </h4>

diff --git a/src/modules/cards/views/components/ProfileCard.vue b/src/modules/cards/views/components/ProfileCard.vue
@@ -55,7 +55,7 @@
         </div>
       </div>
       <div class="p-8">
-        <div class="text-center text-primary">
+        <div class="text-center text-primary-dark">
           <h3 class="font-semibold pb-2">
             {{ name }}<span class="font-thin">, {{ age }}</span>
           </h3>
@@ -66,9 +66,9 @@
             {{ location }}
           </h5>
         </div>
-        <div class="text-center text-primary">
+        <div class="text-center text-primary-dark">
           <h3 class="text-[13px] mt-6 font-semibold pb-2">
-            {{ pos }}
+            {{ job }}
           </h3>
           <h5 class="text-base text-dark-lighter font-normal">{{ degree }}</h5>
         </div>
@@ -115,7 +115,7 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    pos: {
+    job: {
       type: String,
       default: '',
     },

diff --git a/src/modules/cards/views/components/TeamMemberCard.vue b/src/modules/cards/views/components/TeamMemberCard.vue
@@ -6,7 +6,7 @@
       </el-link>
       <div class="pt-4">
         <h4 class="mb-0 py-2">
-          <span class="text-17 font-semibold text-primary">{{ name }}</span>
+          <span class="text-17 font-semibold text-primary-dark">{{ name }}</span>
         </h4>
         <h4 class="text-15 text-muted font-light mb-0">{{ description }}</h4>
       </div>

diff --git a/src/modules/cards/views/index.vue b/src/modules/cards/views/index.vue
@@ -71,7 +71,7 @@
             <el-card class="border-slate-100" :body-style="{ padding: '0px' }">
               <img alt="..." src="@/assets/images/man_draw.jpg" />
               <div class="px-6 pt-4 pb-8">
-                <div class="text-xl font-semibold pt-2 pb-1 text-primary">
+                <div class="text-xl font-semibold pt-2 pb-1 text-primary-dark">
                   Get started with Argon
                 </div>
                 <div class="font-normal text-80 text-muted">

diff --git a/src/modules/dashboard/views/components/PageVisitTable.vue b/src/modules/dashboard/views/components/PageVisitTable.vue
@@ -3,7 +3,7 @@
     <div class="flex flex-wrap flex-col bg-white shadow mb-7 mx-auto rounded-md">
       <div class="flex flex-wrap items-center py-2 px-6 mb-0 border-b-dark-4">
         <div class="max-w-full basis-0 grow">
-          <h3 class="mb-0 cursor-auto text-primary">{{ title }}</h3>
+          <h3 class="mb-0 cursor-auto text-primary-dark">{{ title }}</h3>
         </div>
         <div class="max-w-full basis-0 grow">
           <div class="flex flex-wrap mb-0 pl-0 justify-end gap-x-3">

diff --git a/src/modules/dashboard/views/components/SocialTrafficTable.vue b/src/modules/dashboard/views/components/SocialTrafficTable.vue
@@ -3,7 +3,7 @@
     <div class="flex flex-wrap flex-col bg-white shadow mb-7 mx-auto rounded-md">
       <div class="flex flex-wrap items-center py-2 px-6 mb-0 border-b-dark-4">
         <div class="max-w-full basis-0 grow">
-          <h3 class="mb-0 cursor-auto text-primary">{{ title }}</h3>
+          <h3 class="mb-0 cursor-auto text-primary-dark">{{ title }}</h3>
         </div>
         <div class="max-w-full basis-0 grow">
           <div class="flex flex-wrap mb-0 pl-0 justify-end gap-x-3">
@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'SocialTrafficTable',
@@ -95,19 +95,17 @@ export default defineComponent({
         completion: 30,
       },
     ]
+    const theme = ref([
+      { completion: 60, color: '#F5365C' },
+      { completion: 70, color: '#2DCE89' },
+      { completion: 75, color: '#11CDEF' },
+      { completion: 80, color: '#6c6be4' },
+    ])
+
     const customColorMethod = (completion: number) => {
-      if (completion == 60) {
-        return '#F5365C'
-      } else if (completion == 70) {
-        return '#2DCE89'
-      } else if (completion == 80) {
-        return '#6c6be4'
-      } else if (completion == 75) {
-        return '#11CDEF'
-      } else {
-        return '#FB6340'
-      }
+      return theme.value.find((el: any) => el.completion == completion)?.color ?? '#FB6340'
     }
+
     return {
       tableData,
       customColorMethod,

diff --git a/src/modules/grid/views/index.vue b/src/modules/grid/views/index.vue
@@ -3,7 +3,7 @@
     <!-- Grid system -->
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Grid system</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Grid system</h3>
       </template>
       <div>
         <GridSystem />
@@ -13,7 +13,7 @@
     <!-- Equal-width -->
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Equal-width</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Equal-width</h3>
       </template>
       <div>
         <EqualWidth />
@@ -23,7 +23,7 @@
     <!-- Setting one column width -->
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Setting one column width</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Setting one column width</h3>
       </template>
       <div class="my-3">
         <OneColumnWidth />
@@ -33,7 +33,7 @@
     <!-- Variable width content -->
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Variable width content</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Variable width content</h3>
       </template>
       <div class="my-3">
         <VariableWidth />
@@ -43,7 +43,7 @@
     <!-- Equal-width multi-row -->
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Equal-width multi-row</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Equal-width multi-row</h3>
       </template>
       <div class="my-3">
         <MultiRow />
@@ -53,7 +53,7 @@
     <!-- Mix and match -->
     <el-card class="mb-7.5 border-none">
       <template #header>
-        <h3 class="cursor-auto mb-0 text-primary">Mix and match</h3>
+        <h3 class="cursor-auto mb-0 text-primary-dark">Mix and match</h3>
       </template>
       <div>
         <Mix />
-Original file line number
+Diff line change
@@ Expand Up / @@ -116,7 +116,7 @@ body { @@
         }
         &:active {
-          @apply bg-primary-blue shadow-none #{!important};
+          @apply bg-primary shadow-none #{!important};
         }
       }
@@ Expand Down @@