Fixes 6223 graph button indistinguishable (#6223). Replaces Button with FloatingButton (#6234)

fixes #6223

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx

@@ -203,7 +203,6 @@ export const SettingsDataModelOverview = () => {
         proOptions={{ hideAttribution: true }}
       >
         <Background />
-
         <IconButtonGroup
           className="react-flow__panel react-flow__controls bottom left"
           size="small"

packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { IconEye } from 'twenty-ui';
 
-import { Button } from '@/ui/input/button/components/Button';
+import { FloatingButton } from '@/ui/input/button/components/FloatingButton';
 import { Card } from '@/ui/layout/card/components/Card';
 
 import DarkCoverImage from '../assets/cover-dark.png';
@@ -30,12 +30,12 @@ export const SettingsObjectCoverImage = () => {
   return (
     <StyledCoverImageContainer>
       <StyledButtonContainer>
-        <Button
+        <FloatingButton
           Icon={IconEye}
           title="Visualize"
           size="small"
           to="/settings/objects/overview"
-        ></Button>
+        />
       </StyledButtonContainer>
     </StyledCoverImageContainer>
   );

packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 import { IconComponent } from 'twenty-ui';
 
 export type FloatingButtonSize = 'small' | 'medium';
@@ -16,12 +16,19 @@ export type FloatingButtonProps = {
   applyBlur?: boolean;
   disabled?: boolean;
   focus?: boolean;
+  to?: string;
 };
 
 const StyledButton = styled.button<
   Pick<
     FloatingButtonProps,
-    'size' | 'focus' | 'position' | 'applyBlur' | 'applyShadow' | 'position'
+    | 'size'
+    | 'focus'
+    | 'position'
+    | 'applyBlur'
+    | 'applyShadow'
+    | 'position'
+    | 'to'
   >
 >`
   align-items: center;
@@ -87,6 +94,7 @@ const StyledButton = styled.button<
   &:focus {
     outline: none;
   }
+  text-decoration: none;
 `;
 
 export const FloatingButton = ({
@@ -99,6 +107,7 @@ export const FloatingButton = ({
   applyShadow = true,
   disabled = false,
   focus = false,
+  to,
 }: FloatingButtonProps) => {
   const theme = useTheme();
   return (
@@ -110,6 +119,8 @@ export const FloatingButton = ({
       applyShadow={applyShadow}
       position={position}
       className={className}
+      to={to}
+      as={to ? Link : 'button'}
     >
       {Icon && <Icon size={theme.icon.size.sm} />}
       {title}