chore: style updates

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;
     }

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>
     );

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};
   }
 `;

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};
   }
 `;

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;

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,
+      active: tabName === tab,
-      'cursor-pointer': tabName !== tab,
+      'cursor-pointer': tabName !== tab
     });
   };
 
@@ -99,16 +99,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
       );
     }
 
-    return (
+    return <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
-      <CodeEditor
-        collection={collection}
-        theme={storedTheme}
-        onRun={onRun}
-        value={value}
-        mode={mode}
-        readOnly
-      />
-    );
   }, [tab, collection, storedTheme, onRun, value, mode]);
 
   return (

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'

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'