Highlight rows on focus

frontend/src/components/Cell.tsx

@@ -11,13 +11,17 @@ export const Cell = ({
   comments,
   entryId,
   onCellUpdate,
+  onFocusRow,
+  onBlurRow,
 }: {
   topic: IssueActivityPair;
   date: Date;
   hours: number;
   comments: string;
   entryId: number;
   onCellUpdate: (timeEntry: TimeEntry) => void;
+  onFocusRow: () => void;
+  onBlurRow: () => void;
 }) => {
   const [showCommentArea, setShowCommentArea] = useState<boolean>(false);
   const [areaComments, setAreaComments] = useState<string>(null);
@@ -90,6 +94,8 @@ export const Cell = ({
           )}`}
           onChange={onCellChange}
           onKeyUp={onDeleteCellEntry}
+          onFocus={onFocusRow}
+          onBlur={onBlurRow}
           className="cell"
           defaultValue={hours === 0 ? "" : hours}
         />
@@ -98,6 +104,7 @@ export const Cell = ({
             className={comments === "" ? "comment comment-unfilled" : "comment"}
             type="button"
             title="Toggle comment area"
+            onFocus={onFocusRow}
             onClick={() => onCommentButtonClick()}
           ></button>
         )}
@@ -113,6 +120,7 @@ export const Cell = ({
               rows={2}
               maxLength={1000}
               onKeyUp={onEscapeArea}
+              onFocus={onFocusRow}
               onBlur={() => setShowCommentArea(false)}
               defaultValue={areaComments !== null ? areaComments : comments}
             />

frontend/src/components/Row.tsx

@@ -32,9 +32,20 @@ export const Row = ({
 
   isFav: boolean;
 }) => {
+  // State var for setting the className of the row depending on focus
+  const [rowClass, setRowClass] = React.useState("row");
+
+  const onFocusRow = () => {
+    setRowClass("row row-focused");
+  };
+
+  const onBlurRow = () => {
+    setRowClass("row");
+  };
+
   return (
     <>
-      <div className="row">
+      <div className={rowClass}>
         <div className="col-1 cell-container grip-container">
           {isFav ? (
             <img src={grip} className="grip" alt="grip to change row sorting" />
@@ -96,6 +107,8 @@ export const Row = ({
               hours={rowHours[i]}
               comments={rowEntries[i] ? rowEntries[i].comments : ""}
               entryId={rowEntries[i] ? rowEntries[i].id : 0}
+              onFocusRow={onFocusRow}
+              onBlurRow={onBlurRow}
             />
           );
         })}
@@ -107,6 +120,8 @@ export const Row = ({
             className="cell not-outline"
             value={getRowSum(topic)}
             readOnly
+            onFocus={onFocusRow}
+            onBlur={onBlurRow}
           />
         </div>
       </div>

frontend/src/index.css

@@ -385,7 +385,7 @@ Other button classes are defined further down together with other classes for th
 }
 
 .star-button {
-  background-color: hsl(0deg 0% 97%);
+  background-color: transparent;
   border: none;
   display: flex;
 }
@@ -635,3 +635,7 @@ Other button classes are defined further down together with other classes for th
   right: 3px;
   width: 0.7rem;
 }
+
+.row-focused {
+  background-color: hsl(186deg 30% 94%);
+}