Frontend: update postcard ui (color and layout)

frontend/components/Header.vue

@@ -45,21 +45,31 @@ const userOptions: Array<UserOption> = [
 
 <template>
 	<div
-        class="fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 border-b-lightgray bg-secondary px-4">
+		class="flex h-14 w-screen items-center justify-between bg-primary px-4">
-        <div class="flex gap-4">
-            <Icon name="twitter" />
-            <div class="font-bold"> Twitter Clone </div>
-        </div>
 		<div class="relative">
-            <Icon name="user" size="28" ref="userIcon" @click="toggleUserOptions()" />
+			<Icon
-            <div v-if="showUserOptions" ref="userOptionsCard"
+				name="user"
-                class="absolute right-0 top-8 w-max border border-lightgray bg-secondary">
+				size="36"
-                <div v-for="userOption in userOptions"
+				ref="userIcon"
+				@click="toggleUserOptions()" />
+			<div
+				v-if="showUserOptions"
+				ref="userOptionsCard"
+				class="absolute left-0 top-8 w-max border border-lightgray bg-secondary">
+				<div
+					v-for="userOption in userOptions"
 					class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
 					@click="userOption.function()">
 					{{ userOption.title }}
 				</div>
 			</div>
 		</div>
+		<div class="flex gap-4">
+			<Icon
+				name="twitter"
+				size="28"
+				class="text-sky-500" />
+		</div>
+		<div class="invisible h-8 w-8"></div>
 	</div>
 </template>

frontend/components/PostCard.vue

@@ -3,32 +3,45 @@ type Post = {
 	user: {
 		name: String
 	}
-    title: String
 	description: String
 	created_at: string
 }
 
 const props = defineProps<Post>()
+
+const now = new Date().toLocaleDateString()
+
+const postTime = new Date(props.created_at)
+
+const displayTime = () => {
+    if (now == postTime.toLocaleDateString()) {
+        return postTime.toLocaleTimeString()
+    }
+    return postTime.toLocaleDateString()
+}
 </script>
 
 <template>
 	<div>
-        <div class="flex w-full flex-col gap-6 rounded-md border border-lightgray bg-secondary p-6">
+		<div class="flex w-full gap-4 border border-lightgray p-6">
-            <div class="flex justify-between">
+			<div>
-                <div class="flex h-full gap-4">
+				<Icon
-                    <Icon name="user" />
+					name="user"
+					size="40" />
+			</div>
+			<div class="flex w-full flex-col gap-2">
+				<div class="flex w-full justify-between">
+					<div class="flex h-full gap-4 font-bold">
 						{{ props.user.name }}
 					</div>
 					<div>
-                    {{ new Date(props.created_at).toLocaleString() }}
+						{{ displayTime() }}
 					</div>
 				</div>
-            <div class="h-full truncate text-xl font-bold">
+				<div class="h-full whitespace-pre-line">
-                {{ props.title }}
-            </div>
-            <div class="h-full">
 					{{ props.description }}
 				</div>
 			</div>
 		</div>
+	</div>
 </template>