From ef3d062855d18cb3742ddf5b73b4b2511f4b9d3a Mon Sep 17 00:00:00 2001
From: mertbagt <mertbagt@gmail.com>
Date: Mon, 2 Mar 2026 13:20:59 -0500
Subject: [PATCH 1/4] active element styling

---
 components/hearing/Transcriptions.tsx | 117 ++++++++++++++++++--------
 1 file changed, 82 insertions(+), 35 deletions(-)

diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx
index d9905195e..b085fcff5 100644
--- a/components/hearing/Transcriptions.tsx
+++ b/components/hearing/Transcriptions.tsx
@@ -1,5 +1,6 @@
 import { faMagnifyingGlass, faTimes } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import ArrowRightAlt from "@mui/icons-material/ArrowRightAlt"
 import ShareIcon from "@mui/icons-material/Share"
 import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined"
 import { useRouter } from "next/router"
@@ -14,7 +15,6 @@ import {
   formatTotalSeconds
 } from "./hearing"
 import { ShareLinkButton } from "components/buttons"
-
 import { siteUrl } from "components/links"
 
 const ClearButton = styled(FontAwesomeIcon)`
@@ -124,8 +124,16 @@ const TranscriptRow = styled(Row)`
     border-bottom-left-radius: 0.75rem;
     border-bottom-right-radius: 0.75rem;
   }
