From 56dc8337afba82494c3ffad82a1eed54711b4d09 Mon Sep 17 00:00:00 2001
From: omigamedev <omarator@gmail.com>
Date: Mon, 19 Jan 2026 17:27:08 +0100
Subject: [PATCH] Fix RmlUi CSS compatibility issues in store, settings, and
 music apps

- Replace linear-gradient with solid colors (not supported in RmlUi)
- Replace border shorthand with border-width/border-color properties
- Replace display:grid with flexbox in music quick-access cards
- Remove unsupported transition property
- Fix border-radius: 50% to use 9999px in theme.rcss
- Fix third-party app icon/label sizes to match system apps (72x72px, 16px)
- Replace data-model bindings with static values in settings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/main/assets/apps/home/home.rml         | 13 +++++-----
 src/main/assets/apps/music/music.rml       | 25 ++++++++++--------
 src/main/assets/apps/settings/settings.rml | 30 ++++++++++------------
 src/main/assets/apps/store/store.rml       |  6 ++---
 src/main/assets/ui/theme.rcss              |  2 +-
 5 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/main/assets/apps/home/home.rml b/src/main/assets/apps/home/home.rml
index b42c94b..1cc988e 100644
--- a/src/main/assets/apps/home/home.rml
+++ b/src/main/assets/apps/home/home.rml
@@ -43,30 +43,31 @@
             width: 100%;
         }
 
+        /* Third-party apps use same sizing as system apps */
         #third-party-apps .app-icon {
             width: 25%;
             box-sizing: border-box;
         }
 
         #third-party-apps .app-icon-image {
-            width: 56px;
-            height: 56px;
-            border-radius: 14px;
+            width: 72px;
+            height: 72px;
+            border-radius: 18px;
             display: flex;
             align-items: center;
             justify-content: center;
-            margin: 0 auto 8px auto;
+            margin: 0 auto 12px auto;
             cursor: pointer;
         }
 
         #third-party-apps .app-icon-image:hover {
-            opacity: 0.8;
+            transform: scale(1.05);
         }
 
         #third-party-apps .app-icon-label {
             display: block;
             text-align: center;
-            font-size: 12px;
+            font-size: 16px;
             color: #FFFFFF;
         }
     </style>
diff --git a/src/main/assets/apps/music/music.rml b/src/main/assets/apps/music/music.rml
index 46b1e97..501cc4b 100644
--- a/src/main/assets/apps/music/music.rml
+++ b/src/main/assets/apps/music/music.rml
@@ -25,14 +25,15 @@
             align-items: center;
             padding: 8px 16px;
             background-color: #282828;
