docs(website): update colors and layout

TheEdoRan · Feb 5, 2024 · f918f77 · f918f77
1 parent c9ae089
commit f918f77
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 42 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -74,16 +74,13 @@ export default {
 					label: "Docs",
 				},
 				{
-					href: "https://github.com/TheEdoRan/next-safe-action",
-					label: "GitHub",
-					position: "right",
+					"href": "https://github.com/TheEdoRan/next-safe-action",
+					"position": "right",
+					"className": "header-github-link",
+					"aria-label": "next-safe-action's GitHub page",
 				},
 			],
 		},
-		footer: {
-			style: "light",
-			copyright: `Copyleft <span class="copyleft">&copy;</span> 2023 Edoardo Ranghieri`,
-		},
 		prism: {
 			additionalLanguages: ["typescript"],
 			theme: themes.vsDark,

diff --git a/website/src/components/landing/features.tsx b/website/src/components/landing/features.tsx
@@ -43,11 +43,11 @@ export function Features() {
 						<div className="text-center font-bold text-3xl sm:text-4xl lg:text-5xl">
 							Why choose next-safe-action?
 						</div>
-						<div className="min-w-full bg-white dark:bg-stone-800 max-[479px]:px-5 max-[479px]:py-6 rounded-xl p-8 md:p-10 flex flex-col space-y-6">
+						<div className="min-w-full bg-white dark:bg-zinc-800 max-[479px]:px-5 max-[479px]:py-6 rounded-xl p-8 md:p-10 flex flex-col space-y-6">
 							{features.map(({ title, description }, idx) => (
 								<Fragment key={idx}>
 									{idx > 0 ? (
-										<div className="h-px min-h-[1px] min-w-full bg-stone-200 dark:bg-stone-700"></div>
+										<div className="h-px min-h-[1px] min-w-full bg-zinc-200 dark:bg-zinc-700"></div>
 									) : null}
 									<div className="flex space-x-2 sm:space-x-4 md:space-x-6">
 										<Check className="w-8 h-8 shrink-0" />

diff --git a/website/src/components/landing/getting-started.tsx b/website/src/components/landing/getting-started.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export function GettingStarted() {
 	return (
 		<div className="flex min-h-screen items-center justify-center flex-col">
@@ -9,12 +7,12 @@ export function GettingStarted() {
 			<div className="flex gap-4 mt-10 flex-wrap items-center justify-center">
 				<a
 					href="/docs/getting-started"
-					className="!no-underline hover:brightness-90 transition cursor-pointer rounded-lg mr-4 px-3 py-2 font-bold inline-flex items-center justify-center text-2xl bg-stone-800 !text-stone-100 dark:bg-stone-100 dark:!text-stone-900 w-64">
+					className="!no-underline hover:brightness-90 transition cursor-pointer rounded-lg mr-4 px-3 py-2 font-bold inline-flex items-center justify-center text-2xl bg-zinc-800 !text-zinc-100 dark:bg-zinc-100 dark:!text-zinc-900 w-64">
 					Getting started 🎉
 				</a>
 				<a
 					href="/docs/examples/basic-implementation"
-					className="!no-underline hover:brightness-90 transition cursor-pointer rounded-lg mr-4 px-3 py-2 font-bold inline-flex items-center justify-center text-2xl bg-[#ffa024] !text-stone-100 w-64">
+					className="!no-underline hover:brightness-90 transition cursor-pointer rounded-lg mr-4 px-3 py-2 font-bold inline-flex items-center justify-center text-2xl bg-[#ffa024] !text-zinc-100 w-64">
 					Explore example ➡️
 				</a>
 			</div>

diff --git a/website/src/components/landing/hero.tsx b/website/src/components/landing/hero.tsx
@@ -6,7 +6,7 @@ export function Hero() {
 
 	return (
 		<header className="block bg-gradient-to-b from-[#f79f2d] to-[#ff8e0a] bg-center bg-cover overflow-hidden relative">
-			<div className="absolute inset-0 pattern-dots pattern-stone-600 pattern-bg-transparent pattern-size-6 pattern-opacity-10" />
+			<div className="absolute inset-0 pattern-dots pattern-zinc-600 pattern-bg-transparent pattern-size-6 pattern-opacity-10" />
 			<div className="px-5 md:px-10">
 				<div className="mx-auto w-full max-w-7xl">
 					<div className="pt-12 pb-4 md:pt-16 md:pb-8 lg:pt-20">
@@ -16,15 +16,15 @@ export function Hero() {
 									<h1 className="text-white text-2xl sm:text-3xl md:text-5xl font-bold tracking-tight">
 										{siteConfig.tagline}
 									</h1>
-									<h2 className="text-stone-50 font-medium text-base sm:text-lg md:text-xl max-w-xl">
+									<h2 className="text-zinc-50 font-medium text-base sm:text-lg md:text-xl max-w-xl">
 										next-safe-action handles your Next.js app mutations type
 										safety, input validation, server errors and even more!
 									</h2>
 								</div>
 								<div className="flex justify-center items-center">
 									<a
 										href="/docs/getting-started"
-										className="!no-underline hover:brightness-90 transition !text-stone-100 cursor-pointer rounded-lg mr-4 bg-stone-800 px-3 py-2 font-bold inline-flex items-center justify-center text-sm sm:text-lg md:text-xl">
+										className="!no-underline hover:brightness-90 transition !text-zinc-100 cursor-pointer rounded-lg mr-4 bg-zinc-800 px-3 py-2 font-bold inline-flex items-center justify-center text-sm sm:text-lg md:text-xl">
 										Getting started 🎉
 									</a>
 									<StarsButton />

diff --git a/website/src/components/landing/index.tsx b/website/src/components/landing/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Features } from "./features";
 import { GettingStarted } from "./getting-started";
 import { Hero } from "./hero";
@@ -9,9 +8,9 @@ export function Landing() {
 		<main>
 			<Hero />
 			<Features />
-			<div className="h-px min-h-[1px] min-w-full bg-stone-200 dark:bg-stone-700"></div>
+			<div className="h-px min-h-[1px] min-w-full bg-zinc-200 dark:bg-zinc-700"></div>
 			<Testimonials />
-			<div className="h-px min-h-[1px] min-w-full bg-stone-200 dark:bg-stone-700"></div>
+			<div className="h-px min-h-[1px] min-w-full bg-zinc-200 dark:bg-zinc-700"></div>
 			<GettingStarted />
 		</main>
 	);

diff --git a/website/src/components/landing/stars-button.tsx b/website/src/components/landing/stars-button.tsx
@@ -1,5 +1,5 @@
 import { Star } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 function useFetchStarsCount() {
 	const [starsCount, setStarsCount] = useState<number | null>(undefined);
@@ -27,7 +27,7 @@ export function StarsButton() {
 			href="https://github.com/TheEdoRan/next-safe-action"
 			target="_blank"
 			rel="noopener noreferrer"
-			className="!no-underline hover:!bg-sky-100 transition !text-stone-900 cursor-pointer rounded-lg mr-4 bg-stone-50 px-3 py-2 font-bold inline-flex items-center justify-center space-x-1 text-sm sm:text-lg md:text-xl">
+			className="!no-underline hover:!bg-sky-100 transition !text-zinc-900 cursor-pointer rounded-lg mr-4 bg-zinc-50 px-3 py-2 font-bold inline-flex items-center justify-center space-x-1 text-sm sm:text-lg md:text-xl">
 			<Star className="w-4 h-4 sm:w-6 sm:h-6" />
 			<span>{starsCount ? starsCount : ". . ."} GitHub stars</span>
 		</a>

diff --git a/website/src/components/landing/tweet.tsx b/website/src/components/landing/tweet.tsx
@@ -18,26 +18,26 @@ export function Tweet({
 			href={tweetURL}
 			target="_blank"
 			rel="noopener noreferrer"
-			className="p-4 bg-white dark:bg-stone-800 rounded-xl flex flex-col space-y-4 max-w-lg !no-underline transition hover:brightness-90">
+			className="p-4 bg-white dark:bg-zinc-800 rounded-xl flex flex-col space-y-4 max-w-lg !no-underline transition hover:brightness-90">
 			<div className="flex space-x-4 items-center">
 				<img
 					src={`/img/x/${authorHandle}.jpg`}
 					className="rounded-full w-10 h-10"
 				/>
 				<div className="flex flex-col">
-					<span className="text-sm font-semibold text-stone-950 dark:text-stone-50">
+					<span className="text-sm font-semibold text-zinc-950 dark:text-zinc-50">
 						{authorName}
 					</span>
-					<span className="text-sm text-stone-600 dark:text-stone-400">
+					<span className="text-sm text-zinc-600 dark:text-zinc-400">
 						@{authorHandle}
 					</span>
 				</div>
 			</div>
 			<div
-				className="text-stone-950 dark:text-stone-50 flex-1"
+				className="text-zinc-950 dark:text-zinc-50 flex-1"
 				dangerouslySetInnerHTML={{ __html: textHTML }}
 			/>
-			<div className="text-sm text-stone-600 dark:text-stone-400 ">{date}</div>
+			<div className="text-sm text-zinc-600 dark:text-zinc-400 ">{date}</div>
 		</a>
 	);
 }
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -9,25 +9,24 @@
 
 /* You can override the default Infima variables here. */
 body {
-	font-size: 18px;
+	font-size: 105%;
 }
 
-.footer {
-	border-top: 1px solid #e7e5e4;
-	background-color: transparent;
-	padding: 1rem;
+.header-github-link::before {
+	display: flex;
+	background-repeat: no-repeat;
+	background-position: center;
+	height: 1.5rem;
+	width: 1.5rem;
+	content: "";
+	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%200c-6.626%200-12%205.373-12%2012%200%205.302%203.438%209.8%208.207%2011.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729%201.205.084%201.839%201.237%201.839%201.237%201.07%201.834%202.807%201.304%203.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931%200-1.311.469-2.381%201.236-3.221-.124-.303-.535-1.524.117-3.176%200%200%201.008-.322%203.301%201.23.957-.266%201.983-.399%203.003-.404%201.02.005%202.047.138%203.006.404%202.291-1.552%203.297-1.23%203.297-1.23.653%201.653.242%202.874.118%203.176.77.84%201.235%201.911%201.235%203.221%200%204.609-2.807%205.624-5.479%205.921.43.372.823%201.102.823%202.222v3.293c0%20.319.192.694.801.576%204.765-1.589%208.199-6.086%208.199-11.386%200-6.627-5.373-12-12-12z%22%2F%3E%3C%2Fsvg%3E");
 }
 
 .navbar {
 	background-color: #fafaf9 !important;
 	box-shadow: 0px 1px #e7e5e4 !important;
 }
 
-.copyleft {
-	display: inline-block;
-	transform: rotate(180deg);
-}
-
 .navbar__brand::after {
 	content: "v7";
 	margin-left: 0.5rem;
@@ -62,16 +61,16 @@ body {
 	--ifm-color-primary-lighter: #f9b257;
 	--ifm-color-primary-lightest: #fac681;
 	--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-	--ifm-background-color: #1c1917 !important;
-	--ifm-color-emphasis-200: #44403c !important;
+	--ifm-background-color: #191a1d !important;
+	--ifm-color-emphasis-200: #2b2e33 !important;
 
-	.footer {
-		border-top: 1px solid #44403c !important;
+	.header-github-link::before {
+		filter: invert(1);
 	}
 
 	.navbar {
-		background-color: #1c1917 !important;
-		box-shadow: 0px 1px #44403c !important;
+		background-color: #191a1d !important;
+		box-shadow: 0px 1px #2b2e33 !important;
 	}
 }