hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

change font and greatly improve look and feel of application

Browse source
This commit is contained in:
hippoz 2023-07-21 23:34:40 +03:00
parent 59fde80edb
commit 1e5efdf7e8
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
10 changed files with 76 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/package.json
View file

@ -16,5 +16,8 @@
"rollup-plugin-css-only": "^4.3.0", "rollup-plugin-css-only": "^4.3.0",
"rollup-plugin-svelte": "^7.1.5", "rollup-plugin-svelte": "^7.1.5",
"svelte": "^4.0.0" "svelte": "^4.0.0"
},
"dependencies": {
"@fontsource-variable/open-sans": "^5.0.6"
} }
} }

1
frontend/rollup.config.mjs
View file

@ -45,6 +45,7 @@ export default {
copy({ copy({
targets: [ targets: [
{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" }, { 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" },
] ]
}), }),

5
frontend/src/components/ChipBar.svelte
View file

@ -22,10 +22,11 @@
align-items: center; align-items: center;
color: var(--foreground-color-2); color: var(--foreground-color-2);
background-color: var(--background-color-2); background-color: var(--background-color-2);
padding: 0.35em; padding: 0.5em;
margin-top: var(--space-xs); margin-top: var(--space-xs);
margin-right: var(--space-sm); margin-right: var(--space-sm);
border-radius: 0.5em; border-radius: 0.65em;
font-weight: 500;
} }
button:hover { button:hover {

14
frontend/src/components/Message.svelte
View file

@ -31,16 +31,16 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
.avatar-container { .avatar-container {
margin-top: 5px; margin-top: 5px;
margin-left: var(--space-sm); margin-left: var(--space-smplus);
margin-right: var(--space-sm); margin-right: var(--space-smplus);
width: 32px; width: 40px;
flex-shrink: 0; flex-shrink: 0;
} }
.avatar { .avatar {
border-radius: 50%; border-radius: 50%;
width: 32px; width: 40px;
height: 32px; height: 40px;
} }
.message:hover, .message.pinged { .message:hover, .message.pinged {
@ -61,7 +61,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
font-weight: bold; font-weight: 600;
color: var(--foreground-color-2); color: var(--foreground-color-2);
} }
@ -118,7 +118,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
<div class="avatar-container"> <div class="avatar-container">
{#if !message._clumped} {#if !message._clumped}
{#if message.author_avatar} {#if message.author_avatar}
<img class="avatar" src={avatarUrl(message.author_avatar, 32)} alt=" "> <img class="avatar" src={avatarUrl(message.author_avatar, 64)} alt=" ">
{:else} {:else}
<span class="material-icons-outlined circled-icon">alternate_email</span> <span class="material-icons-outlined circled-icon">alternate_email</span>
{/if} {/if}

5
frontend/src/components/MessageInput.svelte
View file

@ -117,7 +117,6 @@
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-sm); padding: var(--space-sm);
font-size: inherit; font-size: inherit;
line-height: 24px;
resize: none; resize: none;
contain: strict; contain: strict;
} }
@ -128,11 +127,11 @@
.message-input::placeholder { .message-input::placeholder {
color: var(--foreground-color-4); color: var(--foreground-color-4);
font-weight: 300; font-weight: 400;
} }
.send-button { .send-button {
margin-left: var(--space-sm); margin-left: var(--space-xsplus);
border-radius: 50%; border-radius: 50%;
background-color: var(--purple-1); background-color: var(--purple-1);
padding: 12px; padding: 12px;

9
frontend/src/components/Messages.svelte
View file

@ -95,8 +95,8 @@
border-top: thin solid var(--background-color-3); border-top: thin solid var(--background-color-3);
padding: 0; padding: 0;
margin: var(--space-md); margin: var(--space-md);
margin-bottom: var(--space-lg); margin-bottom: var(--space-md);
margin-top: var(--space-lg); margin-top: var(--space-md);
} }
.time-separator-text { .time-separator-text {
@ -106,8 +106,9 @@
padding-left: var(--space-xs); padding-left: var(--space-xs);
padding-right: var(--space-xs); padding-right: var(--space-xs);
background-color: var(--background-color-2); background-color: var(--background-color-2);
color: var(--foreground-color-2); color: var(--foreground-color-3);
font-size: 0.75em; font-size: 0.75rem;
font-weight: 500;
} }
</style> </style>

15
frontend/src/components/overlays/Settings.svelte
View file

@ -99,14 +99,17 @@
display: flex; display: flex;
justify-content: left; justify-content: left;
flex-direction: row; flex-direction: row;
padding: var(--space-md); padding: var(--space-smplus);
} }
.switch-option-card .info { .switch-option-card .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.switch-option-card .info .info-heading {
font-weight: 500;
}
.switch-option-card .option-switch { .switch-option-card .option-switch {
padding-left: var(--space-xs); padding-left: var(--space-sm);
margin-left: auto; margin-left: auto;
justify-self: flex-end; justify-self: flex-end;
} }
@ -172,7 +175,7 @@
{:else if selectedTab == "PRIVACY"} {:else if selectedTab == "PRIVACY"}
<div class="switch-option-card full-width"> <div class="switch-option-card full-width">
<div class="info"> <div class="info">
<span>Let others know when I'm typing</span> <span class="info-heading">Let others know when I'm typing</span>
<span class="text-fg-3 text-small">If this is enabled, other users will see an indicator while you're typing a message.</span> <span class="text-fg-3 text-small">If this is enabled, other users will see an indicator while you're typing a message.</span>
</div> </div>
<div class="option-switch"> <div class="option-switch">
@ -181,7 +184,7 @@
</div> </div>
<div class="switch-option-card full-width"> <div class="switch-option-card full-width">
<div class="info"> <div class="info">
<span>Make Waffle work</span> <span class="info-heading">Make Waffle work</span>
<span class="text-fg-3 text-small">Waffle needs to store data such as your messages, created channels, your username, your profile picture and more in order to work. If you'd like to stop this, you can delete your account.</span> <span class="text-fg-3 text-small">Waffle needs to store data such as your messages, created channels, your username, your profile picture and more in order to work. If you'd like to stop this, you can delete your account.</span>
</div> </div>
</div> </div>
@ -192,9 +195,11 @@
<button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button> <button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
</div> </div>
<div class="separator" />
<div class="switch-option-card full-width"> <div class="switch-option-card full-width">
<div class="info"> <div class="info">
<span>Reduce animations</span> <span class="info-heading">Reduce animations</span>
<span class="text-fg-3 text-small">Reduce the amount of animations and visual effects.</span> <span class="text-fg-3 text-small">Reduce the amount of animations and visual effects.</span>
</div> </div>
<div class="option-switch"> <div class="option-switch">

5
frontend/src/components/overlays/Toast.svelte
View file

@ -20,6 +20,11 @@
border-radius: var(--radius-md); 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); box-shadow: 0px 4px 16px rgba(17,17,26,0.2), 0px 8px 32px rgba(17,17,26,0.2);
} }
button {
margin-left: var(--space-xxs);
color: var(--foreground-color-2);
}
</style> </style>
<div class="toast" transition:maybeModalScale> <div class="toast" transition:maybeModalScale>

