fix plus icon display on table

Signed-off-by: Theo Macron <theo.macron0315@gmail.com>

Author: Akctarus

front/src/modules/timesStops/TimeCell.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useReducer, useRef, type ChangeEvent } from 'react';
 
+import { Plus } from '@osrd-project/ui-icons';
 import type { CellContext } from '@tanstack/react-table';
 
 import type { TimesStopsRowNew } from './types';
@@ -453,6 +454,10 @@ const TimeCell = ({
     dispatch({ type: 'SECTION_CLICKED', section });
   };
 
+  const handlePlaceholderClick = () => {
+    inputRef.current?.focus();
+  };
+
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     const position = e.currentTarget.selectionStart || 0;
     const section = getSectionFromPosition(position);
@@ -479,11 +484,12 @@ const TimeCell = ({
   }, [state.hours, state.minutes, state.seconds, onChange]);
 
   return (
-    <div className="time-cell">
+    <div className={`time-cell ${state.empty ? 'time-cell--empty' : ''}`}>
       <input
         ref={inputRef}
         value={state.empty ? 'hh:mm:ss' : formatDisplay(state)}
         className="time-cell__input"
+        style={{ pointerEvents: state.empty ? 'none' : 'auto' }}
         onChange={(e) => e.preventDefault()}
         onKeyDown={handleKeyDown}
         onClick={handleClick}
@@ -492,7 +498,7 @@ const TimeCell = ({
         {...userProps}
       />
 
-      {!state.empty && (
+      {!state.empty ? (
         <div className="time-cell__display" aria-hidden="true">
           <span className={state.hours.includes('h') ? 'placeholder' : 'value'}>{state.hours}</span>
           <span className="separator">:</span>
@@ -504,9 +510,16 @@ const TimeCell = ({
             {state.seconds}
           </span>
         </div>
+      ) : (
+        <div
+          className="time-cell__placeholder"
+          onClick={handlePlaceholderClick}
+          role="button"
+          tabIndex={-1}
+        >
+          <Plus />
+        </div>
       )}
-
-      {state.empty && <span className="time-cell__placeholder">+</span>}
     </div>
   );
 };

front/src/modules/timesStops/styles/_timeCell.scss

@@ -3,10 +3,9 @@
   display: inline-block;
   font-size: 14px;
   font-weight: 400;
-  width: 84px;
-  height: 40px;
   line-height: 20px;
   font-family: inherit, monospace;
+  border-radius: 4px;
 
   &:hover {
     background-color: rgba(255, 255, 255, 0.5);
@@ -17,8 +16,9 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 100%;
-    height: 100%;
+    width: 84px;
+    height: 40px;
+    padding-bottom: 11px;
     transform: translate(-50%, -50%);
     text-align: center;
   }
@@ -39,22 +39,33 @@
     color: transparent;
     caret-color: #0066cc;
     cursor: pointer;
+    &:focus {
+      outline: none;
+    }
   }
 
   &__placeholder {
-    position: absolute;
-    top: 50%;
-    left: 50%;
+    position: relative;
+    width: 24px;
+    height: 24px;
 
-    transform: translate(-50%, -50%);
     color: var(--primary40);
     pointer-events: auto;
     cursor: pointer;
     transition: color 0.2s;
   }
 
-  &:hover {
-    color: var(--blackAlpha100);
+  &:hover:not(:focus-within) {
     background-color: var(--primary5);
+    .time-cell__placeholder {
+      color: var(--primary80);
+    }
+  }
+
+  &.time-cell--empty:active {
+    background-color: var(--primary60);
+    .time-cell__placeholder {
+      color: var(--white100);
+    }
   }
 }