cuter scrollbars, better focus, small design improvements

www/app/transcripts/[transcriptId]/page.tsx

@@ -38,10 +38,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
       {transcript?.loading === true ||
       waveform?.loading == true ||
       topics?.loading == true ? (
-        <Modal
-          title="Loading"
-          text={"Loading transcript..." + transcript.loading}
-        />
+        <Modal title="Loading" text={"Loading transcript..."} />
       ) : (
         <>
           <Recorder
@@ -57,7 +54,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
               useActiveTopic={useActiveTopic}
             />
             <section className="relative w-full h-auto max-h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
-              <div className="py-2 h-auto">
+              <div className="py-2 h-full">
                 {transcript?.response?.longSummary && (
                   <FinalSummary text={transcript?.response?.longSummary} />
                 )}

www/app/transcripts/modal.tsx

@@ -6,7 +6,7 @@ type ModalProps = {
 export default function Modal(props: ModalProps) {
   return (
     <>
-      <div className="flex flex-col items-center justify-center w-fit bg-white px-6 py-8 mt-8 rounded-xl">
+      <div className="w-full flex flex-col items-center justify-center bg-white px-6 py-8 mt-8 rounded-xl">
         <h1 className="text-2xl font-bold text-blue-500">{props.title}</h1>
         <p className="text-gray-500 text-center mt-5">{props.text}</p>
       </div>

www/app/transcripts/new/page.tsx

@@ -58,7 +58,7 @@ const TranscriptCreate = () => {
             audioDevices={audioDevices}
           />
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 lg:grid-rows-1 gap-2 lg:gap-4 h-full">
+          <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-mobile-inner lg:grid-rows-1 gap-2 lg:gap-4 h-full">
             <TopicList
               topics={webSockets.topics}
               useActiveTopic={useActiveTopic}
@@ -109,7 +109,7 @@ const TranscriptCreate = () => {
                         : "Please grant permission to continue."}
                     </p>
                     <button
-                      className="mt-4 bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
+                      className="mt-4 bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500 text-white font-bold py-2 px-4 rounded m-auto"
                       onClick={requestPermission}
                       disabled={permissionDenied}
                     >

www/app/transcripts/recorder.tsx

@@ -243,8 +243,8 @@ export default function Recorder(props: RecorderProps) {
           <button
             className={`${
               isPlaying
-                ? "bg-orange-400 hover:bg-orange-500"
-                : "bg-green-400 hover:bg-green-500"
+                ? "bg-orange-400 hover:bg-orange-500 focus-visible:bg-orange-500"
+                : "bg-green-400 hover:bg-green-500 focus-visible:bg-green-500"
             } text-white ml-2 md:ml:4 md:h-[78px] md:min-w-[100px] text-lg`}
             id="play-btn"
             onClick={handlePlayClick}
@@ -256,7 +256,7 @@ export default function Recorder(props: RecorderProps) {
           {props.transcriptId && (
             <a
               title="Download recording"
-              className="text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2"
+              className="text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg outline-blue-400"
               href={`${process.env.NEXT_PUBLIC_API_URL}/v1/transcripts/${props.transcriptId}/audio/mp3`}
             >
               <FontAwesomeIcon icon={faDownload} className="h-5 w-auto" />
@@ -267,7 +267,7 @@ export default function Recorder(props: RecorderProps) {
             <a
               id="download-recording"
               title="Download recording"
-              className="invisible text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2"
+              className="invisible text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg outline-blue-400"
             >
               <FontAwesomeIcon icon={faDownload} className="h-5 w-auto" />
             </a>
@@ -279,8 +279,8 @@ export default function Recorder(props: RecorderProps) {
           <button
             className={`${
               isRecording
-                ? "bg-red-400 hover:bg-red-500"
-                : "bg-blue-400 hover:bg-blue-500"
+                ? "bg-red-400 hover:bg-red-500 focus-visible:bg-red-500"
+                : "bg-blue-400 hover:bg-blue-500 focus-visible:bg-blue-500"
             } text-white ml-2 md:ml:4 md:h-[78px] md:min-w-[100px] text-lg`}
             onClick={handleRecClick}
             disabled={isPlaying}
@@ -290,7 +290,7 @@ export default function Recorder(props: RecorderProps) {
           {props.audioDevices && props.audioDevices?.length > 0 && (
             <>
               <button
-                className="text-center cursor-pointer text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2"
+                className="text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg focus-visible:outline outline-blue-400"
                 onClick={() => setShowDevices((prev) => !prev)}
               >
                 <FontAwesomeIcon icon={faMicrophone} className="h-5 w-auto" />

www/app/transcripts/topicList.tsx

@@ -57,36 +57,34 @@ export function TopicList({ topics, useActiveTopic }: TopicListProps) {
             className="overflow-y-auto py-2 h-full"
             onScroll={handleScroll}
           >
-            {topics.map((item, index) => (
-              <div
+            {topics.map((topic, index) => (
+              <button
                 key={index}
-                className="border-b border-blue-300 last:border-none p-2 hover:bg-blue-400/20"
-                role="button"
+                className="rounded-none border-solid border-0 border-b-blue-300 border-b last:border-none p-2 hover:bg-blue-400/20 focus-visible:bg-blue-400/20 text-left block w-full"
                 onClick={() =>
-                  setActiveTopic(activeTopic?.id == item.id ? null : item)
+                  setActiveTopic(activeTopic?.id == topic.id ? null : topic)
                 }
               >
-                <div className="flex justify-between items-center rounded-lg md:rounded-xl text-lg md:text-xl font-bold">
+                <div className="w-full flex justify-between items-center rounded-lg md:rounded-xl text-lg md:text-xl font-bold leading-tight">
                   <p>
-                    <span className="font-light font-mono text-slate-500 pr-1 text-base md:text-lg">
-                      [{formatTime(item.timestamp)}]
+                    <span className="font-light font-mono text-slate-500 text-base md:text-lg">
+                      [{formatTime(topic.timestamp)}]&nbsp;
                     </span>
-                    &nbsp;
-                    <span className="pr-1">{item.title}</span>
+                    <span>{topic.title}</span>
                   </p>
                   <FontAwesomeIcon
                     className="transform transition-transform duration-200 ml-2"
                     icon={
-                      activeTopic?.id == item.id
+                      activeTopic?.id == topic.id
                         ? faChevronDown
                         : faChevronRight
                     }
                   />
                 </div>
-                {activeTopic?.id == item.id && (
-                  <div className="px-2">{item.transcript}</div>
+                {activeTopic?.id == topic.id && (
+                  <div className="p-2">{topic.transcript}</div>
                 )}
-              </div>
+              </button>
             ))}
           </div>
         </>