Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update UI to make it more visually consistent #3138

Open
u3Izx9ql7vW4 opened this issue Apr 18, 2024 · 0 comments
Open

Update UI to make it more visually consistent #3138

u3Izx9ql7vW4 opened this issue Apr 18, 2024 · 0 comments
Labels
type / enhancement Issue type: new feature or request

Comments

@u3Izx9ql7vW4
Copy link

u3Izx9ql7vW4 commented Apr 18, 2024

馃殌 Feature

Make the UI visually consistent + make sidebar less distracting. The narrowed font also is also hard to read. I've included all the CSS changes below. It would also be really great if the icons could be "unit-width" (see image below)

Motivation

The sidebar is dark and draws attention away from the rest of the page, and it takes up too much space. The differing fonts width also make the UI unpleasant to look at.

Pitch

I removed all the font-variation-settings and made Inconsolata (doesn't have to be this, but it's nicer if it's all one font without being squished or stretched) the default font across the entire webpage. I also made the sidebar white and removed the text -- to make the text pop-up like the discord icon looks like an HTML fix so I didn't touch that. This is the UI that I ended up with:

Runs Explorer Page:
Capture d鈥檈虂cran 2024-04-18 a虁 11 05 03

Metrics Explorer Page:
Capture d鈥檈虂cran 2024-04-18 a虁 11 13 14

Ideally the sidebar could be made like those of IntelliJ's editor, which I'm a fan of, which would entail swapping out the current set of icons for something with "unit-width".

Capture d鈥檈虂cran 2024-04-18 a虁 11 26 26

Additional context

These are the CSS changes I applied. They can be viewed with the stylebot extension and it's what I'm using to override the current CSS.

It's a patch job for sure and could use some refinement. To make the font changes consistent it might be required to change the top-level font-size, which I didn't bother with.

* {
  font-variation-settings: unset !important;
  font-family: 'Inconsolata';
}
.Sidebar__Paper {
  background-color: #fff;
  border-right: 1px solid #dee6f3 !important;
  width: 50px;
}
.Sidebar {
  width: 50px;
}

.mainContainer {
  width: calc(100% - 50px)
}

.DictVisualizer__row__content__sub {
    font-style: normal;
    font-size: 1em;
    opacity: .5;
}
.Table__cell__value {
  font-size: .86em;
}

.DataList .BaseTable__row-cell {
  font-size: .86rem
}
.Text__size_12 {
  font-size: .86rem;
}
.Text__size_11 {
  font-size: .84rem;
}

.Sidebar__List__item--icon {
    color: #2967b1;
    font-size: 17px !important;
}
.Sidebar__List__item--text {
    margin-top: 6px;
    font-size: .72rem;
    font-style: normal;
    font-weight: 450;
    display: none;
    color: #2967b1;
}
.Sidebar__List__item {
  height: 50px;
}
.RunOverviewSidebar__section__info__listItem span {
  font-size: .82rem !important;
}
.Sidebar__List__item img {
  width: 1.6rem;
}
.Sidebar__bottom:before {
  border-color: #eee;
}
@u3Izx9ql7vW4 u3Izx9ql7vW4 added the type / enhancement Issue type: new feature or request label Apr 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type / enhancement Issue type: new feature or request
Projects
None yet
Development

No branches or pull requests

1 participant