Stylize more better

author: Kit La Touche <kit@transneptune.net> 2025-01-05 14:44:31 -0500
committer: Kit La Touche <kit@transneptune.net> 2025-01-05 14:44:31 -0500
commit: 16ec9ef2e1e53b5cc2a3fd86c123e39371d00c2b (patch)
tree: c7d702bc34b643d3db2d127378e843086e52d0d4 /ui
parent: 377e6255a6534e5371512fa051ea16b42e761aac (diff)
12 files changed, 37 insertions, 9 deletions
diff --git a/ui/app.css b/ui/app.css
index 7ac9237..27086e7 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -8,9 +8,15 @@
 @import url("styles/messages.css");
 @import url("styles/textarea.css");
 @import url("styles/forms.css");
+@import url("styles/invites.css");
 
 body {
   background-color: var(--colour-active-channel-bg);
+  color: var(--dark-text);
+}
+
+hr {
+  width: 90%;
 }
 
 /* TODO:
diff --git a/ui/app.html b/ui/app.html
index 942e328..e6be518 100644
--- a/ui/app.html
+++ b/ui/app.html
@@ -8,6 +8,6 @@
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div class="m-0 p-0 h-vh w-full">%sveltekit.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte
index 9e6e469..29631f4 100644
--- a/ui/lib/components/Invite.svelte
+++ b/ui/lib/components/Invite.svelte
@@ -10,4 +10,4 @@
 </script>
 
 <button use:copy={{ text: inviteUrl }}>copy</button>
-<span>{inviteUrl}</span>
+<span class="invite-url-literal">{inviteUrl}</span>
diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte
index 5c5d601..7861448 100644
--- a/ui/lib/components/Invites.svelte
+++ b/ui/lib/components/Invites.svelte
@@ -17,7 +17,7 @@
   <button type="submit">create invitation</button>
 </form>
 
-<ul>
+<ul class="invite-list">
   {#each invites as invite}
     <li><Invite id={invite.id} /></li>
   {/each}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index cacfc2d..08444bd 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -129,10 +129,6 @@
   <div id="interface">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
         <ChannelList active={channel} channels={enrichedChannels} />
-        <!--
-      <div class="channel-list">
-      </div>
-        -->
       <div class="create-channel">
         <CreateChannelForm />
       </div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 9718ce1..14a9db8 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -5,5 +5,7 @@
 </script>
 
 <ChangePassword />
+<hr />
 <Invites />
+<hr />
 <LogOut />
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 4433bd6..132cbc1 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -25,11 +25,11 @@
 </script>
 
 {#await data.invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Loading invitation…</p>
   </div>
 {:then invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Hi there! {invite.issuer} invites you to the conversation.</p>
   </div>
   <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index aaae92c..0ab9b77 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -1,6 +1,7 @@
 label {
   display: block;
   padding: 0.25rem;
+  font-style: italic;
 }
 
 label input {
@@ -16,4 +17,5 @@ form > button {
   padding: 0.25rem;
   border-radius: 0.25rem;
   border: 1px solid var(--colour-input-border);
+  margin: 0.25rem;
 }
diff --git a/ui/styles/invites.css b/ui/styles/invites.css
new file mode 100644
index 0000000..9cd3fd4
--- /dev/null
+++ b/ui/styles/invites.css
@@ -0,0 +1,11 @@
+.invite-list {
+  padding: 0.25rem;
+}
+
+.invite-url-literal {
+  font-family: monospace;
+}
+
+.invite-text {
+  margin: 1rem;
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index ba659ed..0854d17 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -6,6 +6,7 @@
   box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
   width: 95%;
   clear: both;
+  overflow: hidden;
 }
 
 .own-message {
@@ -30,6 +31,11 @@
 .message-run > .username {
   background-color: var(--colour-message-run-username-bg);
   color: var(--colour-message-run-username-text);
+  display: inline-block;
+  border-bottom-right-radius: 0.25rem;
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--colour-message-run-username-border);
+  border-right: 1px solid var(--colour-message-run-username-border);
 }
 
 .message {
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index 8808a3b..b10789f 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -23,6 +23,10 @@
 }
 
 /* create channel form */
+.create-channel {
+  padding-left: 0.5rem;
+}
+
 .create-channel form {
   display: flex;
   flex-direction: row;
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index 9a1c689..f753589 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -48,6 +48,7 @@
   --colour-message-run-other-text: var(--light-text);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
+  --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);
   --colour-message-run-username-text: color-mix(in srgb, var(--colour-base) 50%, black);
 
   /* Message */
author	Kit La Touche <kit@transneptune.net>	2025-01-05 14:44:31 -0500
committer	Kit La Touche <kit@transneptune.net>	2025-01-05 14:44:31 -0500
commit	16ec9ef2e1e53b5cc2a3fd86c123e39371d00c2b (patch)
tree	c7d702bc34b643d3db2d127378e843086e52d0d4 /ui
parent	377e6255a6534e5371512fa051ea16b42e761aac (diff)