From 15cdf8033b46a0226e558e3f56e2c6f8c23ff1f7 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 20 Sep 2022 22:50:18 +0300
Subject: [PATCH] improve time separator

---
 frontend/public/global.css              |  2 +-
 frontend/src/components/Messages.svelte | 23 +++++++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index d659a69..48be6a0 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -148,7 +148,7 @@ body {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 0;
+	z-index: 15;
 	background-color: rgba(0, 0, 0, 0.4);
 }
 
diff --git a/frontend/src/components/Messages.svelte b/frontend/src/components/Messages.svelte
index bd1638f..f7bbfdd 100644
--- a/frontend/src/components/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -88,20 +88,35 @@
     }
 
     .time-separator {
+        position: relative;
+        top: auto;
+        left: auto;
+        height: 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        border-radius: var(--radius-norm);
-        padding: var(--space-sm);
+        border-top: thin solid var(--background-color-3);
+        padding: 0;
         margin: var(--space-md);
-        background-color: var(--background-color-2);
+        margin-bottom: var(--space-lg);
+        margin-top: var(--space-lg);
+    }
+    
+    .time-separator-text {
+        margin: 0;
+        padding: 0;
+        background-color: var(--background-color-1);
+        color: var(--foreground-color-2);
+        font-size: 0.75em;
     }
 </style>
 
 <div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
     {#each $messages as message (message.id)}
         {#if message._aboveDateMarker}
-            <div class="time-separator">{ message._aboveDateMarker }</div>
+            <div class="time-separator">
+                <span class="time-separator-text">{ message._aboveDateMarker }</span>
+            </div>
         {/if}
         <Message message={message} />
     {/each}