From 74e75a7da2308d5232b548bbc3e4ac97d0a31ba1 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Thu, 22 Aug 2024 11:33:35 +0530
Subject: [PATCH] fix: fixed ux issues around content indicator being big

---
 .../bruno-app/src/components/Icons/Dot/index.js  | 16 ++++++++++++++++
 .../RequestPane/HttpRequestPane/StyledWrapper.js |  4 ++++
 .../RequestPane/HttpRequestPane/index.js         | 16 ++++++++++------
 3 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 packages/bruno-app/src/components/Icons/Dot/index.js

diff --git a/packages/bruno-app/src/components/Icons/Dot/index.js b/packages/bruno-app/src/components/Icons/Dot/index.js
new file mode 100644
index 000000000..e889bea48
--- /dev/null
+++ b/packages/bruno-app/src/components/Icons/Dot/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const DotIcon = ({ width }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width}
+      viewBox="0 0 24 24" strokeWidth="1.5"
+      stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round"
+      className='inline-block'
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+      <path d="M12 7a5 5 0 1 1 -4.995 5.217l-.005 -.217l.005 -.217a5 5 0 0 1 4.995 -4.783z" stroke-width="0" fill="currentColor" />
+    </svg>
+  );
+};
+
+export default DotIcon;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
index d78558bf7..e6a766672 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
@@ -23,6 +23,10 @@ const StyledWrapper = styled.div`
         color: ${(props) => props.theme.tabs.active.color} !important;
         border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
+
+      .content-indicator {
+        color: ${(props) => props.theme.text}
+      }
     }
   }
 `;
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index 38be44aec..bd5722066 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -7,7 +7,7 @@ import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
 import Auth from 'components/RequestPane/Auth';
-import AuthMode from 'components/RequestPane/Auth/AuthMode';
+import DotIcon from 'components/Icons/Dot';
 import Vars from 'components/RequestPane/Vars';
 import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
@@ -16,7 +16,11 @@ import StyledWrapper from './StyledWrapper';
 import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
 
-const CONTENT_INDICATOR = '\u25CF';
+const ContentIndicator = () => {
+  return <sup className="ml-[.125rem] opacity-80 font-medium">
+    <DotIcon width="10"></DotIcon>
+  </sup>
+};
 
 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
   const dispatch = useDispatch();
@@ -112,11 +116,11 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
           Body
-          {body.mode !== 'none' && <sup className="ml-1 font-medium">{CONTENT_INDICATOR}</sup>}
+          {body.mode !== 'none' && <ContentIndicator />}
         </div>
         <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
           Headers
-          {activeHeadersLength > 0 && <sup className="ml-1 font-medium">{activeHeadersLength}</sup>}
+          {activeHeadersLength > 0 && <sup className="ml-[.125rem] font-medium">{activeHeadersLength}</sup>}
         </div>
         <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
           Auth
@@ -127,7 +131,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
-          {(script.req || script.res) && <sup className="ml-1 font-medium">{CONTENT_INDICATOR}</sup>}
+          {(script.req || script.res) && <ContentIndicator />}
         </div>
         <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
           Assert
@@ -135,7 +139,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         </div>
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
-          {tests && <sup className="ml-1 font-medium">{CONTENT_INDICATOR}</sup>}
+          {tests && <ContentIndicator />}
         </div>
         <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
           Docs