prevent hero layout shift (#2370)

* prevent hero layout shift

* simplify button styling

* fix a ts error

Author: ChristopherChudzicki

frontends/main/src/page-components/AiChat/AskTimDrawerButton.tsx

@@ -1,44 +1,29 @@
 import React from "react"
-import { Typography, styled } from "ol-components"
-import { ButtonLink } from "@mitodl/smoot-design"
+import { Typography, styled, LinkAdapter } from "ol-components"
 import { RiSparkling2Line } from "@remixicon/react"
 import AiRecommendationBotDrawer from "./AiRecommendationBotDrawer"
 import { RECOMMENDER_QUERY_PARAM } from "@/common/urls"
 
-const StyledButton = styled(ButtonLink)(({ theme }) => ({
+const StyledButton = styled(LinkAdapter)(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   gap: "8px",
-  minWidth: "auto",
   padding: "4px 0",
   color: theme.custom.colors.darkGray2,
-  border: "none",
-  background: "none",
   svg: {
     fill: theme.custom.colors.lightRed,
     width: "20px",
     height: "20px",
   },
-  "&&": {
-    ":hover": {
-      background: "none",
-      color: theme.custom.colors.red,
-      p: {
-        color: theme.custom.colors.red,
-      },
-    },
+  "&:hover": {
+    color: theme.custom.colors.red,
   },
 }))
 
 const AskTIMButton = () => {
   return (
     <>
-      <StyledButton
-        shallow
-        variant="bordered"
-        edge="rounded"
-        href={`?${RECOMMENDER_QUERY_PARAM}`}
-      >
+      <StyledButton shallow href={`?${RECOMMENDER_QUERY_PARAM}`}>
         <RiSparkling2Line />
         <Typography variant="body1">
           Ask<strong>TIM</strong>

frontends/main/src/page-components/HeroSearch/HeroSearch.tsx

@@ -142,6 +142,10 @@ const ActionStrip = styled.div(({ theme }) => ({
   gap: "24px",
   marginTop: "16px",
   marginBottom: "24px",
+  /**
+   * minHeight 28px avoids layout shift as feature flag for AskTim button loads.
+   */
+  minHeight: "28px",
   [theme.breakpoints.down("sm")]: {
     marginTop: "0",
   },

frontends/ol-components/src/index.ts

@@ -149,6 +149,9 @@ export type {
   SelectFieldProps,
 } from "./components/SelectField/SelectField"
 
+export { LinkAdapter } from "./components/LinkAdapter/LinkAdapter"
+export type { LinkAdapterProps } from "./components/LinkAdapter/LinkAdapter"
+
 export { Link, linkStyles } from "./components/Link/Link"
 export type { LinkProps } from "./components/Link/Link"