refactor(apps/web): change styling

Mnigos · Sep 30, 2024 · b991fb0 · b991fb0
1 parent 1ce0fbf
commit b991fb0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 50 deletions.
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -15,7 +15,7 @@ function RootLayout({ children, modal }: RootLayout.Props) {
   return (
     <html lang="en">
       <body className="dark">
-        <div className="min-h-screen">{children}</div>
+        <div className="min-h-screen p-4">{children}</div>
         {modal}
       </body>
     </html>

diff --git a/apps/web/app/thoughts/layout.tsx b/apps/web/app/thoughts/layout.tsx
@@ -27,10 +27,13 @@ async function ThoughtsLayout({ children, modal }: ThoughtsLayout.Props) {
   const user = await getCurrentUser()
 
   return (
-    <div>
-      <nav className="flex w-full justify-end bg-black px-4 py-2">
+    <div className="flex flex-col gap-4">
+      <nav className="flex w-full justify-end bg-black">
         <DropdownMenu>
-          <DropdownMenuTrigger className="flex items-center gap-2" asChild>
+          <DropdownMenuTrigger
+            className="hover:bg-foreground hover:text-background data-[state=open]:text-background data-[state=open]:bg-foreground flex items-center gap-2 border-0"
+            asChild
+          >
             <Button variant="outline">
               <p className="text-lg">{user.name}</p>
               <User />
@@ -40,7 +43,12 @@ async function ThoughtsLayout({ children, modal }: ThoughtsLayout.Props) {
           <DropdownMenuContent>
             <form action={logout}>
               <DropdownMenuItem className="flex items-center gap-2" asChild>
-                <Button variant="destructive" className="w-full" type="submit">
+                <Button
+                  variant="destructive"
+                  className="w-full"
+                  type="submit"
+                  size="sm"
+                >
                   <LogOut />
                   Logout
                 </Button>

diff --git a/apps/web/app/thoughts/page.tsx b/apps/web/app/thoughts/page.tsx
@@ -1,3 +1,5 @@
+import { Card } from '@repo/ui/components/card'
+
 import { getThoughts } from '~/server/actions/thoughts'
 import { getCurrentUser } from '~/server/actions/users'
 import { ThoughtForm, ThoughtCard } from '~/components/thoughts'
@@ -7,30 +9,22 @@ export default async function ThoughtsPage() {
   const thoughts = await getThoughts()
 
   return (
-    <div className="p-4">
-      <h1>Thoughts</h1>
-
-      <div className="mx-auto max-w-[1100px]">
+    <div className="mx-auto flex max-w-[900px] flex-col gap-6">
+      <Card>
         <ThoughtForm />
+      </Card>
 
-        <section>
-          <header>
-            <h2>Recent thoughts</h2>
-          </header>
-
-          <div className="flex flex-col gap-2">
-            {thoughts.map(({ id, content, author }) => (
-              <ThoughtCard
-                key={id}
-                id={id}
-                content={content}
-                author={author}
-                currentUserId={currentUser.id}
-              />
-            ))}
-          </div>
-        </section>
-      </div>
+      <section className="flex flex-col gap-2">
+        {thoughts.map(({ id, content, author }) => (
+          <ThoughtCard
+            key={id}
+            id={id}
+            content={content}
+            author={author}
+            currentUserId={currentUser.id}
+          />
+        ))}
+      </section>
     </div>
   )
 }
diff --git a/apps/web/components/thoughts/thought-card.tsx b/apps/web/components/thoughts/thought-card.tsx
@@ -20,30 +20,40 @@ function ThoughtCard({
   currentUserId,
 }: ThoughtCard.Props) {
   return (
-    <Card className="flex flex-col gap-2 px-4">
-      <CardHeader className="flex flex-row items-center justify-between">
-        <div className="flex flex-row items-center gap-2">
-          <User />
-
-          <div>
-            <p className="text-lg">{author.name}</p>
-            <p className="text-muted-foreground text-xs">
-              {new Date(author.createdAt).toLocaleDateString()}
-            </p>
+    <div className="group relative">
+      {currentUserId === author.id && (
+        <Button
+          variant="outline"
+          className="bg-card absolute -top-2 right-4 gap-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover:opacity-100"
+          size="xs"
+          asChild
+        >
+          <Link href={`/thought/${id}/edit`} passHref>
+            <Pencil className="h-3 w-3" />
+            Edit
+          </Link>
+        </Button>
+      )}
+
+      <Card className="grid grid-cols-[24px_1fr] grid-rows-[40px_1fr] gap-x-2">
+        <User className="place-self-center" />
+
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div className="flex flex-row items-center gap-2">
+            <div>
+              <p className="font-semibold leading-5">{author.name}</p>
+              <p className="text-muted-foreground text-xs">
+                {new Date(author.createdAt).toLocaleDateString()}
+              </p>
+            </div>
           </div>
-        </div>
-
-        {currentUserId === author.id && (
-          <Button variant="outline" className="gap-2" size="icon" asChild>
-            <Link href={`/thought/${id}/edit`} passHref>
-              <Pencil className="h-4 w-4" />
-            </Link>
-          </Button>
-        )}
-      </CardHeader>
-
-      <CardContent className="text-lg text-neutral-50">{content}</CardContent>
-    </Card>
+        </CardHeader>
+
+        <div />
+
+        <CardContent className="text-neutral-50">{content}</CardContent>
+      </Card>
+    </div>
   )
 }