ui: Minor visual refresh
The focus is on:
1. Increasing information density
2. Decreasing visual noise / increasing consistency
It's by no means done but it's a step in the right direction.
For 1. we:
- Decrease font size
- Remove excessive padding
- Reduce topbar height
- Reduce sidebar width
- Reduce the minimum track height
- Reduce the thread state track
For 2. we:
- Reduce the number of typefaces
- Reduce the number of weights in use
- Reduce the number of non-semantic colors
- Use the same border-radius everywhere
- Replace some custom buttons with with the button widget
Before/after for the various surfaces:
- Welcome:
- https://screenshot.googleplex.com/5Vg3Dcckjq2h8Rf
- https://screenshot.googleplex.com/6Wop2quyztZ7Nno
- Timeline:
- https://screenshot.googleplex.com/5sahBHEhqaB7F8X
- https://screenshot.googleplex.com/382giTGsEnga33T
- Query:
- https://screenshot.googleplex.com/5ozS5m5Jzo3rrtn
- https://screenshot.googleplex.com/9fTHeyVyG4XHmN8
- Metrics:
- https://screenshot.googleplex.com/mGsFtDLJeC6BVGy
- https://screenshot.googleplex.com/VsowCEdrBYUHCJR
- Flags:
- https://screenshot.googleplex.com/BjtWjNpg969Y8YZ
- https://screenshot.googleplex.com/ZAkfSzD3kCNbLDg
- RecordingV2:
- https://screenshot.googleplex.com/3jUgxhmpLGoF3YV
- https://screenshot.googleplex.com/9HDoY7kEnkZ9C5S
- Recording:
- https://screenshot.googleplex.com/3C5RB3U3rdQusNb
- https://screenshot.googleplex.com/9U7bYTxfeWgtP43
- Tabs:
- https://screenshot.googleplex.com/C8BoNPFr9DLiYy8
- https://screenshot.googleplex.com/5y2g9tAi6L59Djb
Change-Id: I8e22bdc694b8e0846e839daf9aaab4e447414885
diff --git a/ui/src/assets/sidebar.scss b/ui/src/assets/sidebar.scss
index b0a7092..6fedf61 100644
--- a/ui/src/assets/sidebar.scss
+++ b/ui/src/assets/sidebar.scss
@@ -12,6 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+@import "widgets/theme";
+
.sidebar {
--sidebar-padding-bottom: 40px;
--sidebar-timing: 0.15s;
@@ -38,11 +40,11 @@
height: var(--topbar-height);
line-height: var(--topbar-height);
vertical-align: middle;
- padding: 0 20px;
+ padding: 0 12px;
color: #fff;
overflow: visible;
.brand {
- height: 40px;
+ height: 36px;
margin-top: 4px;
}
&::before {
@@ -54,7 +56,7 @@
position: absolute;
font-size: 10px;
line-height: 10px;
- font-family: "Raleway", sans-serif;
+ font-family: "Roboto", sans-serif;
left: 155px;
top: 7px;
}
@@ -121,17 +123,15 @@
cursor: pointer;
> h1,
> h2 {
- font-family: "Raleway", sans-serif;
letter-spacing: 0.25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin: 0 24px;
+ margin: 0 12px;
}
> h1 {
color: #fff;
font-size: 15px;
- font-weight: 500;
}
> h2 {
@include transition();
@@ -189,10 +189,8 @@
a {
line-height: 24px;
font-size: 14px;
- font-weight: 400;
- font-family: "Raleway", sans-serif;
letter-spacing: 0.5px;
- padding: 5px 24px;
+ padding: 4px 12px;
text-decoration: none;
display: block;
&.pending {
@@ -225,6 +223,7 @@
}
.material-icons {
margin-right: 10px;
+ font-size: 20px
}
&:hover {
background-color: #373f4b;
@@ -265,13 +264,19 @@
}
> .dbg-info-square {
+ font-family: "Roboto Condensed", sans-serif;
width: 24px;
- height: 22px;
- line-height: 22px;
+ height: 24px;
+ line-height: 24px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+
margin: 1px 0;
background: #12161b;
color: #4e71b3;
- border-radius: 5px;
+ border-radius: $pf-border-radius;
font-size: 12px;
text-align: center;
&.green {
