frontend/public/global.css

@@ -7,28 +7,16 @@
 	src: url('assets/woff2/iosevka-aile-regular.woff2') format('woff2');
 }
 
-@font-face {
-	font-family: 'Iosevka Aile Web';
-	font-display: swap;
-	font-weight: 700;
-	font-stretch: normal;
-	font-style: normal;
-	src: url('assets/woff2/iosevka-aile-bold.woff2') format('woff2');
-}
-
 :root {
 	--background-color-1: hsl(180, 11%, 7%);
 	--background-color-2: hsl(180, 11%, 12%);
-	--foreground-color-1: rgb(253, 254, 255);
+	--foreground-color-1: hsl(0, 0%, 100%);
-	--foreground-color-2: rgb(218, 219, 220);
+	--foreground-color-2: hsl(0, 0%, 60%);
-	--foreground-color-3: rgb(153, 154, 155);
 
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));
 	--space-xs: calc(0.5 * var(--space-unit));
 	--space-sm: calc(0.75 * var(--space-unit));
-	--space-norm: var(--space-unit);
-	--space-normplus: calc(var(--space-unit) + var(--space-sm));
 	--space-md: calc(1.25 * var(--space-unit));
 	--space-lg: calc(2 * var(--space-unit));
 	--space-xl: calc(3.25 * var(--space-unit));
@@ -38,7 +26,6 @@
 	--radius-xxs: calc(0.25 * var(--radius-unit));
 	--radius-xs: calc(0.5 * var(--radius-unit));
 	--radius-sm: calc(0.75 * var(--radius-unit));
-	--radius-norm: var(--radius-unit);
 	--radius-md: calc(1.25 * var(--radius-unit));
 	--radius-lg: calc(2 * var(--radius-unit));
 	--radius-xl: calc(3.25 * var(--radius-unit));

frontend/src/components/pages/main/ChannelView.svelte

@@ -47,8 +47,6 @@
 
 <style>
     .main-container {
-        background-color: var(--background-color-1);
-        overflow: hidden;
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -59,6 +57,7 @@
         height: 3.4em;
         width: 100%;
         padding: var(--space-xs);
+        background-color: var(--background-color-1);
         display: flex;
         align-items: center;
         border-bottom: 1px solid var(--background-color-2);
@@ -70,7 +69,8 @@
 
     .message-input-container {
         width: 100%;
-        padding: var(--space-norm);
+        padding: var(--space-md);
+        background-color: var(--background-color-1);
     }
 
     .message-input {
@@ -81,12 +81,6 @@
         color: currentColor;
         border-radius: var(--radius-md);
         padding: var(--space-sm);
-        font-size: inherit;
-        line-height: inherit;
-    }
-
-    .message-input::placeholder {
-        color: var(--foreground-color-3);
     }
 </style>
 
@@ -97,6 +91,6 @@
     </div>
     <Messages channelId="{ channel.id }" />
     <div class="message-input-container">
-        <input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
+        <input type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
     </div>
 </div>

frontend/src/components/pages/main/Main.svelte

@@ -10,7 +10,6 @@
         height: 100vh;
         display: flex;
         flex-direction: row;
-        overflow: hidden;
     }
 
     .fullscreen-message {

frontend/src/components/pages/main/Messages.svelte

@@ -48,40 +48,24 @@
 
 <style>
     .messages-container {
-        padding: var(--space-normplus);
+        padding: var(--space-sm);
-        padding-bottom: 0;
         height: 100%;
         width: 100%;
         flex-grow: 0;
         overflow-y: auto;
-        overflow-x: hidden;
         background-color: var(--background-color-1);
     }
 
-    .message {
-        overflow-x: none;
-        word-break: break-all;
-    }
-
-    .message-content {
-        color: var(--foreground-color-2);
-    }
-
     .pending {
-        color: var(--foreground-color-3);
+        color: var(--foreground-color-2);
-    }
-
-    .author {
-        font-weight: bold;
-        margin-right: var(--space-xxs);
     }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#each $messages as message (message.id)}
-        <div class="message">
+        <div>
-            <span class="author">{ message.author_username }</span>
+            <b>{ message.author_username }</b>
-            <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
+            <span class:pending={ message._isPending }>{ message.content }</span>
         </div>
     {/each}
 </div>