refactor: feedback from aleix and coderabbitai

Author: kemuru

src/lib/progress/steps/horizontal-bullet.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, useLayoutEffect, useState } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 import BulletCircle from "./bullet-circle";
 import { h2, small, mobileStyle } from "../../../styles/common-style";
+import { useElementSize } from "../../../hooks/useElementSize";
 
 interface IContainer {
   last?: boolean;
@@ -105,15 +106,8 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
   completed,
   ...props
 }) => {
-  const textRef = useRef<HTMLDivElement>(null);
-  const [paddingBottom, setPaddingBottom] = useState(0);
-
-  useLayoutEffect(() => {
-    if (textRef.current) {
-      const totalHeight = textRef.current.clientHeight;
-      setPaddingBottom(totalHeight);
-    }
-  }, [subitems]);
+  const [textRef, { height }] = useElementSize<HTMLDivElement>();
+  const paddingBottom = height;
 
   return (
     <Container {...{ active, completed, last, paddingBottom }} {...props}>

src/styles/common-style.ts

@@ -115,23 +115,11 @@ export const borderBox = css`
 `;
 
 export const hoverShortTransitionTiming = css`
-  :hover {
-    transition: 0.1s;
-  }
-
-  :not(:hover) {
-    transition: 0.1s;
-  }
+  transition: 0.1s;
 `;
 
 export const hoverLongTransitionTiming = css`
-  :hover {
-    transition: 0.2s;
-  }
-
-  :not(:hover) {
-    transition: 0.2s;
-  }
+  transition: 0.2s;
 `;
 
 export const hoverMediumBlue = css`