src/app/(drift)/(posts)/components/document-tabs/index.tsx

@@ -51,14 +51,14 @@ export default function DocumentTabs({
 						{isEditing ? "Preview" : "Rendered"}
 					</TabsTrigger>
 				</div>
-				{isEditing ? (
+				{isEditing && (
 					<FormattingIcons
 						textareaRef={codeEditorRef}
 						className={`ml-auto ${
 							activeTab === "preview" ? "hidden" : "hidden sm:block"
 						}`}
 					/>
-				) : null}
+				)}
 			</TabsList>
 			<TabsContent value="edit">
 				<div
@@ -68,16 +68,14 @@ export default function DocumentTabs({
 						flexDirection: "column"
 					}}
 				>
-					{isEditing ? (
+					<FormattingIcons
-						<FormattingIcons
+						textareaRef={codeEditorRef}
-							textareaRef={codeEditorRef}
+						className={`ml-auto ${
-							className={`ml-auto ${
+							activeTab === "preview"
-								activeTab === "preview"
+								? "hidden"
-									? "hidden"
+								: "block text-muted-foreground sm:hidden"
-									: "block text-muted-foreground sm:hidden"
+						}`}
-							}`}
+					/>
-						/>
-					) : null}
 					<TextareaMarkdown.Wrapper ref={codeEditorRef}>
 						<Textarea
 							readOnly={!isEditing}

src/app/(drift)/settings/components/sections/api-keys.tsx

@@ -14,7 +14,6 @@ import { useState } from "react"
 import styles from "./api-keys.module.css"
 import { useSessionSWR } from "@lib/use-session-swr"
 import { TypographyH4 } from "@components/typography"
-import FadeIn from "@components/fade-in"
 
 // need to pass in the accessToken
 const APIKeys = ({
@@ -122,12 +121,12 @@ const APIKeys = ({
 							</tbody>
 						</table>
 					) : (
-						<FadeIn className="mt-4 text-center text-muted-foreground">
+						<p className="p-4 text-center text-muted-foreground">
 							No API keys found.
-						</FadeIn>
+						</p>
 					)
 				) : (
-					<div className="mt-4 text-center">
+					<div style={{ marginTop: "var(--gap-quarter)" }}>
 						<Spinner />
 					</div>
 				)}

src/app/components/button/index.tsx

@@ -6,11 +6,11 @@ import { cn } from "@lib/cn"
 import { Spinner } from "@components/spinner"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-65 disabled:pointer-events-none ring-offset-background",
+	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-75 disabled:pointer-events-none ring-offset-background",
 	{
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				default: "bg-primary/80 text-primary-foreground/80 hover:bg-primary/70",
 				destructive:
 					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:

src/app/components/fade-in/index.tsx

@@ -1,14 +1,12 @@
 // https://www.joshwcomeau.com/snippets/react-components/fade-in/
 import React from "react"
 import styles from "./fade.module.css"
-import { cn } from "@lib/cn"
 
 function FadeIn({
 	duration = 300,
 	delay = 0,
 	children,
 	as,
-	className,
 	...delegated
 }: {
 	duration?: number
@@ -18,7 +16,7 @@ function FadeIn({
 } & React.HTMLAttributes<HTMLElement>) {
 	if (as !== null && typeof as === "object") {
 		return React.cloneElement(as, {
-			className: cn(as.props.className, styles.fadeIn, className),
+			className: styles.fadeIn,
 			style: {
 				...(as.props.style || {}),
 				animationDuration: duration + "ms",
@@ -30,7 +28,7 @@ function FadeIn({
 	return (
 		<Element
 			{...delegated}
-			className={cn(styles.fadeIn, className)}
+			className={styles.fadeIn}
 			style={{
 				...(delegated.style || {}),
 				animationDuration: duration + "ms",

src/app/components/header/buttons.tsx

@@ -17,6 +17,7 @@ import { Button } from "@components/button"
 import Link from "@components/link"
 import { useSessionSWR } from "@lib/use-session-swr"
 import { useTheme } from "next-themes"
+import styles from "./buttons.module.css"
 import { useEffect, useState } from "react"
 import { cn } from "@lib/cn"
 

src/app/components/post-list/list-item.tsx

@@ -156,6 +156,7 @@ const ListItem = ({
 								return (
 									<li key={file.id} className="text-black">
 										<Link
+											colored
 											href={`/post/${post.id}#${file.title}`}
 											className="flex items-center gap-2 font-mono text-sm text-foreground"
 										>

src/app/components/spinner/spinner.module.css

@@ -1,6 +1,5 @@
 .spinner {
-	@apply border-muted-foreground;
+	border: 4px solid var(--light-gray);
-	border: 4px solid;
 	border-top: 4px solid var(--gray);
 	border-radius: 50%;
 	width: 24px;