New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Aesthetic design upgrade #971

Closed
wants to merge 14 commits into
base: master
from

Conversation

Projects
None yet
7 participants
@irrational-pai

irrational-pai commented Mar 19, 2018

Summary

These design changes were made as a part of visual improvements to Relay. Many of these changes address the projects as listed in the Design Challenge.

I've written a blog post detailing the _why_s and _how_s of these changes:
https://medium.com/@irrational_pai/mattermost-relay-e19dfb68c708

Ticket Link

mattermost/mattermost-server#8350

Checklist

[Place an '[x]' (no spaces) in all applicable fields. Please remove unrelated fields.]

  • Ran make check-style to check for style errors (required for all pull requests)
  • Ran make test to ensure unit and component tests passed
  • Added or updated unit tests (required for all new features)
  • Has server changes (please link)
  • Has redux changes (please link)
  • Has UI changes
  • Includes text changes and localization file (.../i18n/en.json) updates
  • Touches critical sections of the codebase (auth, posting, etc.)

Varun Pai added some commits Mar 1, 2018

Varun Pai
Cleanup Webapp UI
    - Cleaned up channel header
        - cleaned up the css
        - removed extraneous padding and margins
        - changed height of team header to match channel header
        - Removed borders from icons
        - made the search bar a bit more prominent

    - Posts and sidebar changes
        - Posts are cleaner, spacing is tightened up, hover color is more subtle
        - Changed the font sizes and weights to improve readability and have hierarchy
        - Sidebar active channel text is bolder
        - Channel icons are lighter and take lesser priority
        - Changed channel and lock icons, and their sizes
Varun Pai
Added clarity icons, fix CSS around the icon changes
    - Changed icons
            - search
            - pin
            - mentions
            - flag
            - members
            - attachment
            - emoji
    - Fixed spacing that was affected by these icons
    - Fixed search bar and icons breaking when right-sidebar is open
    - Changed globe icon
    - Aligned 'More...' with channel name
Varun Pai
Cleaned up the reply overlay on posts, and flag icon
    - Cleaned up the reply box
    - Added new reply icon
    - Added hover state to icons
    - Removed brackets from more
    - Fixed flag icon positioning near posts, breaking because of the new flag icon
    - Fixed alignment of reply icon breaking when there's a reply count
Varun Pai
Added Fira Sans, fix CSS around the font changes
    - Date is now left aligned, not bold and regular weight
    - Date size is smaller
    - Removed extra hover color that would appear on posts near dates
    - Fixed spacing of channel's intro content
    - Fixed spacing of reply box to make it less big

    - Added new flag filled icon
    - Added new font, fira sans

    - Fixed more icon breaking when Flagged posts ride sidebar is open

    - Added lock icon
    - Date indicator is now left aligned and the hr is below it
    - Fixed new message indicator
    - Fixed alignment of group messages

    - Fixed alignment issues in post header
    - Fixed css for date and new message
    - Not changing the user avatar icons

    - Reduced background color opacity for messages from current user
    - Reduced background color opacity for posts on hover
Varun Pai
Fix CSS for markdown
    - Centered user avatar icons
    - Fixed member popover channel

    - Fixed markdown css
      - Changed font-size for headings
      - Changed padding and spacing for ul, ol, blockquotes
      - Increased font-weight on bold and strong tags
    - Refactored some code

    - Fixed spacing around blockquote
    - Tried making blockquotes like in slack, which is a horizontal bar. Had to revert back because this style is used for replies in Relay
Varun Pai
Fixed alignment of comment and replies
- Fixed plus icon in channel heading on the left sidebar
Varun Pai
Fixes around posts area caused by previous changes
    - Fixed alignment in the channel header
    - Fixed 'More' dropdown breaking in firefox

    - Fixed new message splitter blocking a part of the previous message

    - Fixed lock icon breaking in channel lookup
    - Cleaned up lookup modal
    - Fixed new message separator spacing only when it's not next to a date separator

    - Fixed team sidebar
     - Team names are aligned to the center
    - User names are now properly aligned with the avatars
    - Changed user default images to have montserrat as text and it's centered
    - Changed status icons in posts and channel sidebar to be smaller
    - Fixed line-height in posts to be more uniform
