Compare commits
No commits in common. "94e94deb912a88b220e6093adc2adc99257e0d0c" and "59fde80edb178c01b88a8ff6d7dbf818e2daeedd" have entirely different histories.
94e94deb91
...
59fde80edb
11 changed files with 38 additions and 82 deletions
|
|
@ -16,8 +16,5 @@
|
|||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,6 @@ 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" },
|
||||
]
|
||||
}),
|
||||
|
||||
|
|
|
|||
|
|
@ -22,11 +22,10 @@
|
|||
align-items: center;
|
||||
color: var(--foreground-color-2);
|
||||
background-color: var(--background-color-2);
|
||||
padding: 0.5em;
|
||||
padding: 0.35em;
|
||||
margin-top: var(--space-xs);
|
||||
margin-right: var(--space-sm);
|
||||
border-radius: 0.65em;
|
||||
font-weight: 500;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
|
|
|
|||
|
|
@ -31,16 +31,16 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
|
|||
|
||||
.avatar-container {
|
||||
margin-top: 5px;
|
||||
margin-left: var(--space-smplus);
|
||||
margin-right: var(--space-smplus);
|
||||
width: 40px;
|
||||
margin-left: var(--space-sm);
|
||||
margin-right: var(--space-sm);
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.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: 600;
|
||||
font-weight: bold;
|
||||
color: var(--foreground-color-2);
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +118,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
|
|||
<div class="avatar-container">
|
||||
{#if !message._clumped}
|
||||
{#if message.author_avatar}
|
||||
<img class="avatar" src={avatarUrl(message.author_avatar, 64)} alt=" ">
|
||||
<img class="avatar" src={avatarUrl(message.author_avatar, 32)} alt=" ">
|
||||
{:else}
|
||||
<span class="material-icons-outlined circled-icon">alternate_email</span>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -111,12 +111,13 @@
|
|||
|
||||
.message-input {
|
||||
width: 100%;
|
||||
background-color: var(--background-color-3);
|
||||
background-color : var(--background-color-3);
|
||||
border: none;
|
||||
color: currentColor;
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-sm);
|
||||
font-size: inherit;
|
||||
line-height: 24px;
|
||||
resize: none;
|
||||
contain: strict;
|
||||
}
|
||||
|
|
@ -127,11 +128,11 @@
|
|||
|
||||
.message-input::placeholder {
|
||||
color: var(--foreground-color-4);
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
margin-left: var(--space-xsplus);
|
||||
margin-left: var(--space-sm);
|
||||
border-radius: 50%;
|
||||
background-color: var(--purple-1);
|
||||
padding: 12px;
|
||||
|
|
|
|||
|
|
@ -95,8 +95,8 @@
|
|||
border-top: thin solid var(--background-color-3);
|
||||
padding: 0;
|
||||
margin: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
margin-top: var(--space-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
margin-top: var(--space-lg);
|
||||
}
|
||||
|
||||
.time-separator-text {
|
||||
|
|
@ -106,9 +106,8 @@
|
|||
padding-left: var(--space-xs);
|
||||
padding-right: var(--space-xs);
|
||||
background-color: var(--background-color-2);
|
||||
color: var(--foreground-color-3);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--foreground-color-2);
|
||||
font-size: 0.75em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -99,17 +99,14 @@
|
|||
display: flex;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
padding: var(--space-smplus);
|
||||
padding: var(--space-md);
|
||||
}
|
||||
.switch-option-card .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.switch-option-card .info .info-heading {
|
||||
font-weight: 500;
|
||||
}
|
||||
.switch-option-card .option-switch {
|
||||
padding-left: var(--space-sm);
|
||||
padding-left: var(--space-xs);
|
||||
margin-left: auto;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
|
@ -175,7 +172,7 @@
|
|||
{:else if selectedTab == "PRIVACY"}
|
||||
<div class="switch-option-card full-width">
|
||||
<div class="info">
|
||||
<span class="info-heading">Let others know when I'm typing</span>
|
||||
<span>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>
|
||||
</div>
|
||||
<div class="option-switch">
|
||||
|
|
@ -184,7 +181,7 @@
|
|||
</div>
|
||||
<div class="switch-option-card full-width">
|
||||
<div class="info">
|
||||
<span class="info-heading">Make Waffle work</span>
|
||||
<span>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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -195,11 +192,9 @@
|
|||
<button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
|
||||
</div>
|
||||
|
||||
<div class="separator" />
|
||||
|
||||
<div class="switch-option-card full-width">
|
||||
<div class="info">
|
||||
<span class="info-heading">Reduce animations</span>
|
||||
<span>Reduce animations</span>
|
||||
<span class="text-fg-3 text-small">Reduce the amount of animations and visual effects.</span>
|
||||
</div>
|
||||
<div class="option-switch">
|
||||
|
|
|
|||
|
|
@ -20,11 +20,6 @@
|
|||
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);
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: var(--space-xxs);
|
||||
color: var(--foreground-color-2);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="toast" transition:maybeModalScale>
|
||||
|
|
|
|||
|
|
@ -73,15 +73,13 @@ class Store {
|
|||
storeLog(`[Flush] Flushing ${queueCount} callbacks from queue`, storeCallbackQueue);
|
||||
|
||||
const start = performance.now();
|
||||
let count = 0;
|
||||
for (let i = 0; i < storeCallbackQueue.length; i++) {
|
||||
storeCallbackQueue[i][0](storeCallbackQueue[i][1]);
|
||||
count++;
|
||||
}
|
||||
storeCallbackQueue.length = 0;
|
||||
const delta = performance.now() - start;
|
||||
|
||||
storeLog(`[Flush] Flushed ${count} callbacks from queue, took ${delta}ms`);
|
||||
storeLog(`[Flush] Flushed ${queueCount} callbacks from queue, took ${delta}ms`);
|
||||
}
|
||||
|
||||
startBatch() {
|
||||
|
|
@ -102,8 +100,6 @@ class Store {
|
|||
|
||||
this.value = this._applyPipes(this.value);
|
||||
|
||||
if (!this._handlers.size) return;
|
||||
|
||||
storeLog(`[Update] (${this.name}) Will queue ${this._handlers.size} handlers`, "value:", this.value, "handlers:", this._handlers);
|
||||
|
||||
const isRootNode = storeCallbackQueue.length === 0;
|
||||
|
|
@ -196,6 +192,7 @@ class UserInfoStore extends Store {
|
|||
});
|
||||
|
||||
gateway.subscribe(GatewayEventType.UserUpdate, (user) => {
|
||||
console.log(user);
|
||||
if (this.value && this.value.id === user.id) {
|
||||
this.value = user;
|
||||
this.updated();
|
||||
|
|
|
|||
|
|
@ -1,26 +1,6 @@
|
|||
/* fonts */
|
||||
/* 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-family: "Iosevka Waffle Web";
|
||||
font-display: swap;
|
||||
|
|
@ -54,13 +34,13 @@
|
|||
/* top-level */
|
||||
|
||||
:root {
|
||||
--purple-1: hsl(273, 67%, 53%);
|
||||
--purple-1: hsl(280, 78%, 50%);
|
||||
--blue-1: hsl(200, 78%, 50%);
|
||||
--green-1: hsl(140, 78%, 50%);
|
||||
--yellow-1: hsl(50, 78%, 50%);
|
||||
--red-1: hsl(2, 78%, 65%);
|
||||
|
||||
--purple-2: hsl(273, 64%, 48%);
|
||||
--purple-2: hsl(280, 78%, 45%);
|
||||
--blue-2: hsl(200, 78%, 45%);
|
||||
--green-2: hsl(140, 78%, 40%);
|
||||
--yellow-2: hsl(50, 78%, 60%);
|
||||
|
|
@ -72,7 +52,6 @@
|
|||
--space-xs: calc(0.5 * var(--space-unit));
|
||||
--space-xsplus: calc(0.65 * 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-normplus: calc(var(--space-unit) + var(--space-sm));
|
||||
--space-md: calc(1.25 * var(--space-unit));
|
||||
|
|
@ -115,7 +94,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%, 60%);
|
||||
--foreground-special-color-1: hsl(180, 2%, 70%);
|
||||
--colored-element-text-color: var(--foreground-color-1);
|
||||
}
|
||||
|
||||
|
|
@ -146,9 +125,8 @@ body {
|
|||
color: var(--foreground-color-1);
|
||||
background-color: var(--background-color-1);
|
||||
font-size: 100%;
|
||||
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: 26px;
|
||||
letter-spacing: 0.01em;
|
||||
font-family: "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||
line-height: 1.75;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -189,7 +167,7 @@ body {
|
|||
}
|
||||
|
||||
.top-bar-heading.accent {
|
||||
font-weight: 600;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info-bar {
|
||||
|
|
@ -242,7 +220,7 @@ body {
|
|||
}
|
||||
|
||||
.modal-header {
|
||||
font-weight: 650;
|
||||
font-weight: bold;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
|
|
@ -253,7 +231,7 @@ body {
|
|||
|
||||
.modal-footer {
|
||||
margin-top: auto;
|
||||
padding: var(--space-norm);
|
||||
padding: var(--space-md);
|
||||
background-color: var(--background-color-1);
|
||||
border-bottom-right-radius: var(--radius-lg);
|
||||
border-bottom-left-radius: var(--radius-lg);
|
||||
|
|
@ -303,7 +281,7 @@ body {
|
|||
text-transform: uppercase;
|
||||
color: var(--foreground-color-2);
|
||||
user-select: none;
|
||||
font-size: var(--h6);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -327,11 +305,10 @@ body {
|
|||
background: none;
|
||||
text-align: center;
|
||||
border: none;
|
||||
padding: 0.7em;
|
||||
padding: 0.6em;
|
||||
border-radius: 1em;
|
||||
font: inherit;
|
||||
user-select: none;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
|
|
@ -512,7 +489,7 @@ body {
|
|||
font: inherit;
|
||||
border-radius: var(--radius-md);
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-weight: 300;
|
||||
font-size: var(--h6);
|
||||
}
|
||||
|
||||
|
|
@ -539,6 +516,7 @@ body {
|
|||
.sidebar-button.selected {
|
||||
color: var(--foreground-color-1);
|
||||
background-color: var(--background-color-2);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sidebar-button.selected .icon-button {
|
||||
|
|
@ -603,6 +581,7 @@ body {
|
|||
}
|
||||
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
|
||||
}
|
||||
|
||||
|
|
@ -622,7 +601,7 @@ small {
|
|||
button, input, optgroup, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: inherit;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,11 +10,6 @@
|
|||
"@jridgewell/gen-mapping" "^0.3.0"
|
||||
"@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":
|
||||
version "4.5.4"
|
||||
resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"
|
||||
|
|
|
|||
Loading…
Reference in a new issue