feat(sidepanel): outlined active state for left panel + settings nav

app/src/settings_view/nav.rs

@@ -1,5 +1,6 @@
 use crate::appearance::Appearance;
 use crate::ui_components::icons::Icon;
+use pathfinder_color::ColorU;
 use pathfinder_geometry::vector::vec2f;
 use warpui::{
     elements::{Hoverable, MainAxisAlignment, MainAxisSize, MouseStateHandle},
@@ -107,24 +108,21 @@ impl SettingsUmbrella {
 
         let label = section.to_string() + &match_data.to_string();
 
+        let mut style = UiComponentStyles::default()
+            .set_border_width(1.0)
+            .set_border_color(warpui::elements::Fill::Solid(ColorU::transparent_black()))
+            .set_margin(Coords::default().left(SUBPAGE_LEFT_MARGIN))
+            .set_padding(Coords::uniform(8.))
+            .set_font_size(SUBPAGE_FONT_SIZE);
+        if is_active {
+            style = style.set_border_color(appearance.theme().outline().into());
+        }
+
         let hoverable = appearance
             .ui_builder()
-            .button(
-                if is_active {
-                    ButtonVariant::Accent
-                } else {
-                    ButtonVariant::Text
-                },
-                mouse_state,
-            )
+            .button(ButtonVariant::Text, mouse_state)
             .with_text_label(label)
-            .with_style(
-                UiComponentStyles::default()
-                    .set_border_width(0.)
-                    .set_margin(Coords::default().left(SUBPAGE_LEFT_MARGIN))
-                    .set_padding(Coords::uniform(8.))
-                    .set_font_size(SUBPAGE_FONT_SIZE),
-            )
+            .with_style(style)
             .build();
 
         Some(hoverable)

app/src/settings_view/settings_page.rs

@@ -174,23 +174,22 @@ impl SettingsPage {
         match_data: MatchData,
         clicked: bool,
     ) -> Hoverable {
+        let mut style = UiComponentStyles::default()
+            .set_border_width(1.0)
+            .set_border_color(warpui::elements::Fill::Solid(ColorU::transparent_black()))
+            .set_margin(Coords::default().left(NAV_ITEM_LEFT_MARGIN))
+            .set_padding(Coords::uniform(8.));
+        if clicked {
+            style = style
+                .set_border_width(1.0)
+                .set_border_color(appearance.theme().outline().into());
+        }
+
         appearance
             .ui_builder()
-            .button(
-                if clicked {
-                    ButtonVariant::Accent
-                } else {
-                    ButtonVariant::Text
-                },
-                self.button_state_handle.clone(),
-            )
+            .button(ButtonVariant::Text, self.button_state_handle.clone())
             .with_text_label(self.section.to_string() + &match_data.to_string())
-            .with_style(
-                UiComponentStyles::default()
-                    .set_border_width(0.)
-                    .set_margin(Coords::default().left(NAV_ITEM_LEFT_MARGIN))
-                    .set_padding(Coords::uniform(8.)),
-            )
+            .with_style(style)
             .build()
     }
 }

app/src/workspace/view/left_panel.rs

@@ -1,17 +1,17 @@
 use std::collections::HashSet;
 use std::path::PathBuf;
 
-use warp_core::ui::theme::color::internal_colors;
+use pathfinder_color::ColorU;
 use warp_core::{send_telemetry_from_ctx, ui::Icon};
 use warp_util::path::LineAndColumnArg;
 use warpui::{
     elements::{
         resizable_state_handle, ChildView, ConstrainedBox, Container, CrossAxisAlignment,
-        DragBarSide, Element, Empty, Flex, MainAxisAlignment, MainAxisSize, MouseStateHandle,
+        DragBarSide, Element, Empty, Fill, Flex, MainAxisAlignment, MainAxisSize, MouseStateHandle,
         ParentElement, Resizable, ResizableStateHandle, Shrinkable,
     },
     platform::Cursor,
-    ui_components::components::{Coords, UiComponent, UiComponentStyles},
+    ui_components::components::{BorderStyle, Coords, UiComponent, UiComponentStyles},
     AppContext, Entity, FocusContext, ModelHandle, SingletonEntity, TypedActionView, View,
     ViewContext, ViewHandle, WeakViewHandle,
 };
@@ -886,14 +886,19 @@ impl LeftPanelView {
             height: Some(24.),
             width: Some(24.),
             padding: Some(Coords::uniform(4.)),
+            border_width: Some(1.0),
+            border_color: Some(Fill::from(ColorU::transparent_black())),
+            border_style: Some(BorderStyle::Solid),
             ..Default::default()
         })
         .with_active_styles(UiComponentStyles {
             font_color: Some(icon_color),
             height: Some(24.),
             width: Some(24.),
             padding: Some(Coords::uniform(4.)),
-            background: Some(internal_colors::fg_overlay_3(appearance.theme()).into()),
+            border_width: Some(1.0),
+            border_color: Some(appearance.theme().outline().into()),
+            border_style: Some(BorderStyle::Solid),
             ..Default::default()
         })
         .build()