From 3cb10627144540fcceecb3adff4274f8c2d57a97 Mon Sep 17 00:00:00 2001
From: Mykola Shevchenko <shevchenko0013@gmail.com>
Date: Tue, 20 Jan 2026 23:34:31 +0200
Subject: [PATCH] rogcc UI updated:

+ anime tag,
+ app settings tab,
+ fans tab
---
 rog-control-center/ui/pages/anime.slint        | 14 ++++++++------
 rog-control-center/ui/pages/app_settings.slint |  3 ++-
 rog-control-center/ui/pages/fans.slint         | 10 +++++++++-
 rog-control-center/ui/widgets/graph.slint      |  7 ++++---
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/rog-control-center/ui/pages/anime.slint b/rog-control-center/ui/pages/anime.slint
index aef04ea2..6edb6cc1 100644
--- a/rog-control-center/ui/pages/anime.slint
+++ b/rog-control-center/ui/pages/anime.slint
@@ -132,8 +132,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 +142,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");
@@ -194,7 +195,7 @@ export component PageAnime inherits Rectangle {
             x: root.width - self.width - 6px;
             y: 6px;
             text: "X";
-            height: 40px;
+            height: 36px;
             clicked => {
                 root.show_builtin_advanced = false;
                 root.show_fade_cover = false;
@@ -206,8 +207,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 +217,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");
@@ -255,7 +257,7 @@ export component PageAnime inherits Rectangle {
             x: root.width - self.width - 6px;
             y: 6px;
             text: "X";
-            height: 40px;
+            height: 36px;
             clicked => {
                 root.show_display_advanced = false;
                 root.show_fade_cover = false;
diff --git a/rog-control-center/ui/pages/app_settings.slint b/rog-control-center/ui/pages/app_settings.slint
index d1a5e417..7acc89cc 100644
--- a/rog-control-center/ui/pages/app_settings.slint
+++ b/rog-control-center/ui/pages/app_settings.slint
@@ -57,7 +57,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";
             }
         }
     }
diff --git a/rog-control-center/ui/pages/fans.slint b/rog-control-center/ui/pages/fans.slint
index fc3f703c..db1d7e3a 100644
--- a/rog-control-center/ui/pages/fans.slint
+++ b/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;
diff --git a/rog-control-center/ui/widgets/graph.slint b/rog-control-center/ui/widgets/graph.slint
index f540436e..509ba894 100644
--- a/rog-control-center/ui/widgets/graph.slint
+++ b/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()}%";
                 }
             }