From efaa9aed21e13c07b27ca56c8fc70fa73f7fbbe6 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Sat, 22 Jan 2022 21:36:28 +0530
Subject: [PATCH] feat: using css vars for brand and tab border color

---
 .../src/components/GraphQLRequestPane/StyledWrapper.js    | 8 ++++----
 .../src/components/HttpRequestPane/StyledWrapper.js       | 8 ++++----
 .../grafnode-components/src/components/QueryUrl/index.js  | 2 +-
 .../src/components/ResponsePane/StyledWrapper.js          | 2 +-
 .../src/components/SaveRequest/index.js                   | 2 +-
 .../Collection/CollectionItem/StyledWrapper.js            | 6 +++---
 packages/grafnode-run/src/styles/globals.css              | 6 ++++++
 7 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/grafnode-components/src/components/GraphQLRequestPane/StyledWrapper.js b/packages/grafnode-components/src/components/GraphQLRequestPane/StyledWrapper.js
index 8035c4cc..282a8259 100644
--- a/packages/grafnode-components/src/components/GraphQLRequestPane/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/GraphQLRequestPane/StyledWrapper.js
@@ -32,8 +32,8 @@ const StyledWrapper = styled.div`
   .react-tabs__tab--selected {
     border: none;
     color: #322e2c !important;
-    border-bottom: solid 2px #8e44ad !important;
-    border-color: #8e44ad !important;
+    border-bottom: solid 2px var(--color-tab-active-border) !important;
+    border-color: var(--color-tab-active-border) !important;
     background: inherit;
     outline: none !important;
     box-shadow: none !important;
@@ -42,8 +42,8 @@ const StyledWrapper = styled.div`
       border: none;
       outline: none !important;
       box-shadow: none !important;
-      border-bottom: solid 2px #8e44ad !important;
-      border-color: #8e44ad !important;
+      border-bottom: solid 2px var(--color-tab-active-border) !important;
+      border-color: var(--color-tab-active-border) !important;
       background: inherit;
       outline: none !important;
       box-shadow: none !important;
diff --git a/packages/grafnode-components/src/components/HttpRequestPane/StyledWrapper.js b/packages/grafnode-components/src/components/HttpRequestPane/StyledWrapper.js
index af2dfcf3..12757c2c 100644
--- a/packages/grafnode-components/src/components/HttpRequestPane/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/HttpRequestPane/StyledWrapper.js
@@ -32,8 +32,8 @@ const StyledWrapper = styled.div`
   .react-tabs__tab--selected {
     border: none;
     color: #322e2c !important;
-    border-bottom: solid 2px #8e44ad !important;
-    border-color: #8e44ad !important;
+    border-bottom: solid 2px var(--color-tab-active-border) !important;
+    border-color: var(--color-tab-active-border) !important;
     background: inherit;
     outline: none !important;
     box-shadow: none !important;
@@ -42,8 +42,8 @@ const StyledWrapper = styled.div`
       border: none;
       outline: none !important;
       box-shadow: none !important;
-      border-bottom: solid 2px #8e44ad !important;
-      border-color: #8e44ad !important;
+      border-bottom: solid 2px var(--color-tab-active-border) !important;
+      border-color: var(--color-tab-active-border) !important;
       background: inherit;
       outline: none !important;
       box-shadow: none !important;
diff --git a/packages/grafnode-components/src/components/QueryUrl/index.js b/packages/grafnode-components/src/components/QueryUrl/index.js
index 4141f587..a940ed51 100644
--- a/packages/grafnode-components/src/components/QueryUrl/index.js
+++ b/packages/grafnode-components/src/components/QueryUrl/index.js
@@ -90,7 +90,7 @@ const QueryUrl = ({value, onChange, handleRun, collections}) => {
         />
       </div>
       <button
-        style={{backgroundColor: '#8e44ad'}}
+        style={{backgroundColor: 'var(--color-brand)'}}
         className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
         onClick={handleRun}
       >
diff --git a/packages/grafnode-components/src/components/ResponsePane/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/StyledWrapper.js
index 9fe4eb13..d5c16399 100644
--- a/packages/grafnode-components/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/ResponsePane/StyledWrapper.js
@@ -17,7 +17,7 @@ const StyledWrapper = styled.div`
 
       &.active {
         color: #322e2c !important;
-        border-bottom: solid 2px #8e44ad !important;
+        border-bottom: solid 2px var(--color-tab-active-border) !important;
       }
     }
   }
diff --git a/packages/grafnode-components/src/components/SaveRequest/index.js b/packages/grafnode-components/src/components/SaveRequest/index.js
index 7356a5e5..7d4c18b4 100644
--- a/packages/grafnode-components/src/components/SaveRequest/index.js
+++ b/packages/grafnode-components/src/components/SaveRequest/index.js
@@ -25,7 +25,7 @@ const SaveRequestButton = ({folders}) => {
   return (
     <StyledWrapper className="flex items-center">
       <button
-        style={{backgroundColor: '#8e44ad'}}
+        style={{backgroundColor: 'var(--color-brand)'}}
         className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
         onClick={() => {
           setOpenSaveRequestModal(true);
diff --git a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
index 3a76923e..77b84fd2 100644
--- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@@ -32,11 +32,11 @@ const Wrapper = styled.div`
     }
 
     &.item-focused-in-tab {
-      background: #2383e0;
+      background: var(--color-brand);
       color: white;
 
       &:hover {
-        background: #2383e0 !important;
+        background: var(--color-brand) !important;
         color: white !important;
       }
 
@@ -45,7 +45,7 @@ const Wrapper = styled.div`
       }
 
       .indent-block {
-        border-right: solid 1px #6faaea;
+        border-right: solid 1px var(--color-sidebar-collection-item-focused-indent-border);
       }
     }
 
diff --git a/packages/grafnode-run/src/styles/globals.css b/packages/grafnode-run/src/styles/globals.css
index c0d97efb..5a639528 100644
--- a/packages/grafnode-run/src/styles/globals.css
+++ b/packages/grafnode-run/src/styles/globals.css
@@ -13,4 +13,10 @@ html, body {
 
 body {
   font-size: 0.875rem;
+}
+
+:root {
+  --color-brand: #546de5;
+  --color-sidebar-collection-item-focused-indent-border: #7b8de3;
+  --color-tab-active-border: #4d4d4d;
 }
\ No newline at end of file