style(variables): UI fixes and adding missing tokens

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/variables.tsx

@@ -37,9 +37,9 @@ function RouteComponent() {
         </div>
       }
     >
-      <div className="container mx-auto mt-6 pb-10">
-        <Section className="gap-8">
-          <div className="flex flex-col gap-6">
+      <div className="container mx-auto flex min-h-page-container flex-col pt-6">
+        <Section className="min-h-0 flex-1 gap-8">
+          <div className="flex shrink-0 flex-col gap-6">
             <div className="flex justify-between">
               <Heading>Project variables</Heading>
               <ActionToolbar.Root className="flex">
@@ -66,7 +66,7 @@ function RouteComponent() {
             </div>
             <hr className="w-full border-neutral" />
           </div>
-          <div className="flex flex-col gap-8">
+          <div className="flex min-h-0 flex-1 flex-col gap-8">
             <VariableList
               scope="PROJECT"
               projectId={projectId}

libs/domains/variables/feature/src/lib/create-update-variable-modal/create-update-variable-modal.tsx

@@ -330,9 +330,9 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
               <Icon
                 iconName="arrow-turn-down-right"
                 iconStyle="regular"
-                className="ml-1 mr-2 text-2xs text-neutral-300"
+                className="ml-1 mr-2 text-2xs text-neutral-disabled"
               />
-              <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-teal-500 px-1 text-2xs font-bold text-neutral-50">
+              <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-surface-info-component px-1 text-2xs font-bold text-info">
                 ALIAS
               </span>
             </div>
@@ -362,9 +362,9 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
             <Icon
               iconName="arrow-turn-down-right"
               iconStyle="regular"
-              className="ml-1 mr-2 text-2xs text-neutral-300"
+              className="ml-1 mr-2 text-2xs text-neutral-subtle"
             />
-            <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-brand-500 px-1 text-2xs font-bold text-neutral-50">
+            <span className="mr-3 inline-flex h-4 items-center rounded-sm bg-surface-brand-component px-1 text-2xs font-bold text-brand">
               OVERRIDE
             </span>
           </div>
@@ -440,7 +440,7 @@ export function CreateUpdateVariableModal(props: CreateUpdateVariableModalProps)
                 rightElement={
                   <Tooltip content="Scope can't be changed. Re-create the var with the right scope." side="left">
                     <div>
-                      <Icon iconName="circle-info" className="text-sm text-neutral-350" />
+                      <Icon iconName="circle-info" className="text-sm text-neutral-subtle" />
                     </div>
                   </Tooltip>
                 }

libs/domains/variables/feature/src/lib/output-variables/output-variables.tsx

@@ -62,11 +62,11 @@ export function OutputVariables({ serviceId, serviceType, className, ...props }:
           const { key, description } = info.row.original
           return (
             <div className="flex items-center gap-1">
-              <span className="text-sm text-neutral-350">{key}</span>{' '}
+              <span className="text-sm text-neutral-subtle">{key}</span>{' '}
               {description && (
                 <Tooltip content={description}>
                   <span>
-                    <Icon iconName="circle-info" className="text-neutral-350" />
+                    <Icon iconName="circle-info" className="text-neutral-subtle" />
                   </span>
                 </Tooltip>
               )}
@@ -103,9 +103,9 @@ export function OutputVariables({ serviceId, serviceType, className, ...props }:
   if (variables.length === 0) {
     return (
       <div className="px-3 py-8 text-center">
-        <Icon iconName="wave-pulse" className="text-neutral-350" />
-        <p className="mt-1 text-xs font-medium text-neutral-350">No output variables found</p>
-        <p className="mt-1 text-xs text-neutral-350">
+        <Icon iconName="wave-pulse" className="text-neutral-subtle" />
+        <p className="mt-1 text-xs font-medium text-neutral-subtle">No output variables found</p>
+        <p className="mt-1 text-xs text-neutral-subtle">
           {scopeName} output variables will appear here after your first successful deployment.
         </p>
       </div>

libs/domains/variables/feature/src/lib/variable-list/variable-list-action-bar.tsx

@@ -1,5 +1,5 @@
-import { Button, Icon, Tooltip, useModalConfirmation } from '@qovery/shared/ui'
-import { pluralize, twMerge } from '@qovery/shared/util-js'
+import { StickyActionFormToaster, useModalConfirmation } from '@qovery/shared/ui'
+import { pluralize } from '@qovery/shared/util-js'
 import { useDeleteVariable } from '../hooks/use-delete-variable/use-delete-variable'
 import { type useVariables } from '../hooks/use-variables/use-variables'
 
@@ -9,17 +9,25 @@ export interface VariableListActionBarProps {
 }
 
 export function VariableListActionBar({ selectedRows = [], resetRowSelection }: VariableListActionBarProps) {
-  const hasSelection = Boolean(selectedRows.length)
+  const selectedCount = selectedRows.length
+  const hasSelection = Boolean(selectedCount)
 
   const { mutateAsync: deleteVariable } = useDeleteVariable()
 
   const { openModalConfirmation } = useModalConfirmation()
 
   const deletableVariables = selectedRows.filter(({ scope }) => scope !== 'BUILT_IN')
+  const deletableCount = deletableVariables.length
+  const description =
+    selectedCount === 0
+      ? ''
+      : `${selectedCount} selected ${pluralize(selectedCount, 'variable')}${
+          deletableCount === selectedCount ? '' : ` (${deletableCount} deletable)`
+        }`
 
   const handleDeleteAllVariables = () =>
     openModalConfirmation({
-      title: `Delete ${deletableVariables.length} ${pluralize(deletableVariables.length, 'variable')}`,
+      title: `Delete ${deletableCount} ${pluralize(deletableCount, 'variable')}`,
       name: 'these variables',
       confirmationMethod: 'action',
       action: async () => {
@@ -33,42 +41,15 @@ export function VariableListActionBar({ selectedRows = [], resetRowSelection }:
     })
 
   return (
-    <div className="sticky bottom-4">
-      <div className="relative">
-        <div
-          className={twMerge(
-            'absolute bottom-4 left-1/2 w-[448px] -translate-x-1/2',
-            hasSelection ? '' : 'h-0 overflow-hidden'
-          )}
-        >
-          <div
-            className={twMerge(
-              'flex h-[52px] items-center justify-between rounded-md border border-neutral bg-surface-neutralInvert-component p-2 pl-4 text-sm font-medium text-neutralInvert shadow-xl',
-              hasSelection ? 'animate-action-bar-fade-in' : 'animate-action-bar-fade-out'
-            )}
-          >
-            <span>
-              {selectedRows.length} selected {pluralize(selectedRows.length, 'variable')}
-            </span>
-            <div className="flex gap-3">
-              <Button type="button" variant="surface" color="neutral" size="md" onClick={() => resetRowSelection()}>
-                Deselect
-              </Button>
-              <Tooltip content="No deletable variables" disabled={deletableVariables.length !== 0}>
-                <Button
-                  color="red"
-                  size="md"
-                  className="items-center gap-2"
-                  onClick={() => handleDeleteAllVariables()}
-                  disabled={deletableVariables.length === 0}
-                >
-                  Delete selected <Icon iconName="trash" />
-                </Button>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <StickyActionFormToaster
+      visible={hasSelection}
+      description={description}
+      onReset={resetRowSelection}
+      submitButtonColor="red"
+      resetLabel="Deselect"
+      onSubmit={handleDeleteAllVariables}
+      submitLabel="Delete selected"
+      disabledValidation={deletableCount === 0}
+    />
   )
 }

libs/domains/variables/feature/src/lib/variable-list/variable-list.tsx

@@ -209,7 +209,7 @@ export function VariableList({
           return (
             <div className="flex flex-col justify-center gap-1">
               <div className="flex items-center gap-2">
-                <div className="truncate">
+                <div className="flex items-center truncate">
                   {variable.owned_by === ExternalServiceEnum.DOPPLER && (
                     <span
                       data-testid="doppler-tag"
@@ -219,17 +219,17 @@ export function VariableList({
                     </span>
                   )}
                   {variable.aliased_variable && (
-                    <span className="mr-2 inline-flex h-4 items-center rounded-sm bg-teal-500 px-1 text-2xs font-bold text-neutral-50">
+                    <span className="mr-2 inline-flex h-4 items-center rounded bg-surface-info-component px-1 text-2xs font-bold text-info">
                       ALIAS
                     </span>
                   )}
                   {variable.overridden_variable && (
-                    <span className="mr-2 inline-flex h-4 items-center rounded-sm bg-brand-500 px-1 text-2xs font-bold text-neutral-50">
+                    <span className="mr-2 inline-flex h-4 items-center rounded bg-surface-brand-component px-1 text-2xs font-bold text-brand">
                       OVERRIDE
                     </span>
                   )}
                   {variable.mount_path && (
-                    <span className="mr-2 inline-flex h-4 items-center rounded-sm bg-purple-500 px-1 text-2xs font-bold text-neutral-50">
+                    <span className="mr-2 inline-flex h-4 items-center rounded bg-surface-accent1-component px-1 text-2xs font-bold text-accent1">
                       FILE
                     </span>
                   )}
@@ -247,14 +247,14 @@ export function VariableList({
                 {variable.description && (
                   <Tooltip content={variable.description}>
                     <span>
-                      <Icon iconName="circle-info" iconStyle="regular" className="text-neutral-350" />
+                      <Icon iconName="circle-info" iconStyle="regular" className="text-neutral-subtle" />
                     </span>
                   </Tooltip>
                 )}
               </div>
               {(variable.aliased_variable || variable.overridden_variable) && (
-                <div className="flex flex-row gap-1 text-2xs text-neutral-350">
-                  <Icon iconName="arrow-turn-down-right" iconStyle="regular" className="text-2xs text-neutral-300" />
+                <div className="flex flex-row gap-1 text-2xs text-neutral-subtle">
+                  <Icon iconName="arrow-turn-down-right" iconStyle="regular" className="text-2xs text-neutral-subtle" />
                   {variable.aliased_variable && <span>{variable.aliased_variable.key}</span>}
                   {variable.overridden_variable && <span>{variable.overridden_variable.key}</span>}
                 </div>
@@ -275,8 +275,8 @@ export function VariableList({
           return (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger asChild>
-                <Button variant="outline" size="md" aria-label="actions">
-                  <Icon iconName="ellipsis-vertical" iconStyle="regular" className="mx-1" />
+                <Button variant="outline" size="md" aria-label="actions" className="w-8 justify-center">
+                  <Icon iconName="ellipsis-vertical" iconStyle="regular" />
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content>
@@ -352,11 +352,11 @@ export function VariableList({
             return (
               <div className="flex items-center gap-3" onClick={() => _onEditVariable(variable)}>
                 {variable.value !== null ? (
-                  <Icon className="ml-0.5 text-neutral-400" iconName="file-lines" />
+                  <Icon className="ml-0.5 text-neutral" iconName="file-lines" />
                 ) : (
-                  <Icon className="ml-0.5 text-neutral-400" iconName="file-lock" />
+                  <Icon className="ml-0.5 text-neutral" iconName="file-lock" />
                 )}
-                <span className="cursor-pointer text-sky-500 hover:underline">
+                <span className="cursor-pointer text-info hover:underline">
                   {getEnvironmentVariableFileMountPath(variable)}
                 </span>
               </div>
@@ -390,7 +390,7 @@ export function VariableList({
                 return (
                   <>
                     <span className="text-sm font-medium">{value ? upperCaseFirstLetter(value) : 'Null'}</span>
-                    <span className="text-xs text-neutral-350">{count}</span>
+                    <span className="text-xs text-neutral-subtle">{count}</span>
                   </>
                 )
               },
@@ -430,7 +430,7 @@ export function VariableList({
             return (
               <>
                 <span className="text-sm font-medium">{upperCaseFirstLetter(value)}</span>
-                <span className="text-xs text-neutral-350">{count}</span>
+                <span className="text-xs text-neutral-subtle">{count}</span>
               </>
             )
           },
@@ -510,7 +510,7 @@ export function VariableList({
       <EmptyState
         title="No variable found"
         description="You can create a variable from the button on the top"
-        className="mt-2 rounded-t-sm bg-white pt-10"
+        className="mt-2 rounded-t-sm bg-background pt-10"
       />
     )
   }

libs/pages/cluster/src/lib/feature/page-settings-resources-feature/page-settings-resources-feature.tsx

@@ -13,10 +13,7 @@ import {
   useEditCluster,
   useUpdateKarpenterPrivateFargate,
 } from '@qovery/domains/clusters/feature'
-import {
-  type ClusterResourcesEdit,
-  type SCWControlPlaneFeatureType,
-} from '@qovery/shared/interfaces'
+import { type ClusterResourcesEdit, type SCWControlPlaneFeatureType } from '@qovery/shared/interfaces'
 import { useModal } from '@qovery/shared/ui'
 import { PageSettingsResources } from '../../ui/page-settings-resources/page-settings-resources'
 

libs/shared/spotlight/feature/src/lib/spotlight/spotlight.tsx

@@ -263,7 +263,7 @@ export function Spotlight({ organizationId, open, onOpenChange }: SpotlightProps
       className="bg-surface-neutral-subtle"
       loop
     >
-      <div className="outline-neutral rounded-lg bg-surface-neutral outline outline-[1px]">
+      <div className="rounded-lg bg-surface-neutral outline outline-[1px] outline-neutral">
         <div className="flex w-full items-center border-b border-neutral pl-4 text-base text-neutral-subtle">
           <Icon iconName="magnifying-glass" iconStyle="regular" />
           <Command.Input

libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.spec.tsx

@@ -43,4 +43,11 @@ describe('StickyActionFormToaster', () => {
 
     expect(screen.getByTestId('submit-button')).toBeDisabled()
   })
+
+  it('should allow customizing submit button color', () => {
+    props.disabledValidation = false
+    renderWithProviders(<StickyActionFormToaster {...props} submitButtonColor="red" />)
+
+    expect(screen.getByTestId('submit-button')).toHaveClass('bg-surface-negative-solid')
+  })
 })

libs/shared/ui/src/lib/components/sticky-action-form-toaster/sticky-action-form-toaster.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import Button from '../button/button'
+import Button, { type ButtonProps } from '../button/button'
 
 export interface StickyActionFormToasterProps {
   visible?: boolean
@@ -8,6 +8,7 @@ export interface StickyActionFormToasterProps {
   resetLabel?: string
   onSubmit?: () => void
   submitLabel?: string
+  submitButtonColor?: ButtonProps['color']
   className?: string
   disabledValidation?: boolean
   loading?: boolean
@@ -22,6 +23,7 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
     onSubmit,
     className = '',
     visible = false,
+    submitButtonColor,
   } = props
 
   const [visibleState, setVisibleState] = useState(visible)
@@ -37,6 +39,8 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
     }
   }, [visible])
 
+  const submitButtonColorValue = submitButtonColor ?? 'green'
+
   return (
     <div className={`sticky bottom-4 flex justify-center ${className} ${!visibleState ? 'mb-[52px]' : ''}`}>
       <div
@@ -54,7 +58,7 @@ export function StickyActionFormToaster(props: StickyActionFormToasterProps) {
           )}
           {submitLabel && onSubmit && (
             <Button
-              color="green"
+              color={submitButtonColorValue}
               size="md"
               data-testid="submit-button"
               onClick={() => onSubmit()}

tailwind-workspace-preset.js

@@ -119,15 +119,18 @@ module.exports = {
       },
       spacing: {
         'right-help-sidebar': '22.5rem',
-        'navbar-height': '4rem',
+        'navbar-height': '2.75rem',
+        'breadcrumb-height': '4rem',
       },
       maxWidth: {
         'content-with-navigation-left': '44.5rem',
       },
       minHeight: {
-        'page-container': 'calc(100vh - theme(spacing.navbar-height))',
-        'page-container-wbanner': 'calc(100vh - theme(spacing.navbar-height) - 40px)',
-        'page-container-wprogressbar': 'calc(100vh - theme(spacing.navbar-height) - 6px)',
+        'page-container': 'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height))',
+        'page-container-wbanner':
+          'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 40px)',
+        'page-container-wprogressbar':
+          'calc(100vh - theme(spacing.navbar-height) - theme(spacing.breadcrumb-height) - 6px)',
       },
       fontFamily: {
         sans: ['Roboto', 'Helvetica', 'sans-serif'],