From b01b6c41214f58f907dfe1a4812337d8c83a15ca Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 8 Jan 2023 23:09:46 +0200
Subject: [PATCH] various style improvements

---
 frontend/package.json                       |  2 +-
 frontend/rollup.config.mjs                  |  2 +-
 frontend/src/components/MessageInput.svelte |  3 +--
 frontend/src/main.js                        |  2 +-
 frontend/src/styles/global.css              | 26 ++++++++++++++-------
 frontend/yarn.lock                          | 10 ++++----
 6 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index e20cfef..3b22244 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,7 @@
     "dev": "rollup -c -w"
   },
   "devDependencies": {
-    "@material-design-icons/font": "^0.14.2",
+    "@fontsource/material-icons-outlined": "^4.5.4",
     "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",
diff --git a/frontend/rollup.config.mjs b/frontend/rollup.config.mjs
index 3ac16b9..60e103a 100644
--- a/frontend/rollup.config.mjs
+++ b/frontend/rollup.config.mjs
@@ -44,7 +44,7 @@ export default {
 		// Copy fonts
 		copy({
 			targets: [
-				{ src: "node_modules/@material-design-icons/font/material-icons-outlined.woff2", dest: "public/build" },
+				{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" },
 			]
 		}),
 
diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
index ab5ca3a..fc79a04 100644
--- a/frontend/src/components/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -184,7 +184,6 @@
         {/if}
     </div>
     <div class="typing-info-container">
-        <span class="typing-list" class:invisible={ typingList === "?no one?" }>{ typingList }</span>
-        <span class="typing-message" class:invisible={ typingList === "?no one?" }>{ typingMessage }</span>
+        <span class="typing-list" class:invisible={ typingList === "?no one?" }>{ typingList }</span><span class="typing-message" class:invisible={ typingList === "?no one?" }>{ typingMessage }</span>
     </div>
 </div>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index d70b3c4..02202b9 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,8 +6,8 @@ import { useDebuggingApi } from './debuggingapi';
 import gateway, { GatewayEventType } from './gateway';
 import { pluginStore } from './stores';
 
+import "@fontsource/material-icons-outlined"
 import "./styles/global.css";
-import "@material-design-icons/font";
 import { timeline } from './timeline';
 
 timeline.start();
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 72dcb61..7afa317 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -83,6 +83,14 @@
 	/* initial values. these will be modified by javascript */
 	--viewportWidth: 100vw;
 	--viewportHeight: 100vh;
+
+	/* font sizes */
+	--h1: 1.802rem;
+	--h2: 1.602rem;
+	--h3: 1.424rem;
+	--h4: 1.266rem;
+	--h5: 1.125rem;
+	--h6: 0.889rem;
 }
 
 html, body {
@@ -328,7 +336,6 @@ body {
 	text-align: center;
 	border: none;
 	border-radius: var(--radius-md);
-	font: inherit;
 }
 
 .icon-button .material-icons,
@@ -394,12 +401,12 @@ body {
 
 /* text */
 
-.h1 {font-size: 1.802rem;}
-.h2 {font-size: 1.602rem;}
-.h3 {font-size: 1.424rem;}
-.h4 {font-size: 1.266rem;}
-.h5 {font-size: 1.125rem;}
-.text-small {font-size: 0.889rem;}
+.h1 {font-size: var(--h1)}
+.h2 {font-size: var(--h2)}
+.h3 {font-size: var(--h3)}
+.h4 {font-size: var(--h4)}
+.h5 {font-size: var(--h5)}
+.text-small {font-size: var(--h6)}
 
 /* sidebar */
 
@@ -443,6 +450,7 @@ body {
 	border-radius: var(--radius-md);
 	width: 100%;
 	font-weight: 300;
+	font-size: var(--h6);
 }
 
 .sidebar-button .sidebar-button-text {
@@ -453,12 +461,12 @@ body {
 }
 
 .sidebar-button .icon-button {
-	display: none;
+	visibility: hidden;
 }
 
 .sidebar-button.selected .icon-button,
 .sidebar-button:hover .icon-button {
-	display: flex;
+	visibility: visible;
 }
 
 .sidebar-button:hover {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 04776cf..e13f360 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@fontsource/material-icons-outlined@^4.5.4":
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"
+  integrity sha512-2SLQe/pAlOzoE2Kd5cBxqTgI9U63hf3a7RrCF8GFvgPkYhF6WOcIzFzsLc1Fdf+UhcYS+Hgpp6o8peguwZGK9Q==
+
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
@@ -42,11 +47,6 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@material-design-icons/font@^0.14.2":
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/@material-design-icons/font/-/font-0.14.2.tgz#5b02c3bda37022645cc2df0200be02b6bc91ab4a"
-  integrity sha512-svLx/Q6WidjiSE1rT9joMy241x+gLb0SfNrVR0Kd3GyPyU5HXRmXvjWDj2h2RHzAsgxFqPGez4hL+EmbjZiYSg==
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"