Some code review fixes

components/Timeline.module.css

@@ -1,6 +1,5 @@
 .wrapper {
   position: relative;
-  height: 100%;
 }
 
 .line {
@@ -22,7 +21,6 @@
 
 .timelineSection {
   width: 100%;
-  height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;

components/Timeline.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 
 import styles from "./Timeline.module.css";
 
@@ -111,30 +111,19 @@ function TimelineSection({
   textWidth,
   gap,
 }: TimelineSectionProps) {
-  const [onHover, setHover] = useState(false);
-
-  const handleMouseEnter = () => {
-    setHover(true);
-  };
-  const handleMouseLeave = () => setHover(false);
-
   return (
     <div className={styles.timelineSection} style={{ gap: gap }}>
       <div
-        className={onHover ? `${styles.time} ${styles.timeHover}` : styles.time}
+        className={styles.time}
         style={{
           width: timeWidth,
           marginLeft: (width - 2 * gap - outerCircleWidth) / 2 - timeWidth,
         }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
       >
         {isTimeUppercase ? datum.time.toUpperCase() : datum.time}
       </div>
       <div
         className={styles.circle}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         style={{
           width: outerCircleWidth,
           height: outerCircleWidth,
@@ -151,13 +140,11 @@ function TimelineSection({
         />
       </div>
       <div
-        className={onHover ? `${styles.text} ${styles.textHover}` : styles.text}
+        className={styles.text}
         style={{
           width: textWidth,
           marginRight: (width - 2 * gap - outerCircleWidth) / 2 - textWidth,
         }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
       >
         {datum.text}
       </div>