Stylize channel badges

4 files changed, 44 insertions, 5 deletions

diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index dc019a0..2fc3249 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -5,9 +5,9 @@
 <a href="/ch/{id}">
   <li class:active={active}>
     {#if hasUnreads}
-      <span>❦</span>
+      <span class="badge has-unreads">❦</span>
     {:else}
-      <span>¶</span>
+      <span class="badge has-no-unreads">¶</span>
     {/if}
     <span>{name}</span>
   </li>
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
index 53f003c..f5b24ab 100644
--- a/ui/styles/app-layout.css
+++ b/ui/styles/app-layout.css
@@ -24,7 +24,7 @@ nav#sidebar {
   height: 100vh;
   z-index: 10;
 
-  border-radius: 0 1.4rem 1.4rem 0;
+  border-radius: 0 0.8rem 0.8rem 0;
 
   background-color: var(--colour-navbar-bg);
 
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 0854d17..7df781a 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -90,13 +90,23 @@
 
 /* For rendered message bodies: */
 .message-body blockquote {
-  border-left: 0.25rem solid lightgrey;
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
   padding-left: 0.5rem;
+  border-left: 2px solid grey;
+  border-radius: 0.125rem;
 }
+
+.message-body blockquote * {
+  color: grey;
+}
+
 .message-body pre {
   border: 1px solid #312e81;
   border-radius: 0.25rem;
   background-color: var(--colour-message-run-text);
   padding: 0.25rem;
 }
+
+.message-body code {
+  font-family: monospace;
+}
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index b10789f..695628c 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -3,6 +3,10 @@
   background-color: var(--colour-navbar-bg);
 }
 
+.list-nav a {
+  text-decoration: none;
+}
+
 .list-nav ul {
   padding: 0.5rem;
 }
@@ -51,4 +55,29 @@
   color: var(--colour-input-text);
 }
 
+.badge {
+  --dimensions: 1.25rem;
+  display: inline-block;
+
+  width: var(--dimensions);
+  height: var(--dimensions);
+  border-radius: var(--dimensions);
+  line-height: var(--dimensions);
+  text-align: center;
+}
+
+.badge.has-unreads {
+  /* TODO: Obvs this is a placeholder */
+  border: 1px solid mediumaquamarine;
+  background-color: lightgreen;
+  color: black;
+}
+
+.badge.has-no-unreads {
+  /* TODO: Obvs this is a placeholder */
+  border: 1px solid bisque;
+  background-color: antiquewhite;
+  color: black;
+}
+
 /* TODO: media-query stuff. Margin-left at a constant zero? */