838 design adjustments on table kanban and inline fields (#11654)

Closes [#838]( https://github.com/twentyhq/core-team-issues/issues/838)
Design adjustments on table kanban and inline fields.

The table row border selection will be done later since it is harder
than initially thought.

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;
 

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 = () => {
           )}
         </StyledLabelAndIconContainer>
       )}
-      <StyledValueContainer>
+      <StyledValueContainer readonly={readonly ?? false}>
         <RecordInlineCellValue />
       </StyledValueContainer>
     </StyledInlineCellBaseContainer>

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}

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 (