From 1e5efdf7e8b06adff4959c941c03ef0a5d843f50 Mon Sep 17 00:00:00 2001 From: hippoz <10706925-hippoz@users.noreply.gitlab.com> Date: Fri, 21 Jul 2023 23:34:40 +0300 Subject: [PATCH] change font and greatly improve look and feel of application --- frontend/package.json | 3 ++ frontend/rollup.config.mjs | 1 + frontend/src/components/ChipBar.svelte | 5 +- frontend/src/components/Message.svelte | 14 +++--- frontend/src/components/MessageInput.svelte | 5 +- frontend/src/components/Messages.svelte | 9 ++-- .../src/components/overlays/Settings.svelte | 15 ++++-- frontend/src/components/overlays/Toast.svelte | 5 ++ frontend/src/styles/global.css | 49 +++++++++++++------ frontend/yarn.lock | 5 ++ 10 files changed, 76 insertions(+), 35 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 3c7f9d1..da02724 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,5 +16,8 @@ "rollup-plugin-css-only": "^4.3.0", "rollup-plugin-svelte": "^7.1.5", "svelte": "^4.0.0" + }, + "dependencies": { + "@fontsource-variable/open-sans": "^5.0.6" } } diff --git a/frontend/rollup.config.mjs b/frontend/rollup.config.mjs index 60e103a..70824f7 100644 --- a/frontend/rollup.config.mjs +++ b/frontend/rollup.config.mjs @@ -45,6 +45,7 @@ export default { copy({ targets: [ { src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" }, + { src: "node_modules/@fontsource-variable/open-sans/files/open-sans-latin-wght-*", dest: "public/build/files" }, ] }), diff --git a/frontend/src/components/ChipBar.svelte b/frontend/src/components/ChipBar.svelte index 3bbff22..fb67cb6 100644 --- a/frontend/src/components/ChipBar.svelte +++ b/frontend/src/components/ChipBar.svelte @@ -22,10 +22,11 @@ align-items: center; color: var(--foreground-color-2); background-color: var(--background-color-2); - padding: 0.35em; + padding: 0.5em; margin-top: var(--space-xs); margin-right: var(--space-sm); - border-radius: 0.5em; + border-radius: 0.65em; + font-weight: 500; } button:hover { diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte index 0031bdf..d5d9372 100644 --- a/frontend/src/components/Message.svelte +++ b/frontend/src/components/Message.svelte @@ -31,16 +31,16 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores"; .avatar-container { margin-top: 5px; - margin-left: var(--space-sm); - margin-right: var(--space-sm); - width: 32px; + margin-left: var(--space-smplus); + margin-right: var(--space-smplus); + width: 40px; flex-shrink: 0; } .avatar { border-radius: 50%; - width: 32px; - height: 32px; + width: 40px; + height: 40px; } .message:hover, .message.pinged { @@ -61,7 +61,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores"; align-items: center; justify-content: center; flex-shrink: 0; - font-weight: bold; + font-weight: 600; color: var(--foreground-color-2); } @@ -118,7 +118,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";