Merge pull request #32 from joshsoftware/ui-fixes

All Pages alignment and spacing fixes
joshsoftware · Oct 3, 2024 · 6393739 · 6393739
2 parents acd9db8 + e5bba30
commit 6393739
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 61 deletions.
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -17,13 +17,13 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head />
-      <body className={secondaryFont.className}>
+      <body className={`h-screen flex flex-col overflow-y-auto ${secondaryFont.className}`}>
         <TanstackQueryProvider>
-            <div className="relative">
-              <Header />
-              <main className="px-4 py-2 md:px-32">{children}</main>
-              <Toaster richColors closeButton />
-            </div>
+          <Header />
+          <section className="flex-1 overflow-y-auto">
+            <div className="container h-full">{children}</div>
+          </section>
+          <Toaster richColors closeButton />
         </TanstackQueryProvider>
       </body>
     </html>

diff --git a/app/src/app/new/page.tsx b/app/src/app/new/page.tsx
@@ -14,11 +14,11 @@ const page = async () => {
 	if (!user) return redirect("/signin");
 
   return (
-    <div className="flex flex-col w-full h-screen pt-12 px-0">
-      <div className="flex justify-start w-full mt-4">
+    <div className="flex flex-col w-full pt-8">
+      <div className="flex justify-start w-full mb-8">
         <NavigateBack href="/" />
       </div>
-      <div className="flex flex-1 justify-center items-start md:mt-16">
+      <div className="flex flex-1 justify-center items-start">
         <RecorderCard userId={user.id} />
       </div>
     </div>

diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -2,7 +2,7 @@ import Landing from "@/components/Landing";
 
 export default async function Home() {
   return (
-    <div className="flex flex-col h-screen items-center justify-center">
+    <div className="flex flex-col h-full items-center justify-center">
       <Landing />
     </div>
   );

diff --git a/app/src/app/register/page.tsx b/app/src/app/register/page.tsx
@@ -9,8 +9,8 @@ export const metadata: Metadata = {
 
 const page = async () => {
   return (
-    <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
-      <div className="flex justify-start w-full px-4 mt-8">
+    <div className="flex flex-col w-full pt-8">
+      <div className="flex justify-start w-full mb-8">
         <NavigateBack />
       </div>
       <div className="flex flex-1 justify-center items-center">

diff --git a/app/src/app/signin/page.tsx b/app/src/app/signin/page.tsx
@@ -14,8 +14,8 @@ export default async function Page() {
     if (user) return redirect("/new");
 
 	return (
-        <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
-        <div className="flex justify-start w-full px-4 mt-8">
+        <div className="flex flex-col w-full pt-8">
+        <div className="flex justify-start w-full mb-8">
           <NavigateBack />
         </div>
         <div className="flex flex-1 justify-center items-center">

diff --git a/app/src/app/signup/page.tsx b/app/src/app/signup/page.tsx
@@ -14,8 +14,8 @@ export default async function Page() {
     if (user) return redirect("/new");
 
 	return (
-        <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
-        <div className="flex justify-start w-full px-4 mt-8">
+        <div className="flex flex-col w-full pt-8">
+        <div className="flex justify-start w-full mb-8">
           <NavigateBack />
         </div>
         <div className="flex flex-1 justify-center items-center">

diff --git a/app/src/app/transcriptions/[transcription_id]/page.tsx b/app/src/app/transcriptions/[transcription_id]/page.tsx
@@ -34,11 +34,11 @@ const page = async (props: PageProps) => {
 
   return (
 
-    <div className="flex flex-col w-full h-screen pt-16 px-0 md:px-16">
-      <div className="flex justify-start w-full px-4 mt-8">
+    <div className="flex flex-col w-full h-full pt-8">
+      <div className="flex justify-start w-full mb-8">
         <NavigateBack href="/transcriptions" subHeading={`Transcription for ${transcription[0].documentName}`} />
       </div>
-      <div className="flex flex-1 justify-center items-center">
+      <div className="flex flex-1 xl:overflow-y-auto">
         {transcription.length > 0 && (
           <DetailedTranscription transcription={transcription[0]} />
         )}

diff --git a/app/src/app/transcriptions/loading.tsx b/app/src/app/transcriptions/loading.tsx
@@ -2,8 +2,8 @@ import { Loader2Icon } from "lucide-react";
 
 export default function Loading() {
   return (
-    <div className="flex flex-col w-full h-screen overflow-y-hidden justify-center items-center gap-4 pt-16 px-0 md:px-16">
-      <div className="flex flex-col w-full justify-center items-center overflow-y-auto gap-4 p-8">
+    <div className="flex flex-col w-full h-full overflow-y-hidden justify-center items-center">
+      <div className="flex flex-col w-full justify-center items-center overflow-y-auto">
         <Loader2Icon className="w-8 h-8 animate-spin" />
       </div>
     </div>

diff --git a/app/src/app/transcriptions/page.tsx b/app/src/app/transcriptions/page.tsx
@@ -35,16 +35,14 @@ const page = async () => {
     .orderBy(desc(transcriptions.createdAt));
 
   return (
-    <div className="flex flex-col w-full h-screen pt-16">
-      <div className="flex justify-start w-full mt-8">
+    <div className="flex flex-col w-full h-full pt-8">
+      <div className="flex justify-start w-full mb-8">
         <NavigateBack subHeading="Transcriptions" />
       </div>
-      <div className="flex flex-1 justify-center items-center">
-        <div className="flex flex-col w-full max-h-96 overflow-y-auto gap-4">
-          {userTranscriptions.map((transcription, idx) => (
-            <TranscriptionItem key={idx} index={idx} transcription={transcription} />
-          ))}
-        </div>
+      <div className="flex flex-col flex-1 items-center gap-4 overflow-y-auto mb-8">
+        {userTranscriptions.map((transcription, idx) => (
+          <TranscriptionItem key={idx} index={idx} transcription={transcription} />
+        ))}
       </div>
     </div>
   );

diff --git a/app/src/components/DetailedTranscription.tsx b/app/src/components/DetailedTranscription.tsx
@@ -54,20 +54,20 @@ const DetailedTranscription = ({
   };
 
   return (
-    <div className="flex flex-col overflow-y-hidden gap-8 w-full h-full justify-center items-center">
-      <div className="flex flex-col md:flex-row w-full justify-between gap-4">
-        <div className="flex w-full flex-col md:flex-row justify-between items-center max-w-sm md:max-w-md gap-2 bg-[#F0FFFA] rounded-sm p-4">
-          <h1 className="text-xl font-bold">{transcription.documentName}</h1>
-          <h1>
+    <div className="flex flex-col gap-8 w-full h-full">
+      <div className="flex flex-col items-center md:flex-row w-full justify-between gap-8 xl:gap-4">
+        <div className="flex w-full flex-col gap-1 max-sm:items-center max-w-sm md:max-w-md">
+          <h1 className="text-xl font-bold m-0">{transcription.documentName}</h1>
+          <p className="text-xs m-0">
             {transcription.createdAt
               ? format(
                   new Date(transcription.createdAt),
                   "dd MMM yyyy | hh:mm a",
                 )
               : "N/A"}
-          </h1>
+          </p>
         </div>
-        <div className="flex flex-col gap-2 justify-center items-center">
+        <div className="flex flex-col gap-1 justify-center items-center">
           <Button
             className="flex w-full gap-2 bg-[#668D7E] hover:bg-[#668D7E] text-white"
             onClick={handlePlayPause}
@@ -79,20 +79,20 @@ const DetailedTranscription = ({
             )}
             {isPlaying ? "Pause Audio" : "Play Audio"}
           </Button>
-          {audioDuration ? `Duration: ${audioDuration}` : "Loading..."}
+          <p className="text-xs m-0">{audioDuration ? `Duration: ${audioDuration}` : "Loading..."}</p>
         </div>
       </div>
 
-      <div className="flex flex-col w-full gap-4 justify-center items-start">
-        <div className="flex flex-col w-full gap-2 justify-start items-start">
+      <div className="flex flex-1 max-sm:flex-col w-full gap-4 justify-center items-start mb-8 xl:overflow-y-auto">
+        <div className="flex flex-1 flex-col max-h-full w-full gap-2 justify-start items-start xl:overflow-y-auto">
           <h1 className="text-xl font-bold">Translation</h1>
-          <Card className="w-full max-w-xs md:max-w-full overflow-y-auto p-4 rounded-lg h-36">
+          <Card className="flex-1 w-full max-w-xs md:max-w-full xl:overflow-y-auto p-4 rounded-lg">
             {transcription.translation || "No translation available"}
           </Card>
         </div>
-        <div className="flex flex-col w-full gap-2 justify-start items-start">
+        <div className="flex flex-1 flex-col max-h-full w-full gap-2 justify-start items-start xl:overflow-y-auto">
           <h1 className="text-xl font-bold">Summary</h1>
-          <Card className="w-full max-w-xs md:max-w-full overflow-y-auto p-4 rounded-lg h-36">
+          <Card className="w-full flex-1 max-w-xs md:max-w-full xl:overflow-y-auto p-4 rounded-lg">
             {transcription.summary || "No summary available"}
           </Card>
         </div>

diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
@@ -1,19 +1,21 @@
 "use client";
-import { primaryFont } from "@/fonts";
+import { primaryFont, tertiaryFont } from "@/fonts";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { buttonVariants } from "./ui/button";
 
 const Header = () => {
   const pathName = usePathname();
   return (
-    <div
+    <header
       className={cn(
-        "fixed w-full flex justify-between items-center px-2 bg-[#1D1D1D] md:px-32 py-4",
+        "flex justify-between items-center bg-[#1D1D1D]",
         primaryFont.className
       )}
     >
+      <div className="container flex items-center py-3">
       <Link href={"/"} className="text-3xl text-white">
         LingoAI
       </Link>
@@ -30,21 +32,34 @@ const Header = () => {
         {pathName !== "/" && pathName !== "/new" && (
           <Link
             href={"/new"}
-            className="text-white hover:underline"
+            className={cn(
+              buttonVariants({
+                className: "!bg-[#668D7E] !hover:bg-[#668D7E] text-white text-xs px-3",
+                size: 'xs'
+              }),
+            tertiaryFont.className
+            )}
           >
             Take A Demo
           </Link>
         )}
         {pathName !== "/" && pathName !== "/transcriptions" && (
           <Link
             href={"/transcriptions"}
-            className="text-white hover:underline"
+            className={cn(
+              buttonVariants({
+                className: "!bg-[#668D7E] !hover:bg-[#668D7E] text-white text-xs px-3",
+                size: 'xs'
+              }),
+            tertiaryFont.className
+            )}
           >
             View Records
           </Link>
         )}
       </div>
-    </div>
+      </div>
+    </header>
   );
 };
 

diff --git a/app/src/components/Landing.tsx b/app/src/components/Landing.tsx
@@ -10,23 +10,22 @@ import Link from "next/link";
 const Landing = () => {
 
   return (
-    <div className="flex flex-col md:flex-row w-full h-full justify-between items-center gap-4 pt-16">
+    <div className="flex flex-col md:flex-row w-full h-full justify-between gap-4 pt-16">
       <div className="w-full flex flex-col gap-4 justify-center items-start">
         <h1 className={cn(primaryFont.className, "text-3xl text-[#8CB369] ")}>
           Welcome
         </h1>
         <h1 className={cn(primaryFont.className, "text-5xl")}>
-          Speak, Translate & Summarise
+          Transform Speech into Action: Translate, Transcribe, and Summarize Effortlessly
         </h1>
-        <p>
-          Translate and summarize content from multiple languages into English
-          with ease.
+        <p>  
+          Unleash the power of seamless communication with a tool that does it all—accurate transcription, real-time translation, and intelligent summaries in one go.
         </p>
-         <div className="w-full flex">
+         <div className="w-full flex gap-3">
         <Link
           href={"/new"}
           className={buttonVariants({
-            className: "!bg-[#668D7E] !hover:bg-[#668D7E] text-white mx-3",
+            className: "!bg-[#668D7E] !hover:bg-[#668D7E] text-white",
           })}
         >
           Take A Demo

diff --git a/app/src/components/NavigateBack.tsx b/app/src/components/NavigateBack.tsx
@@ -18,7 +18,7 @@ const NavigateBack = (props: NavigateBackProps) => {
   }
 
   return (
-    <div className="flex justify-between items-center w-full">
+    <div className="flex max-sm:flex-col justify-between max-sm:items-start items-center w-full max-sm:gap-2">
         <Button className="flex gap-4" variant={"ghost"} onClick={handleBack}>
           <ArrowLeftIcon className="w-6 h-6" />
           Back

diff --git a/app/src/components/RecorderCard.tsx b/app/src/components/RecorderCard.tsx
@@ -285,8 +285,7 @@ const RecorderCard = (props:RecorderCardProps) => {
                     </div>
                   ) : (
                     <p>
-                      Enable mic access, record yourself, or upload an audio
-                      file
+                      Enable mic access, record yourself, or upload an audio file
                     </p>
                   )}
                 </>

diff --git a/app/src/components/UserForm.tsx b/app/src/components/UserForm.tsx
@@ -47,7 +47,7 @@ const UserForm = (props: UserFormProps) => {
           onSubmit={form.handleSubmit(onSubmit)}
           className="w-full max-w-sm flex flex-col gap-4 justify-center items-center"
         >
-          <h1 className={cn(tertiaryFont.className, "text-3xl font-bold")}>
+          <h1 className="text-3xl font-bold">
             {
               formType === "signup" ? "Sign Up" : "Sign In"
             }
@@ -95,9 +95,9 @@ const UserForm = (props: UserFormProps) => {
         </form>
       </Form>
       <div>
-        <div className="flex flex-col text-xs gap-1 justify-center items-center">
+        <div className="flex flex-col text-sm gap-1 justify-center items-center">
           <h1>{formType === "signup" ? "Already have an account?" : "Please send an email to access the demo:"}</h1>
-          <h1>[email protected]</h1>
+          <a className="text-blue-500" href="mailto:[email protected]">[email protected]</a>
         </div>
         {/* {formType === "signup" ? "Already have an account?" : "To request access, please send an email to:"} */}
         {/* <Link
-Original file line number
+Diff line change
@@ Expand Up / @@ -285,8 +285,7 @@ const RecorderCard = (props:RecorderCardProps) => { @@
                         </div>
                       ) : (
                         <p>
-                          Enable mic access, record yourself, or upload an audio
-                          file
+                          Enable mic access, record yourself, or upload an audio file
                         </p>
                       )}
                     </>
@@ Expand Down @@