chore: tabs back to secondaryblue when hovered, dynamic height in horizontal bullet steps

Author: kemuru

src/lib/pagination/tabs.tsx

@@ -3,8 +3,8 @@ import styled from "styled-components";
 import {
   borderBox,
   button,
-  hoverLongTransitionTiming,
   hoverShortTransitionTiming,
+  hoverLongTransitionTiming,
   svg,
 } from "../../styles/common-style";
 
@@ -43,7 +43,7 @@ const StyledTab = styled.button<{ selected?: boolean }>`
       ? `:hover {
         ${hoverLongTransitionTiming}
             border-bottom: 3px solid
-              ${props.theme.klerosUIComponentsPrimaryBlue};
+              ${props.theme.klerosUIComponentsSecondaryBlue};
           }`
       : ""}
 

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

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useRef, useLayoutEffect, useState } from "react";
 import styled, { css } from "styled-components";
 import BulletCircle from "./bullet-circle";
 import { h2, small, mobileStyle } from "../../../styles/common-style";
 
 interface IContainer {
   last?: boolean;
   completed?: boolean;
+  paddingBottom?: number;
 }
 
 const Container = styled.div<IContainer>`
@@ -14,6 +15,16 @@ const Container = styled.div<IContainer>`
   display: flex;
   justify-content: center;
   align-items: start;
+  ${({ paddingBottom }) =>
+    paddingBottom
+      ? css`
+          ${mobileStyle(
+            () => css`
+              padding-bottom: ${paddingBottom}px;
+            `
+          )}
+        `
+      : ""}
 
   ${({ theme, last, completed }) =>
     last
@@ -93,14 +104,26 @@ const HorizontalBullet: React.FC<HorizontalBulletProps> = ({
   last,
   completed,
   ...props
-}) => (
-  <Container {...{ active, completed, last }} {...props}>
-    <BulletCircle {...{ active, completed, index }} />
-    <TextWrapper {...{ active }}>
-      <h2>{title}</h2>
-      {subitems && subitems.map((item, i) => <small key={i}>{item}</small>)}
-    </TextWrapper>
-  </Container>
-);
+}) => {
+  const textRef = useRef<HTMLDivElement>(null);
+  const [paddingBottom, setPaddingBottom] = useState(0);
+
+  useLayoutEffect(() => {
+    if (textRef.current) {
+      const totalHeight = textRef.current.clientHeight;
+      setPaddingBottom(totalHeight);
+    }
+  }, [subitems]);
+
+  return (
+    <Container {...{ active, completed, last, paddingBottom }} {...props}>
+      <BulletCircle {...{ active, completed, index }} />
+      <TextWrapper ref={textRef} {...{ active }}>
+        <h2>{title}</h2>
+        {subitems && subitems.map((item, i) => <small key={i}>{item}</small>)}
+      </TextWrapper>
+    </Container>
+  );
+};
 
 export default HorizontalBullet;