minor changes to fonts, spacing and colors

www/app/layout.tsx

@@ -81,9 +81,11 @@ export default function RootLayout({ children }) {
                     alt="Reflector"
                   />
                   <div className="hidden flex-col ml-2 md:block">
-                    <h1 className="text-4xl font-bold">Reflector</h1>
+                    <h1 className="text-4xl font-bold tracking-wide">
-                    <p className="text-gray-500">
+                      Reflector
-                      Capture The Signal, Not The Noise
+                    </h1>
+                    <p className="text-gray-500 text-xs tracking-tighter">
+                      Capture the signal, not the noise
                     </p>
                   </div>
                 </Link>

www/app/transcripts/finalSummary.tsx

@@ -5,7 +5,7 @@ type FinalSummaryProps = {
 export default function FinalSummary(props: FinalSummaryProps) {
   return (
     <div className="overflow-y-auto h-auto max-h-full">
-      <h2 className="text-xl font-bold">Final Summary</h2>
+      <h2 className="text-xl md:text-2xl font-bold">Final Summary</h2>
       <p>{props.text}</p>
     </div>
   );

www/app/transcripts/new/page.tsx

@@ -67,7 +67,11 @@ const TranscriptCreate = () => {
               useActiveTopic={useActiveTopic}
               autoscroll={true}
             />
-            <section className="w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
+            <section
+              className={`w-full h-full ${
+                hasRecorded ? "bg-blue-400/20" : ""
+              } rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center`}
+            >
               {!hasRecorded ? (
                 <div className="py-2 h-auto">
                   <LiveTrancription text={webSockets.transcriptText} />

www/app/transcripts/recorder.tsx

@@ -278,7 +278,10 @@ export default function Recorder(props: RecorderProps) {
   return (
     <div className="flex items-center w-full relative">
       <div className="flex-grow items-end relative">
-        <div ref={waveformRef} className="flex-grow rounded-2xl h-20"></div>
+        <div
+          ref={waveformRef}
+          className="flex-grow rounded-lg md:rounded-xl h-20"
+        ></div>
         <div className="absolute right-2 bottom-0">
           {isRecording && (
             <div className="inline-block bg-red-500 rounded-full w-2 h-2 my-auto mr-1 animate-ping"></div>

www/app/transcripts/topicList.tsx

@@ -61,7 +61,7 @@ export function TopicList({
   }, [activeTopic, autoscroll]);
 
   return (
-    <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl px-2 md:px-4 flex flex-col justify-center align-center">
+    <section className="relative w-full h-full bg-blue-400/20 rounded-lg md:rounded-xl p-2 md:p-4 flex flex-col justify-center align-center">
       {topics.length > 0 ? (
         <>
           {autoscroll && (
@@ -73,13 +73,13 @@ export function TopicList({
 
           <div
             id="topics-div"
-            className="overflow-y-auto py-2 h-full"
+            className="overflow-y-auto h-full"
             onScroll={handleScroll}
           >
             {topics.map((topic, index) => (
               <button
                 key={index}
-                className="rounded-none border-solid border-0 border-b-blue-300 border-b last:border-none last:rounded-b-lg p-2 hover:bg-blue-400/20 focus-visible:bg-blue-400/20 text-left block w-full"
+                className="rounded-none border-solid border-0 border-bluegrey border-b last:border-none last:rounded-b-lg p-2 hover:bg-blue-400/20 focus-visible:bg-blue-400/20 text-left block w-full"
                 onClick={() =>
                   setActiveTopic(activeTopic?.id == topic.id ? null : topic)
                 }
@@ -109,8 +109,10 @@ export function TopicList({
         </>
       ) : (
         <div className="text-center text-gray-500 p-4">
-          Discussion topics will appear here after you start recording. It may
+          Discussion topics will appear here after you start recording.
-          take up to 5 minutes of conversation for the first topic to appear.
+          <br />
+          It may take up to 5 minutes of conversation for the first topic to
+          appear.
         </div>
       )}
     </section>

www/tailwind.config.js

@@ -15,6 +15,9 @@ module.exports = {
       animation: {
         "spin-slow": "spin 3s linear infinite",
       },
+      colors: {
+        bluegrey: "RGB(90, 122, 158)",
+      },
     },
   },
   plugins: [],