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

Fix formatting in status.json and themes-search.tsx

Browse Source
This commit is contained in:
mauro-balades
2024-09-30 16:58:46 +02:00
parent f0e7db050d
commit 4f6bef1850
10 changed files with 335 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/create-theme.tsx
View File

@@ -291,9 +291,9 @@ export default function CreateThemePage() {
<div className="ml-4 h-11 w-11 rounded-lg border bg-[var(--zen-dialog-background)]"></div>
</div>
<div className="text-md mt-8 font-bold text-muted-foreground">
Right now, we aren't taking more color Mods for the browser,
until we find a way to make it more accessible for everyone.
However, you can still create your own theme and share it with the
Right now, we aren't taking more color Mods for the browser, until
we find a way to make it more accessible for everyone. However,
you can still create your own theme and share it with the
community.
</div>
<Sheet>

4
src/components/download.tsx
View File

@@ -190,7 +190,7 @@ export default function DownloadPage() {
};
const linuxAppimageBashScript =
'bash <(curl https://updates.zen-browser.app/appimage.sh)';
"bash <(curl https://updates.zen-browser.app/appimage.sh)";
return (
<>
@@ -533,7 +533,7 @@ export default function DownloadPage() {
"mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
selectedLinuxDownloadType === "flatpak"
? "border-blue-400"
: ""
: "",
)}
>
<h1 className="my-2 text-5xl opacity-40 dark:opacity-20">

39
src/components/footer.tsx
View File

@@ -13,9 +13,16 @@ export default function Footer() {
<Logo />
<div className="mt-auto">
<h1 className="text-2xl font-bold opacity-80">Zen Browser</h1>
<a data-umami-event="footer-status" href="https://uptime.zen-browser.app/" className="py-2 px-3 w-fit mt-2 cursor-pointer rounded-md shadow bg-surface flex items-center">
<div className="rounded-full size-3 bg-green-500 relative shadow">
<div className="rounded-full size-3 bg-green-500 animate-ping absolute top-[-0.2%] z-0" style={{ animationDuration: "1.7s" }}></div>
<a
data-umami-event="footer-status"
href="https://uptime.zen-browser.app/"
className="mt-2 flex w-fit cursor-pointer items-center rounded-md bg-surface px-3 py-2 shadow"
>
<div className="relative size-3 rounded-full bg-green-500 shadow">
<div
className="absolute top-[-0.2%] z-0 size-3 animate-ping rounded-full bg-green-500"
style={{ animationDuration: "1.7s" }}
></div>
</div>
<p className="ml-3 !text-sm font-bold opacity-40">
System Status
@@ -54,7 +61,10 @@ export default function Footer() {
<h2 className="text-md font-bold opacity-80">Get Help</h2>
<ul className="mt-4 font-normal opacity-70">
<li>
<a data-umami-event="footer-discord" href="https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748">
<a
data-umami-event="footer-discord"
href="https://discord.com/servers/mauro-s-little-sweatshop-1088172780480114748"
>
Discord
</a>
</li>
@@ -70,7 +80,12 @@ export default function Footer() {
<a href="/about">About Us</a>
</li>
<li className="mt-2">
<a data-umami-event="footer-privacy-policy" href="/privacy-policy">Privacy Policy</a>
<a
data-umami-event="footer-privacy-policy"
href="/privacy-policy"
>
Privacy Policy
</a>
</li>
</ul>
</div>
@@ -93,10 +108,20 @@ export default function Footer() {
<h2 className="text-md mt-8 font-bold opacity-80">Support Us</h2>
<ul className="mt-4 font-normal opacity-70">
<li>
<a data-umami-event="patreon-fotter" href="https://patreon.com/zen_browser">Patreon</a>
<a
data-umami-event="patreon-fotter"
href="https://patreon.com/zen_browser"
>
Patreon
</a>
</li>
<li className="mt-2">
<a data-umami-event="ko-fi-fotter" href="https://ko-fi.com/zen_browser">Ko-fi</a>
<a
data-umami-event="ko-fi-fotter"
href="https://ko-fi.com/zen_browser"
>
Ko-fi
</a>
</li>
</ul>
</div>

26
src/components/marketplace.tsx
View File

@@ -11,25 +11,25 @@ export default function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
const [tags, setTags] = React.useState<string[]>(["all"]);
return (
<div className="mx-auto flex flex-col lg:flex-row h-full w-full relative">
<div className="relative shadow bg-surface w-full lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:mt-24 py-48 lg:py-32 px-10 dark:bg-[#121212] w-full lg:w-1/2 xl:w-1/3 2xl:w-1/4">
<div className="relative mx-auto flex h-full w-full flex-col lg:flex-row">
<div className="relative w-full bg-surface px-10 py-48 shadow dark:bg-[#121212] lg:mt-24 lg:w-1/2 lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:py-32 xl:w-1/3 2xl:w-1/4">
<StickyBox
className="h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
offsetTop={120}
>
<h1 className="text-4xl font-bold lg:text-7xl">Mods Store</h1>
<p className="mt-4 text-lg text-muted-foreground">
Discover and install Mods for Zen Browser.
</p>
<ThemesSearch
input={searchInput}
setInput={setSearchInput}
tags={tags}
setTags={setTags}
/>
<h1 className="text-4xl font-bold lg:text-7xl">Mods Store</h1>
<p className="mt-4 text-lg text-muted-foreground">
Discover and install Mods for Zen Browser.
</p>
<ThemesSearch
input={searchInput}
setInput={setSearchInput}
tags={tags}
setTags={setTags}
/>
</StickyBox>
</div>
<div className="mt-10 grid w-full grid-cols-1 pt-12 gap-8 lg:gap-y-16 px-5 xl:grid-cols-2 lg:w-1/2 lg:px-10 xl:w-2/3 2xl:w-3/4 2xl:grid-cols-3">
<div className="mt-10 grid w-full grid-cols-1 gap-8 px-5 pt-12 lg:w-1/2 lg:gap-y-16 lg:px-10 xl:w-2/3 xl:grid-cols-2 2xl:w-3/4 2xl:grid-cols-3">
{getThemesFromSearch(themes, searchInput, tags).map((theme) => (
<ThemeCard key={theme.name} theme={theme} />
))}

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

@@ -38,7 +38,7 @@ export default function ThemeCard({
<img
src={theme.image}
alt={theme.name}
className="h-48 rounded-xl border-2 object-cover shadow overflow-hidden border-[rgba(0,0,0,.5)] dark:border-[#333]"
className="h-48 overflow-hidden rounded-xl border-2 border-[rgba(0,0,0,.5)] object-cover shadow dark:border-[#333]"
/>
<h2 className="mt-4 overflow-ellipsis text-start text-xl font-bold">
{theme.name.substring(0, maxNameLen).trim() +

2
src/components/themes-search.tsx
View File

@@ -52,7 +52,7 @@ export default function ThemesSearch({
key={tag}
onClick={() => setTags([tag])}
className={ny(
`!rounded-full px-5 !min-w-24 !py-2 !h-fit ${tags.includes(tag) ? "bg-black text-white dark:bg-white dark:text-black" : ""}`,
`!h-fit !min-w-24 !rounded-full !py-2 px-5 ${tags.includes(tag) ? "bg-black text-white dark:bg-white dark:text-black" : ""}`,
)}
>
{tag.replace(/-/g, " ")}