fix(button): standardize icon alignment in buttons and update spacing guidelines, tokens update on some components

.agents/skills/qovery-ui/references/spacing-layout.md

@@ -93,15 +93,7 @@ Example: a card with `rounded-2xl` (16px) and `p-2` (8px) padding → the inner
 Geometric centering often looks off. Adjust for perceived visual weight.
 
 - **Play triangle in a circle:** nudge right — the triangle's visual center is not its geometric center.
-- **Button with icon + text:** use slightly less padding on the icon side. Rule of thumb: icon-side padding = text-side padding − 2px.
-
-```tsx
-<button className="flex items-center gap-2 pl-4 pr-3.5">
-  <span>Continue</span>
-  <ArrowRightIcon />
-</button>
-```
-
+- **Button with icon + text:** use `<Button>`. Do not add manual icon margins or custom gaps inside buttons.
 - **Asymmetric icons** (stars, arrows, carets): best fixed in the SVG directly. Fallback: `margin-left: 1px` or similar.
 - **Heavy glyph next to a light one:** optical baseline shift.
 

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/general.tsx

@@ -90,7 +90,7 @@ function ClusterGeneralSettingsForm({ cluster }: { cluster: Cluster }) {
           <SettingsHeading title="General settings" />
           <div className="max-w-content-with-navigation-left">
             {cluster.cloud_provider !== 'ON_PREMISE' && (
-              <Callout.Root color="sky" className="mb-4">
+              <Callout.Root color="sky" className="mb-4 items-start">
                 <Callout.Icon>
                   <Icon iconName="circle-exclamation" iconStyle="regular" />
                 </Callout.Icon>

apps/console/src/routes/_authenticated/organization/$organizationId/clusters.tsx

@@ -24,7 +24,9 @@ const Clusters = () => {
           to="/organization/$organizationId/cluster/new"
           params={{ organizationId }}
           as="button"
-          className="items-center gap-2"
+          className="items-center"
+          color="neutral"
+          variant="outline"
           size="md"
         >
           <Icon iconName="circle-plus" iconStyle="regular" />
@@ -57,13 +59,7 @@ function RouteComponent() {
         <div className="flex flex-col gap-6">
           <div className="flex justify-between">
             <Heading>Clusters</Heading>
-            <Link
-              to="/organization/$organizationId/cluster/new"
-              params={{ organizationId }}
-              as="button"
-              className="gap-2"
-              size="md"
-            >
+            <Link to="/organization/$organizationId/cluster/new" params={{ organizationId }} as="button" size="md">
               <Icon iconName="circle-plus" iconStyle="regular" />
               Add cluster
             </Link>

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/route.tsx

@@ -117,7 +117,6 @@ function RouteComponent() {
               <Link
                 as="button"
                 variant="outline"
-                className="gap-2"
                 to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/new"
                 params={{ organizationId, projectId, environmentId }}
               >

apps/console/src/routes/login/index.tsx

@@ -381,14 +381,14 @@ function RouteComponent() {
                         variant="outline"
                         color="neutral"
                         size="lg"
-                        className="relative w-full justify-center"
+                        className="relative w-full justify-center gap-x-2"
                         onClick={() => onClickAuthLogin(AuthEnum.GOOGLE_SSO)}
                         loading={loading?.provider === AuthEnum.GOOGLE_SSO ? loading.active : false}
                       >
                         <Icon
                           width="16"
                           className={clsx(
-                            'mr-2 text-neutral-subtle',
+                            'text-neutral-subtle',
                             loading?.provider === AuthEnum.GOOGLE_SSO && 'opacity-0'
                           )}
                           name={IconEnum.GOOGLE}
@@ -401,16 +401,13 @@ function RouteComponent() {
                         variant="solid"
                         color="neutral"
                         size="lg"
-                        className="relative w-full justify-center"
+                        className="relative w-full justify-center gap-x-2"
                         onClick={() => onClickAuthLogin(AuthEnum.GITHUB)}
                         loading={loading?.provider === AuthEnum.GITHUB ? loading.active : false}
                       >
                         <Icon
                           width="16"
-                          className={clsx(
-                            'mr-2 text-neutralInvert',
-                            loading?.provider === AuthEnum.GITHUB && 'opacity-0'
-                          )}
+                          className={clsx('text-neutralInvert', loading?.provider === AuthEnum.GITHUB && 'opacity-0')}
                           fill="currentColor"
                           name={IconEnum.GITHUB_WHITE}
                         />
@@ -429,7 +426,7 @@ function RouteComponent() {
                           setAuth0Error(null)
                         }}
                       >
-                        <Icon iconName="lock" className="mr-1.5 text-sm text-neutral-subtle" />
+                        <Icon iconName="lock" className="text-sm text-neutral-subtle" />
                         Continue with SAML SSO
                         <LastUsedBadge visible={lastUsedLoginAtPageLoad === 'saml_sso'} />
                       </Button>

libs/domains/audit-logs/feature/src/lib/audit-logs/audit-logs.tsx

@@ -329,7 +329,7 @@ export function AuditLogs({
               <div className="flex h-14 items-center justify-center border-b border-neutral">
                 <p className="flex items-center gap-3 text-sm text-neutral">
                   {auditLogsRetentionInDays} days limit reached.
-                  <Button type="button" variant="outline" className="gap-1.5" onClick={() => showIntercom()}>
+                  <Button type="button" variant="outline" onClick={() => showIntercom()}>
                     <span>Upgrade plan</span>
                     <Icon iconName="arrow-up-right-from-square" className="text-neutral" />
                   </Button>

libs/domains/audit-logs/feature/src/lib/filter-section/filter-section.tsx

@@ -183,7 +183,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
               variant="surface"
               color="neutral"
               size="xs"
-              className="pl-9.5 justify-center gap-1.5 active:scale-[1]"
+              className="pl-9.5 justify-center active:scale-[1]"
               key={badge.key}
             >
               {`${badge.displayedName}: `}
@@ -225,7 +225,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
                     variant="surface"
                     color="neutral"
                     size="xs"
-                    className={clsx('justify-center gap-1.5 active:scale-[1]', {
+                    className={clsx('justify-center active:scale-[1]', {
                       'rounded-l-full rounded-r-none border-r-0 pr-4': isFirst && !isLast,
                       'rounded-full': isFirst && isLast,
                       'rounded-l-none rounded-r-full border-l-0 pl-4': isLast && !isFirst,
@@ -269,7 +269,7 @@ export function FilterSection({ clearFilter, queryParams, targetTypeSelectedItem
 
       {/* RIGHT: Button stays fixed at top-right */}
       {badges.filter((b) => b.isDeletable).length > 0 && (
-        <Button className="gap-2" size="xs" color="neutral" variant="surface" onClick={clearFilter}>
+        <Button size="xs" color="neutral" variant="surface" onClick={clearFilter}>
           Clear all filters
           <Icon iconName="xmark" iconStyle="regular" />
         </Button>

libs/domains/cloud-providers/feature/src/lib/cluster-scw-control-plane-feature/cluster-scw-control-plane-feature.tsx

@@ -71,6 +71,7 @@ export function ClusterSCWControlPlaneFeature({ production }: ClusterSCWControlP
               <ExternalLink
                 size="xs"
                 href="https://www.scaleway.com/en/docs/kubernetes/reference-content/kubernetes-control-plane-offers/"
+                className="text-infoInvert"
               >
                 Scaleway documentation
               </ExternalLink>

libs/domains/clusters/feature/src/lib/cluster-access-modal/__snapshots__/cluster-access-modal.spec.tsx.snap

@@ -70,7 +70,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               qovery cluster kubeconfig --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
@@ -108,7 +108,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               export KUBECONFIG=&lt;path&gt;
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
@@ -141,7 +141,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
@@ -163,7 +163,7 @@ exports[`ClusterAccessModal should match snapshot 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
@@ -251,7 +251,7 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               qovery cluster debug-pod --cluster-id 000
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
@@ -284,7 +284,7 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               kubectl
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy
@@ -306,7 +306,7 @@ exports[`ClusterAccessModal should match snapshot with SELF_MANAGED type 1`] = `
               k9s
             </div>
             <button
-              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer gap-2 font-sans font-medium"
+              class="inline-flex items-center shrink-0 transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-ssm h-7 px-2 gap-x-1 rounded bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral cursor-pointer font-sans font-medium"
               type="button"
             >
               Copy