Fixed style for action buttons in all modals (#5402)

* fixed style for action buttons in all modals

* fixed tests and modified more components

* fixed class reference in test

* removed unused file

cypress/integration/all/app/packflow.spec.ts

@@ -61,7 +61,7 @@ describe("Pack flow (seeded)", () => {
       )
         .click()
         .type("50");
-      cy.getAttached(".pack-query-editor-modal__btn-wrap")
+      cy.getAttached(".pack-query-editor-modal .modal-cta-wrap")
         .contains("button", /add query/i)
         .click();
       cy.findByText(/get authorized/i).should("exist");
@@ -69,7 +69,7 @@ describe("Pack flow (seeded)", () => {
     it("removes a query from an existing pack", () => {
       cy.getAttached(".fleet-checkbox__input").check({ force: true });
       cy.findByRole("button", { name: /remove/i }).click();
-      cy.getAttached(".remove-pack-query-modal__btn-wrap")
+      cy.getAttached(".remove-pack-query-modal .modal-cta-wrap")
         .contains("button", /remove/i)
         .click();
     });
@@ -95,7 +95,7 @@ describe("Pack flow (seeded)", () => {
           });
       });
       cy.findByRole("button", { name: /delete/i }).click();
-      cy.getAttached(".remove-pack-modal__btn-wrap > .button--alert")
+      cy.getAttached(".remove-pack-modal .modal-cta-wrap > .button--alert")
         .contains("button", /delete/i)
         .click({ force: true });
       cy.findByText(/successfully deleted/i).should("be.visible");

cypress/integration/all/app/queryflow.spec.ts

@@ -106,7 +106,9 @@ describe("Query flow (seeded)", () => {
           });
         });
       cy.findByRole("button", { name: /delete/i }).click();
-      cy.getAttached(".button--alert.remove-query-modal__btn").click();
+      cy.getAttached(".remove-query-modal .modal-cta-wrap").within(() => {
+        cy.findByRole("button", { name: /delete/i }).click();
+      });
       cy.findByText(/successfully removed query/i).should("be.visible");
       cy.findByText(/detect presence of authorized ssh keys/i).should(
         "not.exist"
@@ -145,7 +147,9 @@ describe("Query flow (seeded)", () => {
             cy.getAttached(".input-field").click().type("50");
           }
         );
-        cy.getAttached(".schedule-editor-modal__btn-wrap").within(() => {
+        cy.getAttached(
+          ".schedule-editor-modal__btn-wrap .modal-cta-wrap"
+        ).within(() => {
           cy.findByRole("button", { name: /schedule/i }).click();
         });
       });
@@ -178,9 +182,11 @@ describe("Query flow (seeded)", () => {
           cy.findByText(/action/i).click();
           cy.findByText(/remove/i).click();
         });
-      cy.getAttached(".remove-scheduled-query-modal__btn-wrap").within(() => {
-        cy.findByRole("button", { name: /remove/i }).click();
-      });
+      cy.getAttached(".remove-scheduled-query-modal .modal-cta-wrap").within(
+        () => {
+          cy.findByRole("button", { name: /remove/i }).click();
+        }
+      );
       cy.findByText(/successfully removed/i).should("be.visible");
     });
   });

cypress/integration/all/app/settingsflow.spec.ts

