feat: Improved layout styling, and other tales

src/app/globals.css

@@ -19,11 +19,15 @@
 }
 .bg-racha-fire {
   background: var(--hot-red-light) url("/racha-fire.png") bottom left;
-  background-size: cover;
+  background-size: 100% auto;
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 .bg-racha-fire\/50 {
   background: transparent url("/racha-fire-opacity-50.png") bottom left;
-  background-size: cover;
+  background-size: 100% auto;
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 .bg-hot-red,
 .hover\:bg-hot-red:hover {
@@ -88,7 +92,7 @@
 }
 
 .authenticator {
-  @apply bg-racha-fire w-full h-screen flex flex-col justify-center items-center;
+  @apply bg-racha-fire w-full min-h-screen flex flex-col justify-center items-center py-4;
 }
 
 @keyframes bgPosDrift {

src/components/Authenticator.tsx

@@ -29,7 +29,7 @@ export function AuthenticationForm (): JSX.Element {
           </button>
         </div>
       </AuthCore.Form>
-      <p className='text-xs text-white/80 italic max-w-xs text-center mt-6'>
+      <p className='text-xs text-black/80 italic max-w-xs text-center mt-6'>
         By registering with storacha.network, you agree to the storacha.network <a className='underline' href='https://web3.storage/docs/terms/'>Terms of Service</a>.
       </p>
     </div>

src/components/Loader.tsx

@@ -7,7 +7,7 @@ export default function DefaultLoader({ className = '' }: { className?: string }
 }
 
 export const TopLevelLoader = () => (
-  <div className='h-screen flex items-center justify-center'>
+  <div className='min-h-screen flex items-center justify-center'>
     <DefaultLoader className='h-12 w-12 text-black' />
   </div>
 )

src/components/PlanGate.tsx

@@ -16,9 +16,9 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
 
   if (!plan?.product) {
     return (
-      <div className="flex flex-col justify-center items-center h-screen">
+      <div className="flex flex-col justify-center items-center min-h-screen">
         <div className='my-6'><Logo /></div>
-        <div className="max-w-screen-lg font-epilogue text-black text-center bg-white border border-hot-red rounded-2xl p5">
+        <div className="max-w-screen-lg font-epilogue text-black text-center bg-white border border-hot-red rounded-2xl overflow-hidden p5 mx-4 mb-4">
           <div className='px-6 py-6 lg:px-24'>
             <h1 className="my-4 font-bold">Welcome {accounts[0]?.toEmail()}!</h1>
             <p className='my-4'>
@@ -30,9 +30,7 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
               Pick a plan below and complete the Stripe signup flow to get started!
             </p>
           </div>
-          <div className='rounded-lg overflow-hidden'>
-            <StripePricingTable />
-          </div>
+          <StripePricingTable />
         </div>
       </div>
     )

src/components/SidebarLayout.tsx

@@ -36,7 +36,7 @@ function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element
     router.push(`/space/${s.did()}`)
   }
   return (
-    <nav className='flex-none w-64 bg-hot-yellow text-hot-red px-5 pb-5 border-r border-hot-red h-screen'>
+    <nav className='flex-none w-64 bg-hot-yellow text-hot-red px-5 pb-5 border-r border-hot-red min-h-screen'>
       <div className='flex flex-col justify-between h-full'>
         <div>
           <header className='opacity-0 lg:opacity-100 my-8'>
@@ -77,7 +77,7 @@ export default function SidebarLayout ({ children }: LayoutComponentProps): JSX.
       <AuthenticationEnsurer>
         <MaybePlanGate>
           <SpaceEnsurer>
-            <div className='flex min-h-full w-full text-white'>
+            <div className='flex min-h-screen w-full text-white'>
               {/* dialog sidebar for narrow browsers */}
               <Transition.Root show={sidebarOpen} >
                 <Dialog onClose={() => setSidebarOpen(false)} as='div' className='relative z-50'>
@@ -112,10 +112,10 @@ export default function SidebarLayout ({ children }: LayoutComponentProps): JSX.
               <div className='hidden lg:block'>
                 <Sidebar />
               </div>
-              <div className='bg-racha-fire/50 w-full h-screen overflow-scroll text-white'>
+              <div className='bg-racha-fire/50 w-full'>
                 {/* top nav bar for narrow browsers, mainly to have a place to put the hamburger */}
                 <div className='lg:hidden flex justify-between pt-4 px-4'>
-                  <Bars3Icon className='w-6 h-6' onClick={() => setSidebarOpen(true)} />
+                  <Bars3Icon className='text-hot-red w-6 h-6' onClick={() => setSidebarOpen(true)} />
                   <Logo className='w-full' />
                 </div>
                 <main className='grow text-black p-12'>

src/components/SpaceEnsurer.tsx

@@ -14,14 +14,14 @@ export function SpaceEnsurer ({
     return children;
   }
   return (
-    <div className="flex flex-col justify-center items-center h-screen bg-racha-fire">
-      <div className='text-zinc-950 bg-white rounded-2xl border border-hot-red shadow-md px-10 pt-8 pb-8'>
+    <div className="flex flex-col justify-center items-center min-h-screen bg-racha-fire">
+      <div className='text-zinc-950 bg-white rounded-2xl border border-hot-red shadow-md px-10 pt-8 pb-8 my-4'>
         <div className='flex flex-row gap-4 mb-8 justify-center'>
           <Logo className='w-36' />
         </div>
         <h1 className='text-xl font-epilogue'>Welcome{accounts[0] ? ` ${accounts[0]?.toEmail()}` : ''}!</h1>
         <p className='my-2 font-epilogue'>
-          To get started with w3up you&apos;ll need to create a space.
+          To get started with Storacha, you&apos;ll need to create a space.
         </p>
         <p className='my-2 font-epilogue'>
           Give it a name and hit create!