rogcc sidebar UI updated

rog-control-center/ui/main_window.slint

@@ -21,7 +21,7 @@ export component MainWindow inherits Window {
     title: "ROG Control";
     always-on-top: true;
     default-font-family: "Noto Sans";
-    default-font-size: 14px;
+    default-font-size: 13px;
     default-font-weight: 400;
     icon: @image-url("../data/rog-control-center.png");
     in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
@@ -47,12 +47,12 @@ 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"),
@@ -64,20 +64,12 @@ export component MainWindow inherits Window {
                 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();
                 }
             }
         }
@@ -190,7 +182,7 @@ export component MainWindow inherits Window {
         y: 0px;
         width: root.width;
         height: root.height;
-        
+
         //padding only has effect on layout elements
         //padding: 10px;