Merge branch 'main' of https://github.com/zen-browser/www
This commit is contained in:
mauro-balades
5
.gitignore
vendored
5
.gitignore
vendored
@@ -1,5 +1,10 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# various IDEs and backup files
|
||||
.vscode/
|
||||
.idea/
|
||||
**/*~
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
|
||||
30
package-lock.json
generated
30
package-lock.json
generated
@@ -44,6 +44,7 @@
|
||||
"styled-components": "^6.1.12",
|
||||
"tailwind-merge": "^2.5.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"zen-website": "file:",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -16693,9 +16694,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/send": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
|
||||
"integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
|
||||
"version": "0.19.0",
|
||||
"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
|
||||
"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"debug": "2.6.9",
|
||||
@@ -16780,20 +16781,29 @@
|
||||
}
|
||||
},
|
||||
"node_modules/serve-static": {
|
||||
"version": "1.16.0",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.0.tgz",
|
||||
"integrity": "sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==",
|
||||
"version": "1.16.2",
|
||||
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
|
||||
"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"encodeurl": "~1.0.2",
|
||||
"encodeurl": "~2.0.0",
|
||||
"escape-html": "~1.0.3",
|
||||
"parseurl": "~1.3.3",
|
||||
"send": "0.18.0"
|
||||
"send": "0.19.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/serve-static/node_modules/encodeurl": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
|
||||
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/set-blocking": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
|
||||
@@ -19421,6 +19431,10 @@
|
||||
"integrity": "sha512-raRj6r0gPzopFm5XWBJZr/NuV4EEnT4iE+U3dp5FV5pCb588Gmm3zLIp/j9yqqcMiHH8VNQlerLTgOqL7krh6w==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/zen-website": {
|
||||
"resolved": "",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/zod": {
|
||||
"version": "3.23.8",
|
||||
"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
|
||||
|
||||
@@ -51,6 +51,7 @@
|
||||
"styled-components": "^6.1.12",
|
||||
"tailwind-merge": "^2.5.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"zen-website": "file:",
|
||||
"zod": "^3.23.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -19,6 +19,7 @@ export default function PrivacyPolicy() {
|
||||
* [**Onno**](https://www.onnno.nl/index.html): logo designer.
|
||||
* [**Jafeth Garro**](https://iamjafeth.com/): Documentation writer.
|
||||
* **Peter Jung**: general contributor and AUR maintainer.
|
||||
* [**Bryan Galdámez**](https://josuegalre.netlify.app/): Huge contributor on theme functionalities
|
||||
* [**Gunir**](https://github.com/gunir): Active contributor.
|
||||
* [**n7itro**](https://github.com/n7itro): Active contributor.
|
||||
* [**Canoa**](https://thatcanoa.org/) Active contributor, and very active in issue handling
|
||||
|
||||
@@ -3,95 +3,106 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Custom properties */
|
||||
--navigation-height: 3.5rem;
|
||||
--color-one: #ffbd7a;
|
||||
/* Custom properties */
|
||||
--navigation-height: 3.5rem;
|
||||
--color-one: #ffbd7a;
|
||||
|
||||
--color-two: #fe8bbb;
|
||||
--color-three: #9e7aff;
|
||||
--color-two: #fe8bbb;
|
||||
--color-three: #9e7aff;
|
||||
|
||||
--surface: rgb(245, 245, 245);
|
||||
--surface: rgb(245, 245, 245);
|
||||
|
||||
/*
|
||||
/*
|
||||
--color-one: #37ecba;
|
||||
--color-two: #72afd3;
|
||||
--color-three: #ff2e63;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'], .dark {
|
||||
--background: 5 5 5;
|
||||
--foreground: 0 0% 98%;
|
||||
[data-theme="dark"],
|
||||
.dark {
|
||||
--background: 5 5 5;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--surface: rgb(23, 23, 23);
|
||||
--surface: rgb(23, 23, 23);
|
||||
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--color-one: #6aa8e2;
|
||||
}
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--color-one: #6aa8e2;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
html {
|
||||
@apply scroll-smooth;
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: hsl(var(--primary-foreground));
|
||||
background: hsl(var(--primary));
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: hsl(var(--primary-foreground));
|
||||
background: hsl(var(--primary));
|
||||
}
|
||||
|
||||
@@ -1,37 +1,58 @@
|
||||
|
||||
#policy h1 {
|
||||
font-size: 2em;
|
||||
font-size: 2.5em;
|
||||
margin: 0.67em 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#policy {
|
||||
padding-top: 2.5em;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
|
||||
#policy h1:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
#policy h2 {
|
||||
font-size: 1.5em;
|
||||
font-size: 2em;
|
||||
margin: 0.83em 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#policy h3 {
|
||||
font-size: 1.17em;
|
||||
font-size: 1.5em;
|
||||
margin: 1em 0;
|
||||
font-weight: semi-bold;
|
||||
}
|
||||
|
||||
#policy ul {
|
||||
margin: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#policy li {
|
||||
list-style: circle;
|
||||
margin-left: 1.1em;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Link styles */
|
||||
#policy a {
|
||||
color: #007bff;
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
#policy a:hover {
|
||||
text-decoration: underline;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
#policy hr {
|
||||
margin: 2em 0;
|
||||
margin: 2em 0;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
#policy p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function PrivacyPolicy() {
|
||||
# Privacy Policy
|
||||
* Last updated: 2024-08-12
|
||||
|
||||
# Introduction
|
||||
## Introduction
|
||||
Welcome to Zen Browser! Your privacy is our priority. This Privacy Policy outlines the types of personal information we collect, how we use it, and the steps we take to protect your data when you use Zen Browser.
|
||||
|
||||
## 1. Information We Do Not Collect
|
||||
@@ -23,56 +23,56 @@ Zen Browser is designed with privacy in mind. We do not collect, store, or share
|
||||
|
||||
* Crash reports can be sent to Mozilla Firefox. But, we do not collect any crash reports. Crash reports are sent securely to Mozilla Firefox to help improve the stability of the browser. They do not contain any personal information.
|
||||
|
||||
## 1.1. No Telemetry
|
||||
### **1.1. No Telemetry**
|
||||
We do not collect any telemetry data.
|
||||
|
||||
However, you can opt-in to share telemetry data to Mozilla for the improvement of FireFox (the base upon which the Zen Browser is built). It will be treated in accordance with their Privacy Policy which you can read about [here](https://www.mozilla.org/en-US/privacy/).
|
||||
|
||||
## 1.2. No Personal Data Collection
|
||||
### **1.2. No Personal Data Collection**
|
||||
Zen Browser does not collect any personal information such as your IP address, browsing history, search queries, or form data.
|
||||
|
||||
## 1.3. No Third-Party Tracking
|
||||
### **1.3. No Third-Party Tracking**
|
||||
We do not allow third-party trackers or analytics tools to operate within Zen Browser. Your browsing activity remains entirely private and is not shared with any third party. Mozilla is not considered a third party as it is the base of Zen Browser.
|
||||
|
||||
# 2. Information Stored Locally on Your Device
|
||||
## 2.1. Browsing Data
|
||||
## 2. Information Stored Locally on Your Device
|
||||
### **2.1. Browsing Data**
|
||||
Zen Browser stores certain data locally on your device to enhance your browsing experience. This includes:
|
||||
|
||||
* **Cookies**: Cookies are stored locally on your device and are not shared with Zen Browser or any third party. You have full control over the management of cookies through the browser’s settings.
|
||||
* **Cache and Temporary Files**: Zen Browser may store cache files and other temporary data locally to improve performance. These files can be cleared at any time through the browser’s settings.
|
||||
|
||||
## 2.2. Settings and Preferences
|
||||
### **2.2. Settings and Preferences**
|
||||
Any customizations, settings, and preferences you make within Zen Browser are stored locally on your device. We do not have access to or control over this data.
|
||||
|
||||
# 3. Sync Feature
|
||||
## 3. Sync Feature
|
||||
Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla’s servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data.
|
||||
|
||||
* [Mozilla Firefox Sync](https://www.mozilla.org/en-US/privacy/mozilla-accounts/)
|
||||
* [This is how we store your passwords](https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords.)
|
||||
|
||||
# 4. Data Security
|
||||
## 4. Data Security
|
||||
Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.
|
||||
|
||||
* Note that most of the security measures are taken care by Mozilla Firefox.
|
||||
|
||||
# 5. Your Control
|
||||
## 5.1. Data Deletion
|
||||
## 5. Your Control
|
||||
### **5.1. Data Deletion**
|
||||
You have full control over all data stored locally on your device by Zen Browser. You can clear your browsing data, cookies, and cache at any time using the browser’s settings.
|
||||
|
||||
## 5.2. Do Not Track
|
||||
### **5.2. Do Not Track**
|
||||
Zen Browser automatically honors "Do Not Track" requests by default. We ensure that no tracking of your activity occurs, in compliance with this setting.
|
||||
|
||||
# 6. Our Website and Services
|
||||
## 6. Our Website and Services
|
||||
|
||||
When you click on the "Download" button on our website, a number in the database is incremented to track the number of downloads. This is done to understand the popularity of the browser. No personal data is collected during the process.
|
||||
|
||||
## 6.1. External links
|
||||
### **6.1. External links**
|
||||
Zen Browser may contain links to external websites or services that are not owned or operated by us. We are not responsible for the content or privacy practices of these sites. We recommend that you review the privacy policies of these sites before providing them with any personal information.
|
||||
|
||||
# 7. Changes to This Privacy Policy
|
||||
## 7. Changes to This Privacy Policy
|
||||
We may update this Privacy Policy from time to time to reflect changes in our practices or legal requirements. We will notify you of any significant changes by updating the effective date at the top of this policy. Continued use of Zen Browser after such changes constitutes your acceptance of the new terms.
|
||||
|
||||
# 8. Other telemetry done by Mozilla Firefox
|
||||
## 8. Other telemetry done by Mozilla Firefox
|
||||
|
||||
We try to disable all telemetry data collection in Zen Browser. But, we may have missed some. Check the below links for more information.
|
||||
|
||||
@@ -80,7 +80,7 @@ You can also optionally enable telemetry data collection and other Mozilla Resea
|
||||
|
||||
* Please check [Firefox Privacy Notice](https://www.mozilla.org/en-US/privacy/) for more information.
|
||||
|
||||
# 9. Contact Us
|
||||
## 9. Contact Us
|
||||
If you have any questions or concerns about this Privacy Policy or Zen Browser, please contact us at:
|
||||
|
||||
* Discord: [Zen Browser's Discord](https://discord.gg/zen-browser)
|
||||
|
||||
@@ -95,7 +95,7 @@ export default function Features() {
|
||||
<hr />
|
||||
<div className="flex p-12 flex-col justify-center">
|
||||
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Always up to date <UpdateIcon className='inline w-10 h-10'></UpdateIcon></h3>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is always up to date, ensuring that you have the latest features and security updates. With automatic updates, you can rest easy knowing that your browser is secure and up to date.</p>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is built on top of Firefox, ensuring it always stays up to date with the latest features, security patches, and performance improvements.</p>
|
||||
<div className="relative">
|
||||
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
|
||||
</div>
|
||||
@@ -237,7 +237,7 @@ export default function Features() {
|
||||
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Frequently Asked Questions <QuestionMarkCircledIcon className='inline w-8 h-8'></QuestionMarkCircledIcon></h1>
|
||||
<Accordion type="single" value={feature} onValueChange={setFeature} defaultValue="item-1" className='mt-8'>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>is it firefox based?</AccordionTrigger>
|
||||
<AccordionTrigger>Is it Firefox based?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes, Zen Browser is focused on being always at the latest version of Firefox, ensuring that you have the latest security updates and features.
|
||||
</AccordionContent>
|
||||
@@ -262,7 +262,7 @@ export default function Features() {
|
||||
<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-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>
|
||||
<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" fillOpacity="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-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' />
|
||||
|
||||
@@ -1,50 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
export function ModeToggle() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
const { setTheme } = useTheme();
|
||||
const [currentTheme, setCurrentTheme] = useState('light');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
const toggleTheme = () => {
|
||||
switch (theme) {
|
||||
case "system":
|
||||
setTheme("dark");
|
||||
break;
|
||||
case "dark":
|
||||
setTheme("light");
|
||||
break;
|
||||
case "light":
|
||||
setTheme("system");
|
||||
break;
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
setCurrentTheme(savedTheme);
|
||||
setTheme(savedTheme);
|
||||
}, [setTheme]);
|
||||
|
||||
// prevent hydration error
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const toggleTheme = () => {
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
setCurrentTheme(newTheme);
|
||||
setTheme(newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="ghost" size="icon" onClick={toggleTheme}>
|
||||
<MoonIcon
|
||||
className={`${theme === "system" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
|
||||
/>
|
||||
<SunIcon
|
||||
className={`${theme === "light" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
|
||||
/>
|
||||
<MoonIcon
|
||||
className={`${theme === "dark" ? "visible" : "hidden"} h-[1.2rem] w-[1.2rem]`}
|
||||
/>
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button variant="ghost" size="icon" onClick={toggleTheme}>
|
||||
{currentTheme === 'light' ? (
|
||||
<SunIcon className="h-[1.2rem] w-[1.2rem]" />
|
||||
) : (
|
||||
<MoonIcon className="h-[1.2rem] w-[1.2rem]" />
|
||||
)}
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user