Added all styles and missing components

.prettierrc

@@ -1,5 +1,6 @@
 {
   "tabWidth": 4,
   "useTabs": true,
-  "semi": false
+  "semi": false,
+  "printWidth": 100
 }

src/assets/base.css

@@ -1,4 +1,43 @@
+:root {
+	--color-primary: #1C1F32;
+	--color-secondary: #FDFEBA;
+
+	--color-neutral-dark: #212121;
+	--color-neutral-light: #6b6b6b;
+}
+
+* {
+	box-sizing: border-box;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
 body {
 	margin: 0;
 	box-sizing: border-box;
+
+	background-color: var(--color-primary);
+}
+
+.button-primary,
+.button-secondary,
+input[type="text"] {
+	padding: 16px;
+
+	border: none;
+	border-radius: 16px;
+	outline: none;
+
+	color: var(--color-neutral-dark);
+	background-color: var(--color-secondary);
+
+	font-weight: 700;
+
+	cursor: pointer;
+}
+
+.button-secondary,
+input[type="text"] {
+	border: solid 2px var(--color-secondary);
+	color: var(--color-secondary);
+	background-color: var(--color-primary);
 }

src/components/nicknameSelection.vue

@@ -11,13 +11,36 @@ function setNickname() {
 </script>
 
 <template>
-	<h2>Group {{ sessionStore.groupId }}</h2>
+	<div>
+		<h2>
+			Group <br />
+			{{ sessionStore.groupId }}
+		</h2>
 
 		<form @submit.prevent="setNickname">
-		<label for="nickname">Nickname</label>
-		<input type="text" id="nickname" name="nickname" v-model="nickname" />
-		<button type="submit">confirm</button>
+			<input
+				type="text"
+				id="nickname"
+				name="nickname"
+				v-model="nickname"
+				placeholder="enter a nickname"
+			/>
 		</form>
+	</div>
 </template>
 
-<style scoped></style>
+<style scoped>
+div {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	min-height: 100vh;
+}
+
+div > h2 {
+	text-align: center;
+	color: var(--color-secondary);
+}
+</style>

src/views/Chat.vue

@@ -19,12 +19,7 @@ const messages: Ref<Array<DocumentData>> = ref([])
 const currentMessage = ref("")
 const lastUserMessageId = ref("")
 
-const messagesPath = collection(
-	db,
-	"groups",
-	sessionStore.groupId as string,
-	"messages"
-)
+const messagesPath = collection(db, "groups", sessionStore.groupId as string, "messages")
 
 interface Message {
 	author: string
@@ -44,9 +39,7 @@ async function postMessage(): Promise<void> {
 }
 
 function updateMessages(querSnap: QuerySnapshot<DocumentData>): void {
-	messages.value = querSnap.docs.map((x) =>
-		x.data({ serverTimestamps: "estimate" })
-	)
+	messages.value = querSnap.docs.map((x) => x.data({ serverTimestamps: "estimate" }))
 
 	messages.value = messages.value.sort((a, b) => {
 		return a.timestamp.toDate() - b.timestamp.toDate()
@@ -58,6 +51,14 @@ async function onFormSubmit() {
 	currentMessage.value = ""
 }
 
+function getShareUrl() {
+	return window.location.href
+}
+
+function getMessageClass(message: Message) {
+	return message.author === sessionStore.nickname ? "author-message" : "message"
+}
+
 onMounted(() => {
 	if (!sessionStore.groupId) return
 
@@ -68,34 +69,104 @@ onMounted(() => {
 <template>
 	<NicknameSelection v-if="!sessionStore.nickname"></NicknameSelection>
 
-	<template v-else>
+	<div class="container" v-else>
+		<p>
+			share the link: <a :href="getShareUrl()" target="_blank">{{ getShareUrl() }}</a>
+		</p>
+
 		<div class="messages">
-			<div v-for="message of messages">
+			<template v-for="message of messages">
+				<div :class="getMessageClass(message as Message)">
 					<h3>{{ message.author }}</h3>
 					<p>{{ message.message }}</p>
 				</div>
+			</template>
 		</div>
 
 		<form @submit.prevent="onFormSubmit">
-			<label for="message">Message</label>
 			<input
 				type="text"
 				name="message"
 				id="message"
 				v-model="currentMessage"
+				placeholder="Your message"
 			/>
-			<button type="submit">Send</button>
+			<button type="submit" class="button-primary">Send</button>
 		</form>
-	</template>
+	</div>
 </template>
 
 <style scoped>
-.messages > div {
+.container {
+	display: flex;
+	flex-direction: column;
+
+	height: 100vh;
 	padding: 16px;
 }
 
-.messages > div h3,
-.messages > div p {
+.container > p {
+	color: var(--color-neutral-light);
+	text-align: center;
+}
+
+.messages {
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+
+	padding: 16px 0;
+
+	max-height: 100%;
+	overflow: scroll;
+}
+
+.author-message,
+.message {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.author-message p,
+.message p {
+	width: fit-content;
+	padding: 16px;
 	margin: 0;
+
+	color: #fff;
+
+	border: solid 2px var(--color-neutral-light);
+	border-radius: 16px;
+}
+
+.author-message h3,
+.message h3 {
+	margin: 0 8px;
+
+	font-size: 16px;
+	font-stretch: semi-expanded;
+	font-weight: 500;
+
+	color: #fff;
+}
+
+form {
+	display: flex;
+	gap: 16px;
+}
+
+form > input {
+	width: 100%;
+}
+
+.author-message h3,
+.author-message {
+	place-self: flex-end;
+}
+
+.author-message p {
+	border: none;
+	background-color: var(--color-neutral-light);
 }
 </style>

src/views/GroupSelection.vue

@@ -27,8 +27,30 @@ async function createGroup() {
 </script>
 
 <template>
+	<div>
 		<h1>Space Messenger</h1>
-	<button @click="() => createGroup()">create a group</button>
+		<button @click="() => createGroup()" class="button-primary">
+			create a group
+		</button>
+	</div>
 </template>
 
-<style scoped></style>
+<style scoped>
+div {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 32px;
+
+	min-height: 100vh;
+	padding: 16px;
+
+	color: var(--color-secondary);
+}
+
+div button {
+	width: 100%;
+	max-width: 250px;
+}
+</style>