frontend/package.json

@@ -7,7 +7,7 @@
     "dev": "rollup -c -w"
   },
   "devDependencies": {
-    "@fontsource/material-icons-outlined": "^4.5.4",
+    "@material-design-icons/font": "^0.14.2",
     "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",

frontend/rollup.config.mjs

@@ -44,7 +44,7 @@ export default {
 		// Copy fonts
 		copy({
 			targets: [
-				{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" },
+				{ src: "node_modules/@material-design-icons/font/material-icons-outlined.woff2", dest: "public/build" },
 			]
 		}),
 

frontend/src/components/ChannelView.svelte

@@ -4,7 +4,6 @@
     import Messages from "./Messages.svelte";
     import { quadInOut } from "svelte/easing";
     import { maybeFly } from "../animations";
-    import { statusBarStore } from "../stores";
 
     export let channel;
 </script>
@@ -21,11 +20,6 @@
 </style>
 
 <div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
-    {#if $statusBarStore}
-        <div class="info-bar">
-            <span class="info-text">{ $statusBarStore }</span>
-        </div>
-    {/if}
     <ChannelTopBar channel={ channel } />
     <Messages channelId="{ channel.id }" />
     <MessageInput channel={ channel } />

frontend/src/components/MessageInput.svelte

@@ -184,6 +184,7 @@
         {/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>

frontend/src/main.js

@@ -6,28 +6,15 @@ 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();
 
-let loaded = false;
-let loadedListener = null;
-document.addEventListener("DOMContentLoaded", () => {
-    loaded = true;
-    if (loadedListener) {
-        loadedListener();
-        loadedListener = null;
-    }
-});
-
 function handleGatewaySettlement() {
     timeline.addCheckpoint("Got gateway settlement");
 
-    const loadApplication = () => {
-        timeline.addCheckpoint("Application load started");
-
     const loadingElement = document.getElementById("pre--loading-screen");
     if (loadingElement) {
         loadingElement.parentElement.removeChild(loadingElement);
@@ -60,15 +47,6 @@ function handleGatewaySettlement() {
 
     timeline.addCheckpoint("All initialization finished");
     timeline.dump();
-    };
-
-    if (!loaded) {
-        timeline.addCheckpoint("Waiting for DOM content before loading application");
-
-        loadedListener = loadApplication;
-    } else {
-        loadApplication();
-    }
 }
 
 function main() {

frontend/src/stores.js

@@ -675,7 +675,6 @@ export const presenceStore = new PresenceStore();
 export const unreadStore = new UnreadStore();
 export const pluginStore = new PluginStore();
 export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
-export const statusBarStore = new Store(null, "statusBarStore");
 
 export const setMessageInputEvent = new Store(null, "event:setMessageInput");
 export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {

frontend/src/styles/global.css

@@ -40,7 +40,7 @@
 	--foreground-color-2: hsl(63, 10%, 82%);
 	--foreground-color-3: hsl(63, 2%, 60%);
 	--foreground-color-4: hsl(63, 2%, 49%);
-	--foreground-special-color-1: hsl(180, 2%, 70%);
+	--foreground-special-color-1: hsl(180, 18%, 70%);
 	--colored-element-text-color: var(--foreground-color-1);
 
 	--purple-1: hsl(280, 78%, 50%);
@@ -83,14 +83,6 @@
 	/* 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 {
@@ -139,7 +131,10 @@ body {
 	align-items: center;
 	justify-content: left;
 	width: 100%;
-	padding: var(--space-sm);
+	padding-left: var(--space-sm);
+	padding-right: var(--space-sm);
+	padding-top: var(--space-sm);
+	padding-bottom: var(--space-sm);
 	flex-grow: 0;
 	flex-shrink: 0;
 }
@@ -152,20 +147,6 @@ body {
 	font-weight: bold;
 }
 
-.info-bar {
-	display: flex;
-	align-items: center;
-	background-color: var(--background-color-0);
-	padding: var(--space-xxs);
-	margin: var(--space-xs);
-	border-radius: var(--radius-sm);
-}
-
-.info-bar .info-text {
-	margin-left: var(--space-sm);
-	color: var(--foreground-color-2);
-}
-
 /* modal */
 
 .modal-backdrop {
@@ -336,6 +317,7 @@ body {
 	text-align: center;
 	border: none;
 	border-radius: var(--radius-md);
+	font: inherit;
 }
 
 .icon-button .material-icons,
@@ -401,12 +383,12 @@ body {
 
 /* text */
 
-.h1 {font-size: var(--h1)}
+.h1 {font-size: 1.802rem;}
-.h2 {font-size: var(--h2)}
+.h2 {font-size: 1.602rem;}
-.h3 {font-size: var(--h3)}
+.h3 {font-size: 1.424rem;}
-.h4 {font-size: var(--h4)}
+.h4 {font-size: 1.266rem;}
-.h5 {font-size: var(--h5)}
+.h5 {font-size: 1.125rem;}
-.text-small {font-size: var(--h6)}
+.text-small {font-size: 0.889rem;}
 
 /* sidebar */
 
@@ -450,7 +432,6 @@ body {
 	border-radius: var(--radius-md);
 	width: 100%;
 	font-weight: 300;
-	font-size: var(--h6);
 }
 
 .sidebar-button .sidebar-button-text {
@@ -461,12 +442,12 @@ body {
 }
 
 .sidebar-button .icon-button {
-	visibility: hidden;
+	display: none;
 }
 
 .sidebar-button.selected .icon-button,
 .sidebar-button:hover .icon-button {
-	visibility: visible;
+	display: flex;
 }
 
 .sidebar-button:hover {

frontend/yarn.lock

@@ -2,11 +2,6 @@
 # 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"
@@ -47,6 +42,11 @@
     "@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"