Feat: Navbar customization (#17728)

Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -1,16 +1,33 @@
 import { useLingui } from '@lingui/react/macro';
-import { LightButton } from 'twenty-ui/input';
+import { Button, LightButton } from 'twenty-ui/input';
 
 type CancelButtonProps = {
   onCancel?: () => void;
   disabled?: boolean;
+  inverted?: boolean;
 };
 
 export const CancelButton = ({
   onCancel,
   disabled = false,
+  inverted = false,
 }: CancelButtonProps) => {
   const { t } = useLingui();
+
+  if (inverted) {
+    return (
+      <Button
+        title={t`Cancel`}
+        variant="tertiary"
+        accent="default"
+        inverted
+        size="small"
+        onClick={onCancel}
+        disabled={disabled}
+      />
+    );
+  }
+
   return (
     <LightButton
       title={t`Cancel`}

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import type { IconComponent } from 'twenty-ui/display';
 
 import { CancelButton } from './CancelButton';
 import { SaveButton } from './SaveButton';
@@ -15,6 +16,8 @@ type SaveAndCancelButtonsProps = {
   onCancel?: () => void;
   isSaveDisabled?: boolean;
   isCancelDisabled?: boolean;
+  inverted?: boolean;
+  saveIcon?: IconComponent;
 };
 
 export const SaveAndCancelButtons = ({
@@ -23,14 +26,22 @@ export const SaveAndCancelButtons = ({
   onCancel,
   isSaveDisabled,
   isCancelDisabled,
+  inverted = false,
+  saveIcon,
 }: SaveAndCancelButtonsProps) => {
   return (
     <StyledContainer>
-      <CancelButton onCancel={onCancel} disabled={isCancelDisabled} />
+      <CancelButton
+        onCancel={onCancel}
+        disabled={isCancelDisabled}
+        inverted={inverted}
+      />
       <SaveButton
         onSave={onSave}
         disabled={isSaveDisabled}
         isLoading={isLoading}
+        inverted={inverted}
+        saveIcon={saveIcon}
       />
     </StyledContainer>
   );

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -1,28 +1,33 @@
 import { t } from '@lingui/core/macro';
-import { IconDeviceFloppy } from 'twenty-ui/display';
+import { type IconComponent, IconDeviceFloppy } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 
 type SaveButtonProps = {
   onSave?: () => void;
   disabled?: boolean;
   isLoading?: boolean;
+  inverted?: boolean;
+  saveIcon?: IconComponent;
 };
 
 export const SaveButton = ({
   onSave,
   disabled,
   isLoading,
+  inverted = false,
+  saveIcon,
 }: SaveButtonProps) => {
   return (
     <Button
       title={t`Save`}
-      variant="primary"
+      variant={inverted ? 'secondary' : 'primary'}
       size="small"
-      accent="blue"
+      accent={inverted ? 'default' : 'blue'}
+      inverted={inverted}
       disabled={disabled}
       onClick={onSave}
       type="submit"
-      Icon={IconDeviceFloppy}
+      Icon={saveIcon ?? IconDeviceFloppy}
       isLoading={isLoading}
     />
   );