From 615ba7918574334ef5a5c9391e4b80e40861967c Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Sun, 5 Jun 2022 22:57:17 +0100
Subject: [PATCH] Making checkbox toggle collumns

---
 src/views/dashboard/related/log/Header.vue | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index b50e524f..99c2fc4e 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -17,27 +17,29 @@ limitations under the License. -->
     <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
       <!-- <p style="margin-right: 10px">Select visible columns</p> -->
       <el-dropdown class="dark" :hide-on-click="false">
-        <span class="el-dropdown-link">
+        <span class="cursor-pointer">
           Select visible columns<el-icon class="el-icon--right"
             ><arrow-down
           /></el-icon>
         </span>
         <template #dropdown>
-          <el-dropdown-menu class="dropdownSelector" >
+          <el-dropdown-menu class="dropdownSelector">
             <el-dropdown-item>
               <div
                 style="width: 100%"
                 class="flex-h items-center justify-between"
               >
-                <span style="margin-right: 10px">Show All</span>
                 <el-checkbox :checked="showAllColumns" size="large" />
+                <span style="margin-right: 10px">Show All</span>
               </div>
             </el-dropdown-item>
             <el-dropdown-item
               v-for="item in logStore.serviceLogColumn"
               :key="item.value"
             >
-            <el-checkbox v-model="item.isVisible" :label="item.value" fill="success"  />
+              <el-checkbox class="custom-checkbox" v-model="item.isVisible">
+                <span>{{ item.value }}</span>
+              </el-checkbox>
               <!-- <div
                 style="width: 100%"
                 class="flex-h items-center justify-between"
@@ -623,7 +625,7 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
-.dropdownSelector{
+.dropdownSelector {
   background: var(--nice-black);
 }
 .el-dropdown-link {
@@ -632,6 +634,14 @@ watch(
   display: flex;
   align-items: center;
 }
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.custom-checkbox .el-checkbox__input.is-checked + .el-checkbox__label,
+.custom-checkbox .el-checkbox__label {
+  color: var(--spp-white) !important;
+}
 // .log-wrapper {
 //   width: 600px;
 //   padding-left: 40px;