diff --git a/next.config.mjs b/next.config.mjs index 48f03d4..431d026 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -3,17 +3,19 @@ const nextConfig = { images: { remotePatterns: [ { - protocol: 'https', - hostname: 'raw.githubusercontent.com', + protocol: "https", + hostname: "raw.githubusercontent.com", }, ], }, experimental: { serverActions: { // edit: updated to new key. Was previously `allowedForwardedHosts` - allowedOrigins: ['localhost:3000', 'get-zen.vercel.app'], + allowedOrigins: ["localhost:3000", "get-zen.vercel.app"], }, - + }, + compiler: { + styledComponents: true, }, }; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fb59c9d..13fbbc8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,8 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; -import { ThemeProvider } from "@/components/theme-provider" +import { ThemeProvider } from "@/components/theme-provider"; +import StyledComponentsRegistry from "@/lib/styled-components-registry"; const inter = Inter({ subsets: ["latin"] }); @@ -28,7 +29,7 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > - {children} + {children} diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx index 7a9af0a..5408dea 100644 --- a/src/app/privacy-policy/page.tsx +++ b/src/app/privacy-policy/page.tsx @@ -52,7 +52,7 @@ Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's # 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. +* Note that most of the security measures are taken care by Mozilla Firefox. # 5. Your Control ## 5.1. Data Deletion diff --git a/src/components/branding-assets.tsx b/src/components/branding-assets.tsx index fb14914..5100b07 100644 --- a/src/components/branding-assets.tsx +++ b/src/components/branding-assets.tsx @@ -1,3 +1,4 @@ + import { LOGO_COLORS } from "@/lib/logos"; export function BrandingAssets() { @@ -19,6 +20,7 @@ export function BrandingAssets() {
{color} @@ -40,7 +42,7 @@ export function BrandingAssets() {
{color} diff --git a/src/components/features.tsx b/src/components/features.tsx index 7490690..31d12a0 100644 --- a/src/components/features.tsx +++ b/src/components/features.tsx @@ -74,7 +74,7 @@ export default function Features() { Goodbye bad performance

- We are constantly tweak firefox's engine and settings to make it + We constantly tweak Firefox's engine and settings to make it faster than ever. Learn more

@@ -102,7 +102,7 @@ export default function Features() { Secure by default

- We are always using the latest security features from firefox to + We are always using the latest security features from Firefox to keep you safe. Learn more

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx index b8be7fd..6a89b9d 100644 --- a/src/components/theme-page.tsx +++ b/src/components/theme-page.tsx @@ -4,7 +4,7 @@ import { Button } from "./ui/button"; import { useEffect, useState } from "react"; import Markdown from "react-markdown"; import '../app/privacy-policy/markdown.css'; -import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react"; +import { ChevronLeft, LoaderCircleIcon } from "lucide-react"; export default function ThemePage({ theme }: { theme: ZenTheme }) { const [readme, setReadme] = useState(null); @@ -14,7 +14,11 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) { return (
-
+
+
window.history.back()}> + +

Go back

+
{theme.name}

{theme.name}

{theme.description}

@@ -42,14 +46,10 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {

You need to have Zen Browser installed to install this theme. Download now!

-
-
window.history.back()}> - -

Go back

-
+
{readme === null ? ( - + ) : ( {`${readme}`} )} diff --git a/src/lib/styled-components-registry.tsx b/src/lib/styled-components-registry.tsx new file mode 100644 index 0000000..fa12293 --- /dev/null +++ b/src/lib/styled-components-registry.tsx @@ -0,0 +1,29 @@ +"use client"; + +import React, { useState } from "react"; +import { useServerInsertedHTML } from "next/navigation"; +import { ServerStyleSheet, StyleSheetManager } from "styled-components"; + +export default function StyledComponentsRegistry({ + children, +}: { + children: React.ReactNode; +}) { + // Only create stylesheet once with lazy initial state + // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state + const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()); + + useServerInsertedHTML(() => { + const styles = styledComponentsStyleSheet.getStyleElement(); + styledComponentsStyleSheet.instance.clearTag(); + return <>{styles}; + }); + + if (typeof window !== "undefined") return <>{children}; + + return ( + + {children} + + ); +}