Design fixes (#696)

* Design fixes

* Fix design

* unused code

* Fix tests

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -27,6 +27,7 @@ type OwnProps = {
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   editHotkeyScope?: HotkeyScope;
+  transparent?: boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
 };
@@ -37,6 +38,7 @@ export function EditableCell({
   editModeContent,
   nonEditModeContent,
   editHotkeyScope,
+  transparent = false,
   onSubmit,
   onCancel,
 }: OwnProps) {
@@ -48,6 +50,7 @@ export function EditableCell({
     <CellBaseContainer>
       {isCurrentCellInEditMode ? (
         <EditableCellEditMode
+          transparent={transparent}
           editModeHorizontalAlign={editModeHorizontalAlign}
           editModeVerticalPosition={editModeVerticalPosition}
           onSubmit={onSubmit}

front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx

@@ -19,7 +19,7 @@ export const EditableCellNormalModeOuterContainer = styled.div<Props>`
   ${(props) =>
     props.softFocus
       ? `background: ${props.theme.background.transparent.secondary};
-         border-radius: ${props.theme.border.radius.md};
+         border-radius: ${props.theme.border.radius.sm};
          box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
       : ''}
 `;

front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx

@@ -7,8 +7,10 @@ import { useRegisterCloseCellHandlers } from '../hooks/useRegisterCloseCellHandl
 
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
   align-items: center;
-  border: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border: ${({ transparent, theme }) =>
+    transparent ? 'none' : `1px solid ${theme.border.color.light}`};
+  border-radius: ${({ transparent, theme }) =>
+    transparent ? 'none' : theme.border.radius.sm};
   display: flex;
   left: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
@@ -16,18 +18,19 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
   margin-top: -1px;
 
   min-height: 100%;
+  min-width: 100%;
   position: absolute;
+
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
-
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-  width: 100%;
   z-index: 1;
-  ${overlayBackground}
+  ${({ transparent }) => (transparent ? '' : overlayBackground)};
 `;
 
 type OwnProps = {
   children: ReactElement;
+  transparent?: boolean;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
   onOutsideClick?: () => void;
@@ -41,6 +44,7 @@ export function EditableCellEditMode({
   children,
   onCancel,
   onSubmit,
+  transparent = false,
 }: OwnProps) {
   const wrapperRef = useRef(null);
 
@@ -48,6 +52,7 @@ export function EditableCellEditMode({
 
   return (
     <EditableCellEditModeContainer
+      transparent={transparent}
       data-testid="editable-cell-edit-mode-container"
       ref={wrapperRef}
       editModeHorizontalAlign={editModeHorizontalAlign}

front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx

@@ -9,7 +9,7 @@ import { useEditableCell } from '../hooks/useEditableCell';
 
 const EditableCellDateEditModeContainer = styled.div`
   margin-top: -1px;
-  width: inherit;
+  width: 100%;
 `;
 
 export type EditableDateProps = {