Fix hover on inline cell (#14022)

As per title, there was some left overs

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx

@@ -41,26 +41,16 @@ const StyledLabelAndIconContainer = styled.div`
   height: 24px;
 `;
 
-const StyledValueContainer = styled.div<{ readonly: boolean }>`
+const StyledValueContainer = styled.div<{
+  readonly: boolean;
+}>`
   display: flex;
   min-width: 0;
   position: relative;
   width: 100%;
 
-  &:hover {
-    ${({ readonly, theme }) =>
-      readonly &&
-      `
-      border-radius: ${theme.border.radius.sm};
-      
-      ${StyledIconContainer}, ${StyledLabelContainer} {
-        color: ${theme.font.color.secondary};
-      }
-      
-      img {
-        opacity: 0.64;
-      }
-    `}
+  &:hover .record-inline-cell-value-display {
+    opacity: 0;
   }
 `;
 
@@ -152,7 +142,7 @@ export const RecordInlineCellContainer = () => {
       )}
 
       <StyledValueContainer readonly={readonly ?? false} id={anchorId}>
-        <RecordInlineCellValue />
+        <RecordInlineCellValue className="record-inline-cell-value-display" />
       </StyledValueContainer>
     </StyledInlineCellBaseContainer>
   );

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx

@@ -13,12 +13,12 @@ import { useLingui } from '@lingui/react/macro';
 const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
   Pick<
     RecordInlineCellContextProps,
-    'isDisplayModeFixHeight' | 'disableHoverEffect'
+    'isDisplayModeFixHeight' | 'disableHoverEffect' | 'readonly'
   > & { isHovered?: boolean }
 >`
   outline: 1px solid
-    ${({ theme, isHovered }) =>
-      isHovered ? theme.border.color.medium : 'transparent'};
+    ${({ theme, isHovered, readonly }) =>
+      isHovered && readonly ? theme.border.color.medium : 'transparent'};
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
@@ -29,7 +29,7 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
   padding-right: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(1)};
   ${(props) => {
-    if (props.isHovered === true) {
+    if (props.isHovered === true && !props.readonly) {
       return css`
         background-color: ${!props.disableHoverEffect
           ? props.theme.background.transparent.light
@@ -72,13 +72,14 @@ export const RecordInlineCellDisplayMode = ({
 }>) => {
   const { t } = useLingui();
 
-  const { editModeContentOnly, showLabel, label, buttonIcon } =
+  const { editModeContentOnly, showLabel, label, buttonIcon, readonly } =
     useRecordInlineCellContext();
 
   const isDisplayModeContentEmpty = useIsFieldEmpty();
   const showEditButton =
     buttonIcon &&
     isHovered &&
+    !readonly &&
     !isDisplayModeContentEmpty &&
     !editModeContentOnly;
 
@@ -92,6 +93,7 @@ export const RecordInlineCellDisplayMode = ({
     <>
       <StyledRecordInlineCellNormalModeOuterContainer
         isHovered={isHovered}
+        readonly={readonly}
         onClick={onClick}
       >
         <StyledRecordInlineCellNormalModeInnerContainer>

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx

@@ -28,7 +28,13 @@ const StyledClickableContainer = styled.div<{
     `};
 `;
 
-export const RecordInlineCellValue = () => {
+type RecordInlineCellValueProps = {
+  className?: string;
+};
+
+export const RecordInlineCellValue = ({
+  className,
+}: RecordInlineCellValueProps) => {
   const { readonly, loading, isCentered } = useRecordInlineCellContext();
 
   if (loading === true) {
@@ -36,7 +42,11 @@ export const RecordInlineCellValue = () => {
   }
 
   return (
-    <StyledClickableContainer readonly={readonly} isCentered={isCentered}>
+    <StyledClickableContainer
+      readonly={readonly}
+      isCentered={isCentered}
+      className={className}
+    >
       <RecordInlineCellDisplayMode isHovered={false}>
         <FieldDisplay />
       </RecordInlineCellDisplayMode>