Skip to content

Commit

Permalink
feat: Improved layout styling, and other tales (#114)
Browse files Browse the repository at this point in the history
This was mainly a sweep of uses of `h-screen`, as it was breaking on
viewports shorter than the page contents, which was particularly nasty
on the Pricing page, which is long. I've also:

* Tweaked how the rooster shows up on small-width screens
* Made the "Terms of Service" text on the login screen black rather than
white for readability
* Made the hamburger menu icon red rather than write for readability
* Changed "w3up" to "Storacha"

Unfortunately, we don't have Storybook and Chromatic (or similar) to see
all the diffs, but I've screenshotted what I could. Note that these are
all full-page screenshots; the fact that the befores are cut off at the
top is exactly the problem I was solving here. 🙂

Plenty of this is subjective; thoughts, feedback, and corrections are
more than welcome.

### Before


![screencapture-localhost-3000-2024-08-02-16_00_56](https://github.com/user-attachments/assets/8f29fe4a-d078-4271-a3de-75ba30bbf67e)

![screencapture-localhost-3000-2024-08-02-16_02_16](https://github.com/user-attachments/assets/3b9f7b06-0d4d-401e-a90e-144d724f614a)

![screencapture-localhost-3000-2024-08-02-16_15_53](https://github.com/user-attachments/assets/78f31bfa-301c-440e-bdcf-e25962dd766a)

![screencapture-localhost-3000-2024-08-02-16_16_38](https://github.com/user-attachments/assets/a3c09240-a1d4-4029-81c0-6df4a3943a27)

![screencapture-localhost-3000-2024-08-02-16_27_53](https://github.com/user-attachments/assets/1fc08c56-0a58-46aa-939d-7b9aab5eafad)

### After


![screencapture-localhost-3000-2024-08-02-16_01_30](https://github.com/user-attachments/assets/39ec5a46-2dd2-407e-afc9-746e7288447b)

![screencapture-localhost-3000-2024-08-02-16_07_23](https://github.com/user-attachments/assets/78435c8c-d862-4051-ad2a-f51f3bb87a16)

![screencapture-localhost-3000-2024-08-02-16_16_06](https://github.com/user-attachments/assets/365539c3-5966-4885-bd63-dd51f4cfa3f7)

![screencapture-localhost-3000-2024-08-02-16_16_56](https://github.com/user-attachments/assets/dfdb7587-f06f-48cc-9dee-dcc1fff77a99)

![screencapture-localhost-3000-2024-08-02-16_28_11](https://github.com/user-attachments/assets/850af45e-b073-4a09-a420-79245a354c45)
  • Loading branch information
Peeja authored Aug 12, 2024
1 parent 434ae17 commit d0a2208
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 107 deletions.
10 changes: 7 additions & 3 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Authenticator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
90 changes: 0 additions & 90 deletions src/components/Layout.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/Loader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
8 changes: 3 additions & 5 deletions src/components/PlanGate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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>
)
Expand Down
8 changes: 4 additions & 4 deletions src/components/SidebarLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand Down Expand Up @@ -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'>
Expand Down Expand Up @@ -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'>
Expand Down
6 changes: 3 additions & 3 deletions src/components/SpaceEnsurer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand Down

0 comments on commit d0a2208

Please sign in to comment.