search

iTwin / appui

Monorepo for iTwin.js AppUi
MIT License
8 stars 2 forks source link

Use iTwinUI labels for `StatusBar` and `ToolSettings` #821

Closed ignas-k closed 3 months ago

ignas-k commented 3 months ago

Changes

In this PR I used iTwinUI for StatusBar and ToolSettings. This mainly means iTwinUI labels and scss variables. Additionally, I added a DockedBar internal component which wraps both bars now so their size, background color, borders etc. are the same. Furthermore, I decreased div nesting and removed unused/duplicate css settings and adjusted some gaps/spacing in StatusBar and ToolSettings components. Noticeable visual changes are iTwinUI labels (so labels are now semi-bold) and spacing adjustments:

1. Docked tool settings:

Before image After image

2. Floating tool settings

Before image After image

3. Narrow floating tool settings

Before image After image

4. Status bar

Before image After image

Testing

Tested in standalone test-app.