From a4a83a8edde6fef3e4df017ea37e22f3c35a83cb Mon Sep 17 00:00:00 2001
From: Nishchit14 <dnishchit@gmail.com>
Date: Fri, 25 Aug 2023 18:08:24 +0530
Subject: [PATCH] ui: added heading color with text lighter shade

---
 .../table/bulk-edit-table/BulkEditTable.tsx         |  2 +-
 platform/firecamp-ui/src/scss/base.scss             | 10 ++++++++--
 platform/firecamp-ui/src/scss/tailwind.scss         | 13 +++++++++++--
 platform/firecamp-ui/tailwind.config.js             |  1 +
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx b/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx
index 79113139..9e4be40a 100644
--- a/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx
+++ b/platform/firecamp-ui/src/components/table/bulk-edit-table/BulkEditTable.tsx
@@ -75,7 +75,7 @@ const BulkEditTable: FC<IBulkEditTable> = ({
       <TabHeader className="-mb-2">
         {title && (
           <TabHeader.Left>
-            <span className="" data-testid="table-title">{title}</span>
+            <span className="text-heading-color" data-testid="table-title">{title}</span>
           </TabHeader.Left>
         )}
 
diff --git a/platform/firecamp-ui/src/scss/base.scss b/platform/firecamp-ui/src/scss/base.scss
index 585c7031..dd5219f5 100644
--- a/platform/firecamp-ui/src/scss/base.scss
+++ b/platform/firecamp-ui/src/scss/base.scss
@@ -71,6 +71,8 @@
     --input-background-focus: var(--mantine-color-dark-7); /* .1 */
     --input-background: var(--app-background);
 
+    --heading-color: var(--mantine-color-gray-5);
+
     --popover-background: var(--mantine-color-dark-5); /* .2 */
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
@@ -148,6 +150,8 @@
     --statusBar-border: var(--app-border);
     --statusBar-background-active: var(--mantine-color-gray-2);
 
+    --heading-color: var(--mantine-color-dark-4);
+
     --input-border: var(--app-border);
     --input-placeholder: var(--mantine-color-gray-6);
     --input-text: var(--mantine-color-gray-9);
@@ -849,10 +853,12 @@ tr:focus-visible {
 /*--------table temporary css starts ------------*/
 
 /*--------table 2 css starts------------*/
-.primary-table .mtk1,
-.primary-table th {
+.primary-table .mtk1 {
   color: var(--tab-foreground-inactive) !important;
 }
+.primary-table th {
+  color: var(--heading-color) !important;
+}
 
 .table-cell .table-action {
   visibility: hidden;
diff --git a/platform/firecamp-ui/src/scss/tailwind.scss b/platform/firecamp-ui/src/scss/tailwind.scss
index 9a461c0a..ae5ee060 100644
--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -59,6 +59,8 @@
     --input-background-focus: var(--mantine-color-dark-7); /* .1 */
     --input-background: var(--app-background);
 
+    --heading-color: var(--mantine-color-gray-5);
+
     --popover-background: var(--mantine-color-dark-5); /* .2 */
     --popover-foreground: var(--app-foreground);
     --popover-border: transparent;
@@ -136,6 +138,8 @@
     --statusBar-border: var(--app-border);
     --statusBar-background-active: var(--mantine-color-gray-2);
 
+    --heading-color: var(--mantine-color-dark-4);
+
     --input-border: var(--app-border);
     --input-placeholder: var(--mantine-color-gray-6);
     --input-text: var(--mantine-color-gray-9);
@@ -1734,6 +1738,9 @@
 .text-graphql {
     color: var(--req-graphql);
 }
+.text-heading-color {
+    color: var(--heading-color);
+}
 .text-info {
     color: var(--info);
 }
@@ -2827,10 +2834,12 @@ tr:focus-visible {
 /*--------table temporary css starts ------------*/
 
 /*--------table 2 css starts------------*/
-.primary-table .mtk1,
-.primary-table th {
+.primary-table .mtk1 {
   color: var(--tab-foreground-inactive) !important;
 }
+.primary-table th {
+  color: var(--heading-color) !important;
+}
 
 .table-cell .table-action {
   visibility: hidden;
diff --git a/platform/firecamp-ui/tailwind.config.js b/platform/firecamp-ui/tailwind.config.js
index c6b455c9..f7eb830c 100644
--- a/platform/firecamp-ui/tailwind.config.js
+++ b/platform/firecamp-ui/tailwind.config.js
@@ -75,6 +75,7 @@ module.exports = {
       focusBorder: 'var(--focus-border)',
       focusColor: '#ffffff1a',
 
+      'heading-color': 'var(--heading-color)',
       primaryColor: 'var(--app-primary)',
       'primaryColor-text': '#ffffff',
       secondaryColor: 'var(--app-secondary)',