From 10d25445c54d74c9544c83d11f118b724e9dbddf Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 20 Sep 2022 01:35:54 +0300
Subject: [PATCH] general visual improvements

---
 frontend/public/global.css                    | 21 ++++++++++++-------
 frontend/src/components/MessageInput.svelte   |  1 +
 .../src/components/overlays/Settings.svelte   | 10 ++-------
 frontend/src/components/overlays/Toast.svelte | 11 +++++-----
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 4c6442c..d1663a4 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -59,6 +59,7 @@
 	--radius-unit: 0.5em;
 	--radius-xxs: calc(0.25 * var(--radius-unit));
 	--radius-xs: calc(0.5 * var(--radius-unit));
+	--radius-xsplus: calc(0.65 * var(--radius-unit));
 	--radius-sm: calc(0.75 * var(--radius-unit));
 	--radius-norm: var(--radius-unit);
 	--radius-md: calc(1.25 * var(--radius-unit));
@@ -154,7 +155,7 @@ body {
 .modal {
 	display: flex;
 	flex-direction: column;
-	background-color: var(--background-color-2);
+	background-color: var(--background-color-1);
 	border-radius: var(--radius-lg);
 	padding: var(--space-md);
 }
@@ -196,7 +197,7 @@ body {
 }
 
 .input {
-	background-color : var(--background-color-3);
+	background-color : var(--background-color-2);
 	border: none;
 	color: currentColor;
 	border-radius: var(--radius-md);
@@ -206,24 +207,28 @@ body {
 }
 
 .input::placeholder {
-	color: var(--foreground-color-3);
+	color: var(--foreground-color-2);
 }
 
 /* button */
 
 .button {
 	color: var(--foreground-color-1);
-	background-color: var(--background-color-2);
+	background: none;
 	text-align: center;
 	border: none;
-	padding: var(--space-sm);
-	border-radius: var(--radius-md);
+	padding: var(--space-xsplus);
+	border-radius: var(--radius-xl);
 	font: inherit;
-	max-height: 3em;
+
+	/* TODO: inefficient */
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .button:hover {
-	background-color: var(--background-color-3);
+	background-color: var(--background-color-2);
 }
 
 .button-accent {
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index 9fb5859..5b0a64b 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -163,6 +163,7 @@
         padding: 12px;
         aspect-ratio: 1;
         flex-shrink: 0;
+        color: var(--colored-element-text-color);
     }
 
     .invisible {
diff --git a/frontend/src/components/overlays/Settings.svelte b/frontend/src/components/overlays/Settings.svelte
index e692352..53ba71b 100644
--- a/frontend/src/components/overlays/Settings.svelte
+++ b/frontend/src/components/overlays/Settings.svelte
@@ -66,16 +66,10 @@
         align-items: center;
         justify-content: left;
         padding: var(--space-md);
-        border-radius: var(--radius-norm);
-        background-color: var(--background-color-1);
     }
 
-    .selection-option {
-        background-color: var(--background-color-1);
-    }
-
-    .selection-option.selected, .selection-option:hover {
-        background-color: var(--background-color-3);
+    .selection-option.selected {
+        background-color: var(--background-color-2);
     }
 
     .horizontal-selections {
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
index ec76d43..9e43f01 100644
--- a/frontend/src/components/overlays/Toast.svelte
+++ b/frontend/src/components/overlays/Toast.svelte
@@ -18,12 +18,11 @@
         transform: translate(-50%, -50%);
         padding: var(--space-sm);
         border-radius: var(--radius-md);
+        box-shadow: 0px 4px 16px rgba(17,17,26,0.2), 0px 8px 32px rgba(17,17,26,0.2);
     }
 </style>
 
-{#key message}
-    <div class="toast" transition:maybeModalFly>
-        <span>{ message }</span>
-        <button class="icon-button icon-button-auto material-icons-outlined" on:click="{ close }">close</button>
-    </div>
-{/key}
+<div class="toast" transition:maybeModalFly>
+    <span>{ message }</span>
+    <button class="icon-button icon-button-auto material-icons-outlined" on:click="{ close }">close</button>
+</div>