Merge branch 'main' into feat/docgen-and-gqldocs-theming

2026-06-11 09:51:30 +00:00 · 2026-01-02 22:19:07 +05:30
parent ea202be476 2d76c444f6
commit f479a92248
47 changed files with 183 additions and 99 deletions
--- a/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ApiSpecPanel/FileEditor/CodeEditor/StyledWrapper.js
@@ -55,10 +55,10 @@ const StyledWrapper = styled.div`
  }

  .cm-variable-valid {
-    color: green;
+    color: ${(props) => props.theme.codemirror.variable.valid};
  }
  .cm-variable-invalid {
-    color: red;
+    color: ${(props) => props.theme.codemirror.variable.invalid};
  }
 `;

--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -36,12 +36,12 @@ const StyledWrapper = styled.div`

  /* Style line numbers when there's a lint issue */
  .CodeMirror-lint-line-error .CodeMirror-linenumber {
-    color: #d32f2f !important;
+    color: ${(props) => props.theme.colors.text.danger} !important;
    text-decoration: underline;
  }

  .CodeMirror-lint-line-warning .CodeMirror-linenumber {
-    color: #f57c00 !important;
+    color: ${(props) => props.theme.colors.text.warning} !important;
    text-decoration: underline;
  }

@@ -138,10 +138,10 @@ const StyledWrapper = styled.div`

  /* Variable validation colors */
  .cm-variable-valid {
-    color: #5fad89 !important; /* Soft sage */
+    color: ${(props) => props.theme.codemirror.variable.valid} !important;
  }
  .cm-variable-invalid {
-    color: #d17b7b !important; /* Soft coral */
+    color: ${(props) => props.theme.codemirror.variable.invalid} !important;
  }

  .CodeMirror-search-hint {
--- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
+++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js
@@ -83,7 +83,6 @@ const StyledWrapper = styled.div`
  }

  .tooltip-mod {
-    font-size: 11px !important;
    max-width: 200px !important;
  }

--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -76,7 +76,6 @@ const Wrapper = styled.div`
  }

  .tooltip-mod {
-    font-size: 11px !important;
    max-width: 200px !important;
  }

