use: button component (#6504)

* use: button component

* fixes

packages/bruno-app/src/components/CollectionSettings/Auth/index.js

@@ -12,6 +12,7 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import StyledWrapper from './StyledWrapper';
 import OAuth2 from './OAuth2';
 import NTLMAuth from './NTLMAuth';
+import Button from 'ui/Button';
 
 const Auth = ({ collection }) => {
   const authMode = collection.draft?.root ? get(collection, 'draft.root.request.auth.mode') : get(collection, 'root.request.auth.mode');
@@ -59,9 +60,9 @@ const Auth = ({ collection }) => {
       </div>
       {getAuthView()}
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js

@@ -13,6 +13,7 @@ import { useDispatch } from 'react-redux';
 import { updateCollectionClientCertificates } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import get from 'lodash/get';
+import Button from 'ui/Button';
 
 const ClientCertSettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -374,13 +375,13 @@ const ClientCertSettings = ({ collection }) => {
           ) : null}
         </div>
         <div className="mt-6 flex flex-row gap-2 items-center">
-          <button type="submit" className="submit btn btn-sm btn-secondary" data-testid="add-client-cert">
+          <Button type="submit" size="sm" data-testid="add-client-cert">
             Add
-          </button>
+          </Button>
           <div className="h-4 border-l border-gray-600"></div>
-          <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <Button type="button" size="sm" onClick={handleSave}>
             Save
-          </button>
+          </Button>
         </div>
       </form>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Headers/index.js

@@ -10,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
+import Button from 'ui/Button';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
@@ -107,9 +108,9 @@ const Headers = ({ collection }) => {
         </button>
       </div>
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/CollectionSettings/Presets/index.js

@@ -4,6 +4,7 @@ import StyledWrapper from './StyledWrapper';
 import { updateCollectionPresets } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { get } from 'lodash';
+import Button from 'ui/Button';
 
 const PresetsSettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -122,9 +123,9 @@ const PresetsSettings = ({ collection }) => {
         </div>
 
         <div className="mt-6">
-          <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <Button type="button" size="sm" onClick={handleSave}>
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Protobuf/index.js

@@ -12,6 +12,7 @@ import { getBasename } from 'utils/common/path';
 import { Tooltip } from 'react-tooltip';
 import useProtoFileManagement from '../../../hooks/useProtoFileManagement';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
+import Button from 'ui/Button';
 
 const ProtobufSettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -335,9 +336,9 @@ const ProtobufSettings = ({ collection }) => {
       </div>
 
       <div className="mt-6">
-        <button type="button" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="button" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
 
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js

@@ -8,6 +8,7 @@ import { updateCollectionProxy } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { get } from 'lodash';
 import toast from 'react-hot-toast';
+import Button from 'ui/Button';
 
 const ProxySettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -358,9 +359,9 @@ const ProxySettings = ({ collection }) => {
           />
         </div>
         <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+          <Button type="submit" size="sm" onClick={handleSave}>
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/CollectionSettings/Script/index.js

@@ -7,6 +7,7 @@ import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
@@ -98,9 +99,9 @@ const Script = ({ collection }) => {
       </Tabs>
 
       <div className="mt-12">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/CollectionSettings/Tests/index.js

@@ -6,6 +6,7 @@ import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
@@ -41,9 +42,9 @@ const Tests = ({ collection }) => {
       />
 
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/CollectionSettings/Vars/index.js

@@ -4,6 +4,7 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveCollectionSettings } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const Vars = ({ collection }) => {
   const dispatch = useDispatch();
@@ -22,9 +23,9 @@ const Vars = ({ collection }) => {
         <VarsTable collection={collection} vars={responseVars} varType="response" />
       </div>
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/Cookies/index.js

@@ -9,6 +9,7 @@ import ModifyCookieModal from 'components/Cookies/ModifyCookieModal/index';
 import StyledWrapper from './StyledWrapper';
 import moment from 'moment';
 import { Tooltip } from 'react-tooltip';
+import Button from 'ui/Button';
 
 const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
   <Modal onClose={onClose} handleCancel={onClose} title="Clear Domain Cookies" hideFooter={true}>
@@ -22,14 +23,14 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
 
     <div className="flex justify-between mt-6">
       <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
+        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
           Close
-        </button>
+        </Button>
       </div>
       <div>
-        <button className="btn btn-sm btn-danger" onClick={onClear}>
+        <Button size="sm" color="danger" onClick={onClear}>
           Clear All
-        </button>
+        </Button>
       </div>
     </div>
   </Modal>
@@ -47,14 +48,14 @@ const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
 
     <div className="flex justify-between mt-6">
       <div>
-        <button className="btn btn-sm btn-close" onClick={onClose}>
+        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
           Close
-        </button>
+        </Button>
       </div>
       <div>
-        <button className="btn btn-sm btn-danger" onClick={onDelete}>
+        <Button size="sm" color="danger" onClick={onDelete}>
           Delete
-        </button>
+        </Button>
       </div>
     </div>
   </Modal>
@@ -139,17 +140,18 @@ const CollectionProperties = ({ onClose }) => {
               className="block textbox non-passphrase-input ml-auto font-normal"
               autoFocus
             />
-            <button
+            <Button
               type="submit"
-              className="submit btn btn-sm btn-secondary flex items-center gap-1 mx-4 font-medium"
+              size="sm"
+              className="mx-4"
+              icon={<IconCirclePlus strokeWidth={1.5} size={16} />}
               onClick={(e) => {
                 e.stopPropagation();
                 handleAddCookie();
               }}
             >
-              <IconCirclePlus strokeWidth={1.5} size={16} />
               <span>Add Cookie</span>
-            </button>
+            </Button>
           </StyledWrapper>
         ) : null}
       >

packages/bruno-app/src/components/Environments/ConfirmCloseEnvironment/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
 import Portal from 'components/Portal';
+import Button from 'ui/Button';
 
 const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose, isGlobal }) => {
   return (
@@ -25,17 +26,17 @@ const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose,
 
         <div className="flex justify-between mt-6">
           <div>
-            <button className="btn btn-sm btn-danger" onClick={onCloseWithoutSave}>
+            <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
               Don't Save
-            </button>
+            </Button>
           </div>
           <div>
-            <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
+            <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
               Cancel
-            </button>
-            <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}>
+            </Button>
+            <Button size="sm" onClick={onSaveAndClose}>
               Save
-            </button>
+            </Button>
           </div>
         </div>
       </Modal>

packages/bruno-app/src/components/FolderSettings/Auth/index.js

@@ -18,6 +18,7 @@ import WsseAuth from 'components/RequestPane/Auth/WsseAuth';
 import ApiKeyAuth from 'components/RequestPane/Auth/ApiKeyAuth';
 import AwsV4Auth from 'components/RequestPane/Auth/AwsV4Auth';
 import { humanizeRequestAuthMode, getTreePathFromCollectionToItem } from 'utils/collections/index';
+import Button from 'ui/Button';
 
 const GrantTypeComponentMap = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -211,9 +212,9 @@ const Auth = ({ collection, folder }) => {
       </div>
       {getAuthView()}
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/FolderSettings/Headers/index.js

@@ -10,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
 import { headers as StandardHTTPHeaders } from 'know-your-http-well';
 import { MimeTypes } from 'utils/codemirror/autocompleteConstants';
 import BulkEditor from 'components/BulkEditor/index';
+import Button from 'ui/Button';
 
 const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
 
@@ -112,9 +113,9 @@ const Headers = ({ collection, folder }) => {
         </button>
       </div>
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/FolderSettings/Script/index.js

@@ -7,6 +7,7 @@ import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions'
 import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const Script = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -100,9 +101,9 @@ const Script = ({ collection, folder }) => {
       </Tabs>
 
       <div className="mt-12">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/FolderSettings/Tests/index.js

@@ -6,6 +6,7 @@ import { updateFolderTests } from 'providers/ReduxStore/slices/collections';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const Tests = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -42,9 +43,9 @@ const Tests = ({ collection, folder }) => {
       />
 
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/FolderSettings/Vars/index.js

@@ -4,6 +4,7 @@ import VarsTable from './VarsTable';
 import StyledWrapper from './StyledWrapper';
 import { saveFolderRoot } from 'providers/ReduxStore/slices/collections/actions';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const Vars = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -22,9 +23,9 @@ const Vars = ({ collection, folder }) => {
         <VarsTable folder={folder} collection={collection} vars={responseVars} varType="response" />
       </div>
       <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
+        <Button type="submit" size="sm" onClick={handleSave}>
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/ManageWorkspace/DeleteWorkspace/index.js

@@ -32,7 +32,7 @@ const DeleteWorkspace = ({ onClose, workspace }) => {
         handleConfirm={onConfirm}
         handleCancel={onClose}
         confirmDisabled={isDeleting}
-        confirmButtonClass="btn-danger"
+        confirmButtonColor="danger"
       >
         <div className="flex items-center">
           <IconFolder size={18} strokeWidth={1.5} />

packages/bruno-app/src/components/ManageWorkspace/index.js

@@ -13,6 +13,7 @@ import RenameWorkspace from './RenameWorkspace';
 import DeleteWorkspace from './DeleteWorkspace';
 import StyledWrapper from './StyledWrapper';
 import MenuDropdown from 'ui/MenuDropdown/index';
+import Button from 'ui/Button';
 
 const ManageWorkspace = () => {
   const dispatch = useDispatch();
@@ -84,10 +85,9 @@ const ManageWorkspace = () => {
           </div>
           <span className="header-title">Manage Workspace</span>
         </div>
-        <button className="create-workspace-btn" onClick={() => setCreateWorkspaceModalOpen(true)}>
-          <IconPlus size={14} strokeWidth={2} />
-          <span>Create Workspace</span>
-        </button>
+        <Button size="sm" onClick={() => setCreateWorkspaceModalOpen(true)} icon={<IconPlus size={14} strokeWidth={2} />}>
+          Create Workspace
+        </Button>
       </div>
 
       <div className="workspace-list">

packages/bruno-app/src/components/Modal/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import StyledWrapper from './StyledWrapper';
 import useFocusTrap from 'hooks/useFocusTrap';
+import Button from 'ui/Button';
 
 const ESC_KEY_CODE = 27;
 const ENTER_KEY_CODE = 13;
@@ -27,7 +28,7 @@ const ModalFooter = ({
   confirmDisabled,
   hideCancel,
   hideFooter,
-  confirmButtonClass = 'btn-secondary'
+  confirmButtonColor = 'primary'
 }) => {
   confirmText = confirmText || 'Save';
   cancelText = cancelText || 'Cancel';
@@ -39,19 +40,20 @@ const ModalFooter = ({
   return (
     <div className="flex justify-end p-4 bruno-modal-footer">
       <span className={hideCancel ? 'hidden' : 'mr-2'}>
-        <button type="button" onClick={handleCancel} className="btn btn-md btn-close">
+        <Button type="button" color="secondary" variant="ghost" onClick={handleCancel}>
           {cancelText}
-        </button>
+        </Button>
       </span>
       <span>
-        <button
+        <Button
           type="submit"
-          className={`submit btn btn-md ${confirmButtonClass}`}
+          color={confirmButtonColor}
           disabled={confirmDisabled}
           onClick={handleSubmit}
+          className="submit"
         >
           {confirmText}
-        </button>
+        </Button>
       </span>
     </div>
   );
@@ -75,7 +77,7 @@ const Modal = ({
   onClick,
   closeModalFadeTimeout = 500,
   dataTestId,
-  confirmButtonClass
+  confirmButtonColor = 'primary'
 }) => {
   const modalRef = useRef(null);
   const [isClosing, setIsClosing] = useState(false);
@@ -149,7 +151,7 @@ const Modal = ({
           confirmDisabled={confirmDisabled}
           hideCancel={hideCancel}
           hideFooter={hideFooter}
-          confirmButtonClass={confirmButtonClass}
+          confirmButtonColor={confirmButtonColor}
         />
       </div>
 

packages/bruno-app/src/components/RequestTabPanel/ExampleNotFound/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const ExampleNotFound = ({ exampleUid }) => {
   const dispatch = useDispatch();
@@ -30,9 +31,9 @@ const ExampleNotFound = ({ exampleUid }) => {
           This can occur when the example definition in your local file has been deleted or updated.
         </div>
       </div>
-      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
+      <Button size="md" color="secondary" variant="ghost" onClick={closeTab}>
         Close Tab
-      </button>
+      </Button>
     </div>
   );
 };

packages/bruno-app/src/components/RequestTabPanel/FolderNotFound/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const FolderNotFound = ({ folderUid }) => {
   const dispatch = useDispatch();
@@ -32,9 +33,9 @@ const FolderNotFound = ({ folderUid }) => {
           This can happen when the folder was renamed or deleted on your filesystem.
         </div>
       </div>
-      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
+      <Button size="md" color="secondary" variant="ghost" onClick={closeTab}>
         Close Tab
-      </button>
+      </Button>
     </div>
   );
 };

packages/bruno-app/src/components/RequestTabPanel/RequestNotFound/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { closeTabs } from 'providers/ReduxStore/slices/tabs';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const RequestNotFound = ({ itemUid }) => {
   const dispatch = useDispatch();
@@ -36,9 +37,9 @@ const RequestNotFound = ({ itemUid }) => {
           This can happen when the .bru file associated with this request was deleted on your filesystem.
         </div>
       </div>
-      <button className="btn btn-md btn-secondary mt-6" onClick={closeTab}>
+      <Button size="md" color="secondary" variant="ghost" onClick={closeTab}>
         Close Tab
-      </button>
+      </Button>
     </div>
   );
 };

packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmCollectionClose/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
+import Button from 'ui/Button';
 
 const ConfirmCollectionClose = ({ collection, onCancel, onCloseWithoutSave, onSaveAndClose }) => {
   return (
@@ -29,17 +30,17 @@ const ConfirmCollectionClose = ({ collection, onCancel, onCloseWithoutSave, onSa
 
       <div className="flex justify-between mt-6">
         <div>
-          <button className="btn btn-sm btn-danger" onClick={onCloseWithoutSave}>
+          <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
             Don't Save
-          </button>
+          </Button>
         </div>
         <div>
-          <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
+          <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
             Cancel
-          </button>
-          <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}>
+          </Button>
+          <Button size="sm" onClick={onSaveAndClose}>
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>

packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmFolderClose/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
+import Button from 'ui/Button';
 
 const ConfirmFolderClose = ({ folder, onCancel, onCloseWithoutSave, onSaveAndClose }) => {
   return (
@@ -29,17 +30,17 @@ const ConfirmFolderClose = ({ folder, onCancel, onCloseWithoutSave, onSaveAndClo
 
       <div className="flex justify-between mt-6">
         <div>
-          <button className="btn btn-sm btn-danger" onClick={onCloseWithoutSave}>
+          <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
             Don't Save
-          </button>
+          </Button>
         </div>
         <div>
-          <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
+          <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
             Cancel
-          </button>
-          <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}>
+          </Button>
+          <Button size="sm" onClick={onSaveAndClose}>
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>

packages/bruno-app/src/components/RequestTabs/RequestTab/ConfirmRequestClose/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
+import Button from 'ui/Button';
 
 const ConfirmRequestClose = ({ item, example, onCancel, onCloseWithoutSave, onSaveAndClose }) => {
   const isExample = !!example;
@@ -33,17 +34,17 @@ const ConfirmRequestClose = ({ item, example, onCancel, onCloseWithoutSave, onSa
 
       <div className="flex justify-between mt-6">
         <div>
-          <button className="btn btn-sm btn-danger" onClick={onCloseWithoutSave}>
+          <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
             Don't Save
-          </button>
+          </Button>
         </div>
         <div>
-          <button className="btn btn-close btn-sm mr-2" onClick={onCancel}>
+          <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
             Cancel
-          </button>
-          <button className="btn btn-secondary btn-sm" onClick={onSaveAndClose}>
+          </Button>
+          <Button size="sm" onClick={onSaveAndClose}>
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>

packages/bruno-app/src/components/SecuritySettings/index.js

@@ -3,6 +3,7 @@ import { saveCollectionSecurityConfig } from 'providers/ReduxStore/slices/collec
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
 import { useDispatch } from 'react-redux';
+import Button from 'ui/Button';
 
 const SecuritySettings = ({ collection }) => {
   const dispatch = useDispatch();
@@ -71,9 +72,9 @@ const SecuritySettings = ({ collection }) => {
             JavaScript code has access to the filesystem, can execute system commands and access sensitive information.
           </p>
         </div>
-        <button onClick={handleSave} className="submit btn btn-sm btn-secondary w-fit mt-6">
+        <Button size="sm" onClick={handleSave} className="w-fit mt-6">
           Save
-        </button>
+        </Button>
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/ExampleItem/DeleteResponseExampleModal/index.js

@@ -26,7 +26,7 @@ const DeleteResponseExampleModal = ({ onClose, example, item, collection }) => {
         confirmText="Delete"
         handleConfirm={onConfirm}
         handleCancel={onClose}
-        confirmButtonClass="btn-danger"
+        confirmButtonColor="danger"
       >
         Are you sure you want to delete the example <span className="font-medium">{example.name}</span>?
       </Modal>

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/ConfirmCollectionCloseDrafts.js

@@ -9,6 +9,7 @@ import { removeCollection } from 'providers/ReduxStore/slices/collections/action
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
 import toast from 'react-hot-toast';
+import Button from 'ui/Button';
 
 const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) => {
   const MAX_UNSAVED_REQUESTS_TO_SHOW = 5;
@@ -102,17 +103,17 @@ const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) =>
 
       <div className="flex justify-between mt-6">
         <div>
-          <button className="btn btn-sm btn-danger" onClick={handleDiscardAll}>
+          <Button size="sm" color="danger" onClick={handleDiscardAll}>
             Discard and Remove
-          </button>
+          </Button>
         </div>
         <div>
-          <button className="btn btn-close btn-sm mr-2" onClick={onClose}>
+          <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
             Cancel
-          </button>
-          <button className="btn btn-secondary btn-sm" onClick={handleSaveAll}>
+          </Button>
+          <Button size="sm" onClick={handleSaveAll}>
             {currentDrafts.length > 1 ? 'Save All and Remove' : 'Save and Remove'}
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/StyledWrapper.js

@@ -8,10 +8,12 @@ const StyledWrapper = styled.div`
   }
   .collection-name {
     font-weight: 500;
+    padding-left: 0 !important;
     color: ${(props) => props.theme.text};
     margin-bottom: 4px;
+    cursor: default !important;
     &:hover {
-      background: none;
+      background: none !important;
     }
   }
   .collection-path {

packages/bruno-app/src/components/Sidebar/Collections/Collection/RemoveCollection/index.js

@@ -58,7 +58,7 @@ const RemoveCollection = ({ onClose, collectionUid }) => {
         title="Remove Collection"
         customHeader={customHeader}
         confirmText="Remove"
-        confirmButtonClass="btn-danger"
+        confirmButtonColor="danger"
         handleConfirm={onConfirm}
         handleCancel={onClose}
       >

packages/bruno-app/src/components/Sidebar/Collections/RemoveCollectionsModal/index.js

@@ -19,6 +19,7 @@ import {
 } from 'utils/collections/index';
 import { IconAlertTriangle } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const MAX_COLLECTIONS_WIDTH = 530;
 const CHARACTER_WIDTH = 8;
@@ -226,17 +227,17 @@ const RemoveCollectionsModal = ({ collectionUids, onClose }) => {
 
               <div className="flex justify-between mt-6">
                 <div>
-                  <button className="btn btn-sm btn-danger" onClick={handleDiscard}>
+                  <Button size="sm" color="danger" onClick={handleDiscard}>
                     Discard and Close
-                  </button>
+                  </Button>
                 </div>
                 <div>
-                  <button className="btn btn-close btn-sm mr-2" onClick={handleCancel}>
+                  <Button size="sm" color="secondary" variant="ghost" onClick={handleCancel}>
                     Cancel
-                  </button>
-                  <button className="btn btn-secondary btn-sm" onClick={handleSave}>
+                  </Button>
+                  <Button size="sm" onClick={handleSave}>
                     Save and Close
-                  </button>
+                  </Button>
                 </div>
               </div>
             </>

packages/bruno-app/src/components/Sidebar/CreateCollection/index.js

@@ -18,6 +18,7 @@ import { toggleSidebarCollapse } from 'providers/ReduxStore/slices/app';
 import Dropdown from 'components/Dropdown';
 import StyledWrapper from './StyledWrapper';
 import get from 'lodash/get';
+import Button from 'ui/Button';
 
 const CreateCollection = ({ onClose, defaultLocation: propDefaultLocation }) => {
   const inputRef = useRef();
@@ -319,17 +320,14 @@ const CreateCollection = ({ onClose, defaultLocation: propDefaultLocation }) =>
               </div>
               <div className="flex justify-end">
                 <span className="mr-2">
-                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
+                  <Button type="button" size="sm" color="secondary" variant="ghost" onClick={onClose}>
                     Cancel
-                  </button>
+                  </Button>
                 </span>
                 <span>
-                  <button
-                    type="submit"
-                    className="submit btn btn-md btn-secondary"
-                  >
+                  <Button type="submit" size="sm">
                     Create
-                  </button>
+                  </Button>
                 </span>
               </div>
             </div>

packages/bruno-app/src/components/WorkspaceHome/WorkspaceEnvironments/EnvironmentList/ConfirmSwitchEnv.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
 import { createPortal } from 'react-dom';
+import Button from 'ui/Button';
 
 const ConfirmSwitchEnv = ({ onCancel }) => {
   const modalContent = (
@@ -26,9 +27,9 @@ const ConfirmSwitchEnv = ({ onCancel }) => {
 
       <div className="flex justify-between mt-6">
         <div>
-          <button className="btn btn-sm btn-danger" onClick={onCancel}>
+          <Button size="sm" color="danger" onClick={onCancel}>
             Close
-          </button>
+          </Button>
         </div>
         <div></div>
       </div>

packages/bruno-app/src/components/WorkspaceSidebar/CreateWorkspace/index.js

@@ -12,6 +12,7 @@ import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions
 import { multiLineMsg } from 'utils/common/index';
 import { formatIpcError } from 'utils/common/error';
 import { sanitizeName, validateName, validateNameError } from 'utils/common/regex';
+import Button from 'ui/Button';
 
 const CreateWorkspace = ({ onClose }) => {
   const inputRef = useRef();
@@ -188,7 +189,7 @@ const CreateWorkspace = ({ onClose }) => {
                 </p>
               </Help>
             </label>
-            <div className="flex gap-2">
+            <div className="flex gap-2 items-center">
               <input
                 id="workspace-location"
                 type="text"
@@ -202,9 +203,9 @@ const CreateWorkspace = ({ onClose }) => {
                 value={formik.values.workspaceLocation || ''}
                 onClick={browse}
               />
-              <button type="button" className="btn btn-sm btn-secondary" onClick={browse}>
+              <Button type="button" onClick={browse}>
                 Browse
-              </button>
+              </Button>
             </div>
             {formik.touched.workspaceLocation && formik.errors.workspaceLocation ? (
               <div className="text-red-500 text-sm mt-1">{formik.errors.workspaceLocation}</div>

packages/bruno-app/src/components/WorkspaceSidebar/ImportWorkspace/index.js

@@ -10,6 +10,7 @@ import { importWorkspaceAction } from 'providers/ReduxStore/slices/workspaces/ac
 import { formatIpcError } from 'utils/common/error';
 import { multiLineMsg } from 'utils/common/index';
 import Help from 'components/Help';
+import Button from 'ui/Button';
 
 const ImportWorkspace = ({ onClose }) => {
   const dispatch = useDispatch();
@@ -209,7 +210,7 @@ const ImportWorkspace = ({ onClose }) => {
               </p>
             </Help>
           </label>
-          <div className="flex gap-2 mt-2">
+          <div className="flex gap-2 mt-2 items-center">
             <input
               id="workspace-location"
               type="text"
@@ -224,9 +225,9 @@ const ImportWorkspace = ({ onClose }) => {
               value={formik.values.workspaceLocation || ''}
               onClick={browse}
             />
-            <button type="button" className="btn btn-sm btn-secondary" onClick={browse}>
+            <Button type="button" onClick={browse}>
               Browse
-            </button>
+            </Button>
           </div>
           {formik.touched.workspaceLocation && formik.errors.workspaceLocation ? (
             <div className="text-red-500 text-sm mt-1">{formik.errors.workspaceLocation}</div>

packages/bruno-app/src/providers/App/ConfirmAppClose/SaveRequestsModal.js

@@ -10,6 +10,7 @@ import { completeQuitFlow } from 'providers/ReduxStore/slices/app';
 import { saveMultipleRequests, saveMultipleCollections, saveMultipleFolders } from 'providers/ReduxStore/slices/collections/actions';
 import { IconAlertTriangle } from '@tabler/icons';
 import Modal from 'components/Modal';
+import Button from 'ui/Button';
 
 const SaveRequestsModal = ({ onClose }) => {
   const MAX_UNSAVED_ITEMS_TO_SHOW = 5;
@@ -157,17 +158,17 @@ const SaveRequestsModal = ({ onClose }) => {
 
       <div className="flex justify-between mt-6">
         <div>
-          <button className="btn btn-sm btn-danger" onClick={closeWithoutSave}>
+          <Button size="sm" color="danger" onClick={closeWithoutSave}>
             Don't Save
-          </button>
+          </Button>
         </div>
         <div>
-          <button className="btn btn-close btn-sm mr-2" onClick={onClose}>
+          <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
             Cancel
-          </button>
-          <button className="btn btn-secondary btn-sm" onClick={closeWithSave}>
+          </Button>
+          <Button size="sm" onClick={closeWithSave}>
             {totalDraftsCount > 1 ? 'Save All' : 'Save'}
-          </button>
+          </Button>
         </div>
       </div>
     </Modal>