Frontend: Standardize modal and modal button code (#7740)

frontend/pages/Homepage/cards/WelcomeHost/WelcomeHost.tsx

@@ -303,7 +303,7 @@ const WelcomeHost = ({
                   <b>Resolve:</b> {currentPolicyShown.resolution}
                 </p>
               )}
-              <div className="done">
+              <div className="modal-cta-wrap">
                 <Button
                   variant="brand"
                   onClick={() => setShowPolicyModal(false)}

frontend/pages/Homepage/cards/WelcomeHost/_styles.scss

@@ -157,11 +157,4 @@
       font-size: $x-small;
     }
   }
-  &__policy-modal {
-    .done {
-      margin-top: $pad-large;
-      display: flex;
-      justify-content: flex-end;
-    }
-  }
 }

frontend/pages/admin/AppSettingsPage/cards/HostStatusWebhook/HostStatusWebhook.tsx

@@ -124,7 +124,7 @@ const HostStatusWebhook = ({
               }}
             />
           </div>
-          <div className="flex-end">
+          <div className="modal-cta-wrap">
             <Button type="button" onClick={toggleHostStatusWebhookPreviewModal}>
               Done
             </Button>

frontend/pages/admin/AppSettingsPage/cards/Statistics/Statistics.tsx

@@ -71,7 +71,7 @@ const Statistics = ({
               __html: syntaxHighlight(usageStatsPreview),
             }}
           />
-          <div className="flex-end">
+          <div className="modal-cta-wrap">
             <Button type="button" onClick={toggleUsageStatsPreviewModal}>
               Done
             </Button>

frontend/pages/hosts/details/DeviceUserPage/InfoModal/_styles.scss

@@ -1,9 +0,0 @@
-.device-user-info {
-  &__modal {
-    @include position(absolute, 22px null null null);
-    background-color: $core-white;
-    width: 658px;
-    padding: $pad-xxlarge;
-    border-radius: $pad-small;
-  }
-}

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

@@ -1,9 +0,0 @@
-.delete-host-modal {
-  &__modal {
-    @include position(absolute, 22px null null null);
-    background-color: $core-white;
-    width: 658px;
-    padding: $pad-xxlarge;
-    border-radius: $pad-small;
-  }
-}

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

@@ -21,7 +21,7 @@ interface IRenderOSPolicyModal {
   osPolicyLabel: string;
 }
 
-const baseClass = "render-os-policy-modal";
+const baseClass = "os-policy-modal";
 
 const RenderOSPolicyModal = ({
   onCancel,
@@ -70,11 +70,7 @@ const RenderOSPolicyModal = ({
   };
 
   return (
-    <Modal
-      title="Operating system"
-      onExit={onCancel}
-      className={`${baseClass}__modal`}
-    >
+    <Modal title="Operating system" onExit={onCancel} className={baseClass}>
       <>
         <p>
           <span className={`${baseClass}__os-modal-title`}>
@@ -98,12 +94,12 @@ const RenderOSPolicyModal = ({
           value={osPolicy}
         />
         <div className="modal-cta-wrap">
-          <Button onClick={onCancel} variant="inverse">
-            Close
-          </Button>
           <Button onClick={onCreateNewPolicy} variant="brand">
             Create new policy
           </Button>
+          <Button onClick={onCancel} variant="inverse">
+            Close
+          </Button>
         </div>
       </>
     </Modal>

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

@@ -1,12 +1,4 @@
-.render-os-policy-modal {
-  &__modal {
-    @include position(absolute, 22px null null null);
-    background-color: $core-white;
-    width: 658px;
-    padding: $pad-xxlarge;
-    border-radius: $pad-small;
-  }
-
+.os-policy-modal {
   &__os-modal-title {
     padding-right: $pad-medium;
     font-size: $medium;

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

@@ -93,7 +93,9 @@ const SelectQueryModal = ({
             Expecting to see queries? Try again in a few seconds as the system
             catches up.
           </span>
-          {!isOnlyObserver && customQueryButton()}
+          <div className="modal-cta-wrap">
+            {!isOnlyObserver && customQueryButton()}
+          </div>
         </div>
       );
     }

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

@@ -1,12 +1,4 @@
 .select-query-modal {
-  &__modal {
-    @include position(absolute, 22px null null null);
-    background-color: $core-white;
-    width: 658px;
-    padding: $pad-xxlarge;
-    border-radius: $pad-small;
-  }
-
   &__no-queries {
     .info {
       &__header {

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

@@ -1,9 +0,0 @@
-.transfer-host-modal {
-  &__modal {
-    @include position(absolute, 22px null null null);
-    background-color: $core-white;
-    width: 658px;
-    padding: $pad-xxlarge;
-    border-radius: $pad-small;
-  }
-}

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

@@ -1,10 +1,4 @@
 .add-policy-modal {
-  @include position(absolute, 22px null null null);
-  background-color: $core-white;
-  width: 658px;
-  padding: $pad-xxlarge;
-  border-radius: $pad-small;
-
   &__policy-selection {
     padding: $pad-large 0;
   }