style: change Loader color

client/src/app/login/page.tsx

@@ -3,32 +3,42 @@ import { ExternalLink } from 'c/ExternalLink'
 import { Links } from 'l/constants'
 import type { Id } from 'l/types'
 import dynamic from 'next/dynamic'
+import { BeatLoader } from 'react-spinners'
 
 const OpenPassportQRCode = dynamic(
   () => import('c/QrCode/OpenPassportQrCode').then(({ OpenPassportQRCode }) => OpenPassportQRCode),
-  { ssr: false },
+  {
+    loading: () => (
+      <div className='flex items-center justify-center h-[300px] w-[300px]'>
+        <BeatLoader loading={true} size={50} color='#e0a3c8' />
+      </div>
+    ),
+    ssr: false,
+  },
 )
 
 export default function Login() {
   return (
     <div className='flex flex-col justify-center items-center'>
       {/* FIXME avoid type assertion */}
       <OpenPassportQRCode userId={crypto.randomUUID() as Id} />
-      <div>
-        <p className='text-center'>Scan this 👆</p> With your OpenPassport mobile app:
-        <ExternalLink
-          className='underline ml-2'
-          href={Links.IOS_APP}
-        >
-          iOS
-        </ExternalLink>
-        <ExternalLink
-          className='underline ml-2'
-          href={Links.ANDROID_APP}
-        >
-          Android
-        </ExternalLink>
-      </div>
+      {
+        <div>
+          <p className='text-center'>Scan this 👆</p> With your OpenPassport mobile app:
+          <ExternalLink
+            className='underline ml-2'
+            href={Links.IOS_APP}
+          >
+            iOS
+          </ExternalLink>
+          <ExternalLink
+            className='underline ml-2'
+            href={Links.ANDROID_APP}
+          >
+            Android
+          </ExternalLink>
+        </div>
+      }
     </div>
   )
 }

client/src/app/page.tsx

@@ -25,7 +25,7 @@ export default function Home() {
       <p className='text-center'>
         <b>You won't see any adult content here (just cute puppies' pictures).</b>
       </p>
-      <div className='bg-wisteria p-6 rounded-lg shadow-lg space-y-4 text-s'>
+      <div className='bg-wisteria p-6 rounded-lg shadow-lg space-y-4 text-s mt-10'>
         <h2 className='text-xl font-bold text-violet'>Get Started</h2>
         <ol className='list-decimal list-inside space-y-2'>
           <li>

client/src/components/Header.tsx

@@ -1,15 +1,17 @@
 'use client'
 import { useAuthorized } from 'h/useAuthorized'
 import { config } from 'l/config'
-import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { BeatLoader } from 'react-spinners'
+
 export const Header = () => {
   const { auth, loading, logout } = useAuthorized()
   const pathname = usePathname()
 
   const render = () => {
-    if (loading === true) return <Image alt='spinner' height={50} src='/spinner.svg' width={50} />
+    if (loading === true) return <BeatLoader loading={true} size={10} color='#e0a3c8' />
+
     if (auth === true) {
       return (
         <>

client/src/components/QrCode/OpenPassportQrCode.tsx

@@ -7,7 +7,7 @@ import { ProofStep } from 'l/constants'
 import type { Id } from 'l/types'
 import { useRouter } from 'next/navigation'
 import { type FC, useState } from 'react'
-import { BounceLoader } from 'react-spinners'
+import { BeatLoader } from 'react-spinners'
 import { ProofAnimation } from './ProofAnimation'
 import { QRCodeDisplay } from './QrCodeDisplay'
 
@@ -41,7 +41,7 @@ export const OpenPassportQRCode: FC<OpenPassportQRcodeProps> = ({
       case ProofStep.MOBILE_CONNECTED:
         return qrElement ? <QRCodeDisplay qrElement={qrElement} /> : null
       case ProofStep.PROOF_GENERATION_STARTED:
-        return <BounceLoader loading={true} size={200} color='#94FBAB' />
+        return <BeatLoader loading={true} size={50} color='#e0a3c8' />
       default:
         return null
     }