fix(header_bar): match spacing to designs

src/app/mod.rs

@@ -882,7 +882,30 @@ impl<App: Application> ApplicationExt for App {
                         header = header.end(element.map(Message::App));
                     }
 
-                    header.apply(|w| id_container(w, iced_core::id::Id::new("COSMIC_header")))
+                    header
+                        // Needed for apps without a content container, but with a header bar
+                        .apply(container)
+                        .style(move |theme| container::Style {
+                            background: if content_container {
+                                None
+                            } else {
+                                Some(iced::Background::Color(
+                                    theme.cosmic().background.base.into(),
+                                ))
+                            },
+                            border: iced::Border {
+                                radius: [
+                                    theme.cosmic().radius_s()[0] - 1.0,
+                                    theme.cosmic().radius_s()[1] - 1.0,
+                                    theme.cosmic().radius_0()[2],
+                                    theme.cosmic().radius_0()[3],
+                                ]
+                                .into(),
+                                ..Default::default()
+                            },
+                            ..Default::default()
+                        })
+                        .apply(|w| id_container(w, iced_core::id::Id::new("COSMIC_header")))
                 })
             } else {
                 None
@@ -892,17 +915,19 @@ impl<App: Application> ApplicationExt for App {
             .apply(container)
             .padding(if sharp_corners { 0 } else { 1 })
             .style(move |theme| container::Style {
-                icon_color: Some(iced::Color::from(theme.cosmic().background.on)),
+                background: if content_container {
-                text_color: Some(iced::Color::from(theme.cosmic().background.on)),
+                    Some(iced::Background::Color(
-                background: Some(iced::Background::Color(
+                        theme.cosmic().background.base.into(),
-                    theme.cosmic().background.base.into(),
+                    ))
-                )),
+                } else {
+                    None
+                },
                 border: iced::Border {
                     color: theme.cosmic().bg_divider().into(),
                     width: if sharp_corners { 0.0 } else { 1.0 },
                     radius: theme.cosmic().radius_s().into(),
                 },
-                shadow: iced::Shadow::default(),
+                ..Default::default()
             });
 
         // Show any current dialog on top and centered over the view content

src/widget/header_bar.rs

@@ -1,8 +1,8 @@
 // Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
 
-use crate::cosmic_theme::Density;
+use crate::cosmic_theme::{Density, Spacing};
-use crate::{ext::CollectionWidget, widget, Element};
+use crate::{theme, widget, Element};
 use apply::Apply;
 use derive_setters::Setters;
 use iced::Length;
@@ -287,6 +287,12 @@ impl<'a, Message: Clone + 'static> Widget<Message, crate::Theme, crate::Renderer
 impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
     /// Converts the headerbar builder into an Iced element.
     pub fn view(mut self) -> Element<'a, Message> {
+        let Spacing {
+            space_xxxs,
+            space_xxs,
+            ..
+        } = theme::active().cosmic().spacing;
+
         // Take ownership of the regions to be packed.
         let start = std::mem::take(&mut self.start);
         let center = std::mem::take(&mut self.center);
@@ -307,6 +313,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
             // If elements exist in the start region, append them here.
             .push(
                 widget::row::with_children(start)
+                    .spacing(space_xxxs)
                     .align_y(iced::Alignment::Center)
                     .apply(widget::container)
                     .align_x(iced::Alignment::Start)
@@ -316,6 +323,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
             // This will otherwise use the title as a widget if a title was defined.
             .push(if !center.is_empty() {
                 widget::row::with_children(center)
+                    .spacing(space_xxxs)
                     .align_y(iced::Alignment::Center)
                     .apply(widget::container)
                     .center_x(Length::Fill)
@@ -327,6 +335,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
             })
             .push(
                 widget::row::with_children(end)
+                    .spacing(space_xxs)
                     .align_y(iced::Alignment::Center)
                     .apply(widget::container)
                     .align_x(iced::Alignment::End)
@@ -418,7 +427,7 @@ impl<'a, Message: Clone + 'static> HeaderBar<'a, Message> {
                     .take()
                     .map(|m| icon!("window-close-symbolic", 16, m)),
             )
-            .spacing(8)
+            .spacing(theme::active().cosmic().space_xxs())
             .apply(widget::container)
             .center_y(Length::Fill)
             .into()