From 37677052c186a3a0f6e6e0a1c6f842d4e7eeadeb Mon Sep 17 00:00:00 2001
From: Zephyron <zephyron@citron-emu.org>
Date: Sat, 25 Jan 2025 13:50:48 +1000
Subject: [PATCH] feat: implement modern dark theme and loading screen redesign

- Redesign loading screen progress bar with gradient animation
- Update loading screen typography using Segoe UI
- Add comprehensive dark theme styling to main window
- Modernize menu, toolbar, and dock widget appearances
---
 src/citron/loading_screen.ui | 50 +++++++++++----------
 src/citron/main.ui           | 85 ++++++++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+), 22 deletions(-)

diff --git a/src/citron/loading_screen.ui b/src/citron/loading_screen.ui
index 820b47536..cb0d3659e 100644
--- a/src/citron/loading_screen.ui
+++ b/src/citron/loading_screen.ui
@@ -70,16 +70,19 @@
         </property>
         <item alignment="Qt::AlignHCenter|Qt::AlignBottom">
          <widget class="QLabel" name="stage">
+          <property name="styleSheet">
+           <string notr="true">background-color: transparent;
+color: #E0E0E0;
+font-family: 'Segoe UI', Arial;
+font-size: 24px;
+font-weight: 500;</string>
+          </property>
           <property name="sizePolicy">
            <sizepolicy hsizetype="Minimum" vsizetype="Minimum">
             <horstretch>0</horstretch>
             <verstretch>0</verstretch>
            </sizepolicy>
           </property>
-          <property name="styleSheet">
-           <string notr="true">background-color: black; color: white;
-font: 75 20pt &quot;Arial&quot;;</string>
-          </property>
           <property name="text">
            <string>Loading Shaders 387 / 1628</string>
           </property>
@@ -87,28 +90,28 @@ font: 75 20pt &quot;Arial&quot;;</string>
         </item>
         <item alignment="Qt::AlignHCenter|Qt::AlignTop">
          <widget class="QProgressBar" name="progress_bar">
-          <property name="sizePolicy">
-           <sizepolicy hsizetype="Expanding" vsizetype="Preferred">
-            <horstretch>0</horstretch>
-            <verstretch>0</verstretch>
-           </sizepolicy>
-          </property>
           <property name="minimumSize">
            <size>
-            <width>500</width>
-            <height>40</height>
+            <width>600</width>
+            <height>8</height>
+           </size>
+          </property>
+          <property name="maximumSize">
+           <size>
+            <width>800</width>
+            <height>8</height>
            </size>
           </property>
           <property name="styleSheet">
            <string notr="true">QProgressBar {
-color: white;
-border: 2px solid white;
-outline-color: black;
-border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border: none;
+    border-radius: 4px;
 }
 QProgressBar::chunk {
-background-color: white;
-border-radius: 15px;
+    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
+                              stop:0 #FFD700, stop:1 #FFA500);
+    border-radius: 4px;
 }</string>
           </property>
           <property name="value">
@@ -124,13 +127,16 @@ border-radius: 15px;
         </item>
         <item alignment="Qt::AlignHCenter|Qt::AlignTop">
          <widget class="QLabel" name="value">
+          <property name="styleSheet">
+           <string notr="true">background-color: transparent;
+color: #BBBBBB;
+font-family: 'Segoe UI', Arial;
+font-size: 16px;
+font-weight: 400;</string>
+          </property>
           <property name="toolTip">
            <string notr="true"/>
           </property>
-          <property name="styleSheet">
-           <string notr="true">background-color: black; color: white;
-font: 75 15pt &quot;Arial&quot;;</string>
-          </property>
           <property name="text">
            <string>Estimated Time 5m 4s</string>
           </property>
diff --git a/src/citron/main.ui b/src/citron/main.ui
index cd893c757..573f02af4 100644
--- a/src/citron/main.ui
+++ b/src/citron/main.ui
@@ -23,6 +23,91 @@
   <property name="dockNestingEnabled">
    <bool>true</bool>
   </property>
+  <property name="styleSheet">
+   <string notr="true">QMainWindow {
+    background-color: #2D2D2D;
+}
+
+QMenuBar {
+    background-color: #333333;
+    color: #E0E0E0;
+    border-bottom: 1px solid #404040;
+    padding: 2px;
+}
+
+QMenuBar::item {
+    padding: 4px 8px;
+    background: transparent;
+    border-radius: 4px;
+}
+
+QMenuBar::item:selected {
+    background: #404040;
+}
+
+QMenuBar::item:pressed {
+    background: #505050;
+}
+
+QMenu {
+    background-color: #333333;
+    border: 1px solid #404040;
+    padding: 4px;
+}
+
+QMenu::item {
+    padding: 6px 24px 6px 12px;
+    color: #E0E0E0;
+    border-radius: 4px;
+}
+
+QMenu::item:selected {
+    background-color: #404040;
+}
+
+QMenu::separator {
+    height: 1px;
+    background: #404040;
+    margin: 4px 0px;
+}
+
+QStatusBar {
+    background-color: #333333;
+    color: #E0E0E0;
+    border-top: 1px solid #404040;
+}
+
+QDockWidget {
+    border: 1px solid #404040;
+    titlebar-close-icon: url(close.png);
+}
+
+QDockWidget::title {
+    background: #333333;
+    padding: 6px;
+    color: #E0E0E0;
+}
+
+QToolBar {
+    background: #333333;
+    border: none;
+    spacing: 3px;
+    padding: 3px;
+}
+
+QToolButton {
+    border-radius: 4px;
+    padding: 4px;
+}
+
+QToolButton:hover {
+    background-color: #404040;
+}
+
+QToolButton:pressed {
+    background-color: #505050;
+}</string>
+  </property>
   <widget class="QWidget" name="centralwidget">
    <layout class="QHBoxLayout" name="horizontalLayout">
     <property name="leftMargin">