LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-09 20:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: fix/ui_and_hydration (#102)

Browse Source
This commit is contained in:
Kinfe Michael Tariku
2024-10-05 23:07:12 +03:00
committed by GitHub
parent e79cb72b59
commit 7cd1985d0e
5 changed files with 67 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/blocks/features.tsx
View File

@@ -11,10 +11,10 @@ export function Features() {
className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white px-6 py-2 overflow-hidden"
>
<Grid size={i * 5 + 10} />
<p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
<p className="text-base font-bold text-neutral-800 dark:text-white relative z-0">
{feature.title}
</p>
<p className="text-neutral-600 dark:text-neutral-400 text-base font-normal relative z-20">
<p className="text-neutral-600 dark:text-neutral-400 text-base font-normal relative z-0">
{feature.description}
</p>
</div>

2
docs/components/landing/hero.tsx
View File

@@ -113,7 +113,7 @@ export default function Hero() {
</p>
{
<>
<div className="mt-8 flex gap-4 font-sans md:justify-center lg:justify-start flex-col md:flex-row">
<div className="mt-8 flex w-fit gap-4 font-sans md:justify-center lg:justify-start flex-col md:flex-row">
<Link
href="/docs"
className="px-4 md:px-8 py-1.5 border-2 border-black dark:border-stone-100 uppercase bg-white text-black transition duration-200 text-sm shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[1px_1px_rgba(255,255,255),2px_2px_rgba(255,255,255),3px_3px_rgba(255,255,255),4px_4px_rgba(255,255,255),5px_5px_0px_0px_rgba(255,255,255)] dark:hover:shadow-sm hover:shadow-sm"

4
docs/components/nav-mobile.tsx
View File

@@ -57,7 +57,7 @@ export const NavbarMobileBtn: React.FC = () => {
const { toggleNavbar } = useNavbarMobile();
return (
<div className="flex pt-2 items-center ">
<div className="flex items-center ">
<MobileThemeToggle />
<button
className="text-muted-foreground overflow-hidden px-2.5 block md:hidden"
@@ -75,7 +75,7 @@ export const NavbarMobile = () => {
const { isOpen, toggleNavbar } = useNavbarMobile();
return (
<div className="fixed top-[50px] left-0 z-30 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-black md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
<div className="fixed top-[50px] z-40 left-0 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-transparent md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
<AnimatePresence>
{isOpen && (
<FadeIn

40
docs/components/theme-toggler.tsx
View File

@@ -20,7 +20,7 @@ export function ThemeToggle() {
<Button
variant="ghost"
size="icon"
className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
>
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
@@ -28,22 +28,13 @@ export function ThemeToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
data-umami-event="theme-toggle-light"
onClick={() => setTheme("light")}
>
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem
data-umami-event="theme-toggle-dark"
onClick={() => setTheme("dark")}
>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem
data-umami-event="theme-toggle-system"
onClick={() => setTheme("system")}
>
<DropdownMenuItem onClick={() => setTheme("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
@@ -53,24 +44,15 @@ export function ThemeToggle() {
export function MobileThemeToggle() {
const { theme, setTheme } = useTheme();
return (
<div className="md:hidden">
<div className="block md:hidden">
<Button
className="dark:hidden"
onClick={() => {
setTheme("light");
}}
variant={"ghost"}
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<Sun className="w-4 h-4" />
</Button>
<Button
className="hidden dark:visible"
onClick={() => {
setTheme("dark");
}}
variant={"ghost"}
>
<MoonIcon className="w-4 h-4" />
<Sun className="h-4 w-4 dark:hidden" color="#000" />
<Moon className="hidden h-4 w-4 dark:block" />
<span className="sr-only">Toggle theme</span>
</Button>
</div>
);