diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index 519770343..f0c4c614c 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -25,16 +25,16 @@ import styled from '@emotion/styled'; import { useContext, useState } from 'react'; import { InView, useInView } from 'react-intersection-observer'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { AnimatedEaseInOut } from 'twenty-ui/utilities'; import { useDebouncedCallback } from 'use-debounce'; import { useNavigateApp } from '~/hooks/useNavigateApp'; -import { AnimatedEaseInOut } from 'twenty-ui/utilities'; const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => selected ? theme.accent.quaternary : theme.background.secondary}; border: 1px solid ${({ theme, selected }) => - selected ? theme.accent.secondary : theme.border.color.medium}; + selected ? theme.adaptiveColors.blue3 : theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.sm}; box-shadow: ${({ theme }) => theme.boxShadow.light}; color: ${({ theme }) => theme.font.color.primary}; @@ -43,7 +43,7 @@ const StyledBoardCard = styled.div<{ selected: boolean }>` selected && theme.accent.tertiary}; border: 1px solid ${({ theme, selected }) => - selected ? theme.accent.primary : theme.border.color.medium}; + selected ? theme.adaptiveColors.blue3 : theme.border.color.strong}; } cursor: pointer; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index cd7e2d848..86ffd9fb1 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -41,11 +41,29 @@ const StyledLabelAndIconContainer = styled.div` height: 24px; `; -const StyledValueContainer = styled.div` +const StyledValueContainer = styled.div<{ readonly: boolean }>` + cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')}; display: flex; flex-grow: 1; min-width: 0; position: relative; + + &:hover { + ${({ readonly, theme }) => + readonly && + ` + outline: 1px solid ${theme.border.color.medium}; + border-radius: ${theme.border.radius.sm}; + + ${StyledIconContainer}, ${StyledLabelContainer} { + color: ${theme.font.color.secondary}; + } + + img { + opacity: 0.64; + } + `} + } `; const StyledLabelContainer = styled.div<{ width?: number }>` @@ -130,7 +148,7 @@ export const RecordInlineCellContainer = () => { )} )} - + diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx index 7e9593e32..45c646c89 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx @@ -12,6 +12,8 @@ const StyledBaseContainer = styled.div<{ fontColorExtraLight: string; fontColorMedium: string; backgroundColorTransparentSecondary: string; + backgroundColorSecondary: string; + fontColorSecondary: string; isReadOnly: boolean; borderColorBlue: string; }>` @@ -27,6 +29,32 @@ const StyledBaseContainer = styled.div<{ border-radius: ${BORDER_COMMON.radius.sm}; outline: 1px solid ${({ borderColorBlue }) => borderColorBlue}; } + + &:hover { + ${({ + isReadOnly, + fontColorMedium, + backgroundColorSecondary, + fontColorSecondary, + }) => + isReadOnly + ? ` + outline: 1px solid ${fontColorMedium}; + border-radius: 0px; + background-color: ${backgroundColorSecondary}; + + color: ${fontColorSecondary}; + + svg { + color: ${fontColorSecondary}; + } + + img { + opacity: 0.64; + } + ` + : ''} + } `; export const RecordTableCellBaseContainer = ({ @@ -68,7 +96,9 @@ export const RecordTableCellBaseContainer = ({ backgroundColorTransparentSecondary={ theme.background.transparent.secondary } + backgroundColorSecondary={theme.background.secondary} fontColorExtraLight={theme.font.color.extraLight} + fontColorSecondary={theme.font.color.secondary} fontColorMedium={theme.border.color.medium} borderColorBlue={theme.adaptiveColors.blue4} isReadOnly={isReadOnly ?? false} diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx index 20e590e07..881ef648c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx @@ -20,6 +20,7 @@ const StyledTd = styled.td<{ border-bottom: 1px solid ${({ borderColor, hasBottomBorder, isDragging }) => hasBottomBorder && !isDragging ? borderColor : 'transparent'}; + color: ${({ fontColor }) => fontColor}; border-right: ${({ borderColor, hasRightBorder, isDragging }) => hasRightBorder && !isDragging ? `1px solid ${borderColor}` : 'none'}; @@ -73,6 +74,7 @@ export const RecordTableTd = ({ : theme.background.primary; const borderColor = theme.border.color.light; + const fontColor = theme.font.color.primary; return (