-            border-top: 1px solid #333333;
+            border-top-width: 1px;
+            border-top-color: #333333;
         }
 
         .mini-player-art {
             width: 48px;
             height: 48px;
             border-radius: 4px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background-color: #667eea;
             margin-right: 12px;
             display: flex;
             align-items: center;
@@ -145,13 +146,14 @@
 
         /* Quick Access Cards */
         .quick-access {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
+            display: flex;
+            flex-wrap: wrap;
             gap: 8px;
             padding: 0 16px;
         }
 
         .quick-card {
+            width: 48%;
             display: flex;
             align-items: center;
             background-color: #282828;
@@ -228,7 +230,8 @@
             display: flex;
             height: 56px;
             background-color: #1E1E1E;
-            border-top: 1px solid #282828;
+            border-top-width: 1px;
+            border-top-color: #282828;
         }
 
         .nav-item {
@@ -256,12 +259,12 @@
         }
 
         /* Color palette for album arts */
-        .bg-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-        .bg-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
-        .bg-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
-        .bg-gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
-        .bg-gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
-        .bg-gradient-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
+        .bg-gradient-1 { background-color: #667eea; }
+        .bg-gradient-2 { background-color: #f093fb; }
+        .bg-gradient-3 { background-color: #4facfe; }
+        .bg-gradient-4 { background-color: #43e97b; }
+        .bg-gradient-5 { background-color: #fa709a; }
+        .bg-gradient-6 { background-color: #a8edea; }
         .bg-solid-purple { background-color: #7c3aed; }
         .bg-solid-red { background-color: #dc2626; }
         .bg-solid-green { background-color: #16a34a; }
diff --git a/src/main/assets/apps/settings/settings.rml b/src/main/assets/apps/settings/settings.rml
index 0d80435..1142bab 100644
--- a/src/main/assets/apps/settings/settings.rml
+++ b/src/main/assets/apps/settings/settings.rml
@@ -43,7 +43,8 @@
         }
 
         .settings-item + .settings-item {
-            border-top: 1px solid #333333;
+            border-top-width: 1px;
+            border-top-color: #333333;
         }
 
         .settings-icon {
@@ -148,7 +149,7 @@
         }
     </style>
 </head>
-<body class="settings-screen" data-model="settings">
+<body class="settings-screen">
     <!-- App Bar -->
     <div class="app-bar">
         <div class="app-bar-nav btn-icon" onclick="goBack()"><img src="../../icons/back.tga" style="width: 32px; height: 32px;"/></div>
@@ -162,8 +163,8 @@
         <div class="user-card">
             <div class="user-avatar">U</div>
             <div class="user-info">
-                <div class="user-name">{{ user_name }}</div>
-                <div class="user-email">{{ user_email }}</div>
+                <div class="user-name">User</div>
+                <div class="user-email">user@mosis.local</div>
             </div>
             <span class="settings-action">></span>
         </div>
@@ -175,10 +176,9 @@
                 <div class="settings-icon">W</div>
                 <div class="settings-content">
                     <div class="settings-title">Wi-Fi</div>
-                    <div class="settings-subtitle" data-if="wifi">Connected to {{ wifi_network }}</div>
-                    <div class="settings-subtitle" data-if="!wifi">Off</div>
+                    <div class="settings-subtitle">Connected to MosisNetwork</div>
                 </div>
-                <div class="settings-toggle" data-class-active="wifi" data-event-click="wifi = !wifi">
+                <div class="settings-toggle active">
                     <div class="settings-toggle-thumb"></div>
                 </div>
             </div>
@@ -186,10 +186,9 @@
                 <div class="settings-icon">B</div>
                 <div class="settings-content">
                     <div class="settings-title">Bluetooth</div>
-                    <div class="settings-subtitle" data-if="bluetooth">On</div>
-                    <div class="settings-subtitle" data-if="!bluetooth">Off</div>
+                    <div class="settings-subtitle">Off</div>
                 </div>
-                <div class="settings-toggle" data-class-active="bluetooth" data-event-click="bluetooth = !bluetooth">
+                <div class="settings-toggle">
                     <div class="settings-toggle-thumb"></div>
                 </div>
             </div>
@@ -198,7 +197,7 @@
                 <div class="settings-content">
                     <div class="settings-title">Airplane Mode</div>
                 </div>
-                <div class="settings-toggle" data-class-active="airplane_mode" data-event-click="airplane_mode = !airplane_mode">
+                <div class="settings-toggle">
                     <div class="settings-toggle-thumb"></div>
                 </div>
             </div>
@@ -235,7 +234,7 @@
                 <div class="settings-icon">B</div>
                 <div class="settings-content">
                     <div class="settings-title">Battery</div>
-                    <div class="settings-subtitle">{{ battery_percent }}% - {{ battery_remaining }}</div>
+                    <div class="settings-subtitle">85% - 4h 30m remaining</div>
                 </div>
                 <span class="settings-action">></span>
             </div>
@@ -243,7 +242,7 @@
                 <div class="settings-icon">S</div>
                 <div class="settings-content">
                     <div class="settings-title">Storage</div>
-                    <div class="settings-subtitle">{{ storage_used }}</div>
+                    <div class="settings-subtitle">32 GB of 128 GB used</div>
                 </div>
                 <span class="settings-action">></span>
             </div>
@@ -272,10 +271,9 @@
                 <div class="settings-icon">L</div>
                 <div class="settings-content">
                     <div class="settings-title">Location</div>
-                    <div class="settings-subtitle" data-if="location">On - High accuracy</div>
-                    <div class="settings-subtitle" data-if="!location">Off</div>
+                    <div class="settings-subtitle">On - High accuracy</div>
                 </div>
-                <div class="settings-toggle" data-class-active="location" data-event-click="location = !location">
+                <div class="settings-toggle active">
                     <div class="settings-toggle-thumb"></div>
                 </div>
             </div>
diff --git a/src/main/assets/apps/store/store.rml b/src/main/assets/apps/store/store.rml
index 7b99c20..57f1df4 100644
--- a/src/main/assets/apps/store/store.rml
+++ b/src/main/assets/apps/store/store.rml
@@ -67,7 +67,7 @@
         .featured-banner {
             margin: 0 16px 16px 16px;
             height: 160px;
-            background: linear-gradient(135deg, #BB86FC 0%, #6200EE 100%);
+            background-color: #7C3AED;
             border-radius: 16px;
             padding: 20px;
             display: flex;
@@ -226,7 +226,8 @@
         .install-btn.installed {
             background-color: transparent;
             color: #BB86FC;
-            border: 1px solid #BB86FC;
+            border-width: 1px;
+            border-color: #BB86FC;
         }
 
         /* Category Chips */
@@ -374,7 +375,6 @@
             height: 100%;
             background-color: #BB86FC;
             border-radius: 2px;
-            transition: width 0.3s ease;
         }
 
         /* Toast */
diff --git a/src/main/assets/ui/theme.rcss b/src/main/assets/ui/theme.rcss
index 6df8f3b..43aab1b 100644
--- a/src/main/assets/ui/theme.rcss
+++ b/src/main/assets/ui/theme.rcss
@@ -227,7 +227,7 @@ body {
 }
 
 .rounded-full {
-    border-radius: 50%;
+    border-radius: 9999px;
 }
 
 /* ============== Screen Structure ============== */