Merge branch 'main' into 'devel'

Add custom image and gif support for G835L with other minor fixes

See merge request asus-linux/asusctl!249

.editorconfig

@@ -8,6 +8,9 @@ indent_style = space
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.slint]
+indent_size = 4
+
 [*.md]
 trim_trailing_whitespace = false
 

rog-anime/src/image.rs

@@ -164,7 +164,7 @@ impl AnimeImage {
     ///  first_x
     /// ```
     ///
-    /// For G835L (inverted pattern - triangle grows then rectangle shifts):
+    /// For G835L/G635L (inverted pattern - triangle grows then rectangle shifts):
     /// ```text
     /// ●              <- Row 0: first_x = 0, width = 1
     ///  ●             <- Row 1: first_x = 0 (stagger), width = 1
@@ -193,8 +193,8 @@ impl AnimeImage {
                 // and then their offset grows by one every two rows
                 (y - 9) / 2
             }
-            AnimeType::G835L => {
-                // G835L has inverted geometry - triangle at top-left, rectangle shifts right
+            AnimeType::G635L | AnimeType::G835L => {
+                // G835L/G635L have inverted geometry - triangle at top-left, rectangle shifts right
                 // Triangle (rows 0-27): no cumulative shift, just alternating stagger
                 // Rectangle (rows 28-67): shifts right by ~0.5px per row
                 if y < 28 {
@@ -245,8 +245,8 @@ impl AnimeImage {
                 }
                 38 - Self::first_x(anime_type, y) + y % 2
             }
-            AnimeType::G835L => {
-                // G835L rows GROW then stay constant (inverted from other devices)
+            AnimeType::G635L | AnimeType::G835L => {
+                // G835L/G635L rows GROW then stay constant (inverted from other devices)
                 // Triangle (rows 0-27): pairs of rows with same length, 1→14
                 // Rectangle (rows 28-67): constant 15 LEDs
                 if y < 28 {
@@ -270,6 +270,7 @@ impl AnimeImage {
             // 33.0 = Longest row LED count (physical) plus half-pixel offset
             AnimeType::GA401 => (33.0 + 0.5) * Self::scale_x(anime_type),
             AnimeType::GU604 => (38.0 + 0.5) * Self::scale_x(anime_type),
+            AnimeType::G635L => (33.0 + 0.5) * Self::scale_x(anime_type),
             AnimeType::G835L => (33.0 + 0.5) * Self::scale_x(anime_type),
             _ => (35.0 + 0.5) * Self::scale_x(anime_type),
         }
@@ -280,6 +281,7 @@ impl AnimeImage {
         match anime_type {
             AnimeType::GA401 => 55,
             AnimeType::GU604 => 62,
+            AnimeType::G635L => 68,
             AnimeType::G835L => 68,
             _ => 61,
         }
@@ -291,6 +293,7 @@ impl AnimeImage {
             // 54.0 = End column LED count (physical) plus one dead pixel
             AnimeType::GA401 => (54.0 + 1.0) * Self::scale_y(anime_type),
             AnimeType::GU604 => 62.0 * Self::scale_y(anime_type),
+            AnimeType::G635L => 68.0 * Self::scale_y(anime_type),
             AnimeType::G835L => 68.0 * Self::scale_y(anime_type),
             // GA402 may not have dead pixels and require only the physical LED count
             _ => 61.0 * Self::scale_y(anime_type),
@@ -449,7 +452,7 @@ impl AnimeImage {
     }
 
     fn led_center(&self) -> Vec2 {
-        if self.anime_type != AnimeType::G835L {
+        if !matches!(self.anime_type, AnimeType::G635L | AnimeType::G835L) {
             return Vec2::new(20.0, 20.0);
         }
 

rog-control-center/src/ui/mod.rs

@@ -102,8 +102,9 @@ pub fn setup_window(config: Arc<Mutex<Config>>) -> MainWindow {
             available.contains(&"xyz.ljones.Aura".to_string()),
             available.contains(&"xyz.ljones.Anime".to_string()),
             available.contains(&"xyz.ljones.FanCurves".to_string()),
-            true,
-            true,
+            true, // GPU Configuration
+            true, // App Settings
+            true, // About
         ]
         .into(),
     );

rog-control-center/ui/main_window.slint

@@ -7,6 +7,7 @@ import { PageFans } from "pages/fans.slint";
 import { PageAnime, AnimePageData } from "pages/anime.slint";
 import { RogItem } from "widgets/common.slint";
 import { PageAura } from "pages/aura.slint";
+import { PageGPU } from "pages/gpu.slint";
 import { Node } from "widgets/graph.slint";
 export { Node }
 import { FanPageData, FanType, Profile } from "types/fan_types.slint";
@@ -24,7 +25,15 @@ export component MainWindow inherits Window {
     default-font-size: 14px;
     default-font-weight: 400;
     icon: @image-url("../data/rog-control-center.png");
-    in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
+    in property <[bool]> sidebar_items_avilable: [
+        true,
+        true,
+        true,
+        true,
+        true, // GPU Configuration
+        true, // App Settings
+        true, // About
+    ];
     private property <bool> show_notif;
     private property <bool> fade_cover;
     private property <bool> toast: false;
@@ -47,37 +56,31 @@ export component MainWindow inherits Window {
     }
     min-height: AppSize.height;
     min-width: AppSize.width;
-    background: Colors.black;
+    background: Palette.alternate-background;
+
     HorizontalLayout {
         padding: 0px;
         VerticalLayout {
+            padding: 0px;
             side-bar := SideBar {
-                title: @tr("ROG");
                 model: [
                     @tr("Menu1" => "System Control"),
                     @tr("Menu2" => "Keyboard Aura"),
                     @tr("Menu3" => "AniMe Matrix"),
                     @tr("Menu4" => "Fan Curves"),
-                    @tr("Menu5" => "App Settings"),
-                    @tr("Menu6" => "About"),
+                    @tr("Menu5" => "GPU Configuration"),
+                    @tr("Menu6" => "App Settings"),
+                    @tr("Menu7" => "About"),
                 ];
                 available: root.sidebar_items_avilable;
             }
 
-            Rectangle {
-                max-height: 40px;
+            Button {
+                height: 40px;
                 width: side-bar.width;
-                background: Palette.control-background;
-                Text {
-                    vertical-alignment: center;
-                    horizontal-alignment: center;
-                    text: @tr("Quit App");
-                }
-
-                TouchArea {
-                    clicked => {
-                        root.exit-app();
-                    }
+                text: @tr("Quit App");
+                clicked() => {
+                    root.exit-app();
                 }
             }
         }
@@ -89,26 +92,34 @@ export component MainWindow inherits Window {
                 height: root.height + 12px;
             }
 
-            aura := PageAura {
+            /*if(side-bar.current-item == 1):*/ aura := PageAura {
                 width: root.width - side-bar.width;
                 visible: side-bar.current-item == 1;
             }
 
             if(side-bar.current-item == 2): PageAnime {
                 width: root.width - side-bar.width;
+                visible: side-bar.current-item == 2;
             }
 
-            fans := PageFans {
+            if(side-bar.current-item == 3): fans := PageFans {
                 width: root.width - side-bar.width;
                 visible: side-bar.current-item == 3;
             }
 
-            if(side-bar.current-item == 4): PageAppSettings {
+            if(side-bar.current-item == 4): PageGPU {
                 width: root.width - side-bar.width;
+                visible: side-bar.current-item == 4;
             }
 
-            if(side-bar.current-item == 5): PageAbout {
+            if(side-bar.current-item == 5): PageAppSettings {
                 width: root.width - side-bar.width;
+                visible: side-bar.current-item == 5;
+            }
+
+            if(side-bar.current-item == 6): PageAbout {
+                width: root.width - side-bar.width;
+                visible: side-bar.current-item == 6;
             }
 
             if toast: Rectangle {
@@ -192,10 +203,6 @@ export component MainWindow inherits Window {
         y: 0px;
         width: root.width;
         height: root.height;
-
-        //padding only has effect on layout elements
-        //padding: 10px;
-
         background: Palette.background;
         border-color: Palette.border;
         border-width: 3px;

rog-control-center/ui/pages/about.slint

@@ -1,62 +1,77 @@
-import { AboutSlint, VerticalBox, HorizontalBox } from "std-widgets.slint";
+import {
+    AboutSlint,
+    VerticalBox,
+    HorizontalBox,
+    ScrollView,
+} from "std-widgets.slint";
 
 export component PageAbout inherits VerticalLayout {
     padding: 10px;
     spacing: 10px;
-    Text {
-        vertical-alignment: TextVerticalAlignment.center;
-        horizontal-alignment: TextHorizontalAlignment.center;
-        text: "A UI for asusctl made with slint";
-        font-size: 22px;
-    }
+    ScrollView {
 
-    HorizontalBox {
-        alignment: LayoutAlignment.center;
-        VerticalBox {
+        HorizontalBox {
             alignment: LayoutAlignment.center;
+            VerticalBox {
+                alignment: LayoutAlignment.center;
 
-            Text {
-                wrap: TextWrap.word-wrap;
-                text: "You need to use kernel version 6.19 to use this software";
-            }
+                Text {
+                    vertical-alignment: TextVerticalAlignment.center;
+                    horizontal-alignment: TextHorizontalAlignment.center;
+                    text: "ROG Control Center";
+                    font-size: 22px;
+                }
 
-            Text {
-                vertical-alignment: TextVerticalAlignment.center;
-                horizontal-alignment: TextHorizontalAlignment.center;
-                text: "Todo:";
-                font-size: 22px;
-            }
+                Text {
+                    wrap: TextWrap.word-wrap;
+                    text: "\nA powerful graphical interface for managing ASUS ROG, TUF, and ProArt laptops on Linux. It acts as the official GUI for the asusctl toolset, allowing for seamless hardware tuning without the command line.";
+                }
 
-            Text {
-                text: "- [ ] Theme the widgets";
-            }
+                Text {
+                    font-weight: 900;
+                    text: "Key Features:";
+                }
 
-            Text {
-                text: "- [ ] Add a cpu/gpu temp/fan speed info bar";
-            }
+                Text {
+                    text: "      • Performance: Switch power profiles and customize fan curves.\n      • Aura Sync: Control keyboard backlighting and LED effects.\n      • Battery Health: Set charge limits to extend battery longevity.\n      • Display: Toggle Panel Overdrive and refresh rates.\n      • AniMe Matrix: Control AniMe Matrix displays.";
+                }
 
-            Text {
-                text: "- [ ] Include fan speeds, temps in a bottom bar";
-            }
+                Text {
+                    font-weight: 900;
+                    text: "Requirements:";
+                }
 
-            Text {
-                text: "- [ ] Slash control";
-            }
+                Text {
+                    text: "      • This software requires kernel version 6.19.";
+                }
 
-            Text {
-                text: "- [ ] Screenpad controls";
-            }
+                Text {
+                    font-weight: 900;
+                    text: "Work in progress:";
+                }
 
-            Text {
-                text: "- [ ] ROG Ally specific settings";
+                Text {
+                    text: "      • Theme the widgets\n      • Add a cpu/gpu temp/fan speed info bar\n      • Include fan speeds, temps in a bottom bar\n      • Slash control\n      • Screenpad controls\n      • ROG Ally specific settings";
+                }
+
+                Text {
+                    font-weight: 900;
+                    text: "License:";
+                }
+
+                Text {
+                    text: "      This project is open-source software licensed under the Mozilla Public License 2.0 (MPL-2.0).";
+                }
+
+                Text {
+                    font-weight: 900;
+                    text: "Links:";
+                }
+
+                Text {
+                    text: "      Source Code: https://gitlab.com/asus-linux/asusctl\n      Website: https://asus-linux.org/";
+                }
             }
         }
     }
-
-    Text {
-        vertical-alignment: TextVerticalAlignment.center;
-        horizontal-alignment: TextHorizontalAlignment.center;
-        text: "Work in progress";
-        font-size: 22px;
-    }
 }

rog-control-center/ui/pages/anime.slint

@@ -36,12 +36,8 @@ export component PageAnime inherits Rectangle {
     property <bool> show_display_advanced: false;
     property <bool> show_builtin_advanced: false;
     clip: true;
-    // TODO: slow with border-radius
-    //padding only has effect on layout elements
-    //padding: 8px;
-    // height: parent.height - infobar.height - mainview.padding - self.padding * 2;
-        // TODO: border-radius: 8px;
-        VerticalLayout {
+
+    VerticalLayout {
         padding: 10px;
         spacing: 10px;
         HorizontalLayout {
@@ -132,8 +128,9 @@ export component PageAnime inherits Rectangle {
         width: 100%;
         height: 100%;
         opacity: 1;
+        background: Palette.background;
         VerticalLayout {
-            padding: 50px;
+            padding: 4px;
             spacing: 10px;
             GroupBox {
                 height: 10px;
@@ -141,7 +138,7 @@ export component PageAnime inherits Rectangle {
                     spacing: 10px;
                     alignment: LayoutAlignment.start;
                     Text {
-                        font-size: 18px;
+                        font-size: 16px;
                         color: Palette.control-foreground;
                         horizontal-alignment: TextHorizontalAlignment.center;
                         text: @tr("Set which builtin animations are played");
@@ -193,8 +190,8 @@ export component PageAnime inherits Rectangle {
         Button {
             x: root.width - self.width - 6px;
             y: 6px;
-            text: "X";
-            height: 40px;
+            text: "✕";
+            height: 36px;
             clicked => {
                 root.show_builtin_advanced = false;
                 root.show_fade_cover = false;
@@ -206,8 +203,9 @@ export component PageAnime inherits Rectangle {
         width: 100%;
         height: 100%;
         opacity: 1;
+        background: Palette.background;
         VerticalLayout {
-            padding: 50px;
+            padding: 4px;
             spacing: 10px;
             GroupBox {
                 height: 100px;
@@ -215,7 +213,7 @@ export component PageAnime inherits Rectangle {
                     spacing: 10px;
                     alignment: LayoutAlignment.start;
                     Text {
-                        font-size: 18px;
+                        font-size: 16px;
                         color: Palette.control-foreground;
                         horizontal-alignment: TextHorizontalAlignment.center;
                         text: @tr("Advanced Display Settings");
@@ -254,8 +252,8 @@ export component PageAnime inherits Rectangle {
         Button {
             x: root.width - self.width - 6px;
             y: 6px;
-            text: "X";
-            height: 40px;
+            text: "✕";
+            height: 36px;
             clicked => {
                 root.show_display_advanced = false;
                 root.show_fade_cover = false;

rog-control-center/ui/pages/app_settings.slint

@@ -15,12 +15,7 @@ export global AppSettingsPageData {
 export component PageAppSettings inherits VerticalLayout {
     Rectangle {
         clip: true;
-        // TODO: slow with border-radius
-        //padding only has effect on layout elements
-        //padding: 8px;
 
-        // height: parent.height - infobar.height - mainview.padding - self.padding * 2;
-        // TODO: border-radius: 8px;
         mainview := VerticalLayout {
             padding: 10px;
             spacing: 10px;
@@ -57,7 +52,8 @@ export component PageAppSettings inherits VerticalLayout {
             }
 
             Text {
-                text: "WIP: some features like notifications are not complete";
+                color: Palette.accent-background;
+                text: " WIP: some features like notifications are not complete";
             }
         }
     }

rog-control-center/ui/pages/aura.slint

@@ -17,6 +17,7 @@ export component PageAura inherits Rectangle {
         c2.final_colour = AuraPageData.led_mode_data.colour2;
         c2.external_colour_change();
     }
+
     ScrollView {
         VerticalLayout {
             padding: 10px;
@@ -53,6 +54,7 @@ export component PageAura inherits Rectangle {
                 min-height: 220px;
                 max-height: 400px;
                 HorizontalLayout {
+                    padding-top: 5px;
                     spacing: 10px;
                     VerticalBox {
                         Text {
@@ -113,8 +115,6 @@ export component PageAura inherits Rectangle {
                 min-height: 80px;
                 max-height: 90px;
                 RogItem {
-                    //padding only has effect on layout elements
-                    //padding: 0px;
                     VerticalBox {
                         Text {
                             text: @tr("Zone");
@@ -137,8 +137,6 @@ export component PageAura inherits Rectangle {
                 }
 
                 RogItem {
-                    //padding only has effect on layout elements
-                    //padding: 0px;
                     VerticalBox {
                         Text {
                             text: @tr("Direction");
@@ -160,8 +158,6 @@ export component PageAura inherits Rectangle {
                 }
 
                 RogItem {
-                    //padding only has effect on layout elements
-                    //padding: 0px;
                     VerticalBox {
                         Text {
                             text: @tr("Speed");
@@ -205,6 +201,7 @@ export component PageAura inherits Rectangle {
     }
 
     if root.show_aura_power && AuraPageData.device_type == AuraDevType.New: Rectangle {
+        background: Palette.background;
         width: 100%;
         height: 100%;
         opacity: 1;
@@ -244,8 +241,8 @@ export component PageAura inherits Rectangle {
             Button {
                 x: root.width - self.width - 6px;
                 y: 6px;
-                text: "X";
-                height: 40px;
+                text: "✕";
+                height: 36px;
                 clicked => {
                     root.show_aura_power = false;
                     root.show_fade_cover = false;
@@ -255,6 +252,7 @@ export component PageAura inherits Rectangle {
     }
 
     if root.show_aura_power && AuraPageData.device_type == AuraDevType.Old: Rectangle {
+        background: Palette.background;
         width: 100%;
         height: 100%;
         opacity: 1;
@@ -297,8 +295,8 @@ export component PageAura inherits Rectangle {
             Button {
                 x: root.width - self.width - 6px;
                 y: 6px;
-                text: "X";
-                height: 40px;
+                text: "✕";
+                height: 36px;
                 clicked => {
                     root.show_aura_power = false;
                     root.show_fade_cover = false;

rog-control-center/ui/pages/fans.slint

@@ -16,20 +16,28 @@ component FanTab inherits Rectangle {
     in-out property <[Node]> nodes;
 
     VerticalLayout {
+        padding: 5px;
         HorizontalLayout {
             if root.tab_enabled: Graph {
                 nodes <=> root.nodes;
             }
             if !root.tab_enabled: Rectangle {
                 Text {
-                    font-size: 24px;
+                    font-size: 16px;
                     text: @tr("This fan is not avilable on this machine");
                 }
             }
         }
 
+        Rectangle {
+            background: Palette.border;
+            height: 1px;
+        }
+
         HorizontalLayout {
             alignment: LayoutAlignment.end;
+            spacing: 10px;
+            padding: 10px;
             CheckBox {
                 text: @tr("Enabled");
                 checked <=> root.enabled;

rog-control-center/ui/pages/gpu.slint

@@ -0,0 +1,36 @@
+import { Palette, TabWidget, Button, CheckBox, ScrollView } from "std-widgets.slint";
+import { Graph, Node } from "../widgets/graph.slint";
+import { SystemToggle, SystemDropdown } from "../widgets/common.slint";
+import { Profile, FanType, FanPageData } from "../types/fan_types.slint";
+
+export global GPUPageData {
+    // GPU mode and device state
+    in-out property <int> gpu_mux_mode: 1; // 0 = Ultra/Discreet, 1 = Integrated/Optimus
+    in-out property <int> dgpu_disabled: 0; // 1 == dGPU disabled
+    in-out property <int> egpu_enabled: 0; // 1 == eGPU (XGMobile) enabled
+    in-out property <[string]> gpu_modes_choises: [@tr("Ultra"), @tr("Integrated")];
+    callback cb_gpu_mux_mode(int);
+    callback cb_dgpu_disabled(int);
+    callback cb_egpu_enabled(int);
+}
+
+export component PageGPU inherits Rectangle {
+    clip: true;
+
+    ScrollView {
+        VerticalLayout {
+            padding: 10px;
+            spacing: 10px;
+            SystemDropdown {
+                text: @tr("GPU mode");
+                current_index <=> GPUPageData.gpu_mux_mode;
+                current_value: GPUPageData.gpu_modes_choises[GPUPageData.gpu_mux_mode];
+                model <=> GPUPageData.gpu_modes_choises;
+                selected => {
+                    GPUPageData.cb_gpu_mux_mode(0);
+                    GPUPageData.cb_gpu_mux_mode(1);
+                }
+            }
+        }
+    }
+}

rog-control-center/ui/pages/system.slint

@@ -152,21 +152,20 @@ export component PageSystem inherits Rectangle {
     property <bool> show_fade_cover: false;
     property <bool> show_throttle_advanced: false;
     clip: true;
-    //padding only has effect on layout elements
-    //padding: 8px;
+
     ScrollView {
         VerticalLayout {
-            padding: 10px;
-            spacing: 10px;
+            padding: 12px;
+            spacing: 8px;
             alignment: LayoutAlignment.start;
             Rectangle {
                 background: Palette.alternate-background;
-                border-color: Palette.accent-background;
-                border-width: 3px;
-                border-radius: 10px;
-                height: 40px;
+                border-color: Palette.border;
+                border-width: 1px;
+                border-radius: 2px;
+                height: 36px;
                 Text {
-                    font-size: 18px;
+                    font-size: 16px;
                     color: Palette.control-foreground;
                     horizontal-alignment: TextHorizontalAlignment.center;
                     text: @tr("Power settings");
@@ -212,11 +211,11 @@ export component PageSystem inherits Rectangle {
                     padding-left: 10px;
                     padding-right: 20px;
                     HorizontalLayout {
-                        width: 38%;
+                        width: 40%;
                         alignment: LayoutAlignment.space-between;
                         padding-right: 15px;
                         Text {
-                            font-size: 16px;
+                            font-size: 14px;
                             vertical-alignment: TextVerticalAlignment.center;
                             color: Palette.control-foreground;
                             text: @tr("Screenpad brightness");
@@ -240,7 +239,7 @@ export component PageSystem inherits Rectangle {
 
                     HorizontalLayout {
                     width: 20%;
-                    padding-left: 10px;
+                    padding-left: 14px;
                         alignment: LayoutAlignment.stretch;
                         Switch {
                             text: @tr("Sync with primary");
@@ -253,14 +252,74 @@ export component PageSystem inherits Rectangle {
                 }
             }
 
+            if SystemPageData.kbd_leds_awake != -1 ||
+                    SystemPageData.kbd_leds_sleep != -1 ||
+                    SystemPageData.kbd_leds_boot != -1 ||
+                    SystemPageData.kbd_leds_shutdown != -1: VerticalLayout {
+                padding: 0px;
+                spacing: 0px;
+                alignment: LayoutAlignment.start;
+                Rectangle {
+                    background: Palette.alternate-background;
+                    border-color: Palette.border;
+                    border-width: 1px;
+                    border-radius: 2px;
+                    height: 40px;
+                    Text {
+                        font-size: 16px;
+                        color: Palette.control-foreground;
+                        horizontal-alignment: TextHorizontalAlignment.center;
+                        text: @tr("Keyboard Power Management");
+                    }
+                }
+
+                GroupBox {
+
+                    HorizontalLayout {
+                        spacing: 10px;
+                        if SystemPageData.kbd_leds_awake != -1: SystemToggleInt {
+                            text: @tr("Keyboard Awake Effect");
+                            checked_int <=> SystemPageData.kbd_leds_awake;
+                            toggled => {
+                                SystemPageData.cb_kbd_leds_awake(SystemPageData.kbd_leds_awake)
+                            }
+                        }
+
+                        if SystemPageData.kbd_leds_sleep != -1: SystemToggleInt {
+                            text: @tr("Keyboard Sleep Effect");
+                            checked_int <=> SystemPageData.kbd_leds_sleep;
+                            toggled => {
+                                SystemPageData.cb_kbd_leds_sleep(SystemPageData.kbd_leds_sleep)
+                            }
+                        }
+
+                        if SystemPageData.kbd_leds_boot != -1: SystemToggleInt {
+                            text: @tr("Keyboard Boot Effect");
+                            checked_int <=> SystemPageData.kbd_leds_boot;
+                            toggled => {
+                                SystemPageData.cb_kbd_leds_boot(SystemPageData.kbd_leds_boot)
+                            }
+                        }
+
+                        if SystemPageData.kbd_leds_shutdown != -1: SystemToggleInt {
+                            text: @tr("Keyboard Shutdown Effect");
+                            checked_int <=> SystemPageData.kbd_leds_shutdown;
+                            toggled => {
+                                SystemPageData.cb_kbd_leds_shutdown(SystemPageData.kbd_leds_shutdown)
+                            }
+                        }
+                    }
+                }
+            }
+
             Rectangle {
                 background: Palette.alternate-background;
-                border-color: Palette.accent-background;
-                border-width: 3px;
-                border-radius: 10px;
-                height: 40px;
+                border-color: Palette.border;
+                border-width: 1px;
+                border-radius: 2px;
+                height: 36px;
                 Text {
-                    font-size: 18px;
+                    font-size: 16px;
                     color: Palette.control-foreground;
                     horizontal-alignment: TextHorizontalAlignment.center;
                     text: @tr("Armoury settings");
@@ -268,62 +327,26 @@ export component PageSystem inherits Rectangle {
             }
 
             if !SystemPageData.asus_armoury_loaded: Rectangle {
-                border-width: 3px;
-                border-color: red;
+                background: maroon;
+                // background: darkred;
                 max-height: 30px;
                 VerticalBox {
                     Text {
                         text: @tr("no_asus_armoury_driver_1" => "The asus-armoury driver is not loaded");
                         font-size: 16px;
+                        color: white;
                         horizontal-alignment: TextHorizontalAlignment.center;
                     }
 
                     Text {
                         text: @tr("no_asus_armoury_driver_2" => "For advanced features you will require a kernel with this driver added.");
                         font-size: 16px;
+                        color: white;
                         horizontal-alignment: TextHorizontalAlignment.center;
                     }
                 }
             }
 
-            GroupBox {
-                title: @tr("Keyboard Power Management");
-                HorizontalLayout {
-                    spacing: 10px;
-                    if SystemPageData.kbd_leds_awake != -1: SystemToggleInt {
-                        text: @tr("Keyboard Awake Effect");
-                        checked_int <=> SystemPageData.kbd_leds_awake;
-                        toggled => {
-                            SystemPageData.cb_kbd_leds_awake(SystemPageData.kbd_leds_awake)
-                        }
-                    }
-
-                    if SystemPageData.kbd_leds_sleep != -1: SystemToggleInt {
-                        text: @tr("Keyboard Sleep Effect");
-                        checked_int <=> SystemPageData.kbd_leds_sleep;
-                        toggled => {
-                            SystemPageData.cb_kbd_leds_sleep(SystemPageData.kbd_leds_sleep)
-                        }
-                    }
-
-                    if SystemPageData.kbd_leds_boot != -1: SystemToggleInt {
-                        text: @tr("Keyboard Boot Effect");
-                        checked_int <=> SystemPageData.kbd_leds_boot;
-                        toggled => {
-                            SystemPageData.cb_kbd_leds_boot(SystemPageData.kbd_leds_boot)
-                        }
-                    }
-
-                    if SystemPageData.kbd_leds_shutdown != -1: SystemToggleInt {
-                        text: @tr("Keyboard Shutdown Effect");
-                        checked_int <=> SystemPageData.kbd_leds_shutdown;
-                        toggled => {
-                            SystemPageData.cb_kbd_leds_shutdown(SystemPageData.kbd_leds_shutdown)
-                        }
-                    }
-                }
-            }
-
             HorizontalBox {
                 padding: 0px;
                 spacing: 10px;
@@ -561,20 +584,22 @@ export component PageSystem inherits Rectangle {
     }
 
     if root.show_throttle_advanced: Rectangle {
+        background: Palette.background;
         width: 100%;
         height: 100%;
         opacity: 1;
         ScrollView {
             VerticalLayout {
-                padding: 50px;
-                padding-top: 5px;
-                padding-bottom: 100px;
+                alignment: start;
+                padding: 5px;
+                padding-top: 15px;
                 spacing: 10px;
                 GroupBox {
                     VerticalBox {
+                        alignment: start;
                         spacing: 10px;
                         Text {
-                            font-size: 18px;
+                            font-size: 16px;
                             horizontal-alignment: TextHorizontalAlignment.center;
                             vertical-alignment: TextVerticalAlignment.center;
                             text: @tr("Energy Performance Preference linked to Throttle Policy");
@@ -622,9 +647,10 @@ export component PageSystem inherits Rectangle {
 
                 GroupBox {
                     VerticalBox {
+                        alignment: start;
                         spacing: 10px;
                         Text {
-                            font-size: 18px;
+                            font-size: 16px;
                             horizontal-alignment: TextHorizontalAlignment.center;
                             vertical-alignment: TextVerticalAlignment.center;
                             text: @tr("Throttle Policy for power state");
@@ -679,8 +705,8 @@ export component PageSystem inherits Rectangle {
         Button {
             x: root.width - self.width - 6px;
             y: 6px;
-            text: "X";
-            height: 40px;
+            text: "✕";
+            height: 34px;
             clicked => {
                 root.show_throttle_advanced = false;
                 root.show_fade_cover = false;

rog-control-center/ui/widgets/aura_power.slint

@@ -4,8 +4,6 @@ import { PowerZones } from "../types/aura_types.slint";
 
 export component AuraPowerGroup inherits Rectangle {
     min-width: row.min-width;
-    border-radius: 20px;
-    background: Palette.alternate-background;
     opacity: 0.9;
     in-out property <string> group-title;
     in-out property <bool> boot_checked;
@@ -16,6 +14,7 @@ export component AuraPowerGroup inherits Rectangle {
     callback awake_toggled(bool);
     callback sleep_toggled(bool);
     callback shutdown_toggled(bool);
+
     VerticalBox {
         spacing: 10px;
         Text {
@@ -28,7 +27,7 @@ export component AuraPowerGroup inherits Rectangle {
         row := HorizontalBox {
             alignment: LayoutAlignment.center;
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Boot");
                 checked <=> root.boot_checked;
@@ -38,7 +37,7 @@ export component AuraPowerGroup inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Awake");
                 checked <=> root.awake_checked;
@@ -48,7 +47,7 @@ export component AuraPowerGroup inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Sleep");
                 checked <=> root.sleep_checked;
@@ -58,7 +57,7 @@ export component AuraPowerGroup inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Shutdown");
                 checked <=> root.shutdown_checked;
@@ -72,8 +71,6 @@ export component AuraPowerGroup inherits Rectangle {
 
 export component AuraPowerGroupOld inherits Rectangle {
     min-width: row.min-width;
-    border-radius: 20px;
-    background: Palette.alternate-background;
     opacity: 0.9;
     in-out property <int> current_zone;
     in-out property <[int]> zones;
@@ -86,6 +83,7 @@ export component AuraPowerGroupOld inherits Rectangle {
     callback awake_toggled(bool);
     callback sleep_toggled(bool);
     callback selected_zone(int);
+
     VerticalBox {
         spacing: 10px;
         Text {
@@ -109,7 +107,7 @@ export component AuraPowerGroupOld inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Boot");
                 checked <=> root.boot_checked;
@@ -119,7 +117,7 @@ export component AuraPowerGroupOld inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Awake");
                 checked <=> root.awake_checked;
@@ -129,7 +127,7 @@ export component AuraPowerGroupOld inherits Rectangle {
             }
 
             SystemToggleVert {
-                min-width: 96px;
+                min-width: 128px;
                 max-height: 42px;
                 text: @tr("Sleep");
                 checked <=> root.sleep_checked;

rog-control-center/ui/widgets/colour_picker.slint

@@ -1,7 +1,7 @@
 import { Palette, Slider, HorizontalBox, Button, LineEdit } from "std-widgets.slint";
 
 export component ColourSlider inherits VerticalLayout {
-    spacing: 10px;
+    spacing: 12px;
     in-out property <bool> enabled;
     property <string> hex: "#FF0000";
     in-out property <float> c1value <=> c1.value;
@@ -102,9 +102,9 @@ export component ColourSlider inherits VerticalLayout {
         hex = set_hex_from_colour(final_colour);
     }
     Rectangle {
-        height: 32px;
-        border-width: 2px;
-        border-radius: 7px;
+        height: 28px;
+        border-width: 1px;
+        border-radius: 3px;
         border-color: Palette.border;
         // 13 colours
         background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12], base_colours[13], base_colours[14], base_colours[15], base_colours[16], base_colours[17], base_colours[18], base_colours[19], base_colours[20], base_colours[21], base_colours[22], base_colours[23], base_colours[24], base_colours[25], base_colours[26], base_colours[27], base_colours[28], base_colours[29], base_colours[30], base_colours[31], base_colours[32], base_colours[33], base_colours[34], base_colours[35]);
@@ -127,9 +127,9 @@ export component ColourSlider inherits VerticalLayout {
     }
 
     Rectangle {
-        height: 32px;
-        border-width: 2px;
-        border-radius: 7px;
+        height: 28px;
+        border-width: 1px;
+        border-radius: 3px;
         border-color: Palette.border;
         // 11 colours
             background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_saturation[0], base_saturation[1], base_saturation[2], base_saturation[3], base_saturation[4], base_saturation[5], base_saturation[6], base_saturation[7], base_saturation[8], base_saturation[9], base_saturation[10]);
@@ -151,9 +151,9 @@ export component ColourSlider inherits VerticalLayout {
     }
 
     Rectangle {
-        height: 32px;
-        border-width: 2px;
-        border-radius: 7px;
+        height: 28px;
+        border-width: 1px;
+        border-radius: 3px;
         border-color: Palette.border;
         // 11 colours
         background: !root.enabled ? Palette.alternate-background : @linear-gradient(90deg, base_value[0], base_value[1], base_value[2], base_value[3], base_value[4], base_value[5], base_value[6], base_value[7], base_value[8], base_value[9], base_value[10]);
@@ -191,8 +191,8 @@ export component ColourSlider inherits VerticalLayout {
 
         Rectangle {
             width: self.height;
-            border-width: 2px;
-            border-radius: 7px;
+            border-width: 1px;
+            border-radius: 3px;
             border-color: Palette.border;
             background <=> root.colourbox;
         }

rog-control-center/ui/widgets/common.slint

@@ -1,12 +1,11 @@
 import { Palette, VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
 
 export component RogItem inherits Rectangle {
-    background: Palette.control-background;
     border-color: Palette.border;
-    border-width: 3px;
-    border-radius: 10px;
-    min-height: 48px;
-    max-height: 56px;
+    border-width: 1px;
+    border-radius: 2px;
+    min-height: 44px;
+    max-height: 44px;
 }
 
 export component SystemSlider inherits RogItem {
@@ -30,14 +29,14 @@ export component SystemSlider inherits RogItem {
             HorizontalLayout {
                 spacing: 6px;
                 Text {
-                    font-size: 16px;
+                    font-size: 14px;
                     vertical-alignment: TextVerticalAlignment.center;
                     color: Palette.control-foreground;
                     text: root.text;
                 }
 
                 Text {
-                    font-size: 16px;
+                    font-size: 14px;
                     horizontal-alignment: TextHorizontalAlignment.right;
                     vertical-alignment: TextVerticalAlignment.center;
                     color: Palette.control-foreground;
@@ -47,7 +46,7 @@ export component SystemSlider inherits RogItem {
         }
 
         HorizontalBox {
-            padding-right: 20px;
+            padding-right: 10px;
             slider := Slider {
                 enabled: root.enabled;
                 maximum: root.maximum;
@@ -162,7 +161,7 @@ export component SystemToggle inherits RogItem {
             alignment: LayoutAlignment.start;
             padding-left: 10px;
             Text {
-                font-size: 16px;
+                font-size: 14px;
                 vertical-alignment: TextVerticalAlignment.center;
                 color: Palette.control-foreground;
                 text: root.text;
@@ -193,7 +192,7 @@ export component SystemToggleInt inherits RogItem {
             alignment: LayoutAlignment.start;
             padding-left: 10px;
             Text {
-                font-size: 16px;
+                font-size: 14px;
                 vertical-alignment: TextVerticalAlignment.center;
                 color: Palette.control-foreground;
                 text: root.text;
@@ -223,7 +222,7 @@ export component SystemToggleVert inherits RogItem {
         alignment: LayoutAlignment.space-around;
         padding-top: 8px;
         Text {
-            font-size: 16px;
+            font-size: 14px;
             vertical-alignment: TextVerticalAlignment.bottom;
             horizontal-alignment: TextHorizontalAlignment.center;
             color: Palette.control-foreground;
@@ -254,7 +253,7 @@ export component SystemDropdown inherits RogItem {
             alignment: LayoutAlignment.start;
             padding-left: 10px;
             Text {
-                font-size: 16px;
+                font-size: 14px;
                 vertical-alignment: TextVerticalAlignment.center;
                 color: Palette.control-foreground;
                 text: root.text;
@@ -291,11 +290,7 @@ export component PopupNotification {
             border-width: 2px;
             border-color: Palette.accent-background;
             background: Palette.background;
-            // TODO: drop shadows slow
-            // drop-shadow-offset-x: 7px;
-            // drop-shadow-offset-y: 7px;
-            // drop-shadow-color: black;
-            // drop-shadow-blur: 30px;
+
             VerticalLayout {
                 Dialog {
                     VerticalLayout {

rog-control-center/ui/widgets/graph.slint

@@ -191,10 +191,11 @@ export component Graph inherits Rectangle {
             tip := Rectangle {
                 background: Palette.control-foreground;
                 opacity: 0.3;
+                border-radius: 12px;
                 x: final_x_pos();
                 y: final_y_pos();
-                width: label.preferred-width;
-                height: label.preferred-height;
+                width: label.preferred-width + 14px;
+                height: label.preferred-height + 4px;
                 function x_pos() -> length {
                     scale_x_to_graph(n.x) - label.preferred-width - 8px
                 }
@@ -225,7 +226,7 @@ export component Graph inherits Rectangle {
                 //
                 label := Text {
                     color: Palette.accent-foreground;
-                    font-size: 16px;
+                    font-size: 14px;
                     text: "\{Math.floor(n.x / 1px)}c, \{fan_pct()}%";
                 }
             }

rog-control-center/ui/widgets/sidebar.slint

@@ -4,8 +4,6 @@
 import { Palette, HorizontalBox, VerticalBox } from "std-widgets.slint";
 
 component SideBarItem inherits Rectangle {
-    // padding only has effect on layout elements
-    // padding: 10px;
     in property <bool> selected;
     in property <bool> has-focus;
     in-out property <string> text <=> label.text;
@@ -26,18 +24,16 @@ component SideBarItem inherits Rectangle {
             state.opacity: 0.8;
         }
     ]
+
     state := Rectangle {
         opacity: 0;
-        border-width: 2px;
-        border-radius: 10px;
-        border-color: Palette.accent-background;
-        background: Palette.alternate-background;
+        background: Palette.selection-background;
         animate opacity { duration: 150ms; }
-        animate border-width { duration: 150ms; }
         height: l.preferred-height;
     }
 
     l := HorizontalBox {
+        x: 4px;
         y: (parent.height - self.height) / 2;
         spacing: 0px;
         label := Text {
@@ -56,20 +52,16 @@ component SideBarItem inherits Rectangle {
 export component SideBar inherits Rectangle {
     in property <[string]> model: [];
     in property <[bool]> available: [];
-    in property <string> title <=> label.text;
     out property <int> current-item: 0;
     out property <int> current-focused: fs.has-focus ? fs.focused-tab : -1;
 
     // The currently focused tab
-    width: 160px;
+    width: 180px;
     forward-focus: fs;
     accessible-role: tab;
     accessible-delegate-focus: root.current-focused >= 0 ? root.current-focused : root.current-item;
     Rectangle {
-        border-width: 2px;
-        border-color: Palette.accent-background;
-        border-radius: 0px;
-        background: Palette.background.darker(0.2);
+        background: Palette.alternate-background;
         fs := FocusScope {
             key-pressed(event) => {
                 if (event.text == "\n") {
@@ -102,10 +94,19 @@ export component SideBar inherits Rectangle {
 
     VerticalBox {
         spacing: 4px;
+        padding: 0px;
         alignment: start;
-        label := Text {
-            font-size: 16px;
+
+        Image {
+            height: 100px;
+            source: @image-url("../../data/rog-control-center.png");
             horizontal-alignment: center;
+            image-fit: contain;
+        }
+
+        Rectangle {
+            height: 1px;
+            background: Palette.border;
         }
 
         navigation := VerticalLayout {