From 9b2e2ed3d8c7784b22602c5f325cf0f385c572d1 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Wed, 4 Oct 2023 04:11:23 +0530
Subject: [PATCH] chore: style updates

---
 .../RequestPane/Auth/AuthMode/StyledWrapper.js  |  4 ++++
 .../RequestPane/Auth/AuthMode/index.js          |  2 +-
 .../RequestPane/Auth/BasicAuth/StyledWrapper.js |  3 ++-
 .../Auth/BearerAuth/StyledWrapper.js            |  3 ++-
 .../ResponsePane/QueryResult/StyledWrapper.js   |  6 ++++++
 .../ResponsePane/QueryResult/index.js           | 17 ++++-------------
 packages/bruno-app/src/themes/dark.js           |  3 ++-
 packages/bruno-app/src/themes/light.js          |  3 ++-
 8 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
index e1d0530c6..cdbdf8424 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
@@ -6,6 +6,10 @@ const Wrapper = styled.div`
   .auth-mode-selector {
     background: transparent;
 
+    .auth-mode-label {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+
     .dropdown-item {
       padding: 0.2rem 0.6rem !important;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
index f1d2e443f..43c90e2ce 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
@@ -15,7 +15,7 @@ const AuthMode = ({ item, collection }) => {
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className="flex items-center justify-center text-yellow-600 select-none">
+      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
         {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
       </div>
     );
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
index 0b4514e15..c2bb5d207 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
@@ -7,7 +7,8 @@ const Wrapper = styled.div`
 
   .single-line-editor-wrapper {
     padding: 0.15rem 0.4rem;
-    border: ${(props) => props.theme.input.border};
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
 `;
diff --git a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
index 0b4514e15..c2bb5d207 100644
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
@@ -7,7 +7,8 @@ const Wrapper = styled.div`
 
   .single-line-editor-wrapper {
     padding: 0.15rem 0.4rem;
-    border: ${(props) => props.theme.input.border};
+    border-radius: 3px;
+    border: solid 1px ${(props) => props.theme.input.border};
     background-color: ${(props) => props.theme.input.bg};
   }
 `;
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
index df65244d6..5429ef440 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/StyledWrapper.js
@@ -17,6 +17,12 @@ const StyledWrapper = styled.div`
     height: 100%;
     width: 100%;
   }
+
+  div[role='tablist'] {
+    .active {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+  }
 `;
 
 export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index faa0e1e14..96624a02b 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -13,7 +13,7 @@ import { useMemo } from 'react';
 
 const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers }) => {
   const { storedTheme } = useTheme();
-  const [tab, setTab] = useState('raw');
+  const [tab, setTab] = useState('preview');
   const dispatch = useDispatch();
   const contentType = getContentType(headers);
   const mode = getCodeMirrorModeBasedOnContentType(contentType);
@@ -64,8 +64,8 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
 
   const getTabClassname = (tabName) => {
     return classnames(`select-none ${tabName}`, {
-      'text-yellow-500': tabName === tab,
-      'cursor-pointer': tabName !== tab,
+      active: tabName === tab,
+      'cursor-pointer': tabName !== tab
     });
   };
 
@@ -99,16 +99,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
       );
     }
 
-    return (
-      <CodeEditor
-        collection={collection}
-        theme={storedTheme}
-        onRun={onRun}
-        value={value}
-        mode={mode}
-        readOnly
-      />
-    );
+    return <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
   }, [tab, collection, storedTheme, onRun, value, mode]);
 
   return (
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index e6bb60815..7a4ad64de 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -9,7 +9,8 @@ const darkTheme = {
       green: 'rgb(11 178 126)',
       danger: '#f06f57',
       muted: '#9d9d9d',
-      purple: '#cd56d6'
+      purple: '#cd56d6',
+      yellow: '#f59e0b'
     },
     bg: {
       danger: '#d03544'
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index d2c42a7e3..b014c2f38 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -9,7 +9,8 @@ const lightTheme = {
       green: '#047857',
       danger: 'rgb(185, 28, 28)',
       muted: '#4b5563',
-      purple: '#8e44ad'
+      purple: '#8e44ad',
+      yellow: '#d97706'
     },
     bg: {
       danger: '#dc3545'