Some fixes to the top bar widget style

src/ui/themes.cpp

@@ -45,6 +45,10 @@ void Theme::Callback(lv_obj_t* obj) {
     lv_obj_add_style(obj, &button_style_focused_,
                      LV_PART_MAIN | LV_STATE_FOCUSED);
   }
+
+  if (lv_obj_check_type(obj, &lv_switch_class)) {
+    lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN | LV_STATE_FOCUSED);
+  }
 }
 
 void Theme::ApplyStyle(lv_obj_t* obj, Style style) {

src/ui/widget_top_bar.cpp

@@ -11,21 +11,11 @@
 #include "extra/layouts/flex/lv_flex.h"
 #include "font/lv_symbol_def.h"
 #include "font_symbols.hpp"
-#include "themes.hpp"
 #include "ui_events.hpp"
 #include "ui_fsm.hpp"
 #include "widgets/lv_img.h"
 #include "widgets/lv_label.h"
-
-LV_IMG_DECLARE(kIconBluetooth);
-LV_IMG_DECLARE(kIconPlay);
-LV_IMG_DECLARE(kIconPause);
-LV_IMG_DECLARE(kIconBatteryEmpty);
-LV_IMG_DECLARE(kIconBattery20);
-LV_IMG_DECLARE(kIconBattery40);
-LV_IMG_DECLARE(kIconBattery60);
-LV_IMG_DECLARE(kIconBattery80);
-LV_IMG_DECLARE(kIconBatteryFull);
+#include "themes.hpp"
 
 namespace ui {
 namespace widgets {
@@ -36,20 +26,21 @@ static void back_click_cb(lv_event_t* ev) {
 
 TopBar::TopBar(lv_obj_t* parent, const Configuration& config) {
   container_ = lv_obj_create(parent);
-  lv_obj_set_size(container_, lv_pct(100), 18);
+  lv_obj_set_size(container_, lv_pct(100), 20);
   lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_ROW);
   lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER,
                         LV_FLEX_ALIGN_END);
-
-  themes::Theme::instance()->ApplyStyle(container_, themes::Style::kTopBar);
+  lv_obj_set_style_pad_column(container_, 5, LV_PART_MAIN);
+  
 
   if (config.show_back_button) {
     back_button_ = lv_btn_create(container_);
-    lv_obj_set_size(back_button_, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
+    lv_obj_set_size(back_button_, LV_SIZE_CONTENT, 12);
     lv_obj_t* button_icon = lv_label_create(back_button_);
     lv_label_set_text(button_icon, "");
     lv_obj_set_style_text_font(button_icon, &font_symbols, 0);
     lv_obj_add_event_cb(back_button_, back_click_cb, LV_EVENT_CLICKED, NULL);
+    lv_obj_center(button_icon);
   } else {
     back_button_ = nullptr;
   }
@@ -58,43 +49,40 @@ TopBar::TopBar(lv_obj_t* parent, const Configuration& config) {
   lv_label_set_text(title_, config.title.c_str());
   lv_obj_set_flex_grow(title_, 1);
 
-  playback_ = lv_img_create(container_);
-  battery_ = lv_img_create(container_);
-  charging_ = lv_label_create(container_);
+  playback_ = lv_label_create(container_);
+  lv_label_set_text(playback_, "");
+
+  battery_ = lv_label_create(container_);
+  lv_label_set_text(battery_, "");
+
+  themes::Theme::instance()->ApplyStyle(container_, themes::Style::kTopBar);
 }
 
 auto TopBar::Update(const State& state) -> void {
   switch (state.playback_state) {
     case PlaybackState::kIdle:
-      lv_img_set_src(playback_, NULL);
+      lv_label_set_text(playback_, "-");
       break;
     case PlaybackState::kPaused:
-      lv_img_set_src(playback_, &kIconPause);
+      lv_label_set_text(playback_, LV_SYMBOL_PAUSE);
       break;
     case PlaybackState::kPlaying:
-      lv_img_set_src(playback_, &kIconPlay);
+      lv_label_set_text(playback_, LV_SYMBOL_PLAY);
       break;
   }
 
-  if (state.is_charging) {
-    lv_label_set_text(charging_, "+");
-  } else {
-    lv_label_set_text(charging_, "");
-  }
-
-  if (state.battery_percent >= 95) {
-    lv_img_set_src(battery_, &kIconBatteryFull);
-  } else if (state.battery_percent >= 75) {
-    lv_img_set_src(battery_, &kIconBattery80);
-  } else if (state.battery_percent >= 55) {
-    lv_img_set_src(battery_, &kIconBattery60);
-  } else if (state.battery_percent >= 35) {
-    lv_img_set_src(battery_, &kIconBattery40);
-  } else if (state.battery_percent >= 15) {
-    lv_img_set_src(battery_, &kIconBattery20);
-  } else {
-    lv_img_set_src(battery_, &kIconBatteryEmpty);
-  }
+  lv_label_set_text(battery_, std::to_string(state.battery_percent).c_str());
+  // if (state.battery_percent >= 95) {
+  //   lv_label_set_text(battery_, "100");
+  // } else if (state.battery_percent >= 70) {
+  //   lv_label_set_text(battery_, ">70");
+  // } else if (state.battery_percent >= 40) {
+  //   lv_label_set_text(battery_, ">40");
+  // } else if (state.battery_percent >= 10) {
+  //   lv_label_set_text(battery_, ">10");
+  // } else {
+  //   lv_label_set_text(battery_, "0");
+  // }
 }
 
 }  // namespace widgets