feat(bar): scale icon size with font size

This commit changes the way icons are displayed on the bar.

There was an issue with how app icons were sized using shrink_to_fit.

This has been changed to use fit_to_exact_size instead, relying on the
font size as a starting point and scaling it to 1.4 of its size, making
the icons to appear larger.

The same scaling was done to all the widget icons as well to make them
look unified.

komorebi-bar/src/bar.rs

@@ -270,9 +270,6 @@ impl Komobar {
 
         let theme_color = *self.bg_color.borrow();
 
-        self.render_config
-            .replace(config.new_renderconfig(theme_color));
-
         self.bg_color
             .replace(theme_color.try_apply_alpha(config.transparency_alpha));
 
@@ -281,6 +278,9 @@ impl Komobar {
             Self::set_font_size(ctx, *font_size);
         }
 
+        self.render_config
+            .replace(config.new_renderconfig(ctx, theme_color));
+
         let mut komorebi_widget = None;
         let mut komorebi_widget_idx = None;
         let mut komorebi_notification_state = previous_notification_state;
@@ -503,7 +503,7 @@ impl eframe::App for Komobar {
                 ui.horizontal_centered(|ui| {
                     // Left-aligned widgets layout
                     ui.with_layout(Layout::left_to_right(Align::Center), |ui| {
-                        let mut render_conf = *render_config;
+                        let mut render_conf = render_config.clone();
                         render_conf.alignment = Some(Alignment::Left);
 
                         render_config.apply_on_alignment(ui, |ui| {
@@ -515,7 +515,7 @@ impl eframe::App for Komobar {
 
                     // Right-aligned widgets layout
                     ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
-                        let mut render_conf = *render_config;
+                        let mut render_conf = render_config.clone();
                         render_conf.alignment = Some(Alignment::Right);
 
                         render_config.apply_on_alignment(ui, |ui| {
@@ -532,7 +532,7 @@ impl eframe::App for Komobar {
                             .show(ctx, |ui| {
                                 Frame::none().show(ui, |ui| {
                                     ui.horizontal_centered(|ui| {
-                                        let mut render_conf = *render_config;
+                                        let mut render_conf = render_config.clone();
                                         render_conf.alignment = Some(Alignment::Center);
 
                                         render_config.apply_on_alignment(ui, |ui| {

komorebi-bar/src/battery.rs

@@ -2,12 +2,11 @@ use crate::config::LabelPrefix;
 use crate::render::RenderConfig;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::Sense;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use schemars::JsonSchema;
 use serde::Deserialize;
@@ -105,19 +104,12 @@ impl BarWidget for Battery {
                     BatteryState::Discharging => egui_phosphor::regular::BATTERY_FULL,
                 };
 
-                let font_id = ctx
-                    .style()
-                    .text_styles
-                    .get(&TextStyle::Body)
-                    .cloned()
-                    .unwrap_or_else(FontId::default);
-
                 let mut layout_job = LayoutJob::simple(
                     match self.label_prefix {
                         LabelPrefix::Icon | LabelPrefix::IconAndText => emoji.to_string(),
                         LabelPrefix::None | LabelPrefix::Text => String::new(),
                     },
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -125,7 +117,12 @@ impl BarWidget for Battery {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(true, ui, |ui| {

komorebi-bar/src/cpu.rs

@@ -3,11 +3,10 @@ use crate::render::RenderConfig;
 use crate::selected_frame::SelectableFrame;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use schemars::JsonSchema;
 use serde::Deserialize;
@@ -75,13 +74,6 @@ impl BarWidget for Cpu {
         if self.enable {
             let output = self.output();
             if !output.is_empty() {
-                let font_id = ctx
-                    .style()
-                    .text_styles
-                    .get(&TextStyle::Body)
-                    .cloned()
-                    .unwrap_or_else(FontId::default);
-
                 let mut layout_job = LayoutJob::simple(
                     match self.label_prefix {
                         LabelPrefix::Icon | LabelPrefix::IconAndText => {
@@ -89,7 +81,7 @@ impl BarWidget for Cpu {
                         }
                         LabelPrefix::None | LabelPrefix::Text => String::new(),
                     },
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -97,7 +89,12 @@ impl BarWidget for Cpu {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(false, ui, |ui| {

komorebi-bar/src/date.rs

@@ -3,11 +3,10 @@ use crate::render::RenderConfig;
 use crate::selected_frame::SelectableFrame;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use eframe::egui::WidgetText;
 use schemars::JsonSchema;
@@ -90,13 +89,6 @@ impl BarWidget for Date {
         if self.enable {
             let mut output = self.output();
             if !output.is_empty() {
-                let font_id = ctx
-                    .style()
-                    .text_styles
-                    .get(&TextStyle::Body)
-                    .cloned()
-                    .unwrap_or_else(FontId::default);
-
                 let mut layout_job = LayoutJob::simple(
                     match self.label_prefix {
                         LabelPrefix::Icon | LabelPrefix::IconAndText => {
@@ -104,7 +96,7 @@ impl BarWidget for Date {
                         }
                         LabelPrefix::None | LabelPrefix::Text => String::new(),
                     },
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -116,7 +108,12 @@ impl BarWidget for Date {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(false, ui, |ui| {

komorebi-bar/src/komorebi.rs

@@ -15,7 +15,6 @@ use eframe::egui::vec2;
 use eframe::egui::Color32;
 use eframe::egui::ColorImage;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Frame;
 use eframe::egui::Image;
 use eframe::egui::Label;
@@ -23,7 +22,6 @@ use eframe::egui::Margin;
 use eframe::egui::Rounding;
 use eframe::egui::Sense;
 use eframe::egui::Stroke;
-use eframe::egui::TextStyle;
 use eframe::egui::TextureHandle;
 use eframe::egui::TextureOptions;
 use eframe::egui::Ui;
@@ -141,6 +139,7 @@ pub struct Komorebi {
 impl BarWidget for Komorebi {
     fn render(&mut self, ctx: &Context, ui: &mut Ui, config: &mut RenderConfig) {
         let mut komorebi_notification_state = self.komorebi_notification_state.borrow_mut();
+        let icon_size = Vec2::splat(config.icon_font_id.size);
 
         if self.workspaces.enable {
             let mut update = None;
@@ -172,7 +171,7 @@ impl BarWidget for Komorebi {
                                                 ui.add(
                                                     Image::from(&img_to_texture(ctx, icon))
                                                         .maintain_aspect_ratio(true)
-                                                        .shrink_to_fit(),
+                                                        .fit_to_exact_size(icon_size),
                                                 );
 
                                                 if !has_icon {
@@ -188,15 +187,8 @@ impl BarWidget for Komorebi {
                                 DisplayFormat::Icon => !has_icon,
                                 _ => false,
                             } {
-                                let font_id = ctx
-                                    .style()
-                                    .text_styles
-                                    .get(&TextStyle::Body)
-                                    .cloned()
-                                    .unwrap_or_else(FontId::default);
-
                                 let (response, painter) =
-                                    ui.allocate_painter(Vec2::splat(font_id.size), Sense::hover());
+                                    ui.allocate_painter(icon_size, Sense::hover());
                                 let stroke =
                                     Stroke::new(1.0, ctx.style().visuals.selection.stroke.color);
                                 let mut rect = response.rect;
@@ -388,7 +380,7 @@ impl BarWidget for Komorebi {
                                                     let response = ui.add(
                                                         Image::from(&img_to_texture(ctx, img))
                                                             .maintain_aspect_ratio(true)
-                                                            .shrink_to_fit(),
+                                                            .fit_to_exact_size(icon_size),
                                                     );
 
                                                     if let DisplayFormat::Icon = format {

komorebi-bar/src/komorebi_layout.rs

@@ -10,7 +10,6 @@ use eframe::egui::Label;
 use eframe::egui::Rounding;
 use eframe::egui::Sense;
 use eframe::egui::Stroke;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use eframe::egui::Vec2;
 use komorebi_client::SocketMessage;
@@ -225,13 +224,7 @@ impl KomorebiLayout {
         workspace_idx: Option<usize>,
     ) {
         let monitor_idx = render_config.monitor_idx;
-        let font_id = ctx
+        let font_id = render_config.icon_font_id.clone();
-            .style()
-            .text_styles
-            .get(&TextStyle::Body)
-            .cloned()
-            .unwrap_or_else(FontId::default);
-
         let mut show_options = RenderConfig::load_show_komorebi_layout_options();
         let format = layout_config.display.unwrap_or(DisplayFormat::IconAndText);
 

komorebi-bar/src/media.rs

@@ -4,11 +4,10 @@ use crate::ui::CustomUi;
 use crate::widget::BarWidget;
 use crate::MAX_LABEL_WIDTH;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use eframe::egui::Vec2;
 use schemars::JsonSchema;
@@ -82,16 +81,9 @@ impl BarWidget for Media {
         if self.enable {
             let output = self.output();
             if !output.is_empty() {
-                let font_id = ctx
-                    .style()
-                    .text_styles
-                    .get(&TextStyle::Body)
-                    .cloned()
-                    .unwrap_or_else(FontId::default);
-
                 let mut layout_job = LayoutJob::simple(
                     egui_phosphor::regular::HEADPHONES.to_string(),
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -99,7 +91,12 @@ impl BarWidget for Media {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(false, ui, |ui| {

komorebi-bar/src/memory.rs

@@ -3,11 +3,10 @@ use crate::render::RenderConfig;
 use crate::selected_frame::SelectableFrame;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use schemars::JsonSchema;
 use serde::Deserialize;
@@ -78,13 +77,6 @@ impl BarWidget for Memory {
         if self.enable {
             let output = self.output();
             if !output.is_empty() {
-                let font_id = ctx
-                    .style()
-                    .text_styles
-                    .get(&TextStyle::Body)
-                    .cloned()
-                    .unwrap_or_else(FontId::default);
-
                 let mut layout_job = LayoutJob::simple(
                     match self.label_prefix {
                         LabelPrefix::Icon | LabelPrefix::IconAndText => {
@@ -92,7 +84,7 @@ impl BarWidget for Memory {
                         }
                         LabelPrefix::None | LabelPrefix::Text => String::new(),
                     },
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -100,7 +92,12 @@ impl BarWidget for Memory {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(false, ui, |ui| {

komorebi-bar/src/network.rs

@@ -3,11 +3,10 @@ use crate::render::RenderConfig;
 use crate::selected_frame::SelectableFrame;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use num_derive::FromPrimitive;
 use schemars::JsonSchema;
@@ -139,7 +138,12 @@ impl Network {
         (activity, total_activity)
     }
 
-    fn reading_to_label(&self, ctx: &Context, reading: NetworkReading) -> Label {
+    fn reading_to_label(
+        &self,
+        ctx: &Context,
+        reading: NetworkReading,
+        config: RenderConfig,
+    ) -> Label {
         let (text_down, text_up) = match self.label_prefix {
             LabelPrefix::None | LabelPrefix::Icon => match reading.format {
                 NetworkReadingFormat::Speed => (
@@ -179,16 +183,16 @@ impl Network {
             },
         };
 
-        let font_id = ctx
+        let icon_format = TextFormat::simple(
-            .style()
+            config.icon_font_id.clone(),
-            .text_styles
+            ctx.style().visuals.selection.stroke.color,
-            .get(&TextStyle::Body)
+        );
-            .cloned()
+        let text_format = TextFormat {
-            .unwrap_or_else(FontId::default);
+            font_id: config.text_font_id.clone(),
-
+            color: ctx.style().visuals.text_color(),
-        let icon_format =
+            valign: Align::Center,
-            TextFormat::simple(font_id.clone(), ctx.style().visuals.selection.stroke.color);
+            ..Default::default()
-        let text_format = TextFormat::simple(font_id.clone(), ctx.style().visuals.text_color());
+        };
 
         // icon
         let mut layout_job = LayoutJob::simple(
@@ -255,13 +259,15 @@ impl Network {
 impl BarWidget for Network {
     fn render(&mut self, ctx: &Context, ui: &mut Ui, config: &mut RenderConfig) {
         if self.enable {
+            let mut render_config = config.clone();
+
             if self.show_total_activity || self.show_activity {
                 let (activity, total_activity) = self.network_activity();
 
                 if self.show_total_activity {
                     for reading in total_activity {
                         config.apply_on_widget(true, ui, |ui| {
-                            ui.add(self.reading_to_label(ctx, reading));
+                            ui.add(self.reading_to_label(ctx, reading, render_config.clone()));
                         });
                     }
                 }
@@ -269,7 +275,7 @@ impl BarWidget for Network {
                 if self.show_activity {
                     for reading in activity {
                         config.apply_on_widget(true, ui, |ui| {
-                            ui.add(self.reading_to_label(ctx, reading));
+                            ui.add(self.reading_to_label(ctx, reading, render_config.clone()));
                         });
                     }
                 }
@@ -279,13 +285,6 @@ impl BarWidget for Network {
                 self.default_interface();
 
                 if !self.default_interface.is_empty() {
-                    let font_id = ctx
-                        .style()
-                        .text_styles
-                        .get(&TextStyle::Body)
-                        .cloned()
-                        .unwrap_or_else(FontId::default);
-
                     let mut layout_job = LayoutJob::simple(
                         match self.label_prefix {
                             LabelPrefix::Icon | LabelPrefix::IconAndText => {
@@ -293,7 +292,7 @@ impl BarWidget for Network {
                             }
                             LabelPrefix::None | LabelPrefix::Text => String::new(),
                         },
-                        font_id.clone(),
+                        config.icon_font_id.clone(),
                         ctx.style().visuals.selection.stroke.color,
                         100.0,
                     );
@@ -305,10 +304,15 @@ impl BarWidget for Network {
                     layout_job.append(
                         &self.default_interface,
                         10.0,
-                        TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                        TextFormat {
+                            font_id: config.text_font_id.clone(),
+                            color: ctx.style().visuals.text_color(),
+                            valign: Align::Center,
+                            ..Default::default()
+                        },
                     );
 
-                    config.apply_on_widget(false, ui, |ui| {
+                    render_config.apply_on_widget(false, ui, |ui| {
                         if SelectableFrame::new(false)
                             .show(ui, |ui| ui.add(Label::new(layout_job).selectable(false)))
                             .clicked()

komorebi-bar/src/render.rs

@@ -1,11 +1,14 @@
 use crate::bar::Alignment;
 use crate::config::KomobarConfig;
 use eframe::egui::Color32;
+use eframe::egui::Context;
+use eframe::egui::FontId;
 use eframe::egui::Frame;
 use eframe::egui::InnerResponse;
 use eframe::egui::Margin;
 use eframe::egui::Rounding;
 use eframe::egui::Shadow;
+use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use eframe::egui::Vec2;
 use schemars::JsonSchema;
@@ -29,7 +32,7 @@ pub enum Grouping {
     Widget(GroupingConfig),
 }
 
-#[derive(Copy, Clone)]
+#[derive(Clone)]
 pub struct RenderConfig {
     /// Komorebi monitor index of the monitor on which to render the bar
     pub monitor_idx: usize,
@@ -45,14 +48,28 @@ pub struct RenderConfig {
     pub more_inner_margin: bool,
     /// Set to true after the first time the apply_on_widget was called on an alignment
     pub applied_on_widget: bool,
+    /// FontId for text
+    pub text_font_id: FontId,
+    /// FontId for icon (based on scaling the text font id)
+    pub icon_font_id: FontId,
 }
 
 pub trait RenderExt {
-    fn new_renderconfig(&self, background_color: Color32) -> RenderConfig;
+    fn new_renderconfig(&self, ctx: &Context, background_color: Color32) -> RenderConfig;
 }
 
 impl RenderExt for &KomobarConfig {
-    fn new_renderconfig(&self, background_color: Color32) -> RenderConfig {
+    fn new_renderconfig(&self, ctx: &Context, background_color: Color32) -> RenderConfig {
+        let text_font_id = ctx
+            .style()
+            .text_styles
+            .get(&TextStyle::Body)
+            .cloned()
+            .unwrap_or_else(FontId::default);
+
+        let mut icon_font_id = text_font_id.clone();
+        icon_font_id.size *= 1.4;
+
         RenderConfig {
             monitor_idx: self.monitor.index,
             spacing: self.widget_spacing.unwrap_or(10.0),
@@ -61,6 +78,8 @@ impl RenderExt for &KomobarConfig {
             alignment: None,
             more_inner_margin: false,
             applied_on_widget: false,
+            text_font_id,
+            icon_font_id,
         }
     }
 }
@@ -83,6 +102,8 @@ impl RenderConfig {
             alignment: None,
             more_inner_margin: false,
             applied_on_widget: false,
+            text_font_id: FontId::default(),
+            icon_font_id: FontId::default(),
         }
     }
 
@@ -162,8 +183,8 @@ impl RenderConfig {
         Frame::group(ui.style_mut())
             .outer_margin(outer_margin.unwrap_or(Margin::ZERO))
             .inner_margin(match self.more_inner_margin {
-                true => Margin::symmetric(8.0, 3.0),
+                true => Margin::symmetric(6.0, 1.0),
-                false => Margin::symmetric(3.0, 3.0),
+                false => Margin::symmetric(1.0, 1.0),
             })
             .stroke(ui.style().visuals.widgets.noninteractive.bg_stroke)
             .rounding(match config.rounding {

komorebi-bar/src/selected_frame.rs

@@ -1,3 +1,4 @@
+use eframe::egui::CursorIcon;
 use eframe::egui::Frame;
 use eframe::egui::Margin;
 use eframe::egui::Response;
@@ -50,6 +51,6 @@ impl SelectableFrame {
                 response
             })
             .inner
-            .on_hover_cursor(eframe::egui::CursorIcon::PointingHand)
+            .on_hover_cursor(CursorIcon::PointingHand)
     }
 }

komorebi-bar/src/storage.rs

@@ -3,11 +3,10 @@ use crate::render::RenderConfig;
 use crate::selected_frame::SelectableFrame;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use schemars::JsonSchema;
 use serde::Deserialize;
@@ -81,13 +80,6 @@ impl Storage {
 impl BarWidget for Storage {
     fn render(&mut self, ctx: &Context, ui: &mut Ui, config: &mut RenderConfig) {
         if self.enable {
-            let font_id = ctx
-                .style()
-                .text_styles
-                .get(&TextStyle::Body)
-                .cloned()
-                .unwrap_or_else(FontId::default);
-
             for output in self.output() {
                 let mut layout_job = LayoutJob::simple(
                     match self.label_prefix {
@@ -96,7 +88,7 @@ impl BarWidget for Storage {
                         }
                         LabelPrefix::None | LabelPrefix::Text => String::new(),
                     },
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -104,7 +96,12 @@ impl BarWidget for Storage {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id.clone(), ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(false, ui, |ui| {

komorebi-bar/src/time.rs

@@ -3,11 +3,10 @@ use crate::render::RenderConfig;
 use crate::selected_frame::SelectableFrame;
 use crate::widget::BarWidget;
 use eframe::egui::text::LayoutJob;
+use eframe::egui::Align;
 use eframe::egui::Context;
-use eframe::egui::FontId;
 use eframe::egui::Label;
 use eframe::egui::TextFormat;
-use eframe::egui::TextStyle;
 use eframe::egui::Ui;
 use schemars::JsonSchema;
 use serde::Deserialize;
@@ -81,13 +80,6 @@ impl BarWidget for Time {
         if self.enable {
             let mut output = self.output();
             if !output.is_empty() {
-                let font_id = ctx
-                    .style()
-                    .text_styles
-                    .get(&TextStyle::Body)
-                    .cloned()
-                    .unwrap_or_else(FontId::default);
-
                 let mut layout_job = LayoutJob::simple(
                     match self.label_prefix {
                         LabelPrefix::Icon | LabelPrefix::IconAndText => {
@@ -95,7 +87,7 @@ impl BarWidget for Time {
                         }
                         LabelPrefix::None | LabelPrefix::Text => String::new(),
                     },
-                    font_id.clone(),
+                    config.icon_font_id.clone(),
                     ctx.style().visuals.selection.stroke.color,
                     100.0,
                 );
@@ -107,7 +99,12 @@ impl BarWidget for Time {
                 layout_job.append(
                     &output,
                     10.0,
-                    TextFormat::simple(font_id, ctx.style().visuals.text_color()),
+                    TextFormat {
+                        font_id: config.text_font_id.clone(),
+                        color: ctx.style().visuals.text_color(),
+                        valign: Align::Center,
+                        ..Default::default()
+                    },
                 );
 
                 config.apply_on_widget(false, ui, |ui| {