+  &:hover {
+    background-color: #d9dfea;
+    border-color: #1a3185;
+    border-style: solid;
+    border-width: 5px;
+  }
 `
 
+const TranscriptRowActive = styled(Row)``
+
 export const Transcriptions = ({
   hearingId,
   transcriptData,
@@ -358,34 +366,32 @@ const TranscriptItem = forwardRef(function TranscriptItem(
   const [isHovered, setIsHovered] = useState(false)
 
   return (
-    <TranscriptRow
-      className={
-        isHighlighted(index)
-          ? `bg-info border-5 border-secondary border-start`
-          : `border-5`
-      }
-      ref={ref}
-    >
-      <TimestampCol>
-        <Row className={`d-inline`}>
-          <TimestampButton
-            onClick={() => {
-              handleClick(element.start)
-            }}
-            className={`bg-transparent border-0 text-nowrap p-1`}
-            type="button"
-            value={element.start}
-          >
-            {formatMilliseconds(element.start)}
-            {" - "}
-            {formatMilliseconds(element.end)}
-          </TimestampButton>
-        </Row>
-      </TimestampCol>
-      <Col className={`pt-1`}>{highlightText(element.text, searchTerm)}</Col>
-      <Col xs="1" className={`my-1 px-0`}>
-        {isHighlighted(index) ? (
-          <>
+    <>
+      {isHighlighted(index) ? (
+        <TranscriptRowActive
+          className={`bg-info border-5 border-start`}
+          ref={ref}
+        >
+          <TimestampCol>
+            <Row className={`d-inline`}>
+              <TimestampButton
+                onClick={() => {
+                  handleClick(element.start)
+                }}
+                className={`bg-transparent border-0 text-nowrap p-1`}
+                type="button"
+                value={element.start}
+              >
+                {formatMilliseconds(element.start)}
+                {" - "}
+                {formatMilliseconds(element.end)}
+              </TimestampButton>
+            </Row>
+          </TimestampCol>
+          <Col className={`pt-1`}>
+            {highlightText(element.text, searchTerm)}
+          </Col>
+          <Col xs="1" className={`my-1 px-0`}>
             <ShareLinkButton
               key="copy"
               text={siteUrl(
@@ -398,11 +404,52 @@ const TranscriptItem = forwardRef(function TranscriptItem(
             >
               {isHovered ? <ShareIcon /> : <ShareOutlinedIcon />}
             </ShareLinkButton>
-          </>
-        ) : (
-          <></>
-        )}
-      </Col>
-    </TranscriptRow>
+          </Col>
+        </TranscriptRowActive>
+      ) : (
+        <TranscriptRow
+          className={`border-5`}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          ref={ref}
+        >
+          <TimestampCol>
+            <Row className={`d-inline`}>
+              <TimestampButton
+                onClick={() => {
+                  handleClick(element.start)
+                }}
+                className={`bg-transparent border-0 text-nowrap p-1`}
+                type="button"
+                value={element.start}
+              >
+                {formatMilliseconds(element.start)}
+                {" - "}
+                {formatMilliseconds(element.end)}
+              </TimestampButton>
+            </Row>
+          </TimestampCol>
+          <Col className={`pt-1`}>
+            {highlightText(element.text, searchTerm)}
+          </Col>
+          <Col xs="1" className={`my-1 px-0`}>
+            <TimestampButton
+              onClick={() => {
+                handleClick(element.start)
+              }}
+              className={`bg-transparent border-0 text-nowrap p-1`}
+              type="button"
+              value={element.start}
+            >
+              {isHovered ? (
+                <ArrowRightAlt fontSize="large" style={{ color: "#737373" }} />
+              ) : (
+                <></>
+              )}
+            </TimestampButton>
+          </Col>
+        </TranscriptRow>
+      )}
+    </>
   )
 })

From 28d498b4a4202d7e320abbfb7bc5e346965bc9c3 Mon Sep 17 00:00:00 2001
From: mertbagt <mertbagt@gmail.com>
Date: Mon, 2 Mar 2026 13:29:47 -0500
Subject: [PATCH 2/4] reset hovered onclick

---
 components/hearing/Transcriptions.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx
index b085fcff5..cec19e2ee 100644
--- a/components/hearing/Transcriptions.tsx
+++ b/components/hearing/Transcriptions.tsx
@@ -342,6 +342,7 @@ const TranscriptItem = forwardRef(function TranscriptItem(
        set currentTime property of <video> element */
 
     setCurTimeVideo(valSeconds)
+    setIsHovered(false)
   }
 
   const isHighlighted = (index: number): boolean => {

From 4c076c196a83a6866eb235c0c6d00936ddc2e999 Mon Sep 17 00:00:00 2001
From: mertbagt <mertbagt@gmail.com>
Date: Tue, 3 Mar 2026 19:44:12 -0500
Subject: [PATCH 3/4] align update button center

---
 components/hearing/Transcriptions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx
index cec19e2ee..163ff0c39 100644
--- a/components/hearing/Transcriptions.tsx
+++ b/components/hearing/Transcriptions.tsx
@@ -433,12 +433,12 @@ const TranscriptItem = forwardRef(function TranscriptItem(
           <Col className={`pt-1`}>
             {highlightText(element.text, searchTerm)}
           </Col>
-          <Col xs="1" className={`my-1 px-0`}>
+          <Col xs="1" className={`d-flex align-items-center my-1 px-0`}>
             <TimestampButton
               onClick={() => {
                 handleClick(element.start)
               }}
-              className={`bg-transparent border-0 text-nowrap p-1`}
+              className={`bg-transparent border-0 p-1 text-nowrap `}
               type="button"
               value={element.start}
             >

From a933ac4cebbb971604dfe02dc51c71299993dcd0 Mon Sep 17 00:00:00 2001
From: mertbagt <mertbagt@gmail.com>
Date: Tue, 3 Mar 2026 19:49:25 -0500
Subject: [PATCH 4/4] readd active element border

---
 components/hearing/Transcriptions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx
index 163ff0c39..27d0280d3 100644
--- a/components/hearing/Transcriptions.tsx
+++ b/components/hearing/Transcriptions.tsx
@@ -370,7 +370,7 @@ const TranscriptItem = forwardRef(function TranscriptItem(
     <>
       {isHighlighted(index) ? (
         <TranscriptRowActive
-          className={`bg-info border-5 border-start`}
+          className={`bg-info border-5 border-secondary border-start`}
           ref={ref}
         >
           <TimestampCol>