@@ -623,7 +623,7 @@ describe("App settings flow", () => {
       cy.intercept("GET", "/api/latest/fleet/config", deleteConfig).as(
         "deletedIntegration"
       );
-      cy.getAttached(".delete-integration-modal__btn-wrap")
+      cy.getAttached(".delete-integration-modal .modal-cta-wrap")
         .contains("button", /delete/i)
         .click();
       cy.wait("@deleteIntegration").then((configStub) => {

cypress/integration/free/maintainer.spec.ts

@@ -319,11 +319,8 @@ describe(
               cy.getAttached(".fleet-checkbox__input").check({ force: true });
             });
         });
-        // cy.get(".fleet-checkbox__input").check({ force: true });
         cy.findByRole("button", { name: /delete/i }).click();
-        // Can't figure out how attach findByRole onto modal button
-        // Can't use findByText because delete button under modal
-        cy.get(".remove-pack-modal__btn-wrap > .button--alert")
+        cy.get(".remove-pack-modal .modal-cta-wrap")
           .contains("button", /delete/i)
           .click();
         cy.findByText(/successfully deleted/i).should("be.visible");

cypress/integration/premium/admin.spec.ts

@@ -329,10 +329,10 @@ describe("Premium tier - Global Admin user", () => {
       cy.getAttached(".enroll-secret-modal__add-secret")
         .contains("button", /add secret/i)
         .click();
-      cy.getAttached(".secret-editor-modal__button-wrap")
+      cy.getAttached(".secret-editor-modal .modal-cta-wrap")
         .contains("button", /save/i)
         .click();
-      cy.getAttached(".enroll-secret-modal__button-wrap")
+      cy.getAttached(".enroll-secret-modal .modal-cta-wrap")
         .contains("button", /done/i)
         .click();
     });
@@ -481,7 +481,7 @@ describe("Premium tier - Global Admin user", () => {
         cy.findByText(/oranges/i).should("exist");
         cy.findByText(/apples/i).click();
       });
-      cy.getAttached(".transfer-host-modal__button-wrap")
+      cy.getAttached(".transfer-host-modal .modal-cta-wrap")
         .contains("button", /transfer/i)
         .click();
       cy.findByText(/transferred to apples/i).should("exist");

cypress/integration/premium/maintainer.spec.ts

@@ -146,10 +146,10 @@ describe("Premium tier - Maintainer user", () => {
         cy.getAttached(".enroll-secret-modal__add-secret")
           .contains("button", /add secret/i)
           .click();
-        cy.getAttached(".secret-editor-modal__button-wrap")
+        cy.getAttached(".secret-editor-modal .modal-cta-wrap")
           .contains("button", /save/i)
           .click();
-        cy.getAttached(".enroll-secret-modal__button-wrap")
+        cy.getAttached(".enroll-secret-modal .modal-cta-wrap")
           .contains("button", /done/i)
           .click();
       });
@@ -168,7 +168,7 @@ describe("Premium tier - Maintainer user", () => {
           cy.findByText(/apples/i).should("exist");
           cy.findByText(/oranges/i).click();
         });
-        cy.getAttached(".transfer-host-modal__button-wrap")
+        cy.getAttached(".transfer-host-modal .modal-cta-wrap")
           .contains("button", /transfer/i)
           .click();
         cy.findByText(/transferred to oranges/i).should("exist");

cypress/integration/premium/team_admin.spec.ts

@@ -156,10 +156,10 @@ describe("Premium tier - Team Admin user", () => {
       cy.getAttached(".enroll-secret-modal__add-secret")
         .contains("button", /add secret/i)
         .click();
-      cy.getAttached(".secret-editor-modal__button-wrap")
+      cy.getAttached(".secret-editor-modal .modal-cta-wrap")
         .contains("button", /save/i)
         .click();
-      cy.getAttached(".enroll-secret-modal__button-wrap")
+      cy.getAttached(".enroll-secret-modal .modal-cta-wrap")
         .contains("button", /done/i)
         .click();
     });
@@ -272,9 +272,11 @@ describe("Premium tier - Team Admin user", () => {
           cy.findByText(/action/i).click();
           cy.findByText(/remove/i).click();
         });
-      cy.getAttached(".remove-scheduled-query-modal__btn-wrap").within(() => {
-        cy.findByRole("button", { name: /remove/i }).click();
-      });
+      cy.getAttached(".remove-scheduled-query-modal .modal-cta-wrap").within(
+        () => {
+          cy.findByRole("button", { name: /remove/i }).click();
+        }
+      );
       cy.findByText(/successfully removed/i).should("be.visible");
     });
   });

cypress/integration/premium/team_maintainer_observer.spec.ts