--- a/packages/bruno-app/src/components/FilePickerEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/FilePickerEditor/StyledWrapper.js
@@ -4,6 +4,8 @@ const StyledWrapper = styled.div`
  display: flex;
  align-items: center;
  width: 100%;
+  overflow: hidden;
+  min-width: 0;

  .file-picker-btn {
    display: flex;
@@ -18,6 +20,9 @@ const StyledWrapper = styled.div`
    transition: color 0.15s ease;
    font-size: 12px;
    white-space: nowrap;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;

    &:hover {
      color: ${(props) => props.theme.text} !important;
@@ -30,6 +35,7 @@ const StyledWrapper = styled.div`

    &.icon-only {
      padding: 4px;
+      flex-shrink: 0;
    }

    &.icon-right {
@@ -39,6 +45,9 @@ const StyledWrapper = styled.div`

    span {
      line-height: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
    }

    .label {
--- a/packages/bruno-app/src/components/ManageWorkspace/index.js
+++ b/packages/bruno-app/src/components/ManageWorkspace/index.js
@@ -14,6 +14,7 @@ import DeleteWorkspace from './DeleteWorkspace';
 import StyledWrapper from './StyledWrapper';
 import MenuDropdown from 'ui/MenuDropdown/index';
 import Button from 'ui/Button';
+import { getRevealInFolderLabel } from 'utils/common/platform';

 const ManageWorkspace = () => {
  const dispatch = useDispatch();
@@ -133,7 +134,7 @@ const ManageWorkspace = () => {
                      onClick={() => handleShowInFolder(workspace)}
                    >
                      <IconFolder size={14} strokeWidth={1.5} />
-                      <span>Show in folder</span>
+                      <span>{getRevealInFolderLabel()}</span>
                    </button>
                  )}
                  {!isDefault && (
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AdditionalParams/StyledWrapper.js
@@ -19,18 +19,18 @@ const StyledWrapper = styled.div`
      border: none !important;
      border-bottom: none !important;
      margin-right: 0;
-      
+
      &:hover {
        background-color: ${(props) => rgba(props.theme.primary.solid, 0.1)};
      }
-      
+
      &.active {
        background-color: ${(props) => {
          return props.theme.mode === 'dark'
            ? rgba(props.theme.primary.solid, 0.2)
            : rgba(props.theme.primary.solid, 0.1);
        }};
-        color: ${(props) => props.theme.primary.solid} !important;
+        color: ${(props) => props.theme.primary.text} !important;
        border-bottom: none !important;
        font-weight: normal !important;
      }
@@ -57,7 +57,7 @@ const StyledWrapper = styled.div`
      padding: 6px 10px;
    }
  }
-  
+
  .additional-parameter-sends-in-selector {
    select {
      height: 32px;
@@ -65,14 +65,14 @@ const StyledWrapper = styled.div`
      border: 1px solid ${(props) => props.theme.input.border};
      border-radius: 4px;
      padding: 0 8px;
-      
+
      &:focus {
        outline: none;
        border-color: ${(props) => props.theme.primary.solid};
      }
    }
  }
-  
+
  .add-additional-param-actions {
    &:hover {
      color: ${(props) => props.theme.primary.solid};
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/AuthorizationCode/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
  }

  .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
  }

  label {
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/ClientCredentials/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
  }

  .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
  }

  label {
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/GrantTypeSelector/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
  }

  .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
  }

  font-size: ${(props) => props.theme.font.size.base};
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Implicit/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
  }

  .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
  }

  label {
@@ -62,7 +62,7 @@ const Wrapper = styled.div`
      padding: 0.2rem 0.6rem !important;
    }
  }
-  
+
  .checkbox-label {
    color: ${(props) => props.theme.colors.text.primary};
    user-select: none;
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/Oauth2ActionButtons/index.js
@@ -133,7 +133,7 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
  };

  return (
-    <div className="flex flex-row gap-4 mt-4">
+    <div className="flex flex-row gap-2 mt-4">
      <Button
        size="sm"
        color="secondary"
@@ -171,6 +171,7 @@ const Oauth2ActionButtons = ({ item, request, collection, url: accessTokenUrl, c
      <Button
        size="sm"
        color="secondary"
+        variant="ghost"
        onClick={handleClearCache}
      >
        Clear Cache
--- a/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/OAuth2/PasswordCredentials/StyledWrapper.js
@@ -7,7 +7,7 @@ const Wrapper = styled.div`
  }

  .oauth2-icon {
-    color: ${(props) => props.theme.primary.solid};
+    color: ${(props) => props.theme.primary.text};
  }

  label {
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -20,6 +20,7 @@ import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 import Settings from 'components/RequestPane/Settings';
 import ResponsiveTabs from 'ui/ResponsiveTabs';
+import AuthMode from '../Auth/AuthMode/index';

 const TAB_CONFIG = [
  { key: 'query', label: 'Query' },
@@ -134,11 +135,15 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
    return <div className="pb-4 px-4">An error occurred!</div>;
  }

-  const rightContent = (
+  const rightContent = requestPaneTab === 'auth' ? (
+    <div ref={schemaActionsRef} className="flex flex-grow justify-start items-center">
+      <AuthMode item={item} collection={collection} />
+    </div>
+  ) : requestPaneTab === 'query' ? (
    <div ref={schemaActionsRef}>
      <GraphQLSchemaActions item={item} collection={collection} onSchemaLoad={setSchema} toggleDocs={toggleDocs} />
    </div>
-  );
+  ) : null;

  return (
    <div className="flex flex-col h-full relative">
@@ -147,7 +152,7 @@ const GraphQLRequestPane = ({ item, collection, onSchemaLoad, toggleDocs, handle
        activeTab={requestPaneTab}
        onTabSelect={selectTab}
        rightContent={rightContent}
-        rightContentRef={schemaActionsRef}
+        rightContentRef={rightContent ? schemaActionsRef : null}
      />

      <section className={classnames('flex w-full flex-1 mt-4')}>
--- a/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/ProtoFileDropdown/index.js
@@ -150,7 +150,7 @@ const ProtoFileDropdown = ({
              <div className="proto-file-dropdown-mode-controls">
                <span>Mode</span>
                <div className="proto-file-dropdown-mode-options">
-                  <span className={`proto-file-dropdown-mode-option ${!isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: !isReflectionMode ? theme.primary.solid : undefined }}>
+                  <span className={`proto-file-dropdown-mode-option ${!isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: !isReflectionMode ? theme.primary.text : undefined }}>
                    Proto File
                  </span>
                  <ToggleSwitch
@@ -159,7 +159,7 @@ const ProtoFileDropdown = ({
                    size="2xs"
                    activeColor={theme.primary.solid}
                  />
-                  <span className={`proto-file-dropdown-mode-option ${isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: isReflectionMode ? theme.primary.solid : undefined }}>
+                  <span className={`proto-file-dropdown-mode-option ${isReflectionMode ? 'proto-file-dropdown-mode-option--active' : ''}`} style={{ color: isReflectionMode ? theme.primary.text : undefined }}>
                    Reflection
                  </span>
                </div>
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@@ -60,10 +60,10 @@ const StyledWrapper = styled.div`

  /* Variable validation colors */
  .cm-variable-valid {
-    color: #5fad89 !important; /* Soft sage */
+    color: ${(props) => props.theme.codemirror.variable.valid};
  }
  .cm-variable-invalid {
-    color: #d17b7b !important; /* Soft coral */
+    color: ${(props) => props.theme.codemirror.variable.invalid};
  }


--- a/packages/bruno-app/src/components/RequestPane/WSSettingsPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/WSSettingsPane/StyledWrapper.js
@@ -13,7 +13,6 @@ const StyledWrapper = styled.div`
  }

  .tooltip-mod {
-    font-size: ${(props) => props.theme.font.size.xs} !important;
    width: 150px !important;

    & ul {
--- a/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResponse/index.js
@@ -41,6 +41,7 @@ const QueryResponse = ({
              setSelectedTab((prev) => prev === 'editor' ? 'preview' : 'editor');
            }}
            selectedTab={selectedTab}
+            isActiveTab={true}
          />
        </div>
      )}
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultTypeSelector/StyledWrapper.js
@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
  }

  .active {
-    color: ${(props) => props.theme.colors.text.yellow};
+    color: ${(props) => props.theme.primary.text};
  }

  .icon-muted {
--- a/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/Timeline/TimelineItem/StyledWrapper.js
@@ -77,7 +77,7 @@ const StyledWrapper = styled.div`

    &--active {
      color: ${(props) => props.theme.tabs.active.color};
-      
+
      &:after {
        content: '';
        position: absolute;
@@ -104,7 +104,7 @@ const StyledWrapper = styled.div`
    .section-header {
      cursor: pointer;
      pre {
-        color: ${(props) => rgba(props.theme.primary.solid, 0.8)};
+        color: ${(props) => rgba(props.theme.primary.text, 0.8)};
      }
    }
  }
--- a/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/RunConfigurationPanel/StyledWrapper.jsx
@@ -87,7 +87,7 @@ const StyledWrapper = styled.div`
      background-color: ${(props) => props.theme.sidebar.bg};
      border: 1px dashed ${(props) => props.theme.sidebar.dragbar};
      transform: scale(0.98);
-      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
+      box-shadow: ${(props) => props.theme.shadow.md};
      z-index: 5;
    }

--- a/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RunnerResults/StyledWrapper.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  .textbox {
-    border: 1px solid #ccc;
    padding: 0.2rem 0.5rem;
    box-shadow: none;
    border-radius: 0px;
@@ -49,6 +48,28 @@ const Wrapper = styled.div`
    color: ${(props) => props.theme.colors.text.muted};
  }

+  .text-muted {
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+
+  .text-green {
+    color: ${(props) => props.theme.colors.text.green};
+  }
+
+  .text-subtext0 {
+    color: ${(props) => props.theme.colors.text.subtext0};
+  }
+
+  .text-subtext1 {
+    color: ${(props) => props.theme.colors.text.subtext1};
+  }
+
+  .hover-bg-surface {
+    &:hover {
+      background-color: ${(props) => props.theme.background.surface1};
+    }
+  }
+
  .button-sm {
    font-size: ${(props) => props.theme.font.size.sm};
  }
@@ -60,7 +81,7 @@ const Wrapper = styled.div`
  .filter-bar {
    display: flex;
    align-items: stretch;
-    border-radius: ${(props) => props.theme.border.radius.lg};
+    border-radius: ${(props) => props.theme.border.radius.base};
    border: 1px solid ${(props) => props.theme.border.border0};
    max-height: 35px;
    flex-shrink: 0;
@@ -70,15 +91,15 @@ const Wrapper = styled.div`
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
-      border-top-left-radius: ${(props) => props.theme.border.radius.lg};
-      border-bottom-left-radius: ${(props) => props.theme.border.radius.lg};
-      background-color: ${(props) => props.theme.background.surface0};
+      border-top-left-radius: ${(props) => props.theme.border.radius.base};
+      border-bottom-left-radius: ${(props) => props.theme.border.radius.base};
+      background-color: ${(props) => props.theme.background.mantle};

      span {
        font-family: Inter, sans-serif;
        font-weight: 400;
        font-size: ${(props) => props.theme.font.size.sm};
-        color: ${(props) => props.theme.colors.text.subtext1};
+        color: ${(props) => props.theme.colors.text.text};
      }
    }

@@ -87,8 +108,8 @@ const Wrapper = styled.div`
      align-items: center;
      gap: 1.25rem;
      padding: 0.5rem 0.75rem 0 0.75rem;
-      border-top-right-radius: ${(props) => props.theme.border.radius.lg};
-      border-bottom-right-radius: ${(props) => props.theme.border.radius.lg};
+      border-top-right-radius: ${(props) => props.theme.border.radius.base};
+      border-bottom-right-radius: ${(props) => props.theme.border.radius.base};
      background: transparent;
    }
  }
--- a/packages/bruno-app/src/components/RunnerResults/index.jsx
+++ b/packages/bruno-app/src/components/RunnerResults/index.jsx
@@ -269,7 +269,7 @@ export default function RunnerResults({ collection }) {
            <div className="mt-6">
              You have <span className="font-medium">{totalRequestsInCollection}</span> requests in this collection.
              {isCollectionLoading && (
-                <span className="ml-2 text-gray-500">
+                <span className="ml-2 text-muted">
                  (Loading...)
                </span>
              )}
@@ -403,10 +403,10 @@ export default function RunnerResults({ collection }) {
            <div className="pb-2 text-xs flex flex-row gap-1">
              Tags:
              <div className="flex flex-row items-center gap-x-2">
-                <div className="text-green-500">
+                <div className="text-green">
                  {tags.include.join(', ')}
                </div>
-                <div className="text-gray-500">
+                <div className="text-muted">
                  {tags.exclude.join(', ')}
                </div>
              </div>
@@ -458,7 +458,7 @@ export default function RunnerResults({ collection }) {
                      )}
                    </div>
                    {tagsEnabled && areTagsAdded && item?.tags?.length > 0 && (
-                      <div className="pl-7 text-xs text-gray-500">
+                      <div className="pl-7 text-xs text-muted">
                        Tags: {item.tags.filter((t) => tags.include.includes(t)).join(', ')}
                      </div>
                    )}
@@ -571,7 +571,7 @@ export default function RunnerResults({ collection }) {
                </div>
                <button
                  onClick={() => setSelectedItem(null)}
-                  className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer flex items-center justify-center"
+                  className="p-1 rounded hover-bg-surface transition-colors cursor-pointer flex items-center justify-center"
                  title="Close"
                  aria-label="Close response view"
                >
@@ -584,10 +584,10 @@ export default function RunnerResults({ collection }) {
        ) : (
          <div className="flex flex-1 w-[50%] overflow-y-auto">
            <div className="flex flex-col w-full h-full items-center justify-center text-center">
-              <div className="mb-4 text-gray-400 dark:text-gray-500">
+              <div className="mb-4 text-subtext0">
                <IconExternalLink size={64} strokeWidth={1.5} />
              </div>
-              <p className="text-gray-600 dark:text-gray-400">
+              <p className="text-subtext1">
                Click on the status code to view the response
              </p>
            </div>
--- a/packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js
+++ b/packages/bruno-app/src/components/SensitiveFieldWarning/StyledWrapper.js
@@ -2,7 +2,6 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  .tooltip-mod {
-    font-size: ${(props) => props.theme.font.size.xs} !important;
    width: 150px !important;
  }

--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
@@ -49,6 +49,7 @@ import { isTabForItemActive as isTabForItemActiveSelector, isTabForItemPresent a
 import { isEqual } from 'lodash';
 import { calculateDraggedItemNewPathname, getInitialExampleName, findParentItemInCollection } from 'utils/collections/index';
 import { sortByNameThenSequence } from 'utils/common/index';
+import { getRevealInFolderLabel } from 'utils/common/platform';
 import CreateExampleModal from 'components/ResponseExample/CreateExampleModal';
 import { openDevtoolsAndSwitchToTerminal } from 'utils/terminal';
 import ActionIcon from 'ui/ActionIcon';
@@ -345,12 +346,6 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
        leftSection: IconEdit,
        label: 'Rename',
        onClick: () => setRenameItemModalOpen(true)
-      },
-      {
-        id: 'show-in-folder',
-        leftSection: IconFolder,
-        label: 'Show in Folder',
-        onClick: handleShowInFolder
      }
    );
    if (!isFolder && isItemARequest(item) && !(item.type === 'http-request' || item.type === 'graphql-request')) {
@@ -382,6 +377,15 @@ const CollectionItem = ({ item, collectionUid, collectionPathname, searchText })
      });
    }

+    items.push(
+      {
+        id: 'show-in-folder',
+        leftSection: IconFolder,
+        label: getRevealInFolderLabel(),
+        onClick: handleShowInFolder
+      }
+    );
+
    items.push({ id: 'separator-1', type: 'divider' });

    items.push({
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -44,6 +44,7 @@ import ShareCollection from 'components/ShareCollection/index';
 import GenerateDocumentation from './GenerateDocumentation';
 import { CollectionItemDragPreview } from './CollectionItem/CollectionItemDragPreview/index';
 import { sortByNameThenSequence } from 'utils/common/index';
+import { getRevealInFolderLabel } from 'utils/common/platform';
 import { openDevtoolsAndSwitchToTerminal } from 'utils/terminal';
 import ActionIcon from 'ui/ActionIcon';
 import MenuDropdown from 'ui/MenuDropdown';
@@ -360,7 +361,7 @@ const Collection = ({ collection, searchText }) => {
    {
      id: 'show-in-folder',
      leftSection: IconFolder,
-      label: 'Show in File Explorer',
+      label: getRevealInFolderLabel(),
      onClick: handleShowInFolder
    },
    {
--- a/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollection/index.js
@@ -10,6 +10,7 @@ import { isWSDLCollection } from 'utils/importers/wsdl-collection';
 import { isBrunoCollection } from 'utils/importers/bruno-collection';
 import { isOpenCollection } from 'utils/importers/opencollection';
 import FullscreenLoader from './FullscreenLoader/index';
+import { useTheme } from 'providers/Theme';

 const convertFileToObject = async (file) => {
  const text = await file.text();
@@ -35,6 +36,7 @@ const convertFileToObject = async (file) => {
 };

 const ImportCollection = ({ onClose, handleSubmit }) => {
+  const { theme } = useTheme();
  const [isLoading, setIsLoading] = useState(false);
  const [dragActive, setDragActive] = useState(false);
  const fileInputRef = useRef(null);
@@ -155,8 +157,9 @@ const ImportCollection = ({ onClose, handleSubmit }) => {
              <p className="text-gray-600 dark:text-gray-300 mb-2">
                Drop file to import or{' '}
                <button
-                  className="text-blue-500 underline cursor-pointer"
+                  className="underline cursor-pointer"
                  onClick={handleBrowseFiles}
+                  style={{ color: theme.textLink }}
                >
                  choose a file
                </button>
--- a/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
+++ b/packages/bruno-app/src/components/Sidebar/ImportCollectionLocation/index.js
@@ -163,7 +163,7 @@ const ImportCollectionLocation = ({ onClose, handleSubmit, rawData, format }) =>
  return (
    <StyledWrapper>
      <Modal
-        size="sm"
+        size="md"
        title="Import Collection"
        confirmText="Import"
        handleConfirm={onSubmit}
--- a/packages/bruno-app/src/components/Tabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Tabs/StyledWrapper.js
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs-list {
+    display: inline-flex;
+    height: 2rem;
+    width: fit-content;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  .tab-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 8px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background: transparent;
+    color: ${(props) => props.theme.tabs.secondary.inactive.color};
+    transition: all 0.15s ease;
+
+    &:hover {
+      background: ${(props) => props.theme.tabs.secondary.inactive.bg};
+    }
+
+    &.active {
+      background: ${(props) => props.theme.tabs.secondary.active.bg};
+      color: ${(props) => props.theme.tabs.secondary.active.color};
+    }
+  }
+`;
+
+export default StyledWrapper;
--- a/packages/bruno-app/src/components/Tabs/index.js
+++ b/packages/bruno-app/src/components/Tabs/index.js
@@ -1,42 +1,29 @@
 import React, { createContext, useContext } from 'react';
-import { useTheme } from 'providers/Theme';
+import classnames from 'classnames';
+import StyledWrapper from './StyledWrapper';

 const TabsContext = createContext();

 export const Tabs = ({ value, onValueChange, children, className = '' }) => {
  return (
    <TabsContext.Provider value={{ value, onValueChange }}>
-      <div className={`flex flex-col h-full flex-1 ${className}`}>{children}</div>
+      <StyledWrapper className={`flex flex-col h-full flex-1 ${className}`}>{children}</StyledWrapper>
    </TabsContext.Provider>
  );
 };

 export const TabsList = ({ children, className = '' }) => {
-  const { theme } = useTheme();
-
-  return (
-    <div
-      className={`inline-flex h-8 w-fit justify-center rounded-md p-0.5 gap-[2px] ${className}`}
-      style={{ background: theme.tabs.secondary.inactive.bg }}
-    >
-      {children}
-    </div>
-  );
+  return <div className={`tabs-list ${className}`}>{children}</div>;
 };

 export const TabsTrigger = ({ value: triggerValue, children, className = '' }) => {
  const { value, onValueChange } = useContext(TabsContext);
-  const { theme } = useTheme();
  const isActive = value === triggerValue;

  return (
    <button
      onClick={() => onValueChange(triggerValue)}
-      className={`inline-flex items-center justify-center rounded-[4px] p-[8px] text-xs whitespace-nowrap transition-all cursor-pointer border border-transparent hover:opacity-90 ${className}`}
-      style={{
-        background: isActive ? theme.tabs.secondary.active.bg : 'transparent',
-        color: isActive ? theme.tabs.secondary.active.color : theme.tabs.secondary.inactive.color
-      }}
+      className={classnames('tab-trigger', className, { active: isActive })}
    >
      {children}
    </button>
--- a/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -75,7 +75,6 @@ const Wrapper = styled.div`
  }

  .tooltip-mod {
-    font-size: 11px !important;
    max-width: 200px !important;
  }

--- a/packages/bruno-app/src/components/WorkspaceHome/index.js
+++ b/packages/bruno-app/src/components/WorkspaceHome/index.js
@@ -10,6 +10,7 @@ import WorkspaceEnvironments from './WorkspaceEnvironments';
 import WorkspaceTabs from 'components/WorkspaceTabs';
 import StyledWrapper from './StyledWrapper';
 import Dropdown from 'components/Dropdown';
+import { getRevealInFolderLabel } from 'utils/common/platform';

 const WorkspaceHome = () => {
  const dispatch = useDispatch();
@@ -225,7 +226,7 @@ const WorkspaceHome = () => {
                  </div>
                  <div className="dropdown-item" onClick={handleShowInFolder}>
                    <IconFolder size={16} strokeWidth={1.5} />
-                    <span>Show in Folder</span>
+                    <span>{getRevealInFolderLabel()}</span>
                  </div>
                  <div className="dropdown-item" onClick={handleExportWorkspace}>
                    <IconUpload size={16} strokeWidth={1.5} />
--- a/packages/bruno-app/src/globalStyles.js
+++ b/packages/bruno-app/src/globalStyles.js
@@ -19,6 +19,18 @@ const GlobalStyle = createGlobalStyle`
    color: ${(props) => props.theme.colors.text.muted};
  }

+  .tooltip-mod {
+    background-color: ${(props) => props.theme.infoTip.bg} !important;
+    color: ${(props) => props.theme.text} !important;
+    border: 1px solid ${(props) => props.theme.infoTip.border} !important;
+    box-shadow: ${(props) => props.theme.infoTip.boxShadow} !important;
+    font-size: ${(props) => props.theme.font.size.xs} !important;
+    padding: 4px 8px !important;
+    border-radius: 4px !important;
+    opacity: 1 !important;
+    z-index: 9999 !important;
+  }
+
  .btn {
    text-align: center;
    white-space: nowrap;
--- a/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-frappe.js
@@ -370,7 +370,7 @@ const catppuccinFrappeTheme = {
        color: colors.TEXT
      },
      inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
        color: colors.SUBTEXT0
      }
    }
--- a/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-macchiato.js
@@ -370,7 +370,7 @@ const catppuccinMacchiatoTheme = {
        color: colors.TEXT
      },
      inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
        color: colors.SUBTEXT0
      }
    }