49
frontend/src/styles/global.css
View file

@ -1,6 +1,26 @@
/* fonts */ /* fonts */
/* FIXME: fonts greatly increase payload size */ /* FIXME: fonts greatly increase payload size */
/* open-sans-latin-ext-wght-normal */
@font-face {
font-family: 'Open Sans Variable';
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url(./files/open-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* open-sans-latin-wght-normal */
@font-face {
font-family: 'Open Sans Variable';
font-style: normal;
font-display: swap;
font-weight: 300 800;
src: url(./files/open-sans-latin-wght-normal.woff2) format('woff2-variations');
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face { @font-face {
font-family: "Iosevka Waffle Web"; font-family: "Iosevka Waffle Web";
font-display: swap; font-display: swap;
@ -34,13 +54,13 @@
/* top-level */ /* top-level */
:root { :root {
--purple-1: hsl(280, 78%, 50%); --purple-1: hsl(273, 67%, 53%);
--blue-1: hsl(200, 78%, 50%); --blue-1: hsl(200, 78%, 50%);
--green-1: hsl(140, 78%, 50%); --green-1: hsl(140, 78%, 50%);
--yellow-1: hsl(50, 78%, 50%); --yellow-1: hsl(50, 78%, 50%);
--red-1: hsl(2, 78%, 65%); --red-1: hsl(2, 78%, 65%);
--purple-2: hsl(280, 78%, 45%); --purple-2: hsl(273, 64%, 48%);
--blue-2: hsl(200, 78%, 45%); --blue-2: hsl(200, 78%, 45%);
--green-2: hsl(140, 78%, 40%); --green-2: hsl(140, 78%, 40%);
--yellow-2: hsl(50, 78%, 60%); --yellow-2: hsl(50, 78%, 60%);
@ -52,6 +72,7 @@
--space-xs: calc(0.5 * var(--space-unit)); --space-xs: calc(0.5 * var(--space-unit));
--space-xsplus: calc(0.65 * var(--space-unit)); --space-xsplus: calc(0.65 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit)); --space-sm: calc(0.75 * var(--space-unit));
--space-smplus: calc(0.80 * var(--space-unit));
--space-norm: var(--space-unit); --space-norm: var(--space-unit);
--space-normplus: calc(var(--space-unit) + var(--space-sm)); --space-normplus: calc(var(--space-unit) + var(--space-sm));
--space-md: calc(1.25 * var(--space-unit)); --space-md: calc(1.25 * var(--space-unit));
@ -94,7 +115,7 @@
--foreground-color-2: hsl(63, 10%, 82%); --foreground-color-2: hsl(63, 10%, 82%);
--foreground-color-3: hsl(63, 2%, 60%); --foreground-color-3: hsl(63, 2%, 60%);
--foreground-color-4: hsl(63, 2%, 49%); --foreground-color-4: hsl(63, 2%, 49%);
--foreground-special-color-1: hsl(180, 2%, 70%); --foreground-special-color-1: hsl(180, 2%, 60%);
--colored-element-text-color: var(--foreground-color-1); --colored-element-text-color: var(--foreground-color-1);
} }
@ -125,8 +146,9 @@ body {
color: var(--foreground-color-1); color: var(--foreground-color-1);
background-color: var(--background-color-1); background-color: var(--background-color-1);
font-size: 100%; font-size: 100%;
font-family: "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: "Open Sans Variable", "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.75; line-height: 26px;
letter-spacing: 0.01em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -167,7 +189,7 @@ body {
} }
.top-bar-heading.accent { .top-bar-heading.accent {
font-weight: bold; font-weight: 600;
} }
.info-bar { .info-bar {
@ -220,7 +242,7 @@ body {
} }
.modal-header { .modal-header {
font-weight: bold; font-weight: 650;
padding: var(--space-md); padding: var(--space-md);
} }
@ -231,7 +253,7 @@ body {
.modal-footer { .modal-footer {
margin-top: auto; margin-top: auto;
padding: var(--space-md); padding: var(--space-norm);
background-color: var(--background-color-1); background-color: var(--background-color-1);
border-bottom-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg);
@ -281,7 +303,7 @@ body {
text-transform: uppercase; text-transform: uppercase;
color: var(--foreground-color-2); color: var(--foreground-color-2);
user-select: none; user-select: none;
font-weight: 300; font-size: var(--h6);
} }
.input { .input {
@ -305,10 +327,11 @@ body {
background: none; background: none;
text-align: center; text-align: center;
border: none; border: none;
padding: 0.6em; padding: 0.7em;
border-radius: 1em; border-radius: 1em;
font: inherit; font: inherit;
user-select: none; user-select: none;
font-weight: 550;
} }
.button:hover { .button:hover {
@ -489,7 +512,7 @@ body {
font: inherit; font: inherit;
border-radius: var(--radius-md); border-radius: var(--radius-md);
width: 100%; width: 100%;
font-weight: 300; font-weight: 500;
font-size: var(--h6); font-size: var(--h6);
} }
@ -516,7 +539,6 @@ body {
.sidebar-button.selected { .sidebar-button.selected {
color: var(--foreground-color-1); color: var(--foreground-color-1);
background-color: var(--background-color-2); background-color: var(--background-color-2);
font-weight: 400;
} }
.sidebar-button.selected .icon-button { .sidebar-button.selected .icon-button {
@ -581,7 +603,6 @@ body {
} }
html { html {
line-height: 1.15;
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
} }
@ -601,7 +622,7 @@ small {
button, input, optgroup, select, textarea { button, input, optgroup, select, textarea {
font-family: inherit; font-family: inherit;
font-size: 100%; font-size: 100%;
line-height: 1.15; line-height: inherit;
margin: 0; margin: 0;
} }

5
frontend/yarn.lock
View file

@ -10,6 +10,11 @@
"@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/gen-mapping" "^0.3.0"
"@jridgewell/trace-mapping" "^0.3.9" "@jridgewell/trace-mapping" "^0.3.9"
"@fontsource-variable/open-sans@^5.0.6":
version "5.0.6"
resolved "https://registry.yarnpkg.com/@fontsource-variable/open-sans/-/open-sans-5.0.6.tgz#d92c5de9843b999d914e444afda54c39a752d949"
integrity sha512-ZEbqIsXo84fQeQwU2CPyI3W+8QMdbTVBS+CRbWBDA8nPbV9pyRCBy3UceyPrA7l1MJx4qaz5wv5hHQXDadgCzg==
"@fontsource/material-icons-outlined@^4.5.4": "@fontsource/material-icons-outlined@^4.5.4":
version "4.5.4" version "4.5.4"
resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12" resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"