Fix showing password prompt for unauthed protected posts

src/app/(auth)/components/index.tsx

@@ -133,7 +133,6 @@ const Auth = ({
 						{isGithubEnabled ? (
 							<Button
 								type="submit"
-								buttonType="primary"
 								width="100%"
 								style={{
 									color: "var(--fg)"

src/app/(posts)/post/[id]/components/post-files/index.tsx

@@ -4,7 +4,7 @@ import DocumentComponent from "./view-document"
 
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
-import PasswordModalPage from "./password-modal-wrapper"
+import PasswordModalWrapper from "./password-modal-wrapper"
 import { PostWithFilesAndAuthor } from "@lib/server/prisma"
 
 type Props = {
@@ -45,9 +45,10 @@ const PostFiles = ({ post: _initialPost }: Props) => {
 
 	const isProtected = post?.visibility === "protected"
 	const hasFetched = post?.files !== undefined
+	console.log({ isProtected, hasFetched })
 	if (isProtected && !hasFetched) {
 		return (
-			<PasswordModalPage
+			<PasswordModalWrapper
 				authorId={post.authorId}
 				setPost={setPost}
 				postId={post.id}

src/app/(posts)/post/[id]/components/post-files/password-modal-wrapper.tsx

@@ -13,7 +13,7 @@ type Props = {
 	authorId: Post["authorId"]
 }
 
-const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
+const PasswordModalWrapper = ({ setPost, postId, authorId }: Props) => {
 	const router = useRouter()
 	const { setToast } = useToasts()
 	const { data: session, status } = useSession()
@@ -68,7 +68,7 @@ const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
 					"You're the author of this post, so you automatically have access to it.",
 				type: "default"
 			})
-		} else if (isAuthor === false) {
+		} else {
 			setIsPasswordModalOpen(true)
 		}
 	}, [isAuthor, onSubmit, setToast])
@@ -83,4 +83,4 @@ const PasswordModalPage = ({ setPost, postId, authorId }: Props) => {
 	)
 }
 
-export default PasswordModalPage
+export default PasswordModalWrapper

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

@@ -5,15 +5,18 @@ const FadeIn = ({
 	duration = 300,
 	delay = 0,
 	children,
+	as,
 	...delegated
 }: {
 	duration?: number
 	delay?: number
 	children: React.ReactNode
+	as?: React.ElementType
 	[key: string]: any
 }) => {
+	const Element = as || "div"
 	return (
-		<div
+		<Element
 			{...delegated}
 			className={styles.fadeIn}
 			style={{
@@ -23,7 +26,7 @@ const FadeIn = ({
 			}}
 		>
 			{children}
-		</div>
+		</Element>
 	)
 }
 

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

@@ -66,8 +66,8 @@ const ListItem = ({
 	}
 
 	return (
-		<FadeIn>
-			<li key={post.id}>
+		<FadeIn as="li" key={post.id}>
+			<li>
 				<Card style={{ overflowY: "scroll" }}>
 					<>
 						<div className={styles.title}>