ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-07 17:05:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(icons): replace Lucide icons with custom icon components

Browse source 
The changes show migration from Lucide to custom icon components. The change touches multiple components and includes adding new icon files.
This commit is contained in:
Shintaro Jokagi 2025-05-15 22:35:26 +12:00
parent da8dfd63bd
commit b91fe93229
No known key found for this signature in database
GPG key ID: 0DDF8FA44C9A0DA8
29 changed files with 230 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/BackButton.astro
View file

@ -1,5 +1,5 @@
---
import { ArrowLeft } from 'lucide-astro'
import ArrowLeftIcon from '~/icons/ArrowLeftIcon.astro'
import { getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro)
@ -15,6 +15,6 @@ const {
onclick="window.history.back()"
class="mb-8 flex w-min items-center gap-2"
>
<ArrowLeft class="size-4" />
<ArrowLeftIcon class="size-4" />
{slug.back}
</button>

9
src/components/Community.astro
View file

@ -1,11 +1,12 @@
---
import Image from 'astro/components/Image.astro'
import { Check, Github } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import ComImage from '~/assets/ComImage.png'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import CheckIcon from '~/icons/CheckIcon.astro'
import GitHubIcon from '~/icons/GitHubIcon.astro'
import { getLocale, getUI } from '~/utils/i18n'
const locale = getLocale(Astro)
@ -42,7 +43,7 @@ const {
<div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
<motion.span client:load {...getTitleAnimation(0.8)}>
<Button class:list={['px-4']} href="https://github.com/zen-browser">
<Github class="size-4" />
<GitHubIcon class="size-4" />
<span>{community.lists.freeAndOpenSource.title}</span>
</Button>
</motion.span>
@ -51,7 +52,7 @@ const {
{...getTitleAnimation(1)}
className="flex items-center gap-4"
>
<Check class="size-4" />
<CheckIcon class="size-4" />
<span>{community.lists.simpleYetPowerful.title}</span>
</motion.div>
<motion.div
@ -59,7 +60,7 @@ const {
{...getTitleAnimation(1.2)}
className="flex items-center gap-4"
>
<Check class="size-4" />
<CheckIcon class="size-4" />
<span>{community.lists.privateAndAlwaysUpToDate.title}</span>
</motion.div>
</div>

4
src/components/Footer.astro
View file

@ -1,9 +1,9 @@
---
import { ArrowRight } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Circles from '~/components/Circles.astro'
import Description from '~/components/Description.astro'
import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
const locale = getLocale(Astro)
@ -41,7 +41,7 @@ const {
aria-label={footer.download}
>
{footer.download}
<ArrowRight class="size-4" aria-hidden="true" />
<ArrowRightIcon class="size-4" aria-hidden="true" />
</Button>
</section>
<section

6
src/components/Hero.astro
View file

@ -1,11 +1,11 @@
---
import { ArrowRight } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '~/animations'
import HomePageVideo from '~/assets/HomePageVideo.webm'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import Title from '~/components/Title.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import SocialMediaStrip from './SocialMediaStrip.astro'
import Video from './Video.astro'
@ -37,7 +37,7 @@ const {
>
<div class="flex h-full flex-col items-center justify-center">
<Title
class="relative px-12 text-center !font-normal !leading-8 leading-[108px] md:!text-7xl lg:px-0 lg:!text-9xl"
class="relative px-12 text-center !font-normal leading-8 md:text-7xl lg:px-0 lg:text-9xl"
>
<motion.span client:load {...getHeroTitleAnimation()}>
{hero.title[0]}
@ -71,7 +71,7 @@ const {
<motion.span client:load {...getHeroTitleAnimation()}>
<Button class="w-full" href={getLocalePath('/download')} isPrimary>
{hero.buttons.beta}
<ArrowRight class="size-4" />
<ArrowRightIcon class="size-4" />
</Button>
</motion.span>
<motion.span client:load {...getHeroTitleAnimation()}>

17
src/components/NavBar.astro
View file

@ -1,8 +1,11 @@
---
import { Astronav, Dropdown, DropdownItems, MenuItems } from 'astro-navbar'
import { ArrowRight, ChevronDown, Download, Menu } from 'lucide-astro'
import { motion } from 'motion/react'
import Button from '~/components/Button.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import ChevronDownIcon from '~/icons/ChevronDownIcon.astro'
import DownloadIcon from '~/icons/DownloadIcon.astro'
import MenuIcon from '~/icons/MenuIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n'
import { getTitleAnimation } from '../animations.ts'
import Logo from './Logo.astro'
@ -36,7 +39,7 @@ const {
<Dropdown class="group">
<button class="flex items-center">
<span>{menu.gettingStarted}</span>
<ChevronDown
<ChevronDownIcon
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
/>
</button>
@ -56,7 +59,7 @@ const {
</div>
<Button isPrimary class="mt-auto">
{menu.tryZenMods}
<ArrowRight class="size-4" />
<ArrowRightIcon class="size-4" />
</Button>
</a>
<a class="dropdown-item" href={getLocalePath('/release-notes')}>
@ -77,7 +80,7 @@ const {
<Dropdown class="group">
<button class="flex items-center">
<span>{menu.usefulLinks}</span>
<ChevronDown
<ChevronDownIcon
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
/>
</button>
@ -129,10 +132,10 @@ const {
<Button href="/download" class="hidden lg:flex" isPrimary>
<span class="hidden items-center gap-2 lg:flex">
{menu.download}
<ArrowRight class="size-4" />
<ArrowRightIcon class="size-4" />
</span>
<span class="flex items-center gap-2 lg:hidden">
<Download class="size-4" />
<DownloadIcon class="size-4" />
</span>
</Button>
<label
@ -140,7 +143,7 @@ const {
class="cursor-pointer p-2 text-dark lg:hidden"
aria-label="Open menu"
>
<Menu class="h-6 w-6" />
<MenuIcon class="h-6 w-6" />
</label>
</div>
</MenuItems>

4
src/components/ReleaseNoteItem.astro
View file

@ -1,6 +1,6 @@
---
import { Accordion, AccordionItem } from 'free-astro-components'
import { Info } from 'lucide-astro'
import InfoIcon from '~/icons/InfoIcon.astro'
import { releaseNotes as releaseNotesData } from '~/release-notes'
import { getLocale, getPath, getUI } from '~/utils/i18n'
@ -112,7 +112,7 @@ if (prevReleaseNote && !isTwilight) {
}
</div>
<div class="text-muted-forground mt-6 flex text-sm opacity-70">
{isTwilight ? <Info class="mx-4 my-0 size-6 text-yellow-500" /> : null}
{isTwilight ? <InfoIcon class="mx-4 my-0 size-6 text-yellow-500" /> : null}
<p class="m-0">
{isTwilight ? <>{releaseNoteItem.twilightWarning}</> : null}
<span set:html={releaseNoteItem.reportIssues} />

14
src/components/Title.astro
View file

@ -2,18 +2,6 @@
const { class: className } = Astro.props
---
<h1 class:list={['title text-dark', className]}>
<h1 class:list={['text-dark leading-[0.9] mb-[0.4rem] font-junicode font-semibold text-5xl xl:text-6xl', className]}>
<slot />
</h1>
<style>
.title {
line-height: 0.9;
margin-bottom: 0.4rem;
font-family: 'Junicode', serif;
font-weight: 600;
font-style: normal;
font-feature-settings: 'swsh' 1;
@apply text-5xl xl:text-6xl;
}
</style>

140
src/i18n/en/translation.json
View file

@ -144,82 +144,98 @@
}
},
"about": {
"title": "About - Zen",
"title": "About Zen",
"description": "We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected.",
"littleHelp": "A little help?",
"mainTeam": {
"title": "Main Team",
"description": "This list shows the main team members who are working hard to bring you the best browsing experience.",
"members": {
"mauro": {
"name": "Mauro B.",
"description": "Creator, Main Developer",
"link": "https://cheff.dev/"
"browser": {
"mauro": {
"name": "Mauro B.",
"description": "Creator, Main Developer",
"link": "https://cheff.dev/"
},
"jan": {
"name": "Jan Heres",
"description": "Active contributor and helps with MacOS builds",
"link": "https://janheres.eu/"
},
"bryan": {
"name": "Bryan Galdámez",
"description": "Huge contributor on theme functionalities",
"link": "https://josuegalre.netlify.app/"
},
"oscar": {
"name": "Oscar Gonzalez",
"description": "Site Reliability Engineer (SRE) and code signing.",
"link": false
},
"daniel": {
"name": "Daniel García",
"description": "MacOS certificate and app notarization maintainer",
"link": false
},
"brhm": {
"name": "BrhmDev",
"description": "Active contributor with great contributions",
"link": "https://github.com/BrhmDev"
},
"kristijanribaric": {
"name": "Kristijan Ribaric",
"description": "Active contributor",
"link": "https://github.com/kristijanribaric"
},
"larvey": {
"name": "Larvey",
"description": "AUR maintainer",
"link": "https://github.com/LarveyOfficial/"
}
},
"oscar": {
"name": "Oscar Gonzalez",
"description": "Site Reliability Engineer (SRE) and code signing.",
"link": false
},
"jan": {
"name": "Jan Heres",
"description": "Active contributor and helps with MacOS builds",
"link": "https://janheres.eu/"
},
"brhm": {
"name": "BrhmDev",
"description": "Active contributor with great contributions",
"link": "https://github.com/BrhmDev"
},
"canoa": {
"name": "Canoa",
"description": "Active contributor, and very active in issue handling and website management",
"link": "https://thatcanoa.org/"
},
"adam": {
"name": "Adam",
"description": "Branding and design",
"link": "https://cybrneon.xyz/"
},
"kristijanribaric": {
"name": "Kristijan Ribaric",
"description": "Active contributor",
"link": "https://github.com/kristijanribaric"
},
"n7itro": {
"name": "n7itro",
"description": "Active contributor and release notes writer",
"link": "https://github.com/n7itro"
},
"bryan": {
"name": "Bryan Galdámez",
"description": "Huge contributor on theme functionalities",
"link": "https://josuegalre.netlify.app/"
},
"jafeth": {
"name": "Jafeth Garro",
"description": "Documentation writer",
"link": "https://iamjafeth.com/"
},
"larvey": {
"name": "Larvey",
"description": "AUR maintainer",
"link": "https://github.com/LarveyOfficial/"
},
"daniel": {
"name": "Daniel García",
"description": "MacOS certificate and app notarization maintainer",
"link": false
"website": {
"taroj1205": {
"name": "Shintaro Jokagi",
"description": "Core Website Architect, Spearheading Refactoring and Technical Enhancements",
"link": "https://github.com/taroj1205"
},
"jace": {
"name": "Jace",
"description": "Website and branding",
"link": "https://x.com/JaceThings"
},
"canoa": {
"name": "Canoa",
"description": "Active contributor, and very active in issue handling and website management",
"link": "https://thatcanoa.org/"
},
"adam": {
"name": "Adam",
"description": "Branding and design",
"link": "https://cybrneon.xyz/"
},
"n7itro": {
"name": "n7itro",
"description": "Active contributor and release notes writer",
"link": "https://github.com/n7itro"
},
"jafeth": {
"name": "Jafeth Garro",
"description": "Documentation writer",
"link": "https://iamjafeth.com/"
}
}
}
},
"contributors": {
"title": "Contributors",
"description": "This list shows the contributors who have helped us to make Zen Browser the best it can be."
"description": "This list shows the contributors who have helped us to make Zen Browser the best it can be.",
"browser": "Browser",
"website": "Website"
}
},
"donate": {
"title": "Donate - Zen Browser",
"title": "Donate",
"description": "We are a small team of developers working hard to bring you the best browsing experience. If you like what we do, please consider supporting us.",
"patreon": {
"title": "Patreon",
@ -396,7 +412,7 @@
"description": "Stay up to date with the latest changes to Zen Browser! Since the first release till {latestVersion}, we've been working hard to make Zen Browser the best it can be. Thanks everyone for your feedback! ❤️"
},
"about": {
"title": "About - Zen",
"title": "About Zen",
"description": "We are simply a group of developers and designers who care about your experience on the web. We believe that the internet should be a place where you can explore, learn, and connect without worrying about your data being collected."
},
"donate": {

5
src/icons/ArrowLeftIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-arrow-left-icon lucide-arrow-left", className]} {...props}><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>

5
src/icons/ArrowRightIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-arrow-right-icon lucide-arrow-right", className]} {...props}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>

5
src/icons/ArrowUp.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-arrow-up-icon lucide-arrow-up", className]} {...props}><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>

5
src/icons/CheckIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-check-icon lucide-check", className]} {...props}><path d="M20 6 9 17l-5-5"/></svg>

5
src/icons/ChevronDownIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-chevron-down-icon lucide-chevron-down", className]} {...props}><path d="m6 9 6 6 6-6"/></svg>

5
src/icons/DownloadIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-download-icon lucide-download", className]} {...props}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>

5
src/icons/ExternalLink.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-external-link-icon lucide-external-link", className]} {...props}><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>

5
src/icons/GitHubIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-github-icon lucide-github", className]} {...props}><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>

5
src/icons/InfoIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-info-icon lucide-info", className]} {...props}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>

5
src/icons/LockIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-lock-icon lucide-lock", className]} {...props}><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>

5
src/icons/MenuIcon.astro Normal file
View file

@ -0,0 +1,5 @@
---
const { class: className, ...props } = Astro.props
---
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class:list={["lucide lucide-menu-icon lucide-menu", className]} {...props}><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>

4
src/layouts/Layout.astro
View file

@ -89,7 +89,7 @@ const locale = getLocale(Astro)
<script>
console.log(
'%c✌️ Zen-Browser%c\nWelcome to a calmer internet!%c',
'%c✌️ Zen-Browser%c\nWelcome to a calmer internet!',
'filter: invert(1); font-size: 28px; font-weight: bolder; font-family: "Rubik"; margin-top: 20px; margin-bottom: 8px;',
'color: #f76f53; font-size: 16px; font-family: "Rubik"; margin-bottom: 20px;'
);
@ -97,7 +97,7 @@ const locale = getLocale(Astro)
</head>
<body
class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark text-pretty"
class="overflow-x-hidden bg-paper font-['bricolage-grotesque'] text-dark text-balance"
>
<NavBar />
<slot />

2
src/pages/[...locale]/404.astro
View file

@ -18,7 +18,7 @@ const {
class="container flex min-h-[70vh] flex-col items-center justify-center gap-6 py-24 text-center"
>
<Title class="text-7xl font-bold text-coral md:text-9xl">404</Title>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col items-center gap-6">
<Description class="text-xl md:text-2xl">
{notFound.title}
</Description>

83
src/pages/[...locale]/about.astro
View file

@ -1,9 +1,10 @@
---
import Button from '~/components/Button.astro'
import { Image } from 'astro:assets'
import Description from '~/components/Description.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
import Button from '~/components/Button.astro'
const locale = getLocale(Astro)
@ -18,63 +19,67 @@ const {
description={layout.about.description}
>
<main
class="flex min-h-screen flex-col items-center justify-center py-24 container w-full gap-24"
class="flex min-h-screen flex-col py-24 container w-full gap-24"
>
<div class="text-center w-full flex flex-col gap-4">
<div class="w-full flex flex-col gap-6">
<Description class="text-6xl font-bold leading-none">{about.title}</Description>
<Description class="max-w-3xl mx-auto">
<Description class="max-w-4xl">
{about.description}
</Description>
<Button href="/donate" class="mx-auto w-fit" isPrimary
<Button href="/donate" class="w-fit" isPrimary
>{about.littleHelp}</Button
>
</div>
<div
class="grid lg:grid-cols-[1fr_1px_1fr] gap-6"
>
<div class="flex flex-col gap-4">
<div class="text-4xl font-bold lg:text-6xl leading-none">{about.mainTeam.title}</div>
<div class="flex flex-col gap-4 w-full">
<div class="text-4xl lg:text-5xl font-bold leading-none">{about.mainTeam.title}</div>
<Description>
{about.mainTeam.description}
</Description>
<div>
<ul class="flex flex-col gap-2">
{Object.entries(about.mainTeam.members).map(([_key, member]) => (
<li class="text-sm">
{member.link ? (
<a href={member.link === true ? '' : member.link}>
<strong class="zen-link font-bold">{member.name}</strong>
</a>
<span class="opacity-80"> : {member.description}</span>
) : (
<strong class="font-bold">{member.name}</strong>
<span class="opacity-80"> : {member.description}</span>
)}
</li>
))}
</ul>
<div class="flex flex-col gap-6">
{Object.entries(about.mainTeam.members).map(([team, members]) => (
<div class="flex flex-col gap-2">
<div class="text-3xl font-semibold">{team.charAt(0).toUpperCase() + team.slice(1)} Team</div>
<ul class="flex flex-col gap-2">
{Object.entries(members).map(([_key, member]) => (
<li class="text-sm">
{member.link && typeof member.link === 'string' ? (
<a href={member.link}>
<strong class="zen-link font-bold">{member.name}</strong>
</a>
) : (
<strong class="font-bold">{member.name}</strong>
)}
<span class="opacity-80"> : {member.description}</span>
</li>
))}
</ul>
</div>
))}
</div>
</div>
<hr class="hidden h-full w-[1px] bg-dark opacity-15 lg:block" />
<div class="flex flex-col gap-4">
<div class="text-4xl font-bold lg:text-6xl leading-none">{about.contributors.title}</div>
<div class="flex flex-col gap-4 w-full">
<div class="text-4xl lg:text-5xl font-bold leading-none">{about.contributors.title}</div>
<Description>
{about.contributors.description}
</Description>
<div class="flex flex-col gap-4"><a href="https://github.com/zen-browser/desktop/graphs/contributors"
><img
<div class="flex flex-col gap-4 w-fit"><Description class="text-3xl font-semibold lg:text-4xl">{about.contributors.browser}</Description>
<a href="https://github.com/zen-browser/desktop/graphs/contributors"
><Image
src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
alt="Contributors"
/></a
>
<a href="https://github.com/zen-browser/www/graphs/contributors"
><img
src="https://contributors-img.web.app/image?repo=zen-browser/www"
alt="Contributors (website)"
width={500}
height={500}
/></a
></div>
<div class="flex flex-col gap-4 w-fit"><Description class="text-3xl font-semibold lg:text-4xl">{about.contributors.website}</Description>
<a href="https://github.com/zen-browser/www/graphs/contributors"
><Image
src="https://contributors-img.web.app/image?repo=zen-browser/www"
alt="Contributors (website)"
width={500}
height={500}
/></a
></div></div>
</div>
</div>
</main>
</Layout>

10
src/pages/[...locale]/donate.astro
View file

@ -1,7 +1,7 @@
---
import { ArrowRight } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import Layout from '~/layouts/Layout.astro'
import { getLocale, getUI } from '~/utils/i18n'
export { getStaticPaths } from '~/utils/i18n'
@ -14,8 +14,7 @@ const {
---
<Layout title={layout.donate.title} description={layout.donate.description}>
<main class="container pb-52 pt-36">
<div class="flex flex-col items-center justify-center gap-12">
<main class="container pb-52 pt-24 flex flex-col items-center gap-12">
<div class="flex flex-col gap-4 lg:text-center">
<Description class="text-6xl font-bold">{donate.title}</Description>
<Description class="max-w-3xl">
@ -36,7 +35,7 @@ const {
class="w-fit"
>
{donate.patreon.button}
<ArrowRight class="size-4" />
<ArrowRightIcon class="size-4" />
</Button>
</div>
<hr class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block" />
@ -47,10 +46,9 @@ const {
</Description>
<Button href="https://ko-fi.com/zen_browser" isPrimary class="w-fit">
{donate.koFi.button}
<ArrowRight class="size-4" />
<ArrowRightIcon class="size-4" />
</Button>
</div>
</div>
</div>
</main>
</Layout>

7
src/pages/[...locale]/download.astro
View file

@ -9,7 +9,8 @@ import { getLocale, getUI } from '~/utils/i18n'
import { icon, library } from '@fortawesome/fontawesome-svg-core'
import { faApple, faGithub, faLinux, faWindows } from '@fortawesome/free-brands-svg-icons'
import { ExternalLink, Lock } from 'lucide-astro'
import ExternalLinkIcon from '~/icons/ExternalLink.astro'
import LockIcon from '~/icons/LockIcon.astro'
export { getStaticPaths } from '~/utils/i18n'
@ -180,7 +181,7 @@ const platformDescriptions = download.platformDescriptions
<div
class="rounded-xl border border-subtle p-3 transition-all duration-100 hover:bg-coral hover:bg-opacity-10 group-hover:border-coral group-hover:border-opacity-20"
>
<ExternalLink
<ExternalLinkIcon
class="h-5 w-5 transition-all duration-200 group-hover:text-coral"
/>
</div>
@ -194,7 +195,7 @@ const platformDescriptions = download.platformDescriptions
class="bg-opaicty-10 grid grid-cols-[auto,1fr] gap-4 rounded-2xl bg-subtle p-6"
>
<div class="h-fit rounded-xl bg-subtle p-3">
<Lock class="h-5 w-5" />
<LockIcon class="h-5 w-5" />
</div>
<div>

7
src/pages/[...locale]/mods/[...slug].astro
View file

@ -1,8 +1,9 @@
---
import { ArrowRight, Info } from 'lucide-astro'
import BackButton from '~/components/BackButton.astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import InfoIcon from '~/icons/InfoIcon.astro'
import Layout from '~/layouts/Layout.astro'
import { getAllMods, getAuthorLink, getLocalizedDate } from '~/mods'
import { getUI } from '~/utils/i18n'
@ -64,7 +65,7 @@ const {
class="flex flex-col items-center justify-center gap-2 rounded-xl bg-red-200 p-2 px-4 md:flex-row md:justify-between dark:bg-red-700"
>
<div class="flex items-center gap-2 text-center md:text-left">
<Info />
<InfoIcon />
<p class="text-sm">
{slug.alert.description}
</p>
@ -75,7 +76,7 @@ const {
isAlert
>
{slug.alert.button}
<ArrowRight class="size-4" />
<ArrowRightIcon class="size-4" />
</Button>
</div>
<BackButton />

6
src/pages/[...locale]/release-notes/index.astro
View file

@ -1,9 +1,9 @@
---
import { Modal, ModalBody, ModalHeader } from 'free-astro-components'
import { ArrowUp } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import ReleaseNoteItem from '~/components/ReleaseNoteItem.astro'
import ArrowUpIcon from '~/icons/ArrowUp.astro'
import Layout from '~/layouts/Layout.astro'
import { releaseNotes as releaseNotesData, releaseNotesTwilight } from '~/release-notes'
import { getLocale, getUI } from '~/utils/i18n'
@ -58,9 +58,9 @@ const {
<Button href="#" id="scroll-top" isPrimary class="fixed bottom-8 right-8">
<p class="hidden items-center gap-2 sm:flex">
{releaseNotes.backToTop}
<ArrowUp aria-hidden="true" class="size-4" />
<ArrowUpIcon aria-hidden="true" class="size-4" />
</p>
<ArrowUp aria-label="Back to the top" class="size-4 sm:hidden" />
<ArrowUpIcon aria-label="Back to the top" class="size-4 sm:hidden" />
</Button>
</Layout>
<Modal id="version-modal" class="m-auto border border-[--zen-dark] !bg-paper">

4
src/pages/[...locale]/whatsnew.astro
View file

@ -1,8 +1,8 @@
---
import { ArrowRight } from 'lucide-astro'
import Button from '~/components/Button.astro'
import Description from '~/components/Description.astro'
import SocialMediaStrip from '~/components/SocialMediaStrip.astro'
import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
import Layout from '~/layouts/Layout.astro'
import whatsNewVideo from '~/assets/whats-new.mp4'
@ -77,7 +77,7 @@ if (latestVersion.version.split('.').length > 2 && whatsNewText[1] !== latestVer
class="flex w-fit items-center gap-2"
>
<span>{whatsNew.readFullReleaseNotes}</span>
<ArrowRight />
<ArrowRightIcon />
</Button>
<SocialMediaStrip gap="6" />
</div>

4
src/release-notes/stable.json
View file

@ -955,9 +955,7 @@
"Improved Expand Tabs on Hover layout"
],
"themeChanges": ["Toggle inputs will not use the themed tertiary color"],
"breakingChanges": [
"The keyboard shortcuts will be overriden by the defaults ones in this update"
],
"breakingChanges": ["The keyboard shortcuts will be overriden by the defaults ones in this update"],
"fixes": [
{
"description": "Fixed Firefox add-ons not updating",

7
tailwind.config.mjs
View file

@ -19,6 +19,13 @@ export default {
},
center: true,
},
fontFamily: {
junicode: ['Junicode, serif', {
fontFeatureSettings: {
'swsh': 1
}
}],
},
extend: {
screens: {
'-sm': '@media (max-width: 639px)',