From 853837bd5e00dd9035a1c1bc17223eebcee2d80e Mon Sep 17 00:00:00 2001
From: Petra Jaros <peeja@peeja.com>
Date: Fri, 2 Aug 2024 16:47:11 -0400
Subject: [PATCH 1/2] feat: Improved layout styling

---
 src/app/globals.css              | 10 +++++++---
 src/components/Authenticator.tsx |  2 +-
 src/components/Layout.tsx        |  6 +++---
 src/components/Loader.tsx        |  2 +-
 src/components/PlanGate.tsx      |  8 +++-----
 src/components/SidebarLayout.tsx |  8 ++++----
 src/components/SpaceEnsurer.tsx  |  6 +++---
 7 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 64e069f..116fdb7 100644
--- a/src/app/globals.css
+++ b/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 {
diff --git a/src/components/Authenticator.tsx b/src/components/Authenticator.tsx
index 2ecd555..ba503dd 100644
--- a/src/components/Authenticator.tsx
+++ b/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>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 5524c9c..cb5c922 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -15,7 +15,7 @@ interface SidebarComponentProps {
 
 function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element {
   return (
-    <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800 h-screen'>
+    <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800 min-h-screen'>
       <div className='flex flex-col justify-between h-full'>
         {sidebar}
         <div className='flex flex-col items-center'>
@@ -39,7 +39,7 @@ export function DefaultLayout ({ sidebar = <div></div>, children }: LayoutCompon
   const [sidebarOpen, setSidebarOpen] = useState(false)
 
   return (
-    <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'>
@@ -64,7 +64,7 @@ export function DefaultLayout ({ sidebar = <div></div>, children }: LayoutCompon
               leaveTo="-translate-x-full">
               <Dialog.Panel>
                 <XMarkIcon className='text-white w-6 h-6 fixed top-2 -right-8' onClick={() => setSidebarOpen(false)} />
-                <Sidebar sidebar={sidebar} />
+              <Sidebar sidebar={sidebar} />
               </Dialog.Panel>
             </Transition.Child>
           </div>
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index c63826f..ce64d67 100644
--- a/src/components/Loader.tsx
+++ b/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>
 )
diff --git a/src/components/PlanGate.tsx b/src/components/PlanGate.tsx
index 3b95b69..a23f9d5 100644
--- a/src/components/PlanGate.tsx
+++ b/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>
     )
diff --git a/src/components/SidebarLayout.tsx b/src/components/SidebarLayout.tsx
index 6a694d1..bdf57b7 100644
--- a/src/components/SidebarLayout.tsx
+++ b/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'>
diff --git a/src/components/SpaceEnsurer.tsx b/src/components/SpaceEnsurer.tsx
index e470a5c..37a9d28 100644
--- a/src/components/SpaceEnsurer.tsx
+++ b/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!

From b5ddd33b55b23cce8c68332cf7e74e317395060c Mon Sep 17 00:00:00 2001
From: Petra Jaros <peeja@peeja.com>
Date: Fri, 2 Aug 2024 16:54:16 -0400
Subject: [PATCH 2/2] refactor: Remove unused Layout component

This appears to be highly duplicated from `SidebarLayout`, but isn't itself used at all.
---
 src/components/Layout.tsx | 90 ---------------------------------------
 1 file changed, 90 deletions(-)
 delete mode 100644 src/components/Layout.tsx

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
deleted file mode 100644
index cb5c922..0000000
--- a/src/components/Layout.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Logo } from '../brand'
-import { Fragment, useState } from 'react'
-import { Dialog, Transition } from '@headlessui/react'
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
-
-const navLinks = [
-  { name: 'Terms', href: '/terms' },
-  { name: 'Docs', href: '/docs' },
-  { name: 'Support', href: 'https://github.com/web3-storage/w3ui/issues' },
-]
-
-interface SidebarComponentProps {
-  sidebar?: JSX.Element | JSX.Element[]
-}
-
-function Sidebar ({ sidebar = <div></div> }: SidebarComponentProps): JSX.Element {
-  return (
-    <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800 min-h-screen'>
-      <div className='flex flex-col justify-between h-full'>
-        {sidebar}
-        <div className='flex flex-col items-center'>
-          <a href='/'><Logo className='w-36 mb-2' /></a>
-          <div className='flex flex-row space-x-2'>
-            {navLinks.map((link, i) => (
-              <a key={i} className='text-xs block text-center mt-2' href={link.href}>{link.name}</a>
-            ))}
-          </div>
-        </div>
-      </div>
-    </nav>
-  )
-}
-
-interface LayoutComponentProps extends SidebarComponentProps {
-  children: JSX.Element | JSX.Element[]
-}
-
-export function DefaultLayout ({ sidebar = <div></div>, children }: LayoutComponentProps): JSX.Element {
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-
-  return (
-    <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'>
-          <Transition.Child
-            as={Fragment}
-            enter="transition-opacity duration-200"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition-opacity duration-400"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0">
-            <div className="fixed inset-0 bg-black/70" aria-hidden="true" />
-          </Transition.Child>
-          <div className="fixed inset-0 flex justify-left">
-            <Transition.Child
-              as={Fragment}
-              enter="transition duration-200"
-              enterFrom="-translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition duration-400"
-              leaveFrom="translate-x-0"
-              leaveTo="-translate-x-full">
-              <Dialog.Panel>
-                <XMarkIcon className='text-white w-6 h-6 fixed top-2 -right-8' onClick={() => setSidebarOpen(false)} />
-              <Sidebar sidebar={sidebar} />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </Dialog>
-      </Transition.Root>
-
-      {/* static sidebar for wide browsers */}
-      <div className='hidden lg:block'>
-        <Sidebar sidebar={sidebar} />
-      </div>
-      <div className='bg-racha-fire w-full h-screen overflow-scroll'>
-        {/* 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)} />
-          <a href='/'><Logo className='w-36 mb-2' /></a>
-        </div>
-        <main className='grow text-black p-4'>
-          {children}
-        </main>
-      </div>
-    </div>
-  )
-}