Misc improvements

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,6 +68,7 @@ export default function DocumentTabs({
 						flexDirection: "column"
 					}}
 				>
+					{isEditing ? (
 						<FormattingIcons
 							textareaRef={codeEditorRef}
 							className={`ml-auto ${
@@ -76,6 +77,7 @@ export default function DocumentTabs({
 									: "block text-muted-foreground sm:hidden"
 							}`}
 						/>
+					) : null}
 					<TextareaMarkdown.Wrapper ref={codeEditorRef}>
 						<Textarea
 							readOnly={!isEditing}

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

@@ -14,6 +14,7 @@ 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 = ({
@@ -121,12 +122,12 @@ const APIKeys = ({
 							</tbody>
 						</table>
 					) : (
-						<p className="p-4 text-center text-muted-foreground">
+						<FadeIn className="mt-4 text-center text-muted-foreground">
 							No API keys found.
-						</p>
+						</FadeIn>
 					)
 				) : (
-					<div style={{ marginTop: "var(--gap-quarter)" }}>
+					<div className="mt-4 text-center">
 						<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-75 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-65 disabled:pointer-events-none ring-offset-background",
 	{
 		variants: {
 			variant: {
-				default: "bg-primary/80 text-primary-foreground/80 hover:bg-primary/70",
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				destructive:
 					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:

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

@@ -1,12 +1,14 @@
 // 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
@@ -16,7 +18,7 @@ function FadeIn({
 } & React.HTMLAttributes<HTMLElement>) {
 	if (as !== null && typeof as === "object") {
 		return React.cloneElement(as, {
-			className: styles.fadeIn,
+			className: cn(as.props.className, styles.fadeIn, className),
 			style: {
 				...(as.props.style || {}),
 				animationDuration: duration + "ms",
@@ -28,7 +30,7 @@ function FadeIn({
 	return (
 		<Element
 			{...delegated}
-			className={styles.fadeIn}
+			className={cn(styles.fadeIn, className)}
 			style={{
 				...(delegated.style || {}),
 				animationDuration: duration + "ms",

src/app/components/header/buttons.tsx

@@ -17,7 +17,6 @@ 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/spinner/spinner.module.css

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