refactor: replace button elements with new Button component (#6512)

* refactor: replace button elements with new Button component

* chore: fix button size for consistency

---------

Co-authored-by: Bijin A B <bijin@usebruno.com>

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

@@ -162,17 +162,18 @@ const CollectionProperties = ({ onClose }) => {
               <IconCookieOff size={48} strokeWidth={1.5} className="text-gray-500" />
               <h2 className="text-lg font-medium mt-4">No cookies found</h2>
               <p className="text-gray-500 mt-2">Add cookies to get started</p>
-              <button
+              <Button
                 type="submit"
-                className="submit btn btn-sm btn-secondary flex items-center gap-1 mt-8"
+                size="sm"
+                className="mt-8"
+                icon={<IconCirclePlus strokeWidth={1.5} size={16} />}
                 onClick={(e) => {
                   e.stopPropagation();
                   handleAddCookie();
                 }}
               >
-                <IconCirclePlus strokeWidth={1.5} size={16} />
-                <span>Add Cookie</span>
-              </button>
+                Add Cookie
+              </Button>
             </div>
           ) : cookies.length && !filteredCookies.length ? (
             // No search results

packages/bruno-app/src/components/Environments/Common/ExportEnvironmentModal/index.js

@@ -6,6 +6,7 @@ import { browseDirectory } from 'providers/ReduxStore/slices/collections/actions
 import { useDispatch } from 'react-redux';
 import toast from 'react-hot-toast';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const ExportEnvironmentModal = ({ onClose, environments = [], environmentType }) => {
   const dispatch = useDispatch();
@@ -242,22 +243,26 @@ const ExportEnvironmentModal = ({ onClose, environments = [], environmentType })
 
             {/* Export Actions */}
             <div className="flex justify-end gap-2 mt-4 pt-3 border-t border-gray-200 dark:border-gray-700">
-              <button
+              <Button
                 type="button"
-                className="btn btn-sm btn-cancel mt-2 flex items-center"
+                size="sm"
+                color="secondary"
+                variant="ghost"
                 onClick={onClose}
                 disabled={isExporting}
+                className="mt-2 mr-2"
               >
                 Cancel
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
-                className="btn btn-sm btn-secondary mt-2 flex items-center"
+                size="sm"
                 onClick={handleExport}
                 disabled={isExporting || selectedCount === 0}
+                className="mt-2"
               >
                 {isExporting ? 'Exporting...' : `Export ${selectedCount || ''} Environment${selectedCount !== 1 ? 's' : ''}`}
-              </button>
+              </Button>
             </div>
           </div>
         </Modal>

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/GrpcurlModal/index.js

@@ -6,6 +6,7 @@ import toast from 'react-hot-toast';
 import get from 'lodash/get';
 import Modal from 'components/Modal/index';
 import CodeEditor from 'components/CodeEditor';
+import Button from 'ui/Button';
 
 const GrpcurlModal = ({ isOpen, onClose, command }) => {
   const { displayedTheme } = useTheme();
@@ -39,12 +40,12 @@ const GrpcurlModal = ({ isOpen, onClose, command }) => {
         <div className="flex w-full min-h-[400px]">
           <div className="flex-grow relative">
             <div className="absolute top-2 right-2 z-10">
-              <button
+              <Button
+                size="sm"
+                variant="ghost"
                 onClick={handleCopy}
-                className="btn btn-sm btn-secondary flex items-center gap-2"
-              >
-                {copied ? <IconCheck size={20} /> : <IconCopy size={20} />}
-              </button>
+                icon={copied ? <IconCheck size={20} /> : <IconCopy size={20} />}
+              />
             </div>
             <CodeEditor
               value={command}

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

@@ -14,6 +14,7 @@ import path from 'utils/common/path';
 import Portal from 'components/Portal';
 import Dropdown from 'components/Dropdown';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const CloneCollectionItem = ({ collectionUid, item, onClose }) => {
   const dispatch = useDispatch();
@@ -198,19 +199,12 @@ const CloneCollectionItem = ({ collectionUid, item, onClose }) => {
                 </Dropdown>
               </div>
               <div className="flex justify-end">
-                <span className="mr-2">
-                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
-                    Cancel
-                  </button>
-                </span>
-                <span>
-                  <button
-                    type="submit"
-                    className="submit btn btn-md btn-secondary"
-                  >
-                    Clone
-                  </button>
-                </span>
+                <Button type="button" color="secondary" variant="ghost" onClick={onClose} className="mr-2">
+                  Cancel
+                </Button>
+                <Button type="submit">
+                  Clone
+                </Button>
               </div>
             </div>
           </form>

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

@@ -15,6 +15,7 @@ import PathDisplay from 'components/PathDisplay';
 import Portal from 'components/Portal';
 import Dropdown from 'components/Dropdown';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const RenameCollectionItem = ({ collectionUid, item, onClose }) => {
   const dispatch = useDispatch();
@@ -216,19 +217,12 @@ const RenameCollectionItem = ({ collectionUid, item, onClose }) => {
                 </Dropdown>
               </div>
               <div className="flex justify-end">
-                <span className="mr-2">
-                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
-                    Cancel
-                  </button>
-                </span>
-                <span>
-                  <button
-                    type="submit"
-                    className="submit btn btn-md btn-secondary"
-                  >
-                    Rename
-                  </button>
-                </span>
+                <Button type="button" color="secondary" variant="ghost" onClick={onClose} className="mr-2">
+                  Cancel
+                </Button>
+                <Button type="submit">
+                  Rename
+                </Button>
               </div>
             </div>
           </form>

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

@@ -10,6 +10,7 @@ import StyledWrapper from './StyledWrapper';
 import { areItemsLoading } from 'utils/collections';
 import RunnerTags from 'components/RunnerResults/RunnerTags/index';
 import { getRequestItemsForCollectionRun } from 'utils/collections/index';
+import Button from 'ui/Button';
 
 const RunCollectionItem = ({ collectionUid, item, onClose }) => {
   const dispatch = useDispatch();
@@ -80,32 +81,24 @@ const RunCollectionItem = ({ collectionUid, item, onClose }) => {
           <RunnerTags collectionUid={collection.uid} className="mb-6" />
 
           <div className="flex justify-end bruno-modal-footer">
-            <span className="mr-3">
-              <button type="button" onClick={onClose} className="btn btn-md btn-close">
-                Cancel
-              </button>
-            </span>
+            <Button type="button" color="secondary" variant="ghost" onClick={onClose} className="mr-3">
+              Cancel
+            </Button>
             {
               isCollectionRunInProgress
                 ? (
-                    <span>
-                      <button type="submit" className="submit btn btn-md btn-secondary mr-3" onClick={handleViewRunner}>
-                        View Run
-                      </button>
-                    </span>
+                    <Button type="submit" onClick={handleViewRunner}>
+                      View Run
+                    </Button>
                   )
                 : (
                     <>
-                      <span>
-                        <button type="submit" disabled={shouldDisableRecursiveFolderRun} className="submit btn btn-md btn-secondary mr-3" onClick={() => onSubmit(true)}>
-                          Recursive Run
-                        </button>
-                      </span>
-                      <span>
-                        <button type="submit" disabled={shouldDisableFolderRun} className="submit btn btn-md btn-secondary" onClick={() => onSubmit(false)}>
-                          Run
-                        </button>
-                      </span>
+                      <Button type="submit" disabled={shouldDisableRecursiveFolderRun} onClick={() => onSubmit(true)} className="mr-3">
+                        Recursive Run
+                      </Button>
+                      <Button type="submit" disabled={shouldDisableFolderRun} onClick={() => onSubmit(false)}>
+                        Run
+                      </Button>
                     </>
                   )
             }

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

@@ -256,12 +256,12 @@ const RemoveCollectionsModal = ({ collectionUids, onClose }) => {
                 Collections will be removed from the current workspace but will still be available in the file system and can be re-opened later.
               </div>
               <div className="flex justify-end mt-6">
-                <button className="btn btn-close btn-sm mr-2" data-testid="modal-close-button" onClick={handleCancel}>
+                <Button size="sm" color="secondary" variant="ghost" onClick={handleCancel} className="mr-2" data-testid="modal-close-button">
                   Cancel
-                </button>
-                <button className="btn btn-secondary btn-sm" onClick={handleCloseAllCollections}>
+                </Button>
+                <Button size="sm" onClick={handleCloseAllCollections}>
                   {hasMultipleCollections ? 'Close All' : 'Close'}
-                </button>
+                </Button>
               </div>
             </>
           )}

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

@@ -13,6 +13,7 @@ import Help from 'components/Help';
 import Dropdown from 'components/Dropdown';
 import { IconCaretDown } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
+import Button from 'ui/Button';
 
 const NewFolder = ({ collectionUid, item, onClose }) => {
   const dispatch = useDispatch();
@@ -181,19 +182,12 @@ const NewFolder = ({ collectionUid, item, onClose }) => {
                 </Dropdown>
               </div>
               <div className="flex justify-end">
-                <span className="mr-2">
-                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
-                    Cancel
-                  </button>
-                </span>
-                <span>
-                  <button
-                    type="submit"
-                    className="submit btn btn-md btn-secondary"
-                  >
-                    Create
-                  </button>
-                </span>
+                <Button type="button" color="secondary" variant="ghost" onClick={onClose} className="mr-2">
+                  Cancel
+                </Button>
+                <Button type="submit">
+                  Create
+                </Button>
               </div>
             </div>
           </form>

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

@@ -22,6 +22,7 @@ import Help from 'components/Help';
 import StyledWrapper from './StyledWrapper';
 import SingleLineEditor from 'components/SingleLineEditor/index';
 import { useTheme } from 'styled-components';
+import Button from 'ui/Button';
 
 const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
   const dispatch = useDispatch();
@@ -594,16 +595,12 @@ const NewRequest = ({ collectionUid, item, isEphemeral, onClose }) => {
                 </Dropdown>
               </div>
               <div className="flex justify-end">
-                <span className="mr-2">
-                  <button type="button" onClick={onClose} className="btn btn-md btn-close">
-                    Cancel
-                  </button>
-                </span>
-                <span>
-                  <button type="submit" className="submit btn btn-md btn-secondary">
-                    Create
-                  </button>
-                </span>
+                <Button type="button" color="secondary" variant="ghost" onClick={onClose} className="mr-2">
+                  Cancel
+                </Button>
+                <Button type="submit">
+                  Create
+                </Button>
               </div>
             </div>
           </form>