--- a/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
+++ b/packages/bruno-app/src/themes/dark/catppuccin-mocha.js
@@ -370,7 +370,7 @@ const catppuccinMochaTheme = {
        color: colors.TEXT
      },
      inactive: {
-        bg: colors.SURFACE1,
+        bg: colors.SURFACE0,
        color: colors.SUBTEXT0
      }
    }
--- a/packages/bruno-app/src/themes/dark/dark-monochrome.js
+++ b/packages/bruno-app/src/themes/dark/dark-monochrome.js
@@ -353,12 +353,12 @@ const darkMonochromeTheme = {
    },
    secondary: {
      active: {
-        bg: '#2D2D2D',
+        bg: '#3F3F3F',
        color: '#CCCCCC'
      },
      inactive: {
        bg: '#3F3F3F',
-        color: '#CCCCCC'
+        color: '#999999'
      }
    }
  },
--- a/packages/bruno-app/src/themes/dark/dark-pastel.js
+++ b/packages/bruno-app/src/themes/dark/dark-pastel.js
@@ -374,7 +374,7 @@ const darkPastelTheme = {
        color: colors.TEXT
      },
      inactive: {
-        bg: colors.GRAY_4,
+        bg: colors.GRAY_3,
        color: colors.TEXT_MUTED
      }
    }
