Merge pull request #171 from swetar-mecha/settings-app/ui-improvements

Chore(settings-app): change fonts to inter & fix: minor spelling

apps/Cargo.toml

@@ -6,7 +6,7 @@ members = [
 default-members = ["settings-app", "camera",  "files"]
 
 [workspace.package]
-version = "0.1.14"
+version = "0.1.15"
 authors = [
    "Sweta <[email protected]>", 
    "Naman <[email protected]>",

apps/settings-app/settings.yml.example

@@ -21,19 +21,16 @@ layout:
   right: []
 fonts:
   paths:
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceMono-Bold.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceMono-BoldItalic.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceMono-Italic.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceMono-Regular.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceGrotesk-Bold.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceGrotesk-Regular.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceGrotesk-SemiBold.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/SpaceGrotesk-Medium.ttf
     - /usr/share/mechanix/apps/settings/assets/fonts/Inter-Regular.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/Inter-Medium.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/Inter-SemiBold.ttf
-    - /usr/share/mechanix/apps/settings/assets/fonts/Inter-Bold.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_18pt-Regular.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_24pt-Regular.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_28pt-Regular.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_18pt-Medium.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_24pt-Medium.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_28pt-Medium.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter_18pt-Bold.ttf
     - /usr/share/mechanix/apps/settings/assets/fonts/Inter_24pt-Bold.ttf
+    - /usr/share/mechanix/apps/settings/assets/fonts/Inter-28pt-Bold.ttf
 modules:
   wireless:
     icon:

apps/settings-app/src/screens/about/about_device.rs

@@ -161,7 +161,7 @@ impl Component for AboutDevice {
         )
         .push(single_detail_row(DetailRow {
             key: "Host name".to_string(),
-            value: format!("{}.local ", os_info.hostname),
+            value: format!("{}.local", os_info.hostname),
         }))
         .push(node!(HDivider {
             size: 0.8,

apps/settings-app/src/screens/battery/battery_screen.rs

@@ -75,7 +75,7 @@ impl Component for BatteryScreen {
         } else if *battery_status == BatteryStatus::Discharging {
             charge_text = "Discharging";
         } else {
-            charge_text = "Charded";
+            charge_text = "Charged";
         }
 
         // green

apps/settings-app/src/screens/network/add_network.rs

@@ -158,7 +158,8 @@ impl Component for AddNetwork {
             .push(node!(
                 TextBox::new(Some("".to_string()))
                     .style("background_color", Color::TRANSPARENT)
-                    .style("font_size", 20.)
+                    .style("font", "Inter")
+                    .with_class("text-xl leading-6 font-medium")
                     .style("text_color", Color::WHITE)
                     .style("border_color", Color::TRANSPARENT)
                     .style("cursor_color", Color::WHITE)
@@ -234,7 +235,8 @@ impl Component for AddNetwork {
             .push(node!(
                 TextBox::new(Some("".to_string()))
                     .style("background_color", Color::TRANSPARENT)
-                    .style("font_size", 20.)
+                    .style("font", "Inter")
+                    .with_class("text-xl leading-6 font-medium")
                     .style("text_color", Color::WHITE)
                     .style("border_color", Color::TRANSPARENT)
                     .style("cursor_color", Color::WHITE)

apps/settings-app/src/screens/settings_menu/component.rs

@@ -49,16 +49,22 @@ impl Component for SettingsRowComponent {
         let icon_2 = self.icon_2.clone();
         let color = self.color.clone();
 
-        let text_node = node!(Text::new(txt!(title))
-            .style("color", color)
-            .style("font", "Inter")
-            .with_class("text-2xl leading-7 font-bold"));
+        let text_node = node!(
+            Text::new(txt!(title))
+                .with_class("text-2xl leading-7 font-bold")
+                .style("font", "Inter")
+                .style("color", Color::rgba(227., 227., 227., 1.)),
+            lay![
+                size_pct: [100, Auto],
+                axis_alignment: Alignment::Center,
+            ]
+        );
 
         let value_node = node!(
             Text::new(txt!(value))
                 .style("color", Color::rgba(197., 197., 197., 1.))
                 .style("font", "Inter")
-                .with_class("text-xl leading-6 font-normal"),
+                .with_class("text-xl leading-8 font-medium"),
             lay![
                 margin: [0., 0., 0., 10.],
             ]