From 36ace3e56c2cf0683a69a75eec8584da1cd935c6 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Tue, 24 Aug 2021 02:02:38 +0800
Subject: [PATCH] naming convention and wrap all styles inside
 .table-shadow-box to avoid unexpected style in the future

---
 src/assets/app.scss         | 55 ++++++++++++++++++++-----------------
 src/pages/DashboardHome.vue |  2 +-
 src/pages/Details.vue       |  2 +-
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 5a6d1c64..aa118ed9 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -81,33 +81,34 @@ h2 {
 }
 
 @media (max-width: 550px) {
-    tbody .shadow-box {
-        background-color: white;
-    }
 
-    div.tableShadowbox {
+    .table-shadow-box {
         padding: 10px !important;
+
+        thead {
+            display: none;
+        }
+
+        tbody  {
+            .shadow-box {
+                background-color: white;
+            }
+        }
+
+        tr {
+            margin-top: 0 !important;
+            padding: 10px !important;
+            display: block;
+            margin-bottom: 10px;
+
+            td {
+                border-bottom: 1px solid $dark-font-color;
+                display: block;
+                padding: 6px;
+            }
+        }
     }
 
-    .tableShadowbox tr {
-        margin-top: 0 !important;
-        padding: 10px !important;
-    }
-
-    .tableShadowbox thead {
-        display: none;
-    }
-  
-    .tableShadowbox tr {
-        display: block;
-        margin-bottom: 10px;
-    }
-  
-    .tableShadowbox td {
-        border-bottom: 1px solid $dark-font-color;
-        display: block;
-        padding: 6px;
-    }
 }
 
 // Dark Theme override here
@@ -224,8 +225,12 @@ h2 {
     }
 
     @media (max-width: 550px) {
-        tbody .shadow-box {
-            background-color: $dark-bg2;
+        .table-shadow-box {
+            tbody {
+                .shadow-box {
+                    background-color: $dark-bg2;
+                }
+            }
         }
     }
 }
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 2821c575..2ff35472 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -38,7 +38,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box tableShadowbox" style="overflow-x: scroll">
+            <div class="shadow-box table-shadow-box" style="overflow-x: scroll">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 5bd04c90..0a6aa37e 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -128,7 +128,7 @@
                 </div>
             </div>
 
-            <div class="shadow-box tableShadowbox">
+            <div class="shadow-box table-shadow-box">
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>