Fleet UI: PR #49292 follow-up — buttons, 8px gaps, focus ring (#50049)

frontend/components/ActionsDropdown/ActionsDropdown.tsx

@@ -237,6 +237,7 @@ const ActionsDropdown = ({
       ...provided,
       display: "flex",
       flexDirection: "row",
+      gap: "8px",
       width: "max-content",
       // Need minHeight to override default
       minHeight: variant === "secondary" ? "28px" : "32px", // Match button height
@@ -277,9 +278,17 @@ const ActionsDropdown = ({
       }),
       // Same ring Button's :focus-visible draws — only for keyboard tabbing,
       // never a mouse click (see isKeyboardFocus above).
+      //
+      // Drawn INSIDE the control (via outline + negative offset) rather than
+      // as an outset box-shadow. An outset shadow renders as a full-contrast
+      // 1px halo on the page background, and for the bordered `secondary`
+      // variant it stacks against the existing 1px grey border → reads as a
+      // ~2px band. Sitting inside the box overlays the border pixel and
+      // matches Button's own `::after` focus ring visual weight.
       ...(state.isFocused &&
         isKeyboardFocus && {
-          boxShadow: `0 0 0 1px ${COLORS["core-fleet-black"]}`,
+          outline: `1px solid ${COLORS["core-fleet-black"]}`,
+          outlineOffset: "-1px",
         }),
     }),
     placeholder: (provided, state) => ({
@@ -293,7 +302,7 @@ const ActionsDropdown = ({
         variant === "subdued" || variant === "secondary" ? "600" : undefined,
       lineHeight: "normal",
       paddingLeft: 0,
-      marginTop: "1px",
+      margin: 0,
       ...(state.isDisabled && {
         filter: "grayscale(0.5)",
         opacity: 0.5,

frontend/components/ActionsDropdown/_styles.scss

@@ -11,7 +11,7 @@
   align-items: center;
 
   button .children-wrapper {
-    gap: $pad-xsmall;
+    gap: $pad-small;
 
     .actions-dropdown__icon svg {
       transition: transform 0.25s ease;

frontend/components/ActivityDetails/InstallDetails/CertificateInstallDetailsModal/CertificateInstallDetailsModal.tsx

@@ -57,7 +57,6 @@ const CertificateInstallDetailsModal = ({
               hideText="Details"
               caretPosition="after"
               onClick={() => setShowDetails((prev) => !prev)}
-              variant="secondary"
             />
             {showDetails && (
               <Textarea label="Error details:" variant="code">

frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetailsModal/SoftwareInstallDetailsModal.tsx

@@ -324,7 +324,6 @@ export const SoftwareInstallDetailsModal = ({
             hideText="Details"
             caretPosition="after"
             onClick={toggleInstallDetails}
-            variant="secondary"
           />
         )}
         {showInstallDetails &&

frontend/components/ActivityDetails/InstallDetails/SoftwareIpaInstallDetailsModal/SoftwareIpaInstallDetailsModal.tsx

@@ -473,7 +473,6 @@ export const SoftwareIpaInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <>
@@ -507,7 +506,6 @@ export const SoftwareIpaInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <Textarea label="Error details:" variant="code">

frontend/components/ActivityDetails/InstallDetails/SoftwareScriptDetailsModal/SoftwareScriptDetailsModal.tsx

@@ -241,7 +241,6 @@ export const SoftwareScriptDetailsModal = ({
             hideText="Details"
             caretPosition="after"
             onClick={toggleInstallDetails}
-            variant="secondary"
           />
         )}
         {showInstallDetails && swInstallResult?.output && (

frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx

@@ -248,7 +248,6 @@ const SoftwareUninstallDetailsModal = ({
             hideText="Details"
             caretPosition="after"
             onClick={toggleDetails}
-            variant="secondary"
           />
         )}
         {showDetails && uninstallResult?.script_contents && (

frontend/components/ActivityDetails/InstallDetails/VppInstallDetailsModal/VppInstallDetailsModal.tsx

@@ -535,7 +535,6 @@ export const VppInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <>
@@ -569,7 +568,6 @@ export const VppInstallDetailsModal = ({
           hideText="Details"
           caretPosition="after"
           onClick={toggleInstallDetails}
-          variant="secondary"
         />
         {showInstallDetails && (
           <Textarea label="Error details:" variant="code">

frontend/components/AddHostsModal/PlatformWrapper/PlatformWrapper.tsx

@@ -382,7 +382,6 @@ const PlatformWrapper = ({
             showText="Plain osquery"
             caretPosition="after"
             onClick={() => setShowPlainOsquery((prev) => !prev)}
-            variant="secondary"
           />
           {showPlainOsquery && (
             <>

frontend/components/BackButton/BackButton.tsx

@@ -29,7 +29,7 @@ const BackButton = ({
 
   return (
     <Button variant="subdued" onClick={onClick} className={classes}>
-      <Icon name="chevron-left" color="ui-fleet-black-50" />
+      <Icon name="chevron-left" />
       <span>{text}</span>
     </Button>
   );

frontend/components/LiveQuery/SelectTargets.tsx

@@ -469,7 +469,6 @@ const SelectTargets = ({
               showText="Show more"
               hideText="Show less"
               isShowing={isListExpanded}
-              variant="secondary"
             />
           </div>
         )}

frontend/components/Modal/_styles.scss

@@ -118,7 +118,7 @@
     >* {
       display: flex;
       justify-content: space-between;
-      gap: $pad-medium;
+      gap: $gap-action-elements;
       align-items: center;
     }
 
@@ -143,5 +143,5 @@
   display: flex;
   flex-direction: row-reverse;
   margin-top: $pad-xlarge;
-  gap: $pad-medium;
+  gap: $gap-action-elements;
 }

frontend/components/ModalFooter/_styles.scss

@@ -12,7 +12,7 @@
   &__secondary-buttons_wrapper {
     display: flex;
     justify-content: space-between;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
     align-items: center;
   }
 

frontend/components/Pagination/Pagination.tsx

@@ -40,7 +40,7 @@ const Pagination = ({
         onClick={onPrevPage}
         className={`${baseClass}__pagination-button`}
       >
-        <Icon name="chevron-left" color="ui-fleet-black-75" /> Previous
+        <Icon name="chevron-left" /> Previous
       </Button>
       <Button
         variant="subdued"

frontend/components/TableContainer/DataTable/_styles.scss

@@ -231,25 +231,23 @@ $shadow-transition-width: 16px;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        gap: $gap-table-elements;
 
         p {
-          margin: 0 $pad-medium 0 0;
+          margin: 0;
           font-weight: $regular;
 
           span {
             font-weight: $bold;
           }
         }
-
-        button {
-          margin-right: $pad-medium;
-        }
       }
 
       &__inner-left,
       &__inner-right {
         display: flex;
         align-items: center;
+        gap: $gap-table-elements;
       }
     }
 

frontend/components/TableContainer/_styles.scss

@@ -1,7 +1,7 @@
 .table-container {
   display: flex;
   flex-direction: column;
-  gap: $gap-table-elements;
+  gap: $gap-page-component-inner;
 
   // Container is responsive design used when customControl is rendered
   .container {
@@ -120,13 +120,6 @@
     }
   }
 
-  // Compound selector (not just &__table-action-button) so this reliably
-  // beats the base .button class's own padding regardless of SCSS compile
-  // order — a tie at equal specificity bit us before (Scripts row gap).
-  &__table-action-button.button {
-    padding: $pad-small;
-  }
-
   &__header-left {
     display: flex;
     width: 100%;

frontend/components/buttons/ActionButtons/_styles.scss

@@ -1,14 +1,12 @@
 .action-buttons {
   display: flex;
-
-  button {
-    margin-left: $pad-medium;
-  }
+  gap: $gap-action-elements;
 
   &__secondary-buttons {
     display: none;
     @media (min-width: $break-md) {
       display: flex;
+      gap: $gap-action-elements;
     }
   }
 

frontend/components/buttons/RevealButton/RevealButton.tsx

@@ -15,8 +15,6 @@ export interface IRevealButtonProps {
   tooltipContent?: React.ReactNode;
   disabledTooltipContent?: React.ReactNode;
   onClick?: (evt: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Default: "secondary" */
-  variant?: "secondary" | "subdued";
 }
 
 const baseClass = "reveal-button";
@@ -32,7 +30,6 @@ const RevealButton = ({
   tooltipContent,
   disabledTooltipContent,
   onClick,
-  variant = "secondary",
 }: IRevealButtonProps): JSX.Element => {
   const classNames = classnames(baseClass, className);
 
@@ -70,7 +67,7 @@ const RevealButton = ({
 
   const button = (
     <Button
-      variant={variant}
+      variant="secondary"
       className={classNames}
       onClick={onClick}
       autofocus={autofocus}

frontend/components/buttons/RevealButton/_styles.scss

@@ -1,7 +1,6 @@
 .reveal-button .children-wrapper {
   display: inline-flex;
   align-items: center;
-  padding: $pad-small $pad-xxsmall; // larger clickable area
   min-width: max-content;
 
   .reveal-button__caret svg {

frontend/components/forms/LoginForm/LoginForm.tsx

@@ -137,7 +137,7 @@ const LoginForm = ({
             variant="subdued"
             className="back-link"
           >
-            <Icon name="chevron-left" color="ui-fleet-black-75" />
+            <Icon name="chevron-left" />
             Back to login
           </Button>
           <h1>Check your email</h1>

frontend/components/icons/ChevronLeft.tsx

@@ -8,7 +8,7 @@ interface IChevronProps {
 }
 
 const ChevronLeft = ({
-  color = "core-fleet-black",
+  color = "ui-fleet-black-75",
   size = "medium",
 }: IChevronProps) => {
   return (

frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityFeedFilters/_styles.scss

@@ -12,7 +12,7 @@
     display: grid;
     grid-template-areas: "type date sort";
     grid-template-columns: 4fr 3fr 3fr;
-    gap: $pad-medium;
+    gap: $gap-table-elements;
   }
 
   &__type-filter-dropdown {

frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx

@@ -483,7 +483,7 @@ const ChartCard = ({
           <Button
             type="button"
             variant="subdued"
-            className={`${baseClass}__settings-btn`}
+            size="small"
             ariaLabel="Configure chart filters"
             onClick={() => openFilterModal()}
           >

frontend/pages/DashboardPage/cards/ChartCard/ChartFilterModal/SoftwareFilters/SoftwareFilters.tsx

@@ -168,7 +168,6 @@ const SoftwareFilters = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvanced((prev) => !prev)}
-        variant="secondary"
       />
 
       {showAdvanced && (

frontend/pages/DashboardPage/cards/ChartCard/_styles.scss

@@ -125,21 +125,6 @@
     }
   }
 
-  &__settings-btn {
-    // Button variant="subdued" applies a 36px height that would make the
-    // chart-card header taller than HostsEnrolledCard's bare h2 next door.
-    // Shrink to content height so headers match.
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    color: $ui-fleet-black-75;
-    height: auto !important;
-    padding: 0 !important;
-  }
-
   &__chart-container {
     min-height: 280px;
     display: flex;

frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx

@@ -171,7 +171,6 @@ const ActivityFeedAutomationsModal = ({
           onClick={() => {
             setShowExamplePayload(!showExamplePayload);
           }}
-          variant="secondary"
         />
         {showExamplePayload && renderExamplePayload()}
         <div className="modal-cta-wrap">

frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx

@@ -237,7 +237,6 @@ const DiskEncryption = ({
             hideText="Advanced options"
             caretPosition="after"
             onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-            variant="secondary"
           />
           {showAdvancedOptions && (
             <Checkbox

frontend/pages/ManageControlsPage/Scripts/components/ScriptListItem/_styles.scss

@@ -40,7 +40,7 @@
   &__actions {
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   &__details {

frontend/pages/ManageControlsPage/SetupExperience/cards/BootstrapPackage/components/BootstrapAdvancedOptions/BootstrapAdvancedOptions.tsx

@@ -62,7 +62,6 @@ const BootstrapAdvancedOptions = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-        variant="secondary"
       />
       {showAdvancedOptions && (
         <form onSubmit={onSubmit}>

frontend/pages/ManageControlsPage/SetupExperience/cards/RunScript/components/SetupExperienceScriptCard/_styles.scss

@@ -20,7 +20,7 @@
 
   &__actions {
     display: flex;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
     flex: 1;
     justify-content: flex-end;
   }

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/AdvancedOptionsForm/AdvancedOptionsForm.tsx

@@ -51,7 +51,6 @@ const AdvancedOptionsForm = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-        variant="secondary"
       />
       {showAdvancedOptions && (
         <form onSubmit={handleSubmit}>

frontend/pages/ManageControlsPage/SetupExperience/cards/SetupAssistant/components/SetupAssistantProfileCard/_styles.scss

@@ -26,7 +26,7 @@
 
   &__actions {
     display: flex;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
     flex: 1;
     justify-content: flex-end;
   }

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsForm/_styles.scss

@@ -41,7 +41,7 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   fieldset {

frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetAppDetailsModal/FleetAppDetailsModal.tsx

@@ -83,7 +83,8 @@ const FleetAppDetailsModal = ({
             }
             value={
               <>
-                {slug} <CopyButton copyText={slug} variant="subdued" />
+                {slug}
+                <CopyButton copyText={slug} variant="compact" />
               </>
             }
           />

frontend/pages/SoftwarePage/SoftwareLibrary/SelfServiceCategoriesPage/SelfServiceCategoriesPage.tsx

@@ -236,7 +236,7 @@ const SelfServiceCategoriesPage = ({
             {canManage && (
               <div className={`${baseClass}__row-actions`}>
                 <Button
-                  variant="subdued"
+                  variant="secondary"
                   onClick={() => setCategoryToEdit(listItem)}
                   ariaLabel={`Edit ${listItem.name}`}
                   title="Edit"
@@ -244,7 +244,7 @@ const SelfServiceCategoriesPage = ({
                   <Icon name="pencil" />
                 </Button>
                 <Button
-                  variant="subdued"
+                  variant="secondary"
                   onClick={() => setCategoryToDelete(listItem)}
                   ariaLabel={`Delete ${listItem.name}`}
                   title="Delete"

frontend/pages/SoftwarePage/_styles.scss

@@ -29,7 +29,7 @@
   &__action-buttons {
     display: flex;
     align-items: center;
-    gap: $pad-small;
+    gap: $gap-action-elements;
   }
 
   &__text {

frontend/pages/SoftwarePage/components/forms/PackageAdvancedOptions/PackageAdvancedOptions.tsx

@@ -285,7 +285,6 @@ const PackageAdvancedOptions = ({
         hideText="Advanced options"
         caretPosition="after"
         onClick={() => setShowAdvancedOptions(!showAdvancedOptions)}
-        variant="secondary"
         disabled={!selectedPackage || requiresAdvancedOptions}
         disabledTooltipContent={
           requiresAdvancedOptions ? (

frontend/pages/SoftwarePage/components/forms/PackageForm/_styles.scss

@@ -64,6 +64,6 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-large;
+    gap: $gap-action-elements;
   }
 }

frontend/pages/SoftwarePage/components/forms/SoftwareAndroidForm/_styles.scss

@@ -105,6 +105,6 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 }

frontend/pages/SoftwarePage/components/forms/SoftwareVppForm/_styles.scss

@@ -114,6 +114,6 @@
   &__action-buttons {
     display: flex;
     flex-direction: row-reverse;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 }

frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/components/OktaConditionalAccessModal/OktaConditionalAccessModal.tsx

@@ -308,7 +308,8 @@ const OktaConditionalAccessModal = ({
             isLoading={isDownloadingCert}
             disabled={isDownloadingCert}
           >
-            Download certificate <Icon name="download" />
+            <span>Download certificate</span>
+            <Icon name="download" />
           </Button>
         </div>
 

frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/components/modals/RenewCertModal/_styles.scss

@@ -59,7 +59,7 @@
   &__button-wrap {
     display: flex;
     justify-content: flex-end;
-    gap: $pad-small;
+    gap: $gap-action-elements;
 
     .renew-cert-modal__request-button {
       margin: 0;

frontend/pages/admin/ManageFleetsPage/TeamDetailsWrapper/TeamDetailsWrapper.tsx

@@ -428,7 +428,6 @@ const TeamDetailsWrapper = ({
                 type: "secondary",
                 label: "Manage enroll secrets",
                 buttonVariant: "secondary",
-                iconName: "eye",
                 onClick: toggleManageEnrollSecretsModal,
                 gitOpsModeCompatible: true,
               },
@@ -436,7 +435,6 @@ const TeamDetailsWrapper = ({
                 type: "secondary",
                 label: "Rename fleet",
                 buttonVariant: "secondary",
-                iconName: "pencil",
                 onClick: toggleRenameFleetModal,
                 gitOpsModeCompatible: true,
               },
@@ -444,7 +442,6 @@ const TeamDetailsWrapper = ({
                 type: "secondary",
                 label: "Delete fleet",
                 buttonVariant: "secondary",
-                iconName: "trash",
                 hideAction: !isGlobalAdmin,
                 onClick: toggleDeleteFleetModal,
                 gitOpsModeCompatible: true,

frontend/pages/admin/components/DownloadFileButtons/DownloadABMKey.tsx

@@ -70,7 +70,7 @@ export const DownloadABMKey = ({
       onClick={handleDownload}
     >
       <label htmlFor="download-key">
-        <Icon name="download" size="medium" />
+        <Icon name="download" />
         <span>Download public key</span>
       </label>
     </Button>

frontend/pages/admin/components/DownloadFileButtons/DownloadCSR.tsx

@@ -66,7 +66,7 @@ export const DownloadCSR = ({
       onClick={handleDownload}
     >
       <label htmlFor="request-csr">
-        <Icon name="download" size="medium" />
+        <Icon name="download" />
         <span>Download CSR</span>
       </label>
     </Button>

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -8,7 +8,7 @@
   &__button-wrap {
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   .ace-fleet {
@@ -104,7 +104,7 @@
         .manage-hosts__table-actions {
           display: flex;
           align-items: center;
-          gap: $pad-medium; // grouping secondary buttons
+          gap: $gap-table-elements; // grouping secondary buttons
         }
 
         .manage-hosts__filter-dropdowns {

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

@@ -17,7 +17,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $pad-small;
     margin-bottom: $pad-medium;
 
     // Scoped to a direct child so this doesn't also catch the plus icon

frontend/pages/hosts/details/DeviceUserPage/components/SettingUpYourDevice/SettingUpYourDevice.tsx

@@ -101,7 +101,6 @@ const SettingUpYourDevice = ({
               hideText="Details"
               caretPosition="after"
               onClick={() => setShowError(!showError)}
-              variant="secondary"
             />
             {showError && (
               <Textarea variant="code">{failedSoftware.error}</Textarea>

frontend/pages/hosts/details/cards/HostHeader/_styles.scss

@@ -73,6 +73,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 }

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -60,10 +60,7 @@
   &__action-button-container {
     display: flex;
     align-items: flex-start;
-  }
-
-  &__advanced-button {
-    margin-right: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   &__sandbox-info {

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

@@ -195,7 +195,6 @@ const CalendarEventsModal = forwardRef<
                 showText="Example payload"
                 caretPosition="after"
                 onClick={() => setShowExamplePayload(!showExamplePayload)}
-                variant="secondary"
               />
               {showExamplePayload && renderExamplePayload()}
             </>

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

@@ -293,7 +293,6 @@ const OtherWorkflowsModal = forwardRef<
             showText="Show example ticket"
             caretPosition="after"
             onClick={() => setShowExampleTicket(!showExampleTicket)}
-            variant="secondary"
           />
           {showExampleTicket && (
             <ExampleTicket
@@ -377,7 +376,6 @@ const OtherWorkflowsModal = forwardRef<
               showText="Example payload"
               caretPosition="after"
               onClick={() => setShowExamplePayload(!showExamplePayload)}
-              variant="secondary"
             />
             {showExamplePayload && <ExamplePayload />}
           </>

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

@@ -32,7 +32,7 @@
   &__filter-dropdowns {
     display: flex;
     align-items: center;
-    gap: $pad-medium;
+    gap: $gap-table-elements;
   }
 
   &__platform-dropdown {

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -42,7 +42,7 @@
 
   &__action-button-container {
     display: flex;
-    gap: $pad-small;
+    gap: $gap-action-elements;
   }
 
   .queries-table {

frontend/pages/queries/details/QueryDetailsPage/_styles.scss

@@ -20,7 +20,7 @@
     display: flex;
     justify-content: flex-end;
     min-width: max-content;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
   }
 
   &__query-name {

frontend/pages/queries/edit/components/EditQueryForm/EditQueryForm.tsx

@@ -538,7 +538,6 @@ const EditQueryForm = ({
           hideText="Hide SQL"
           showText="Show SQL"
           onClick={() => setShowQueryEditor(!showQueryEditor)}
-          variant="secondary"
         />
       )}
       {showQueryEditor && (
@@ -782,7 +781,6 @@ const EditQueryForm = ({
                 showText="Advanced options"
                 caretPosition="after"
                 onClick={toggleAdvancedOptions}
-                variant="secondary"
               />
               {showAdvancedOptions && (
                 <>

frontend/pages/queries/edit/components/SaveNewQueryModal/SaveNewQueryModal.tsx

@@ -339,7 +339,6 @@ const SaveNewQueryModal = ({
           showText="Advanced options"
           caretPosition="after"
           onClick={toggleAdvancedOptions}
-          variant="secondary"
         />
         {showAdvancedOptions && (
           <>

frontend/pages/queries/live/LiveQueryPage/_styles.scss

@@ -52,13 +52,9 @@
     margin-top: 30px;
     display: flex;
     align-items: center;
-
-    button:not(:first-of-type) {
-      margin-left: 16px;
-    }
+    gap: $gap-action-elements;
   }
   &__targets-total-count {
-    margin-left: 16px;
     font-size: $x-small;
     display: flex;
     align-items: center;

frontend/styles/global/_global.scss

@@ -138,12 +138,12 @@ form,
   .button-wrap {
     margin: 0;
     display: flex;
-    gap: $pad-medium;
+    gap: $gap-action-elements;
 
     &--center {
       margin: 0;
       display: flex;
-      gap: $pad-medium;
+      gap: $gap-action-elements;
       justify-content: center;
     }
   }

frontend/styles/var/padding.scss

@@ -19,7 +19,8 @@ $gap-page-component-inner-responsiveness: $pad-smedium;
 $gap-form: $pad-large;
 $gap-form-component: $pad-small;
 $gap-data-sets: $pad-medium;
-$gap-table-elements: $pad-medium;
+$gap-table-elements: $pad-small;
+$gap-action-elements: $pad-small;
 $gap-modal-component: $pad-large;
 $gap-icon-text: $pad-small;
 $table-cell-padding: $pad-large;