aimhubio / aim

Aim 💫 — An easy-to-use & supercharged open-source experiment tracker.
https://aimstack.io
Apache License 2.0
5.16k stars 316 forks source link

Update UI to make it more visually consistent #3138

Open u3Izx9ql7vW4 opened 5 months ago

u3Izx9ql7vW4 commented 5 months ago

🚀 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 à 11 05 03

Metrics Explorer Page:

Capture d’écran 2024-04-18 à 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 à 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;
}