Add probability picker on Opportunity card (#747)

* Fix padding

* Update date input component

* Add Probability picker component on opportunity card

* lint

front/src/modules/ui/board/components/Board.tsx

@@ -6,6 +6,7 @@ export const StyledBoard = styled.div`
   display: flex;
   flex-direction: row;
   overflow-x: auto;
+  padding-left: ${({ theme }) => theme.spacing(2)};
   width: 100%;
 `;
 

front/src/modules/ui/editable-field/components/EditableField.tsx

@@ -59,7 +59,9 @@ type OwnProps = {
   label?: string;
   labelFixedWidth?: number;
   useEditButton?: boolean;
-  editModeContent: React.ReactNode;
+  editModeContent?: React.ReactNode;
+  displayModeContentOnly?: boolean;
+  disableHoverEffect?: boolean;
   displayModeContent: React.ReactNode;
   parentHotkeyScope?: HotkeyScope;
   customEditHotkeyScope?: HotkeyScope;
@@ -77,7 +79,9 @@ export function EditableField({
   displayModeContent,
   parentHotkeyScope,
   customEditHotkeyScope,
+  disableHoverEffect,
   isDisplayModeContentEmpty,
+  displayModeContentOnly,
   onSubmit,
   onCancel,
 }: OwnProps) {
@@ -115,12 +119,13 @@ export function EditableField({
           <StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
         )}
       </StyledLabelAndIconContainer>
-      {isFieldInEditMode ? (
+      {isFieldInEditMode && !displayModeContentOnly ? (
         <EditableFieldEditMode onSubmit={onSubmit} onCancel={onCancel}>
           {editModeContent}
         </EditableFieldEditMode>
       ) : (
         <EditableFieldDisplayMode
+          disableHoverEffect={disableHoverEffect}
           disableClick={useEditButton}
           onClick={handleDisplayModeClick}
           isDisplayModeContentEmpty={isDisplayModeContentEmpty}

front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx

@@ -2,7 +2,10 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 export const EditableFieldNormalModeOuterContainer = styled.div<
-  Pick<OwnProps, 'disableClick' | 'isDisplayModeContentEmpty'>
+  Pick<
+    OwnProps,
+    'disableClick' | 'isDisplayModeContentEmpty' | 'disableHoverEffect'
+  >
 >`
   align-items: center;
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -37,7 +40,8 @@ export const EditableFieldNormalModeOuterContainer = styled.div<
         cursor: pointer;
 
         &:hover {
-          background-color: ${props.theme.background.transparent.light};
+          background-color: ${!props.disableHoverEffect &&
+          props.theme.background.transparent.light};
         }
       `;
     }
@@ -62,6 +66,7 @@ type OwnProps = {
   disableClick?: boolean;
   onClick?: () => void;
   isDisplayModeContentEmpty?: boolean;
+  disableHoverEffect?: boolean;
 };
 
 export function EditableFieldDisplayMode({
@@ -69,12 +74,14 @@ export function EditableFieldDisplayMode({
   disableClick,
   onClick,
   isDisplayModeContentEmpty,
+  disableHoverEffect,
 }: React.PropsWithChildren<OwnProps>) {
   return (
     <EditableFieldNormalModeOuterContainer
       onClick={disableClick ? undefined : onClick}
       disableClick={disableClick}
       isDisplayModeContentEmpty={isDisplayModeContentEmpty}
+      disableHoverEffect={disableHoverEffect}
     >
       <EditableFieldNormalModeInnerContainer>
         {children}