feat: styled button a bit

app.vue

@@ -18,6 +18,10 @@ body {
   margin: 0;
 }
 
+*:focus-visible {
+	outline: 1px solid rgb(150, 150, 150);
+}
+
 a {
   color: aquamarine;
 }

components/MessageArea.vue

@@ -6,8 +6,8 @@
 	</div>
 	<div id="message-box">
 		<form id="message-form" @submit="sendMessage">
-			<input v-model="messageInput" type="text" name="message-input" id="message-box-input">
-			<button type="submit">
+			<input v-model="messageInput" type="text" name="message-input" id="message-box-input" autocomplete="off">
+			<button id="submit-button" type="submit">
 				<Icon name="lucide:send" />
 			</button>
 		</form>
@@ -98,27 +98,38 @@ onMounted(async () => {
 <style scoped>
 
 #message-area {
-	padding-top: 3dvh;
-}
-
-#message-area {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 8fr 1fr;
 	justify-content: space-between;
+	padding-top: 3dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
 }
 
 #message-box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-content: center;
 	border: 1px solid rgb(70, 70, 70);
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
+	margin-top: 1dvh;
 }
 
-#message-input {
-	width: 100%;
+#message-form {
+	display: flex;
+	justify-content: center;
+	height: 60%;
+}
+
+#message-box-input {
+	width: 80%;
+	background-color: rgb(50, 50, 50);
+	border: none;
 }
 
 #messages {
@@ -128,4 +139,14 @@ onMounted(async () => {
 	gap: 1dvh;
 }
 
+#submit-button {
+	background-color: inherit;
+	border: none;
+	color: white;
+}
+
+#submit-button:hover {
+	background-color: rgb(40, 40, 40);
+}
+
 </style>