chore: update delete confirmation modals to use danger button color (#6589)

* refactor: remove size prop from Button components for consistency across modals and improve styling

* style: update confirm button colors in modal components for consistency

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

@@ -23,12 +23,12 @@ const ClearDomainCookiesModal = ({ onClose, domain, onClear }) => (
 
     <div className="flex justify-between mt-6">
       <div>
-        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
+        <Button color="secondary" variant="ghost" onClick={onClose}>
           Close
         </Button>
       </div>
       <div>
-        <Button size="sm" color="danger" onClick={onClear}>
+        <Button color="danger" onClick={onClear}>
           Clear All
         </Button>
       </div>
@@ -48,12 +48,12 @@ const DeleteCookieModal = ({ onClose, cookieName, onDelete }) => (
 
     <div className="flex justify-between mt-6">
       <div>
-        <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
+        <Button color="secondary" variant="ghost" onClick={onClose}>
           Close
         </Button>
       </div>
       <div>
-        <Button size="sm" color="danger" onClick={onDelete}>
+        <Button color="danger" onClick={onDelete}>
           Delete
         </Button>
       </div>

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

@@ -26,15 +26,15 @@ const ConfirmCloseEnvironment = ({ onCancel, onCloseWithoutSave, onSaveAndClose,
 
         <div className="flex justify-between mt-6">
           <div>
-            <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
+            <Button color="danger" onClick={onCloseWithoutSave}>
               Don't Save
             </Button>
           </div>
           <div>
-            <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
+            <Button className="mr-2" color="secondary" variant="ghost" onClick={onCancel}>
               Cancel
             </Button>
-            <Button size="sm" onClick={onSaveAndClose}>
+            <Button onClick={onSaveAndClose}>
               Save
             </Button>
           </div>

packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js

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

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

@@ -30,15 +30,15 @@ const ConfirmCollectionClose = ({ collection, onCancel, onCloseWithoutSave, onSa
 
       <div className="flex justify-between mt-6">
         <div>
-          <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
+          <Button color="danger" onClick={onCloseWithoutSave}>
             Don't Save
           </Button>
         </div>
         <div>
-          <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
+          <Button className="mr-2" color="secondary" variant="ghost" onClick={onCancel}>
             Cancel
           </Button>
-          <Button size="sm" onClick={onSaveAndClose}>
+          <Button onClick={onSaveAndClose}>
             Save
           </Button>
         </div>

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

@@ -30,15 +30,15 @@ const ConfirmFolderClose = ({ folder, onCancel, onCloseWithoutSave, onSaveAndClo
 
       <div className="flex justify-between mt-6">
         <div>
-          <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
+          <Button color="danger" onClick={onCloseWithoutSave}>
             Don't Save
           </Button>
         </div>
         <div>
-          <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
+          <Button className="mr-2" color="secondary" variant="ghost" onClick={onCancel}>
             Cancel
           </Button>
-          <Button size="sm" onClick={onSaveAndClose}>
+          <Button onClick={onSaveAndClose}>
             Save
           </Button>
         </div>

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

@@ -34,17 +34,15 @@ const ConfirmRequestClose = ({ item, example, onCancel, onCloseWithoutSave, onSa
 
       <div className="flex justify-between mt-6">
         <div>
-          <Button size="sm" color="danger" onClick={onCloseWithoutSave}>
+          <Button color="danger" onClick={onCloseWithoutSave}>
             Don't Save
           </Button>
         </div>
         <div>
-          <Button size="sm" color="secondary" variant="ghost" onClick={onCancel}>
+          <Button className="mr-2" color="secondary" variant="ghost" onClick={onCancel}>
             Cancel
           </Button>
-          <Button size="sm" onClick={onSaveAndClose}>
-            Save
-          </Button>
+          <Button onClick={onSaveAndClose}>Save</Button>
         </div>
       </div>
     </Modal>

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

@@ -43,6 +43,7 @@ const DeleteCollectionItem = ({ onClose, item, collectionUid }) => {
         size="sm"
         title={`Delete ${isFolder ? 'Folder' : 'Request'}`}
         confirmText="Delete"
+        confirmButtonColor="danger"
         handleConfirm={onConfirm}
         handleCancel={onClose}
       >

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

@@ -103,15 +103,15 @@ const ConfirmCollectionCloseDrafts = ({ onClose, collection, collectionUid }) =>
 
       <div className="flex justify-between mt-6">
         <div>
-          <Button size="sm" color="danger" onClick={handleDiscardAll}>
+          <Button color="danger" onClick={handleDiscardAll}>
             Discard and Remove
           </Button>
         </div>
         <div>
-          <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
+          <Button className="mr-2" color="secondary" variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button size="sm" onClick={handleSaveAll}>
+          <Button onClick={handleSaveAll}>
             {currentDrafts.length > 1 ? 'Save All and Remove' : 'Save and Remove'}
           </Button>
         </div>

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"
-        confirmButtonColor="danger"
+        confirmButtonColor="warning"
         handleConfirm={onConfirm}
         handleCancel={onClose}
       >

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

@@ -227,15 +227,15 @@ const RemoveCollectionsModal = ({ collectionUids, onClose }) => {
 
               <div className="flex justify-between mt-6">
                 <div>
-                  <Button size="sm" color="danger" onClick={handleDiscard}>
+                  <Button color="danger" onClick={handleDiscard}>
                     Discard and Close
                   </Button>
                 </div>
                 <div>
-                  <Button size="sm" color="secondary" variant="ghost" onClick={handleCancel}>
+                  <Button className="mr-2" color="secondary" variant="ghost" onClick={handleCancel}>
                     Cancel
                   </Button>
-                  <Button size="sm" onClick={handleSave}>
+                  <Button onClick={handleSave}>
                     Save and Close
                   </Button>
                 </div>
@@ -256,10 +256,10 @@ 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 size="sm" color="secondary" variant="ghost" onClick={handleCancel} className="mr-2" data-testid="modal-close-button">
+                <Button className="mr-2" color="secondary" variant="ghost" onClick={handleCancel} data-testid="modal-close-button">
                   Cancel
                 </Button>
-                <Button size="sm" onClick={handleCloseAllCollections}>
+                <Button color="warning" onClick={handleCloseAllCollections}>
                   {hasMultipleCollections ? 'Close All' : 'Close'}
                 </Button>
               </div>

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

@@ -25,13 +25,12 @@ const ConfirmSwitchEnv = ({ onCancel }) => {
       </div>
       <div className="font-normal mt-4">You have unsaved changes in this environment.</div>
 
-      <div className="flex justify-between mt-6">
+      <div className="flex justify-end mt-6">
         <div>
-          <Button size="sm" color="danger" onClick={onCancel}>
+          <Button color="warning" onClick={onCancel}>
             Close
           </Button>
         </div>
-        <div></div>
       </div>
     </Modal>
   );

packages/bruno-app/src/components/WorkspaceHome/WorkspaceOverview/CollectionsList/index.js

@@ -195,6 +195,7 @@ const CollectionsList = ({ workspace }) => {
         handleConfirm={confirmRemoveCollection}
         confirmText={isDelete ? 'Delete' : 'Remove'}
         cancelText="Cancel"
+        confirmButtonColor={isDelete ? 'warning' : 'primary'}
         style="new"
       >
         <p className="text-gray-600 dark:text-gray-300">

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

@@ -158,15 +158,15 @@ const SaveRequestsModal = ({ onClose }) => {
 
       <div className="flex justify-between mt-6">
         <div>
-          <Button size="sm" color="danger" onClick={closeWithoutSave}>
+          <Button color="danger" onClick={closeWithoutSave}>
             Don't Save
           </Button>
         </div>
         <div>
-          <Button size="sm" color="secondary" variant="ghost" onClick={onClose}>
+          <Button className="mr-2" color="secondary" variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button size="sm" onClick={closeWithSave}>
+          <Button onClick={closeWithSave}>
             {totalDraftsCount > 1 ? 'Save All' : 'Save'}
           </Button>
         </div>