From 2788c51b6f4de0ba3be9466f6c4678bc93736e18 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sun, 24 Dec 2023 20:14:36 +0100
Subject: [PATCH] Added MutationsTableComponent styling to sass files

---
 package-lock.json                             |  6 +++++
 .../Mutations/MutationsTableComponent.vue     | 26 -------------------
 .../components/data/_datatable.scss           |  9 ++++---
 .../sudosos-light/_variables_light.scss       |  8 +++---
 src/views/HomeView.vue                        |  8 ------
 5 files changed, 15 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7876b052..ad5bd742 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "jwt-decode": "^3.1.2",
         "marked": "^9.1.5",
         "pinia": "^2.1.3",
+        "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
         "primevue": "^3.30.1",
         "sass": "^1.63.6",
@@ -3613,6 +3614,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/primeflex": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
+      "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ=="
+    },
     "node_modules/primeicons": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
diff --git a/src/components/Mutations/MutationsTableComponent.vue b/src/components/Mutations/MutationsTableComponent.vue
index 5e9bd393..057b7b27 100644
--- a/src/components/Mutations/MutationsTableComponent.vue
+++ b/src/components/Mutations/MutationsTableComponent.vue
@@ -135,30 +135,4 @@ async function getMutations(take: number, skip: number):
 </script>
 
 <style lang="scss" scoped>
-:deep(.p-datatable .p-datatable-thead > tr > th) {
-  background-color: #f8f8f8;
-  border-top: none;
-  text-transform: uppercase;
-  font-family: Lato, Arial, sans-serif !important;
-  font-size: 1rem;
-  padding: 0.375rem 0;
-  line-height: 1.5;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr) {
-  background-color: #f8f8f8;
-}
-
-:deep(.p-datatable .p-paginator) {
-  background-color: #f8f8f8;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr > td) {
-  border: none;
-  padding: 0.375rem 0;
-  font-size: 1rem;
-  font-family: Lato, Arial, sans-serif !important;
-}
-
-
 </style>
diff --git a/src/styles/primevue-base/components/data/_datatable.scss b/src/styles/primevue-base/components/data/_datatable.scss
index fbd4cfda..9b89b510 100644
--- a/src/styles/primevue-base/components/data/_datatable.scss
+++ b/src/styles/primevue-base/components/data/_datatable.scss
@@ -36,6 +36,7 @@
         color: $tableHeaderCellTextColor;
         background: $tableHeaderCellBg;
         transition: $listItemTransition;
+        text-transform: uppercase;
     }
 
     .p-datatable-tfoot > tr > td {
@@ -84,7 +85,7 @@
             &:hover {
                 background: $tableHeaderCellHighlightHoverBg;
                 color: $tableHeaderCellHighlightTextColor;
-    
+
                 .p-sortable-column-icon {
                     color: $tableHeaderCellHighlightTextColor;
                 }
@@ -279,14 +280,14 @@
         .p-datatable-tbody {
             > tr:nth-child(even) {
                 background: $tableBodyRowEvenBg;
-    
+
                 &.p-highlight {
                     background: $highlightBg;
                     color: $highlightTextColor;
-    
+
                     .p-row-toggler {
                         color: $highlightTextColor;
-    
+
                         &:hover {
                             color: $highlightTextColor;
                         }
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
index 7596890d..067b0745 100644
--- a/src/styles/themes/sudosos-light/_variables_light.scss
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -480,7 +480,7 @@ $tableHeaderTextColor:$shade900 !default;
 $tableHeaderFontWeight:600 !default;
 $tableHeaderPadding:1rem 1rem !default;
 
-$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellPadding:0.375rem 0 !default;
 $tableHeaderCellBg:$shade100 !default;
 $tableHeaderCellTextColor:$shade900 !default;
 $tableHeaderCellFontWeight:600 !default;
@@ -503,13 +503,13 @@ $tableBodyRowHoverBg:$shade200 !default;
 $tableBodyRowTextHoverColor:$shade900 !default;
 $tableBodyCellBorder:1px solid #dee2e6 !default;
 $tableBodyCellBorderWidth:1px 0 0 0 !default;
-$tableBodyCellPadding:1rem 1rem !default;
+$tableBodyCellPadding:0.375rem 0!default;
 
-$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellPadding:0.375rem 0 !default;
 $tableFooterCellBg:$shade100 !default;
 $tableFooterCellTextColor:$shade900 !default;
 $tableFooterCellFontWeight:600 !default;
-$tableFooterCellBorder:1px solid #dee2e6 !default;
+$tableFooterCellBorder:none !default;
 $tableFooterCellBorderWidth:1px 0 1px 0 !default;
 $tableResizerHelperBg:$primaryColor !default;
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fe7e80b3..7effa19c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -42,17 +42,9 @@ const getUserMutations = async (take: number, skip: number) :
 </script>
 
 <style scoped lang="scss">
-<<<<<<< HEAD
-<<<<<<< HEAD
 @import '../styles/BasePage.css';
 
 .balance-component {
   margin-right: 15px;
 }
-=======
-@import "../styles/BasePage.css";
->>>>>>> 8ca1d52 (Fixed HomeView.vue en App.vue to use primeflex)
-=======
-@import "../styles/BasePage.css";
->>>>>>> ebebcec39984fc34626b1045c9aa3a239b72b534
 </style>