joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update UI styles in Features, Marketplace, and Theme components

Browse Source
This commit is contained in:
mauro-balades
2024-09-08 23:35:10 +02:00
parent 2a6e209cb3
commit d5ab7ec758
4 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/features.tsx
View File

@@ -261,10 +261,10 @@ export default function Features() {
{feature == "item-1" && (
<div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
<div></div>
<div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<div className="w-fit h-fit m-auto tems-center bg-surface p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<Logo className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <svg className='w-10 h-10 relative dark:fill-white' xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity"><path style={{ transform: "scale(2) translate(5%, 5%)" }} d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z" /></svg>
</div>
<a href='https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
<a href='https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-surface p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
See what version of Firefox Zen uses <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
</a>
</div>
@@ -272,10 +272,10 @@ export default function Features() {
{feature == "item-2" && (
<div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
<div></div>
<div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<div className="w-fit h-fit m-auto tems-center bg-surface p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<LockClosedIcon className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <EyeClosedIcon className='w-10 h-10' />
</div>
<a href='/privacy-policy' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
<a href='/privacy-policy' target='_blank' className="w-fit h-fit m-auto items-center border-2 border-white shadow tems-center bg-surface p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
Learn about Zen's privacy policy <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
</a>
</div>
@@ -283,10 +283,10 @@ export default function Features() {
{feature == "item-3" && (
<div className='w-full h-full absolute top-0 left-0 grid grid-rows-3'>
<div></div>
<div className="w-fit h-fit m-auto tems-center bg-background p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<div className="w-fit h-fit m-auto tems-center bg-surface p-4 border-2 border-white shadow flex rounded-full animate-fade-in">
<ShieldCheck className='w-10 h-10' /> <span className='text-4xl mx-4'>+</span> <ShieldAlertIcon className='w-10 h-10' />
</div>
<a href='https://docs.zen-browser.app/security' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-background p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
<a href='https://docs.zen-browser.app/security' target='_blank' className="w-fit h-fit m-auto items-center w-fit border-2 border-white shadow tems-center bg-surface p-4 flex rounded-full opacity-0 animate-fade-in [--animation-delay:300ms]">
See how Zen keeps you safe <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' />
</a>
</div>

4
src/components/marketplace.tsx
View File

@@ -11,13 +11,13 @@ export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
return (
<div className="flex flex-col w-full mx-auto items-center justify-center h-full">
<div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-gradient-to-r from-[#f6cfbe] to-[#b9dcf2] dark:from-[#0d1117] dark:to-[#0d1117]">
<div className="mx-auto w-full text-center border-b pt-48 pb-24 mb-12 bg-surface">
<div className="w-full lg:w-1/2 xl:w-1/2 mx-auto px-2 lg:px-none">
<h1 className="text-4xl lg:text-7xl font-bold">Themes Store</h1>
<ThemesSearch input={searchInput} setInput={setSearchInput} tags={tags} setTags={setTags} />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8 mt-10 w-full lg:w-1/2 xl:w-2/3 2xl:w-3/4">
<div className="px-5 lg:px-0 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8 mt-10 w-full lg:w-1/2 xl:w-2/3 2xl:w-3/4">
{getThemesFromSearch(themes, searchInput, tags).map((theme) => (
<ThemeCard key={theme.name} theme={theme} />
))}

2
src/components/theme-card.tsx
View File

@@ -22,7 +22,7 @@ export default function ThemeCard({
<ThemeCardWrapper onClick={(event) => {
if (event.target instanceof HTMLAnchorElement) return;
window.open(`/themes/${theme.id}`, "_self");
}} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ", className)}>
}} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-surface hover:border-blue-500 cursor-pointer select-none ", className)}>
<img src={theme.image} alt={theme.name} width={500} height={500}
className="w-full h-32 object-cover rounded-lg border shadow" />
<h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}</h2>

11
src/components/theme-page.tsx
View File

@@ -17,8 +17,8 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
<div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
<a className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" href="/themes">
<div className="mx-auto md:mx-0 flex flex-col relative bg-surface rounded-lg border shadow lg:sticky lg:top-0 w-md h-full p-5 mr-5 w-full md:max-w-sm">
<a className="flex mt-2 mb-4 items-center cursor-pointer opacity-70" href="/themes">
<ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3>
</a>
@@ -37,19 +37,18 @@ export default async function ThemePage({ themeID }: { themeID: string }) {
)}
<hr className="mt-4" />
<Button
className="mt-4 hidden"
className="mt-4 hidden !rounded-lg"
id="install-theme"
zen-theme-id={theme.id}
>Install Theme 🎉</Button>
<Button
className="mt-4 hidden"
className="mt-4 hidden !rounded-lg"
id="install-theme-uninstall"
zen-theme-id={theme.id}
>Uninstall Theme</Button>
<p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
</div>
<hr className="block my-4 lg:hidden" />
<div className="flex lg:border-l flex-col lg:min-h-[calc(100vh/2-2rem)] px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
<div className="flex flex-col lg:min-h-[calc(100vh/2-2rem)] px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
<div id="policy" className="w-full">
{readme === null ? (
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />