From 92e16cde18d3b49e93409cc294fe8f5f1d1001c3 Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Fri, 21 Jul 2023 20:48:25 -0700
Subject: [PATCH] Misc improvements

---
 .../components/document-tabs/index.tsx        | 22 ++++++++++---------
 .../settings/components/sections/api-keys.tsx |  7 +++---
 src/app/components/button/index.tsx           |  4 ++--
 src/app/components/fade-in/index.tsx          |  6 +++--
 src/app/components/header/buttons.tsx         |  1 -
 src/app/components/spinner/spinner.module.css |  3 ++-
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/app/(drift)/(posts)/components/document-tabs/index.tsx b/src/app/(drift)/(posts)/components/document-tabs/index.tsx
index c810d863..358a6ceb 100644
--- a/src/app/(drift)/(posts)/components/document-tabs/index.tsx
+++ b/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,14 +68,16 @@ export default function DocumentTabs({
 						flexDirection: "column"
 					}}
 				>
-					<FormattingIcons
-						textareaRef={codeEditorRef}
-						className={`ml-auto ${
-							activeTab === "preview"
-								? "hidden"
-								: "block text-muted-foreground sm:hidden"
-						}`}
-					/>
+					{isEditing ? (
+						<FormattingIcons
+							textareaRef={codeEditorRef}
+							className={`ml-auto ${
+								activeTab === "preview"
+									? "hidden"
+									: "block text-muted-foreground sm:hidden"
+							}`}
+						/>
+					) : null}
 					<TextareaMarkdown.Wrapper ref={codeEditorRef}>
 						<Textarea
 							readOnly={!isEditing}
diff --git a/src/app/(drift)/settings/components/sections/api-keys.tsx b/src/app/(drift)/settings/components/sections/api-keys.tsx
index a7795dff..291ff9e1 100644
--- a/src/app/(drift)/settings/components/sections/api-keys.tsx
+++ b/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>
 				)}
diff --git a/src/app/components/button/index.tsx b/src/app/components/button/index.tsx
index 7fd34161..de87acd9 100644
--- a/src/app/components/button/index.tsx
+++ b/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:
diff --git a/src/app/components/fade-in/index.tsx b/src/app/components/fade-in/index.tsx
index eee230a5..d6a1fb5a 100644
--- a/src/app/components/fade-in/index.tsx
+++ b/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",
diff --git a/src/app/components/header/buttons.tsx b/src/app/components/header/buttons.tsx
index 0f8417c6..467b6a73 100644
--- a/src/app/components/header/buttons.tsx
+++ b/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"
 
diff --git a/src/app/components/spinner/spinner.module.css b/src/app/components/spinner/spinner.module.css
index 97bfd9bd..d753d1ac 100644
--- a/src/app/components/spinner/spinner.module.css
+++ b/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;