From f79f51527b098603f9a4c57405b2eb9c1852a66c Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Mon, 26 Jun 2023 13:44:45 +0300
Subject: [PATCH] fix ui bugs

---
 frontend/src/components/Message.svelte           |  1 +
 frontend/src/components/overlays/Settings.svelte |  6 +++++-
 frontend/src/styles/global.css                   | 16 +++++++++-------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 1ab710f..0031bdf 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -34,6 +34,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
         margin-left: var(--space-sm);
         margin-right: var(--space-sm);
         width: 32px;
+        flex-shrink: 0;
     }
 
     .avatar {
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index be868f6..44b1601 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/frontend/src/components/overlays/Settings.svelte
@@ -112,10 +112,14 @@
     .account-buttons {
         margin-left: auto;
     }
+
+    .settings-modal {
+        background-color: var(--background-color-1);
+    }
 </style>
 
 <div class="modal-backdrop" transition:maybeModalFade on:click="{ close }">
-    <div class="modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
+    <div class="modal settings-modal" class:large-settings="{ !$smallViewport }" transition:maybeModalScale on:click|stopPropagation>
         <div class="modal-header">
             <span class="h4">Settings</span>
         </div>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 2685c99..a798dfb 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -213,7 +213,7 @@ body {
 .modal {
 	display: flex;
 	flex-direction: column;
-	background-color: var(--background-color-1);
+	background-color: var(--background-color-2);
 	border-radius: var(--radius-lg);
 	contain: content;
 }
@@ -231,7 +231,7 @@ body {
 .modal-footer {
 	margin-top: auto;
 	padding: var(--space-md);
-	background-color: var(--background-color-0);
+	background-color: var(--background-color-1);
 	border-bottom-right-radius: var(--radius-lg);
 	border-bottom-left-radius: var(--radius-lg);
 }
@@ -244,10 +244,8 @@ body {
 	float: left;
 }
 
-@media screen and (min-width: 768px) {
-	.modal-backdrop-opaque .modal .modal-footer {
-		background-color: var(--background-color-1);
-	}
+.modal-backdrop-opaque .modal .modal-footer {
+	background-color: var(--background-color-3);
 }
 
 @media screen and (max-width: 768px) {
@@ -286,7 +284,7 @@ body {
 }
 
 .input {
-	background-color : var(--background-color-2);
+	background-color: var(--background-color-3);
 	border: none;
 	color: currentColor;
 	border-radius: var(--radius-md);
@@ -542,6 +540,10 @@ body {
 /* badges */
 
 .user-badge {
+	background: none;
+	border: none;
+	font: inherit;
+	user-select: none;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;