docs: refine UI styling and remove loglib

docs/app/docs/[[...slug]]/page.tsx

@@ -93,6 +93,20 @@ export default async function Page({
 						Accordion,
 						Accordions,
 						Endpoint,
+						Callout: ({ children, ...props }) => (
+							<defaultMdxComponents.Callout
+								{...props}
+								className={cn(
+									props,
+									"bg-none rounded-none border-dashed border-border",
+									props.type === "info" && "border-l-blue-500/50",
+									props.type === "warn" && "border-l-amber-700/50",
+									props.type === "error" && "border-l-red-500/50",
+								)}
+							>
+								{children}
+							</defaultMdxComponents.Callout>
+						),
 						DividerText,
 						iframe: (props) => (
 							<iframe {...props} className="w-full h-[500px]" />
@@ -106,7 +120,6 @@ export default async function Page({
 							href={prevPage.url}
 							className="[&>p]:ml-1 [&>p]:truncate [&>p]:w-full"
 							description={<>{prevPage.data.description}</>}
-							//@ts-expect-error - this works
 							title={
 								<div className="flex items-center gap-1">
 									<ChevronLeft className="size-4" />
@@ -121,7 +134,6 @@ export default async function Page({
 						<Card
 							href={nextPage.url}
 							description={<>{nextPage.data.description}</>}
-							//@ts-expect-error - this works
 							title={
 								<div className="flex items-center gap-1">
 									{nextPage.data.title}

docs/app/docs/layout.tsx

@@ -12,7 +12,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 				component: (
 					<div
 						className={cn(
-							"[--fd-tocnav-height:36px] md:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]",
+							"[--fd-tocnav-height:36px] md:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px] ",
 						)}
 					>
 						<ArticleLayout />

docs/app/global.css

@@ -2,7 +2,7 @@
 @config "../tailwind.config.js";
 @plugin 'tailwindcss-animate';
 @custom-variant dark (&:is(.dark *));
-@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/black.css";
 @import "fumadocs-ui/css/preset.css";
 @source '../../node_modules/fumadocs-ui/dist/**/*.js';
 @source '../node_modules/fumadocs-ui/dist/**/*.js';
@@ -55,7 +55,7 @@
 
 	--chart-5: oklch(0.769 0.188 70.08);
 
-	--radius: 0.625rem;
+	--radius: 0.2rem;
 
 	--sidebar: oklch(0.985 0.001 106.423);
 
@@ -75,7 +75,7 @@
 }
 
 .dark {
-	--background: oklch(0.147 0.004 49.25);
+	--background: hsl(0 0% 2%);
 
 	--foreground: oklch(0.985 0.001 106.423);
 

docs/app/page.tsx

@@ -28,7 +28,7 @@ export default async function HomePage() {
 	return (
 		<main className="h-min mx-auto overflow-x-hidden">
 			<Section
-				className="-z-1 dark:bg-black/[0.95] mb-1 overflow-y-clip"
+				className="-z-1 mb-1 overflow-y-clip"
 				crosses
 				crossesOffset="lg:translate-y-[5.25rem]"
 				customPaddings

docs/components/nav-bar.tsx

@@ -6,7 +6,7 @@ import { Logo } from "./logo";
 
 export const Navbar = () => {
 	return (
-		<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30 dark:bg-black/[0.95]">
+		<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30 ">
 			<nav className="md:grid grid-cols-12 md:border-b top-0 flex items-center justify-between ">
 				<Link
 					href="/"

docs/components/side-bar.tsx

@@ -54,7 +54,6 @@ export default function ArticleLayout() {
 						defaultValue="docs"
 						value={group}
 						onValueChange={(val) => {
-							loglib.track("sidebar-group-change", { group: val });
 							setGroup(val);
 							if (val === "docs") {
 								router.push("/docs");
@@ -179,21 +178,9 @@ export default function ArticleLayout() {
 												exit={{ opacity: 0, height: 0 }}
 												className="relative overflow-hidden"
 											>
-												<motion.div
+												<motion.div className="text-sm">
-													// initial={{ opacity: 0, y: -20 }}
-													// animate={{ opacity: 1, y: 0 }}
-													className="text-sm"
-												>
 													{item.list.map((listItem, j) => (
-														<div
+														<div key={listItem.title}>
-															key={listItem.title}
-															onClick={() => {
-																loglib.track("sidebar-link-click", {
-																	title: listItem.title,
-																	href: listItem.href,
-																});
-															}}
-														>
 															<Suspense fallback={<>Loading...</>}>
 																{listItem.group ? (
 																	<div className="flex flex-row items-center gap-2 mx-5 my-1 ">

docs/content/docs/comparison.mdx

@@ -27,7 +27,7 @@ Here are non detailed reasons why you may want to use Better Auth over other aut
 
 - You don't want to give up user data to a third party.
 - You want a single source of truth for your users.
-- $$$ - You don't want to pay for every user.
+- You don't want to pay for every user.
 - You want to keep your users in your own database (the same database as your app).
 
 ### vs Roll Your Own Auth

docs/content/docs/installation.mdx

@@ -32,7 +32,7 @@ BETTER_AUTH_SECRET=
 ```
 <GenerateSecret/>
 
-2. **Set Base URL**
+2. **Set Base URL (optional)**
 
 ```txt title=".env"
 BETTER_AUTH_URL=http://localhost:3000 #Base URL of your app