Design tweaks

[PullJosh]

Made a bunch of small changes to polish up the design.

The only thing that's iffy is the send button. It looks nicer, but is weird when the message gets long. In an ideal world, the textarea would auto-expand while typing so that it doesn't need to scroll, and if the height got maxed out (somewhere around ~400px tall?) the send button would move over to the left a little to make room for the scroll bar.

[bates64]

the textarea would auto-expand while typing

It used to do this before the grand rewrite war, I believe. Regardless, this looks cool. Reviewing..

[bates64]

Honestly... I don't really like the new send button. It's not as prominent.

It also just doesn't look too good next to the textarea like that.

[PullJosh]

Aaaa! The text is behind the send button!

The only thing that's iffy is the send button. It looks nicer, but is weird when the message gets long. In an ideal world, the textarea would auto-expand while typing so that it doesn't need to scroll, and if the height got maxed out (somewhere around ~400px tall?) the send button would move over to the left a little to make room for the scroll bar.

That's why I need someone who can Javascript to do the thing I said.

[towerofnix]

IMO the "send" button just shouldn't be over the textarea in any case; systems which always show scrollbars would have their scrollbars (partially) covered by the button, for example, which you can sort of see in alex's screenshot.

(disclaimer: I have not tested out this branch yet)

[PullJosh]

Fair enough. If we want to put the button elsewhere that's fine, but something definitely needs to be done. The current button is weird and ugly. :P

[bates64]

I actually like the current button ^oops

[PullJosh]

Reverted send button and added a few other tweaks to the left sidebar.

Let me know if the modified font size in the sidebar is killing anybody. It's really tough to do typography when the font is unique to each system. :P It now looks nice on my system, but could be too small on someone else's.

[towerofnix]

Some dark theme notes:

In the dark theme, there is a white line between sidebar sections with the --bottom-line class:

Sidebar list icons should maybe be a little darker than the text in dark mode? Right now they're actually brighter than the text:

In dark mode, the table border color is the same as the page background:

The <hr> border in the account settings page is very bright in dark mode. This isn't necessarily bad on its own, but the light mode is a lot more subtle, and contrast should generally be persistent, I think.

In light mode, focused inputs have blue border bottoms. They're always gray in dark mode, regardless of focus state, so it's much harder to tell where your text cursor is.

[towerofnix]

@PullJosh The sidebar looks good to me (besides the brightness things I noted above).

[PullJosh]

Oops! I forgot the dark theme was a thing. :3 Will fix everything listed above.

[PullJosh]

How would y'all feel about loading one Google font? Designing with system fonts is killing me. I know that, at least in theory, your basic sans-serifs should all be quite similar, but the font on my system makes a giant leap between normal weight and bold, and it's impossible to find the right balance in terms of appearance.

Obviously this isn't ideal for performance, but perhaps it's a tradeoff we'd be willing to make?

[bates64]

@PullJosh Whatever OS you use, add a nice font that you have installed onto the stack. Then everyone else with your OS won't see that bad font and instead will see a nice one.

If someone else cares enough about font appearance, they'll have that font installed too. 80% of users don't care!

@towerofnix and I both use flavours of Linux with Cantarell (a GNOME system font) on them - you can see it in our screenshots.

[PullJosh]

80% of users don't care!

You're going to have to remind me this a lot, because it really aggravates me.

The core issue is that my system-ui font is horrendously ugly (on Ubuntu). Removing that option from the font stack brings me all the way to Ubuntu which is an improvement, but not great.

The only font choice that isn't driving me insane is Open Sans, which -- unfortunately -- is not a font that many people have installed.

The other part of this that is driving me crazy is the inability to test that a font stack is working as it should. I've tried reading articles before about system fonts and how best to take advantage of them, but I've never been able to figure out how to see which fonts will actually be displayed to users, broken down proportionally.

I'll probably write a userstyle so that I can have Open Sans on my version of the client, but I can't help but feel that ignoring the issue is a bad thing for users.

[PullJosh]

Alright, here's a font stack that suits me:

-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, Arial, sans-serif

It sets Ubuntu on my system rather than system-ui, which -- while it isn't perfect -- is a big enough improvement that I think I can deal.

For reference, here's the stack we're currently using:

system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, Lato, 'Helvetica Neue', sans-serif

Anyone see any problems with that change?

[bates64]

Could you put system-ui and Lato before Arial at the end? Also there's smarty-pants quotes in there ;)

[towerofnix]

Btw, I refuse to load anything from Google, absolutely no matter what. No google fonts, period.

[PullJosh]

@heyitsmeuralex Yes, and good catch.

@towerofnix That's fine, although I'm curious why. ;)

[PullJosh]

New wave of updates has improvements to tables in the dark theme, sidebar channel links (finally got notification indicators working as expected in both themes), big changes to the account settings page, font stack changes, and a few other pixel-precise adjustments for misaligned elements.

Sorry for throwing everything in a single commit. I forgot to commit while working. :3

[bates64]

Oof