From f68bd1be66df3339e1b16fee39fa616e29a73d1b Mon Sep 17 00:00:00 2001
From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com>
Date: Fri, 12 Jul 2024 23:59:15 +0530
Subject: [PATCH] Fixes 6223 graph button indistinguishable (#6223). Replaces
 Button with FloatingButton (#6234)

fixes #6223

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/SettingsDataModelOverview.tsx      |  1 -
 .../objects/SettingsObjectCoverImage.tsx          |  6 +++---
 .../ui/input/button/components/FloatingButton.tsx | 15 +++++++++++++--
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx
index dd098c46bb79..e5bd42d0b4e3 100644
--- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx
+++ b/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"
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
index 25886edaa279..23be86ff8ca0 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectCoverImage.tsx
+++ b/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>
   );
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
index 7ccecc0ffe6f..4f0dbcaf6c35 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
+++ b/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}