Fixes 6223 graph button indistinguishable (#6223). Replaces Button wi…

…th FloatingButton (#6234) fixes #6223 --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Jul 12, 2024 · f68bd1b · f68bd1b
1 parent 11da718
commit f68bd1b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/...t/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx b/...t/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
@@ -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
@@ -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}