Varun Pai
@irrational-pai

This comment has been minimized.

irrational-pai commented Mar 19, 2018

Note that make check-style fails on the jsx icon files. I've left them as is for now, since it involves a larger discussion around overhauling icons.

@jasonblais

This comment has been minimized.

Member

jasonblais commented Mar 19, 2018

@asaadmahmood Wondering if you'd have any initial thoughts or feedback?

@irrational-pai

This comment has been minimized.

irrational-pai commented Mar 22, 2018

I wanted to elaborate a bit on the design decisions that were taken for this change. I would split the design changes into the following chunks:

  • Font change
  • Icon change
  • Overall cleanup

Font change

The font change focuses on getting the typography and reading experience right. We've worked on tightening up the line-heights, spacing between posts, bumped up the default font-size, and picked a font that has various weights to help distinguish it better when used in markdown.


Icon change

The icon change follow suit. The current set of Mattermost icons aren't of consistent weights and our aim was to get the icons that are well-designed, open source, and have a more consistent style. We've also fixed the CSS to be modular so future icon changes can be as simple as a swap.


Overall cleanup

This, along with the font and icon change, is what elevates the design changes we've made. We've addressed (some of) the problems mentioned in the design challenge. We've made better use of the white space to improve readability (tested this internally at nilenso), we've cleaned up the sidebar, the team sidebar, and a bunch of other changes to make sure the entire experience of using Mattermost/Relay is as enjoyable as possible.

@irrational-pai

This comment has been minimized.

irrational-pai commented Mar 23, 2018

Test instance: https://pr-aesthetic-design-upgrade.relay-chat.com/

Test Admin Account: Username: user-0 | Password: user-0-password

@koxen

This comment has been minimized.

Contributor

koxen commented Mar 23, 2018

@irrational-pai just a quick one comment, haven't done a full review yet.
there's some css issue that cuts the bottom part of page at the textbox level and creates a second 'scroolbar' when it shouldn't have
xshell_2018-03-23_20-07-02

  1. when post is pinned, the flag icon overlaps the post div
@hwcltjn

This comment has been minimized.

hwcltjn commented Mar 26, 2018

@irrational-pai nice contribution and design!
I really like the square avatars and layout adjustments. Is there anyway for the font to be sharper/crisper?

I tried it out by re-building the web-app using relay-ops - I had to make a few modifications to the rebrand-webapp script to get it working correctly and applied some patches manually.

I realise it was intended for 4.7.3 but I found two bugs when used on 4.8:

  • In the Mattermost Mac client the icons are over-sized. This does not happen in Chrome or FF for example.
  • Everything except "Reporting" in the System Console disappears? This is also the case on your test instance.

mm_relay

@irrational-pai

This comment has been minimized.

irrational-pai commented Mar 27, 2018

@koxen Thanks for pointing it out :) Can you tell me how to reproduce the issue?

@irrational-pai

This comment has been minimized.

irrational-pai commented Mar 27, 2018

@hwcltjn Glad you liked the changes. The oversized icons in the Mattermost client is something other members of our team have also pointed out. We have some pending bugs before we get to this one but I'll keep you posted on the progress :)


Re: System console issue

I've made a note of this. The issue you're facing is on MM 4.8 or 4.7.3 or both?


Re: Font being crisper

Is there an instance where you've noticed the font rendering not being crisp or sharp?

@hwcltjn

This comment has been minimized.

hwcltjn commented Mar 27, 2018

@irrational-pai thanks!

The system console issue is happening in 4.8 - but it's also happening in your demo link over at https://pr-aesthetic-design-upgrade.relay-chat.com/admin_console/system_analytics which is running 4.7.1 .

Regarding the fonts - I think its a client issue not your theme.
The fonts are generally better in Chrome as opposed to client.

@esethna esethna added this to the v4.11.0 milestone Apr 25, 2018

@esethna

This comment has been minimized.

Member

esethna commented May 25, 2018

Appreciate these changes! We've pulled out some pieces in another PR here: #1220

Closing this one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment