Fleet UI: Unify manage automations > paginated list footer styling (#27841)

Author: RachelElysia

frontend/components/Pagination/_styles.scss

@@ -2,7 +2,6 @@
   display: flex;
   justify-content: flex-end;
   margin-top: $pad-small;
-  margin-bottom: $pad-small;
   margin-left: auto;
   text-align: right;
   gap: $pad-large;

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

@@ -295,7 +295,7 @@ const CalendarEventsModal = ({
             );
           }}
           footer={
-            <div className="form-field__help-text">
+            <>
               A calendar event will be created for end users if one of their
               hosts fail any of these policies.{" "}
               <CustomLink
@@ -304,7 +304,7 @@ const CalendarEventsModal = ({
                 newTab
                 disableKeyboardNavigation={!formData.enabled}
               />
-            </div>
+            </>
           }
           isUpdating={isUpdating}
           onSubmit={onUpdateCalendarEvents}

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

@@ -33,10 +33,6 @@
     margin: 0;
   }
 
-  .form-field__help-text {
-    margin-top: $pad-large;
-  }
-
   &__hide-main {
     visibility: hidden;
   }
@@ -67,4 +63,4 @@
 // If we're hiding the modal (because the preview is showing), hide the background as well.
 .modal__background:has(.calendar-events-modal.calendar-events-modal__hide-main) {
   visibility: hidden;
-}
+}

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

@@ -288,7 +288,7 @@ const InstallSoftwareModal = ({
                 ) : null;
               }}
               footer={
-                <p className="form-field__help-text">
+                <>
                   If compatible with the host, the selected software will be
                   installed when hosts fail the policy. Host counts will reset
                   when new software is selected.{" "}
@@ -297,7 +297,7 @@ const InstallSoftwareModal = ({
                     text="Learn more"
                     newTab
                   />
-                </p>
+                </>
               }
               isUpdating={isUpdating}
               onSubmit={onUpdateInstallSoftware}

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

@@ -1,11 +1,5 @@
 .manage-policies-page {
   .install-software-modal {
-    .form-field__help-text {
-      font-size: 14px;
-      line-height: 21px;
-      margin-top: $pad-large;
-    }
-
     .form-field--dropdown {
       width: 276px;
       .Select-placeholder {

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

@@ -370,15 +370,15 @@ const OtherWorkflowsModal = ({
                 return item;
               }}
               footer={
-                <p className={`${baseClass}__help-text`}>
+                <>
                   The workflow will be triggered when hosts fail these policies.{" "}
                   <CustomLink
                     url="https://www.fleetdm.com/learn-more-about/policy-automations"
                     text="Learn more"
                     newTab
                     disableKeyboardNavigation={!isPolicyAutomationsEnabled}
                   />
-                </p>
+                </>
               }
               isUpdating={isUpdating}
               onSubmit={onUpdateOtherWorkflows}

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

@@ -19,8 +19,4 @@
   &__no-integrations a {
     display: block;
   }
-
-  &__help-text {
-    @include help-text;
-  }
 }

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

@@ -198,22 +198,20 @@ function PoliciesPaginatedList(
   return (
     <div className={`${baseClass} form`}>
       <div className="form-field">
-        <div>
-          <PaginatedList<IFormPolicy>
-            ref={paginatedListRef}
-            fetchPage={fetchPage}
-            fetchCount={fetchCount}
-            isSelected={isSelected}
-            onToggleItem={onToggleItem}
-            renderItemRow={renderItemRow}
-            pageSize={DEFAULT_PAGE_SIZE}
-            onUpdate={onUpdate}
-            disabled={disabled || gitOpsModeEnabled}
-            heading={<span className={`${baseClass}__header`}>Policies</span>}
-          />
-          {footer}
-        </div>
+        <PaginatedList<IFormPolicy>
+          ref={paginatedListRef}
+          fetchPage={fetchPage}
+          fetchCount={fetchCount}
+          isSelected={isSelected}
+          onToggleItem={onToggleItem}
+          renderItemRow={renderItemRow}
+          pageSize={DEFAULT_PAGE_SIZE}
+          onUpdate={onUpdate}
+          disabled={disabled || gitOpsModeEnabled}
+          heading={<span className={`${baseClass}__header`}>Policies</span>}
+        />
       </div>
+      {footer && <p className="form-field__help-text">{footer}</p>}
       <div className="modal-cta-wrap">
         <GitOpsModeTooltipWrapper
           position="right"

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

@@ -186,7 +186,7 @@ const PolicyRunScriptModal = ({
                 ) : null;
               }}
               footer={
-                <p className="form-field__help-text">
+                <>
                   If{" "}
                   <TooltipWrapper tipContent={compatibleTipContent}>
                     compatible
@@ -200,7 +200,7 @@ const PolicyRunScriptModal = ({
                     text="Learn more"
                     newTab
                   />
-                </p>
+                </>
               }
               isUpdating={isUpdating}
               onSubmit={onUpdate}

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

@@ -1,11 +1,5 @@
 .manage-policies-page {
   .policy-run-script-modal {
-    .form-field__help-text {
-      font-size: 14px;
-      line-height: 21px;
-      margin-top: $pad-large;
-    }
-
     .form-field--dropdown {
       width: 276px;
       .Select-placeholder {
@@ -34,7 +28,7 @@
       justify-content: center;
       font-size: $small;
 
-      div  {
+      div {
         color: $ui-fleet-black-75;
         font-size: $xx-small;
         a {