@@ -229,10 +229,10 @@ describe("Premium tier - Team observer/maintainer user", () => {
         cy.getAttached(".enroll-secret-modal__add-secret")
           .contains("button", /add secret/i)
           .click();
-        cy.getAttached(".secret-editor-modal__button-wrap")
+        cy.getAttached(".secret-editor-modal .modal-cta-wrap")
           .contains("button", /save/i)
           .click();
-        cy.getAttached(".enroll-secret-modal__button-wrap")
+        cy.getAttached(".enroll-secret-modal .modal-cta-wrap")
           .contains("button", /done/i)
           .click();
       });

cypress/integration/premium/teamflow.spec.ts

@@ -18,7 +18,7 @@ describe("Teams flow (empty)", () => {
       cy.findByLabelText(/team name/i)
         .click()
         .type("Valor");
-      cy.getAttached(".create-team-modal__btn-wrap").within(() => {
+      cy.getAttached(".create-team-modal .modal-cta-wrap").within(() => {
         // ^$ forces exact match
         cy.findByRole("button", { name: /^create$/i }).click();
       });
@@ -76,7 +76,7 @@ describe("Teams flow (seeded)", () => {
             });
         });
       });
-      cy.getAttached(".delete-team-modal__btn-wrap").within(() => {
+      cy.getAttached(".delete-team-modal .modal-cta-wrap").within(() => {
         cy.findByRole("button", { name: /delete/i }).click();
       });
       cy.findByText(/successfully deleted/i).should("be.visible");
@@ -143,10 +143,10 @@ describe("Teams flow (seeded)", () => {
       cy.getAttached(".enroll-secret-modal__add-secret")
         .contains("button", /add secret/i)
         .click();
-      cy.getAttached(".secret-editor-modal__button-wrap")
+      cy.getAttached(".secret-editor-modal .modal-cta-wrap")
         .contains("button", /save/i)
         .click();
-      cy.getAttached(".enroll-secret-modal__button-wrap")
+      cy.getAttached(".enroll-secret-modal .modal-cta-wrap")
         .contains("button", /done/i)
         .click();
     });

frontend/README.md

@@ -13,6 +13,7 @@ The Fleet front-end is a Single Page Application using React with Typescript and
   - [React Context](#react-context)
   - [Fleet API Calls](#fleet-api-calls)
   - [Page Routing](#page-routing)
+  - [Styles](#styles)
   - [Other](#other)
 
 ## Running the Fleet web app
@@ -319,6 +320,17 @@ const PageOrComponent = ({
 };
 ```
 
+### Styles
+Below are a few need-to-knows about what's available in Fleet's CSS:
+
+**Modals**
+1) When creating a modal with a form inside, the action buttons (cancel, save, delete, etc.) should
+   be wrapped in the `modal-cta-wrap` class to keep unified styles.
+
+**Forms**
+1) When creating a form, **not** in a modal, use the class `${baseClass}__button-wrap` for the
+   action buttons (cancel, save, delete, etc.) and proceed to style as needed.
+
 ### Other
 
 **Local states**

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -461,7 +461,7 @@ const PlatformWrapper = ({
           })}
         </Tabs>
       </TabsWrapper>
-      <div className={`${baseClass}__button-wrap`}>
+      <div className="modal-cta-wrap">
         <Button onClick={onCancel} className="button button--brand">
           Done
         </Button>

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -104,12 +104,6 @@
     }
   }
 
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin: $pad-xxlarge 0 0;
-  }
-
   &__certificate-loading {
     color: $ui-fleet-black-50;
     padding-top: $pad-xsmall;

frontend/components/DeleteSecretModal/DeleteSecretModal.tsx

@@ -61,7 +61,7 @@ const DeleteSecretModal = ({
           </p>
           <p>You cannot undo this action.</p>
         </div>
-        <div className={`${baseClass}__button-wrap`}>
+        <div className="modal-cta-wrap">
           <Button
             className={`${baseClass}__btn`}
             onClick={toggleDeleteSecretModal}

frontend/components/DeleteSecretModal/_styles.scss

@@ -1,10 +1,4 @@
 .delete-secret-modal {
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin: $pad-large 0 0;
-  }
-
   &__btn {
     margin-left: $pad-large;
   }

frontend/components/EnrollSecretModal/EnrollSecretModal.tsx

@@ -107,7 +107,7 @@ const EnrollSecretModal = ({
             </>
           </Button>
         </div>
-        <div className={`${baseClass}__button-wrap`}>
+        <div className="modal-cta-wrap">
           <Button onClick={onReturnToApp} className="button button--brand">
             Done
           </Button>

frontend/components/EnrollSecretModal/_styles.scss

@@ -1,10 +1,4 @@
 .enroll-secret-modal {
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin: $pad-large 0 0;
-  }
-
   &__reveal-secret {
     float: right;
     text-decoration: none;

frontend/components/Modal/_styles.scss

@@ -20,6 +20,16 @@
         font-size: $x-small;
       }
     }
+
+    .modal-cta-wrap {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: $pad-large;
+
+      :nth-child(2) {
+        margin-left: $pad-medium;
+      }
+    }
   }
 
   &__ex {

frontend/components/SecretEditorModal/SecretEditorModal.tsx

@@ -97,7 +97,7 @@ const SecretEditorModal = ({
             hint={"Must contain at least 32 characters."}
           />
         </div>
-        <div className={`${baseClass}__button-wrap`}>
+        <div className="modal-cta-wrap">
           <Button onClick={onSaveSecretClick} className="button button--brand">
             Save
           </Button>

frontend/components/SecretEditorModal/_styles.scss

@@ -1,10 +1,4 @@
 .secret-editor-modal {
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin: $pad-large 0 0;
-  }
-
   &__reveal-secret {
     float: right;
     text-decoration: none;

frontend/components/forms/LabelForm/LabelForm.tsx

@@ -237,7 +237,7 @@ const LabelForm = ({
           </p>
         </div>
       )}
-      <div className={`${baseClass}__button-wrap`}>
+      <div className="modal-cta-wrap">
         <Button
           className={`${baseClass}__cancel-btn`}
           onClick={onCancel}

frontend/components/forms/LabelForm/_styles.scss

@@ -26,24 +26,15 @@
     }
   }
 
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-
-    .query-form__run-query-btn,
-    .query-form__stop-query-btn {
-      margin-left: $pad-xsmall;
-    }
+  .query-form__run-query-btn,
+  .query-form__stop-query-btn {
+    margin-left: $pad-xsmall;
   }
 
   &__cancel-btn {
     margin-right: $pad-medium;
   }
 
-  &__save-btn {
-    padding: 7px 28px;
-  }
-
   &__text-editor-wrapper {
     margin: $pad-large 0;
   }

frontend/pages/admin/IntegrationsPage/components/DeleteIntegrationModal/DeleteIntegrationModal.tsx

@@ -37,22 +37,13 @@ const DeleteIntegrationModal = ({
           <span className={`${baseClass}__url`}>{url}</span> integration.
         </p>
         <p>The automations that use this integration will be turned off.</p>
-        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            type="button"
-            onClick={onSubmit}
-            variant="alert"
-          >
-            Delete
-          </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse-alert"
-          >
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>
+          <Button type="button" onClick={onSubmit} variant="alert">
+            Delete
+          </Button>
         </div>
       </form>
     </Modal>

frontend/pages/admin/IntegrationsPage/components/DeleteIntegrationModal/_styles.scss

@@ -2,14 +2,4 @@
   &__url {
     font-weight: $bold;
   }
-
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
 }

frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/CreateTeamModal.tsx

@@ -76,22 +76,13 @@ const CreateTeamModal = ({
             hosts or volunteers acting as canaries.
           </p>
         </InfoBanner>
-        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            type="submit"
-            variant="brand"
-            disabled={name === ""}
-          >
-            Create
-          </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse"
-          >
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse">
             Cancel
           </Button>
+          <Button type="submit" variant="brand" disabled={name === ""}>
+            Create
+          </Button>
         </div>
       </form>
     </Modal>

frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/_styles.scss

@@ -6,14 +6,4 @@
   &__info-header {
     font-weight: $bold;
   }
-
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
 }

frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/DeleteTeamModal.tsx

@@ -41,20 +41,11 @@ const DeleteTeamModal = ({
           access to Fleet.
         </p>
         <p className={`${baseClass}__warning`}>This action cannot be undone.</p>
-        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            type="button"
-            onClick={onSubmit}
-            variant="alert"
-          >
+        <div className="modal-cta-wrap">
+          <Button type="button" onClick={onSubmit} variant="alert">
             Delete
           </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse-alert"
-          >
+          <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>
         </div>

frontend/pages/admin/TeamManagementPage/components/DeleteTeamModal/_styles.scss

@@ -6,14 +6,4 @@
   &__warning {
     color: $ui-error;
   }
-
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
 }

frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/DeleteLabelModal.tsx

@@ -31,7 +31,7 @@ const DeleteLabelModal = ({
     <Modal title="Delete label" onExit={onCancel} className={baseClass}>
       <>
         <p>Are you sure you wish to delete this label?</p>
-        <div className={`${baseClass}__btn-wrap`}>
+        <div className="modal-cta-wrap">
           <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>

frontend/pages/hosts/ManageHostsPage/components/DeleteLabelModal/_styles.scss

@@ -1,11 +0,0 @@
-.delete-label-modal {
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-}

frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx

@@ -81,7 +81,7 @@ const EditColumnsModal = ({
             );
           })}
         </div>
-        <div className={"button-actions"}>
+        <div className="modal-cta-wrap">
           <Button onClick={onCancelColumns} variant={"inverse"}>
             Cancel
           </Button>

frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/_styles.scss

@@ -1,10 +0,0 @@
-.edit-column-modal {
-  .button-actions {
-    display: flex;
-    justify-content: flex-end;
-
-    .save-button {
-      margin-left: $pad-small;
-    }
-  }
-}

frontend/pages/hosts/ManageHostsPage/components/TransferHostModal/TransferHostModal.tsx

@@ -82,23 +82,18 @@ const TransferHostModal = ({
             </Link>
           </p>
         ) : null}
-        <div className={`${baseClass}__btn-wrap`}>
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse">
+            Cancel
+          </Button>
           <Button
             disabled={selectedTeam === undefined}
-            className={`${baseClass}__btn`}
             type="button"
             variant="brand"
             onClick={onSubmitTransferHost}
           >
             Transfer
           </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse"
-          >
-            Cancel
-          </Button>
         </div>
       </form>
     </Modal>

frontend/pages/hosts/ManageHostsPage/components/TransferHostModal/_styles.scss

@@ -1,14 +1,4 @@
 .transfer-host-modal {
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-
   &__team-link {
     color: $core-vibrant-blue;
     font-size: $x-small;

frontend/pages/hosts/details/HostDetailsPage/_styles.scss

@@ -357,16 +357,6 @@
     margin: 0;
   }
 
-  .modal-btn-wrap {
-    display: flex;
-    justify-content: flex-end;
-
-    .button--inverse-alert,
-    .button--inverse {
-      margin-right: $pad-small;
-    }
-  }
-
   .buttons {
     display: flex;
     align-items: center;

frontend/pages/hosts/details/HostDetailsPage/modals/DeleteHostModal/DeleteHostModal.tsx

@@ -35,7 +35,7 @@ const DeleteHostModal = ({
           To prevent re-enrollment, you can uninstall osquery on the host or
           revoke the host's enroll secret.
         </p>
-        <div className={`${baseClass}__button-wrap modal-btn-wrap`}>
+        <div className="modal-cta-wrap">
           <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>

frontend/pages/hosts/details/HostDetailsPage/modals/OSPolicyModal/OSPolicyModal.tsx

@@ -93,7 +93,7 @@ const RenderOSPolicyModal = ({
           type={"textarea"}
           value={osPolicy}
         />
-        <div className={`${baseClass}__button-wrap modal-btn-wrap`}>
+        <div className="modal-cta-wrap">
           <Button onClick={onCancel} variant="inverse">
             Close
           </Button>

frontend/pages/hosts/details/HostDetailsPage/modals/TransferHostModal/TransferHostModal.tsx

@@ -80,7 +80,7 @@ const TransferHostModal = ({
             </Link>
           </p>
         )}
-        <div className={`${baseClass}__button-wrap modal-btn-wrap`}>
+        <div className="modal-cta-wrap">
           <Button onClick={onCancel} variant="inverse">
             Cancel
           </Button>

frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/PackQueryEditorModal.tsx

@@ -222,9 +222,11 @@ const PackQueryEditorModal = ({
           type="number"
         />
 
-        <div className={`${baseClass}__btn-wrap`}>
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse">
+            Cancel
+          </Button>
           <Button
-            className={`${baseClass}__btn`}
             type="button"
             variant="brand"
             onClick={onFormSubmit}
@@ -232,13 +234,6 @@ const PackQueryEditorModal = ({
           >
             {editQuery?.name ? "Save" : "Add query"}
           </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse"
-          >
-            Cancel
-          </Button>
         </div>
       </form>
     </Modal>

frontend/pages/packs/EditPackPage/components/PackQueryEditorModal/_styles.scss

@@ -1,10 +0,0 @@
-.pack-query-editor-modal {
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-}

frontend/pages/packs/EditPackPage/components/RemovePackQueryModal/RemovePackQueryModal.tsx

@@ -39,20 +39,11 @@ const RemovePackQueryModal = ({
       <div className={baseClass}>
         Are you sure you want to remove the selected {queryOrQueries} from your
         pack?
-        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse-alert"
-          >
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            type="button"
-            variant="alert"
-            onClick={onSubmit}
-          >
+          <Button type="button" variant="alert" onClick={onSubmit}>
             Remove
           </Button>
         </div>

frontend/pages/packs/EditPackPage/components/RemovePackQueryModal/_styles.scss

@@ -1,13 +0,0 @@
-.remove-pack-query-modal {
-  font-size: $x-small;
-
-  &__btn-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-}

frontend/pages/packs/ManagePacksPage/_styles.scss

@@ -30,16 +30,6 @@
     }
   }
 
-  &__modal-btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-
-    .button {
-      margin-left: 15px;
-      width: 120px;
-    }
-  }
-
   .button img {
     transform: scale(0.5);
   }

frontend/pages/packs/ManagePacksPage/components/RemovePackModal/RemovePackModal.tsx

@@ -31,7 +31,7 @@ const RemovePackModal = ({
     <Modal title={"Delete pack"} onExit={onCancel} className={baseClass}>
       <div className={baseClass}>
         Are you sure you want to delete the selected packs?
-        <div className={`${baseClass}__btn-wrap`}>
+        <div className="modal-cta-wrap">
           <Button
             className={`${baseClass}__btn`}
             onClick={onCancel}

frontend/pages/packs/ManagePacksPage/components/RemovePackModal/_styles.scss

@@ -1,13 +0,0 @@
-.remove-pack-modal {
-  font-size: $x-small;
-
-  &__btn-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-}

frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/ManageAutomationsModal.tsx

@@ -240,7 +240,7 @@ const ManageAutomationsModal = ({
             <div className={`${baseClass}__overlay`} />
           )}
         </div>
-        <div className={`${baseClass}__button-wrap`}>
+        <div className="modal-cta-wrap">
           <Button
             className={`${baseClass}__btn`}
             onClick={onReturnToApp}

frontend/pages/policies/ManagePoliciesPage/components/ManageAutomationsModal/_styles.scss

@@ -1,17 +1,6 @@
 .manage-automations-modal {
   width: 778px;
 
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin: $pad-large 0 0;
-  }
-
-  .button--inverse {
-    padding: $pad-small;
-    margin-right: $pad-small;
-  }
-
   pre,
   code {
     background-color: $ui-off-white;

frontend/pages/queries/ManageQueriesPage/components/RemoveQueryModal/RemoveQueryModal.tsx

@@ -31,20 +31,11 @@ const RemoveQueryModal = ({
     <Modal title={"Delete query"} onExit={onCancel} className={baseClass}>
       <div className={baseClass}>
         Are you sure you want to delete the selected queries?
-        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse-alert"
-          >
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            type="button"
-            variant="alert"
-            onClick={onSubmit}
-          >
+          <Button type="button" variant="alert" onClick={onSubmit}>
             Delete
           </Button>
         </div>

frontend/pages/queries/ManageQueriesPage/components/RemoveQueryModal/_styles.scss

@@ -1,13 +0,0 @@
-.remove-query-modal {
-  font-size: $x-small;
-
-  &__btn-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-}

frontend/pages/schedule/ManageSchedulePage/components/RemoveScheduledQueryModal/RemoveScheduledQueryModal.tsx

@@ -35,22 +35,13 @@ const RemoveScheduledQueryModal = ({
     >
       <div className={baseClass}>
         Are you sure you want to remove the selected queries from the schedule?
-        <div className={`${baseClass}__btn-wrap`}>
-          <Button
-            className={`${baseClass}__btn`}
-            type="button"
-            variant="alert"
-            onClick={onSubmit}
-          >
-            Remove
-          </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            onClick={onCancel}
-            variant="inverse-alert"
-          >
+        <div className="modal-cta-wrap">
+          <Button onClick={onCancel} variant="inverse-alert">
             Cancel
           </Button>
+          <Button type="button" variant="alert" onClick={onSubmit}>
+            Remove
+          </Button>
         </div>
       </div>
     </Modal>

frontend/pages/schedule/ManageSchedulePage/components/RemoveScheduledQueryModal/_styles.scss

@@ -1,13 +0,0 @@
-.remove-scheduled-query-modal {
-  font-size: $x-small;
-
-  &__btn-wrap {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-top: $pad-xxlarge;
-  }
-
-  &__btn {
-    margin-left: 12px;
-  }
-}

frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/ScheduleEditorModal.tsx

@@ -342,16 +342,11 @@ const ScheduleEditorModal = ({
               Preview data
             </Button>
           </div>
-          <div className={`${baseClass}__cta-btn-wrap`}>
-            <Button
-              className={`${baseClass}__btn`}
-              onClick={onCancel}
-              variant="inverse"
-            >
+          <div className="modal-cta-wrap">
+            <Button onClick={onCancel} variant="inverse">
               Cancel
             </Button>
             <Button
-              className={`${baseClass}__btn`}
               type="button"
               variant="brand"
               onClick={onFormSubmit}

frontend/pages/schedule/ManageSchedulePage/components/ScheduleEditorModal/_styles.scss

@@ -26,14 +26,11 @@
   &__btn-wrap {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
-  &__cta-btn-wrap {
-    flex-direction: row-reverse;
-  }
-
-  &__btn {
-    margin-left: 12px;
+  .modal-cta-wrap {
+    margin-top: 0;
   }
 
   .Select-value-label {

frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx

@@ -354,7 +354,7 @@ const ManageAutomationsModal = ({
             <div className={`${baseClass}__overlay`} />
           )}
         </div>
-        <div className={`${baseClass}__button-wrap`}>
+        <div className="modal-cta-wrap">
           <Button
             className={`${baseClass}__btn`}
             onClick={onReturnToApp}

frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/_styles.scss

@@ -1,17 +1,6 @@
 .manage-automations-modal {
   width: 778px;
 
-  &__button-wrap {
-    display: flex;
-    justify-content: flex-end;
-    margin: $pad-large 0 0;
-  }
-
-  .button--inverse {
-    padding: $pad-small;
-    margin-right: $pad-small;
-  }
-
   pre,
   code {
     background-color: $ui-off-white;