(refactor) moving sign-in button to more prominent place

web-app/app/[locale]/page.tsx

@@ -9,6 +9,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { paragraphFormatFactory } from '../lib/paragraphFormatFactory';
 import { getAuthProviders } from '../lib/getProviders';
 import { EnterOrSignInButton } from '../ui/EnterOrSignInButton';
+import Link from 'next/link';
 
 const h1ClassName = "text-3xl font-bold max-w-[38rem] mx-auto text-neutral-50";
 const h2ClassName = h1ClassName + " mt-8";
@@ -33,11 +34,10 @@ const Page: FC = async () => {
       <h1 className={h1ClassName}>
         {t.rich("main-card.title", paragraphFormat)}
       </h1>
-      {t.rich("main-card.text", paragraphFormat)}
-      <Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
-
       <EnterOrSignInButton session={session} locale={locale} providers={providers} />
 
+      {t.rich("main-card.text", paragraphFormat)}
+      <Image src={t("main-card.image-url")} alt={t("main-card.image-alt")} className="m-auto mt-0" width={400} height={300} />
       {
         // Google will refuse OAuth signin if it's inside a webview (i.e. Facebook)
         insideWebeview &&

web-app/app/lib/paragraphFormatFactory.tsx

@@ -6,7 +6,7 @@ export const paragraphFormatFactory = (locale: string) => ({
   bold: (chunks: ReactNode) => <strong className='text-bold' >{chunks}</strong>,
   indigo: (chunks: ReactNode) => <span className="text-indigo-400"> {chunks} </span>,
   p: (chunks: ReactNode) => <p className="p mt-[1em] max-w-[38rem] mx-auto text-justify">{chunks}</p>,
-  disclaimer: (chunks: ReactNode) => <p className="p mt-[1em] max-w-[30rem] mx-auto text-center text-sm text-neutral-500">{chunks}</p>,
+  disclaimer: (chunks: ReactNode) => <p className="p max-w-[20rem] mx-auto text-center text-sm text-neutral-500">{chunks}</p>,
   hint: (chunks: ReactNode) => <span className='text-indigo-400 block'> {chunks}</span>,
   linkTermsOfService: (chunks: ReactNode) => <Link href={`/${locale}/terms-of-service`} className="hover:underline italic">{chunks}</Link>,
   linkPrivacyPolicy: (chunks: ReactNode) => <Link href={`/${locale}/privacy-policy`} className="hover:underline italic">{chunks}</Link>

web-app/app/ui/EnterOrSignInButton.tsx

@@ -14,9 +14,10 @@ export const EnterOrSignInButton: FC<{ session: any, locale: string, providers:
 
   return (
     <>
-      <span className="flex justify-center mt-4">
+      {
-        {
+        !session ? (
-          session ? (
+          <span className="flex justify-center mt-4">
+
             <Link
               href={`/${locale}/home`}
               className="btn btn-neutral btn-lg"
@@ -24,15 +25,24 @@ export const EnterOrSignInButton: FC<{ session: any, locale: string, providers:
               <Image src="/icon2.png" alt="logo" width={32} height={32} />
               {t("main-card.go-to-app")}
             </Link>
-          ) : (
+          </span>
-            Object.values(providers).map((provider) => (
+
-              <div key={provider.name}>
+        ) : (
-                <SignInButton provider={provider} />
+          <>
-              </div>
+            <span className="flex justify-center mt-4">
-            ))
+
-          )
+              {
-        }
+                Object.values(providers).map((provider) => (
-      </span>
+                  <div key={provider.name}>
-      {t.rich("disclaimer", paragraphFormat)}
+                    <SignInButton provider={provider} />
+                  </div>
+                ))
+              }
+            </span>
+            {t.rich("disclaimer", paragraphFormat)}
+          </>
+        )
+      }
+
     </>);
-};
+};