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

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" />