--- a/packages/bruno-app/src/themes/dark/dark.js
+++ b/packages/bruno-app/src/themes/dark/dark.js
@@ -398,12 +398,12 @@ const darkTheme = {
    },
    secondary: {
      active: {
-        bg: '#2D2D2D',
-        color: '#CCCCCC'
+        bg: palette.background.SURFACE0,
+        color: palette.text.BASE
      },
      inactive: {
-        bg: '#3F3F3F',
-        color: '#CCCCCC'
+        bg: palette.background.SURFACE0,
+        color: palette.text.SUBTEXT1
      }
    }
  },
--- a/packages/bruno-app/src/themes/dark/nord.js
+++ b/packages/bruno-app/src/themes/dark/nord.js
@@ -373,7 +373,7 @@ const nordTheme = {
        color: colors.NORD4
      },
      inactive: {
-        bg: colors.NORD3,
+        bg: colors.NORD2,
        color: colors.NORD4
      }
    }
--- a/packages/bruno-app/src/themes/dark/vscode.js
+++ b/packages/bruno-app/src/themes/dark/vscode.js
@@ -79,7 +79,7 @@ const vscodeDarkTheme = {

  primary: {
    solid: colors.BRAND,
-    text: colors.TEXT_LINK,
+    text: colors.BRAND_TEXT,
    strong: '#0098ff',
    subtle: '#005a9e'
  },
@@ -376,7 +376,7 @@ const vscodeDarkTheme = {
        color: colors.TEXT
      },
      inactive: {
-        bg: colors.GRAY_4,
+        bg: colors.GRAY_3,
        color: colors.TEXT_MUTED
      }
    }
--- a/packages/bruno-app/src/themes/light/catppuccin-latte.js
+++ b/packages/bruno-app/src/themes/light/catppuccin-latte.js
@@ -363,7 +363,7 @@ const catppuccinLatteTheme = {
    },
    secondary: {
      active: {
-        bg: colors.BASE,
+        bg: colors.SURFACE0,
        color: colors.TEXT
      },
      inactive: {
--- a/packages/bruno-app/src/themes/light/light-monochrome.js
+++ b/packages/bruno-app/src/themes/light/light-monochrome.js
@@ -351,7 +351,7 @@ const lightMonochromeTheme = {
    },
    secondary: {
      active: {
-        bg: '#FFFFFF',
+        bg: '#ECECEE',
        color: '#343434'
      },
      inactive: {
--- a/packages/bruno-app/src/themes/light/light-pastel.js
+++ b/packages/bruno-app/src/themes/light/light-pastel.js
@@ -367,7 +367,7 @@ const lightPastelTheme = {
    },
    secondary: {
      active: {
-        bg: colors.WHITE,
+        bg: colors.GRAY_2,
        color: colors.TEXT
      },
      inactive: {
--- a/packages/bruno-app/src/themes/light/light.js
+++ b/packages/bruno-app/src/themes/light/light.js
@@ -387,12 +387,12 @@ const lightTheme = {
    },
    secondary: {
      active: {
-        bg: palette.background.BASE,
+        bg: palette.background.SURFACE1,
        color: palette.text.BASE
      },
      inactive: {
-        bg: palette.background.SURFACE1,
-        color: palette.text.BASE
+        bg: palette.background.SURFACE0,
+        color: palette.text.SUBTEXT1
      }
    }
  },
--- a/packages/bruno-app/src/themes/light/vscode.js
+++ b/packages/bruno-app/src/themes/light/vscode.js
@@ -371,7 +371,7 @@ const vscodeLightTheme = {
    },
    secondary: {
      active: {
-        bg: colors.WHITE,
+        bg: colors.GRAY_2,
        color: colors.TEXT
      },
      inactive: {
--- a/packages/bruno-app/src/utils/common/platform.js
+++ b/packages/bruno-app/src/utils/common/platform.js
@@ -40,6 +40,12 @@ export const isLinuxOS = () => {
  return osFamily.includes('linux') || osFamily.includes('ubuntu') || osFamily.includes('debian') || osFamily.includes('fedora') || osFamily.includes('centos') || osFamily.includes('arch');
 };

+export const getRevealInFolderLabel = () => {
+  if (isMacOS()) return 'Reveal in Finder';
+  if (isWindowsOS()) return 'Reveal in File Explorer';
+  return 'Reveal in File Manager';
+};
+
 export const getAppInstallDate = () => {
  let dateString = localStorage.getItem('bruno.installedOn');