From 86dcfed6a2de07b879900a91d6a3ad1911ef4cce Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Mon, 5 Jun 2023 02:00:33 -0700
Subject: [PATCH] progress

---
 .../(drift)/(posts)/new/components/new.tsx    | 105 +++++++++---------
 .../(posts)/new/components/post.module.css    |   3 -
 src/app/components/header/index.tsx           |  54 +++------
 src/app/components/post-list/list-item.tsx    |  57 +++++-----
 src/app/components/scroll-to-top/index.tsx    |   6 +-
 5 files changed, 102 insertions(+), 123 deletions(-)

diff --git a/src/app/(drift)/(posts)/new/components/new.tsx b/src/app/(drift)/(posts)/new/components/new.tsx
index 58d6f33b..cee5cea1 100644
--- a/src/app/(drift)/(posts)/new/components/new.tsx
+++ b/src/app/(drift)/(posts)/new/components/new.tsx
@@ -255,27 +255,24 @@ function Post({
 			/>
 			<FileDropzone setDocs={uploadDocs} />
 
-			<div className={styles.buttons}>
-				<Button
-					onClick={() => {
-						setDocs([
-							...docs,
-							{
-								title: "",
-								content: "",
-								id: generateUUID()
-							}
-						])
-					}}
-					style={{
-						flex: 1,
-						minWidth: 120
-					}}
-					variant={"secondary"}
-				>
-					Add a File
-				</Button>
-				<div className={styles.rightButtons}>
+			<div className="flex items-center justify-between mt-4">
+				<span className="flex flex-1 gap-2">
+					<Button
+						onClick={() => {
+							setDocs([
+								...docs,
+								{
+									title: "",
+									content: "",
+									id: generateUUID()
+								}
+							])
+						}}
+						className="min-w-[120px] max-w-[200px] flex-1"
+						variant={"secondary"}
+					>
+						Add a File
+					</Button>
 					<DatePicker
 						onChange={onChangeExpiration}
 						customInput={
@@ -288,44 +285,44 @@ function Post({
 						customTimeInput={<CustomTimeInput />}
 						timeInputLabel="Time:"
 						dateFormat="MM/dd/yyyy h:mm aa"
-						className={styles.datePicker}
 						clearButtonTitle={"Clear"}
 						// TODO: investigate why this causes margin shift if true
 						enableTabLoop={false}
 						minDate={new Date()}
+						className="max-w-[200px] flex-1"
 					/>
-					<ButtonDropdown>
-						<span
-							className={clsx(
-								"w-full cursor-pointer rounded-br-none rounded-tr-none",
-								buttonVariants({
-									variant: "default"
-								})
-							)}
-							onClick={() => onSubmit("unlisted")}
-						>
-							{isSubmitting ? <Spinner /> : "Create Unlisted"}
-						</span>
-						<span
-							className={clsx("w-full cursor-pointer")}
-							onClick={() => onSubmit("private")}
-						>
-							Create Private
-						</span>
-						<span
-							className={clsx("w-full cursor-pointer")}
-							onClick={() => onSubmit("public")}
-						>
-							Create Public
-						</span>
-						<span
-							className={clsx("w-full cursor-pointer")}
-							onClick={() => onSubmit("protected")}
-						>
-							Create with Password
-						</span>
-					</ButtonDropdown>
-				</div>
+				</span>
+				<ButtonDropdown>
+					<span
+						className={clsx(
+							"w-full cursor-pointer rounded-br-none rounded-tr-none",
+							buttonVariants({
+								variant: "default"
+							})
+						)}
+						onClick={() => onSubmit("unlisted")}
+					>
+						{isSubmitting ? <Spinner /> : "Create Unlisted"}
+					</span>
+					<span
+						className={clsx("w-full cursor-pointer")}
+						onClick={() => onSubmit("private")}
+					>
+						Create Private
+					</span>
+					<span
+						className={clsx("w-full cursor-pointer")}
+						onClick={() => onSubmit("public")}
+					>
+						Create Public
+					</span>
+					<span
+						className={clsx("w-full cursor-pointer")}
+						onClick={() => onSubmit("protected")}
+					>
+						Create with Password
+					</span>
+				</ButtonDropdown>
 			</div>
 			<PasswordModal
 				creating={true}
diff --git a/src/app/(drift)/(posts)/new/components/post.module.css b/src/app/(drift)/(posts)/new/components/post.module.css
index 8be3ed93..4568e5ce 100644
--- a/src/app/(drift)/(posts)/new/components/post.module.css
+++ b/src/app/(drift)/(posts)/new/components/post.module.css
@@ -19,9 +19,6 @@
 	align-items: center;
 }
 
-.datePicker {
-	flex: 1;
-}
 
 .description {
 	width: 100%;
diff --git a/src/app/components/header/index.tsx b/src/app/components/header/index.tsx
index 2f035a3a..7d212a2e 100644
--- a/src/app/components/header/index.tsx
+++ b/src/app/components/header/index.tsx
@@ -87,8 +87,6 @@ import { useTheme } from "next-themes"
 export default function Header() {
 	const { isAdmin, isAuthenticated } = useSessionSWR()
 	const { resolvedTheme, setTheme } = useTheme()
-	const [mounted, setMounted] = useState(false)
-	useEffect(() => setMounted(true), [])
 	const toggleTheme = () => {
 		setTheme(resolvedTheme === "dark" ? "light" : "dark")
 	}
@@ -118,42 +116,22 @@ export default function Header() {
 						Settings
 					</NavLink>
 					{isAdmin && <NavLink href="/admin">Admin</NavLink>}
-					{isAuthenticated === true && (
-						<NavLink href="/signout">Sign Out</NavLink>
-					)}
-					{isAuthenticated === false && (
-						<NavLink href="/signin">Sign In</NavLink>
-					)}
-					{/* {!mounted && (
-				<NavButton
-					name="Theme"
-					icon={<Circle opacity={0.3} />}
-					value="dark"
-					href=""
-					key="theme"
-				/>
-			)}
-			{mounted && (
-				<NavButton
-					name="Theme"
-					icon={
-						<FadeIn>{resolvedTheme === "dark" ? <Sun /> : <Moon />}</FadeIn>
-					}
-					value="dark"
-					onClick={() => {
-						setTheme(resolvedTheme === "dark" ? "light" : "dark")
-					}}
-					key="theme"
-				/>
-			)} */}
-					{mounted && isAuthenticated !== undefined && (
-						<span
-							aria-hidden
-							className="text-sm font-medium transition-colors cursor-pointer text-muted-foreground hover:text-primary"
-							onClick={toggleTheme}
-						>
-							<FadeIn>{resolvedTheme === "dark" ? "Light" : "Dark"}</FadeIn>
-						</span>
+					{isAuthenticated !== undefined && (
+						<>
+							{isAuthenticated === true && (
+								<NavLink href="/signout">Sign Out</NavLink>
+							)}
+							{isAuthenticated === false && (
+								<NavLink href="/signin">Sign In</NavLink>
+							)}
+							<span
+								aria-hidden
+								className="text-sm font-medium transition-colors cursor-pointer text-muted-foreground hover:text-primary"
+								onClick={toggleTheme}
+							>
+								<FadeIn>{resolvedTheme === "dark" ? "Light" : "Dark"}</FadeIn>
+							</span>
+						</>
 					)}
 				</ul>
 			</nav>
diff --git a/src/app/components/post-list/list-item.tsx b/src/app/components/post-list/list-item.tsx
index 61a2de21..4f225e3c 100644
--- a/src/app/components/post-list/list-item.tsx
+++ b/src/app/components/post-list/list-item.tsx
@@ -17,6 +17,7 @@ import {
 } from "@components/card"
 import { Button } from "@components/button"
 import {
+	ArrowUpCircle,
 	Code,
 	Database,
 	Edit,
@@ -26,7 +27,11 @@ import {
 	Trash
 } from "react-feather"
 import { codeFileExtensions } from "@lib/constants"
-import { DropdownMenu, DropdownMenuItem, DropdownMenuTrigger } from "@components/dropdown-menu"
+import {
+	DropdownMenu,
+	DropdownMenuItem,
+	DropdownMenuTrigger
+} from "@components/dropdown-menu"
 import { DropdownMenuContent } from "@radix-ui/react-dropdown-menu"
 
 // TODO: isOwner should default to false so this can be used generically
@@ -104,40 +109,40 @@ const ListItem = ({
 							<span className="flex gap-2">
 								<DropdownMenu>
 									<DropdownMenuTrigger asChild>
-										<MoreVertical />
+										<MoreVertical className="cursor-pointer" />
 									</DropdownMenuTrigger>
-									<DropdownMenuContent>
+									<DropdownMenuContent className="mt-2 border rounded-md shadow-sm border-border bg-background">
 										<DropdownMenuItem
 											onSelect={() => {
 												editACopy()
 											}}
+											className="cursor-pointer bg-background"
 										>
-											Edit a copy
+											<Edit className="w-4 h-4 mr-2" /> Edit a copy
 										</DropdownMenuItem>
+										{isOwner && (
+											<DropdownMenuItem
+												onSelect={() => {
+													deletePost()
+												}}
+												className="cursor-pointer bg-background"
+											>
+												<Trash className="w-4 h-4 mr-2" />
+												Delete
+											</DropdownMenuItem>
+										)}
+										{post.parentId && (
+											<DropdownMenuItem
+												onSelect={() => {
+													viewParentClick()
+												}}
+											>
+												<ArrowUpCircle className="w-4 h-4 mr-2" />
+												View parent
+											</DropdownMenuItem>
+										)}
 									</DropdownMenuContent>
 								</DropdownMenu>
-								{post.parentId && (
-									<Tooltip content={"View parent"}>
-										<Button
-											// iconRight={<ArrowUpCircle />}
-											onClick={viewParentClick}
-											// TODO: not perfect on mobile
-											variant={"secondary"}
-										/>
-									</Tooltip>
-								)}
-								<Tooltip content={"Make a copy"}>
-									<Button onClick={editACopy} variant={"secondary"}>
-										<Edit height={18} />
-									</Button>
-								</Tooltip>
-								{isOwner && (
-									<Tooltip content={"Delete"}>
-										<Button onClick={deletePost} variant={"secondary"}>
-											<Trash height={18} />
-										</Button>
-									</Tooltip>
-								)}
 							</span>
 						) : null}
 					</CardTitle>
diff --git a/src/app/components/scroll-to-top/index.tsx b/src/app/components/scroll-to-top/index.tsx
index 78ab78c0..63c3d707 100644
--- a/src/app/components/scroll-to-top/index.tsx
+++ b/src/app/components/scroll-to-top/index.tsx
@@ -39,8 +39,10 @@ const ScrollToTop = () => {
 				<Button
 					aria-label="Scroll to Top"
 					onClick={onClick}
-					iconLeft={<ChevronUp />}
-				/>
+					variant={"secondary"}
+				>
+					<ChevronUp />
+				</Button>
 			</Tooltip>
 		</div>
 	)