Tweak icon preview buttons

* Preview buttons should be Image buttons with a modified style

cosmic-settings/src/pages/desktop/appearance.rs

@@ -451,7 +451,7 @@ impl Page {
         let theme = cosmic::theme::active();
         let theme = theme.cosmic();
         cosmic::iced::widget::column![
-            // Export theme choice to GNOME
+            // Export theme choice
             settings::view_section("").add(
                 settings::item::builder(fl!("enable-export"))
                     .description(fl!("enable-export", "desc"))
@@ -460,6 +460,7 @@ impl Page {
             // Icon theme previews
             // cosmic::iced::widget::column![text(&*ICON_THEME), text(&*ICON_THEME_DESC).size(10)]
             //     .spacing(2),
+            cosmic::iced::widget::column![
                 text(&*ICON_THEME),
                 scrollable(
                     flex_row(
@@ -474,9 +475,11 @@ impl Page {
                             .collect(),
                     )
                     .row_spacing(theme.space_xs())
-                .column_spacing(theme.space_xs())
+                    .column_spacing(theme.space_xxxs())
                 )
             ]
+            .spacing(theme.space_xxs())
+        ]
         // .padding(theme.space_s())
         .spacing(theme.space_m())
         // .align_items(cosmic::iced_core::Alignment::Center)
@@ -878,10 +881,7 @@ impl Page {
             }
             Message::ExperimentalContextDrawer => {
                 self.context_view = Some(ContextView::Experimental);
-
+                cosmic::command::message(crate::app::Message::OpenContextDrawer("".into()))
-                cosmic::command::message(crate::app::Message::OpenContextDrawer(
-                    fl!("experimental").into(),
-                ))
             }
             Message::Daytime(day_time) => {
                 self.day_time = day_time;
@@ -1479,7 +1479,7 @@ pub fn window_management() -> Section<crate::pages::Message> {
 
 pub fn experimental() -> Section<crate::pages::Message> {
     Section::default()
-        .descriptions(vec![fl!("experimental").into()])
+        .descriptions(vec![fl!("experimental-settings").into()])
         .view::<Page>(|_binder, _page, section| {
             let descriptions = &*section.descriptions;
             settings::view_section("")
@@ -1673,10 +1673,14 @@ fn icon_theme_button(
 ) -> Element<'static, Message> {
     let theme = cosmic::theme::active();
     let theme = theme.cosmic();
+    // let image_style = cosmic::theme::Button::Image;
+    let background = theme.palette.neutral_4.into();
+
+    cosmic::widget::column()
+        .push(
+            button::Button::new_image(
                 cosmic::iced::widget::column![
-        button(
+                    cosmic::widget::row::row()
-            cosmic::iced::widget::column![
-                row::Row::new()
                         .extend(
                             handles
                                 .iter()
@@ -1696,37 +1700,62 @@ fn icon_theme_button(
                         .spacing(theme.space_xs()),
                 ]
                 .spacing(theme.space_xs()),
+                None,
             )
             .on_press(Message::IconTheme(id))
             .selected(selected)
             .style(button::Style::Custom {
-            active: Box::new(move |focused, theme| icon_theme_style(theme, selected, focused)),
+                active: Box::new(move |focused, theme| {
-            disabled: Box::new(move |theme| icon_theme_style(theme, selected, false)),
+                    icon_theme_style(
-            hovered: Box::new(move |focused, theme| icon_theme_style(theme, selected, focused)),
+                        <cosmic::theme::Theme as button::StyleSheet>::active(
-            pressed: Box::new(move |focused, theme| icon_theme_style(theme, selected, focused))
+                            theme,
+                            focused,
+                            selected,
+                            &cosmic::theme::Button::Image,
+                        ),
+                        background,
+                    )
                 }),
-        text(name.to_owned()).width(Length::Fixed((ICON_PREV_SIZE * 3) as _))
+                disabled: Box::new(move |theme| {
-    ]
+                    icon_theme_style(
+                        <cosmic::theme::Theme as button::StyleSheet>::disabled(
+                            theme,
+                            &cosmic::theme::Button::Image,
+                        ),
+                        background,
+                    )
+                }),
+                hovered: Box::new(move |focused, theme| {
+                    icon_theme_style(
+                        <cosmic::theme::Theme as button::StyleSheet>::hovered(
+                            theme,
+                            focused,
+                            selected,
+                            &cosmic::theme::Button::Image,
+                        ),
+                        background,
+                    )
+                }),
+                pressed: Box::new(move |focused, theme| {
+                    icon_theme_style(
+                        <cosmic::theme::Theme as button::StyleSheet>::pressed(
+                            theme,
+                            focused,
+                            selected,
+                            &cosmic::theme::Button::Image,
+                        ),
+                        background,
+                    )
+                }),
+            }),
+        )
+        .push(text(name.to_owned()).width(Length::Fixed((ICON_PREV_SIZE * 3) as _)))
         .spacing(theme.space_xs())
         .into()
 }
 
-/// Icon preview button style.
+/// Add background color to the thumbnails button.
-fn icon_theme_style(
+fn icon_theme_style(mut appearance: button::Appearance, background: Color) -> button::Appearance {
-    theme: &cosmic::theme::Theme,
+    appearance.background = Some(Background::Color(background));
-    selected: bool,
-    _focused: bool,
-) -> button::Appearance {
-    let cosmic = theme.cosmic();
-    let mut appearance = button::Appearance::new();
-
-    appearance.background = Some(Background::Color(cosmic.palette.neutral_4.into()));
-
-    if selected {
-        appearance.border_width = 2.0;
-        appearance.border_color = cosmic.accent.base.into();
-        appearance.icon_color = Some(cosmic.accent.base.into());
-    }
-
     appearance
 }

i18n/en/cosmic_settings.ftl

@@ -49,7 +49,7 @@ control-tint = Control component tint
 frosted = Frosted glass effect on system interface
     .desc = Applies background blur to panel, dock, applets, launcher, and application library.
 
-experimental = Experimental
+experimental-settings = Experimental settings
 
 enable-export = Apply this theme to GNOME apps.
     .desc = Not all toolkits support auto-switching. Non-COSMIC apps may need to be restarted after a theme change.