Style /me route

3 files changed, 23 insertions, 11 deletions

diff --git a/ui/app.css b/ui/app.css
index 1f1fc20..7ac9237 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -7,6 +7,7 @@
 @import url("styles/active-channel.css");
 @import url("styles/messages.css");
 @import url("styles/textarea.css");
+@import url("styles/forms.css");
 
 body {
   background-color: var(--colour-active-channel-bg);
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index aded292..9718ce1 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -4,14 +4,6 @@
   import ChangePassword from '$lib/components/ChangePassword.svelte';
 </script>
 
-<div class="mb-4">
-  <ChangePassword />
-</div>
-
-<div class="mb-4">
-  <Invites />
-</div>
-
-<div>
-  <LogOut />
-</div>
+<ChangePassword />
+<Invites />
+<LogOut />
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
new file mode 100644
index 0000000..aaae92c
--- /dev/null
+++ b/ui/styles/forms.css
@@ -0,0 +1,19 @@
+label {
+  display: block;
+  padding: 0.25rem;
+}
+
+label input {
+  display: block;
+  width: 90%;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--colour-input-border);
+}
+
+form > button {
+  background-color: var(--colour-input-bg);
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--colour-input-border);
+}