general visual improvements

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 {

frontend/src/components/MessageInput.svelte

@@ -163,6 +163,7 @@
         padding: 12px;
         aspect-ratio: 1;
         flex-shrink: 0;
+        color: var(--colored-element-text-color);
     }
 
     .invisible {

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 {

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>