Design tweaks wishlist

[diamondburned]

This issue serves as a place to consolidate very small design changes that would massively improve the appearance of Dissent.

[diamondburned]

Fix inconsistent sidebar colors.

Dissent:

Tuba:

[diamondburned]

Switch to margin-separated rounded corner message theming for a more modern look. Current appearance:

[diamondburned]

Prettier loading screen. Ideally, have a logo in the middle with no text.

Tuba:

[diamondburned]

Fix inconsistent title margins. Ideally, update this to Discord mobile's new design.

[diamondburned]

Fix incorrect colors when selecting a muted channel. Current:

[diamondburned]

Server icon should remain a roundrect when selected instead of going back to a circle:

[bragefuglseth]

Prettier loading screen. Ideally, have a logo in the middle with no text.

Tuba:

FWIW Tuba has moved away from this, and now only shows a spinner

[DodoLeDev]

Hi everyone!
I spent some time playing with the user.css feature hidden in Dissent.

Here are my design suggestions, and the corresponding CSS blocks to be added in the file if you want to try it :

Redesigned unread indicators 🔴

For this one, I took a part of my inspiration from Fractal…

Here is how it looks on Dissent:

CSS code

.channel-item-outer {
  padding: 2px;
  border-radius: 5px;
  margin: 3px;
}

.channel-item-unread, .channel-item-mentioned {
  font-weight: 800;
}

.channel-item-unread .channel-item-text > overlay {
  background-color: #454545;
}

.channel-item-mentioned .channel-item-text > overlay {
  background-color: #f04747;
}

.channel-item-text > overlay {
  border-radius: 99px;
  margin-right: 7px;
}

.channel-item-unread .channel-unread-indicator, .channel-item-mentioned .channel-unread-indicator {
  min-width: 0px;
  opacity: 0;
}

---

Fractal-like composer action button ✏️

Still inspired by Fractal, introducing a more seducing send/edit/reply button:

CSS code

.composer-send, .composer-right-actions .composer-action {
  background-color: rgb(53, 132, 228);
  border-radius: 99px;
}

.composer-send:hover, .composer-right-actions .composer-action:hover {
  background-color: #4990e7;
}

.composer-send:focus, .composer-right-actions .composer-action:focus {
  background-color: #2a6ab6;
}

---

Clearer reply quote 💬

I found the old design too difficult to distinguish from the real message

CSS code

.message-reply-box {
  border: none;
  padding: 5px 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.message-reply-box > .mauthor-chip {
  margin-bottom: 5px;
}

.message-reply-box > .message-reply-content > link {
  text-decoration: none;
}

---

Redesigned attachments 📎

Same as reply quotes, I found the attachments not enough highlighted from the rest of the message:

CSS code

.message-attachment {
  padding: 7px 5px;
  margin-right: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.message-attachment-filesize {
  padding: 0 5px;
  margin: 5px 0 5px 10px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  font-size: 12px;
}

.link.message-attachment-filename > link {
  color: #D2D7DB;
  text-decoration-line: none;
}

.message-attachment-icon {
  -gtk-icon-size: 30px;
}

---

Revamped emoji reactions 😂

In order to keep it close from what we have in Discord (and in Fractal too 😛):

CSS code

.message-reactions .message-reaction {
  padding: 3px 10px;
  border-radius: 99px;
}

.message-reaction .horizontal {
  margin: 0;
}

.message-reaction {
  border: 1px solid transparent;
}

.message-reaction-me {
  background-color: #36567c;
  border: 1px solid #4e7bb1;
}

.message-reaction-emoji { font-size: 13px; }

.message-reaction-me {
  background-color: #36567c;
  border: 1px solid #4e7bb1;
  animation: react-trigger 0.15s alternate 2;
}

@keyframes react-trigger {
  from {transform: scale(1);}
  to {transform: scale(1.1);}
}

---

Unify sidebar color 🎨

Fix inconsistent sidebar colors.

Dissent:

Hmmm... I can offer some adjustements for that:

CSS code

.sidebar-guildside.vertical {
  background-color: transparent;
  border-right: solid rgba(255, 255, 255, 0.15) 1px;
}

.direct-searchbar.titlebar {
  background-color: transparent;
}

---

Header margins fix 📏

Fix inconsistent title margins. Ideally, update this to Discord mobile's new design.

I got you covered… for the PM searchbar at least!

CSS code

.search {
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: 2px;
  margin-bottom: 2px;
}

Hope you'll like it!

[diamondburned]

@DodoLeDev These all look like great suggestions! Could you open a PR for each of them so we can discuss the CSS in more details?

Also, the header margins have been fixed in an earlier commit, so that could be skipped. The "Unify sidebar color" is also not an issue AFAIK, since it actually matches Nautilus.