From 3262745771a0af520f855c5cbe368cea8f5a1c5e Mon Sep 17 00:00:00 2001
From: Candifloss <candifloss@candifloss.cc>
Date: Tue, 4 Nov 2025 12:55:40 +0530
Subject: [PATCH] Style popup UI - Adjust color, size, space, padding,
 position, etc.

---
 widget/ui/widget-popup.slint | 84 +++++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 35 deletions(-)

diff --git a/widget/ui/widget-popup.slint b/widget/ui/widget-popup.slint
index 8e2851b..47cf238 100644
--- a/widget/ui/widget-popup.slint
+++ b/widget/ui/widget-popup.slint
@@ -1,59 +1,60 @@
 export component MainWindow inherits Window {
     always-on-top: true;
     no-frame: true;
-    width: 320px;
-    height: 110px;
+    width: 300px;
+    height: 120px;
     background: transparent;
 
     weather_popup := Rectangle {
         width: 100%;
         height: 100%;
-        padding: 10px;                  // keep content inset from edges
-        border-radius: 14px;
-        border-color: #ffffff22;
-        border-width: 1px;
-        background: @linear-gradient(135deg, #ffffff18, #7e7e7e24);
-        drop-shadow-blur: 10px;
+        border-radius: 12px;
+        background: @linear-gradient(160deg, #246a8ac9, #c5edff75);
+        drop-shadow-blur: 15px;
         drop-shadow-color: #00000066;
 
         VerticalLayout {
-            spacing: 6px;
+            spacing: 2px;               // Consistent vertical spacing
             horizontal-stretch: 1.0;
-            padding: 10px;
+            padding: 12px;                  // Consistent padding throughout
 
             /* Top: City */
             Text {
-                text: "Los Angeles";
+                text: "Province of Turin";
                 font-size: 14px;
                 color: #fff;
                 font-family: "IosevkaTermSlab Nerd Font Mono";
                 horizontal-alignment: TextHorizontalAlignment.left;
+                height: 18px;           // Fixed height for consistent spacing
+                font-weight: 600;
             }
 
             /* Middle: icon on left, temp on right */
-            HorizontalLayout {
-                spacing: 8px;
+            HorizontalLayout {  
                 horizontal-stretch: 1.0;
+                height: 46px;           // Fixed height for main content area
+                padding: 0px;
 
-                /* Icon (fixed size) */
+                /* Icon */
                 Text {
                     text: "";
                     font-family: "IosevkaTermSlab Nerd Font Mono";
                     font-size: 40px;
                     color: #fff;
                     vertical-alignment: TextVerticalAlignment.center;
+                    width: 46px;        // Fixed width for consistent alignment
                 }
 
-                /* flexible spacer pushes the temperature group to the right */
+                /* Flexible spacer to help with alignment */
                 Rectangle {
                     horizontal-stretch: 1.0;
                     background: transparent;
                 }
 
-                /* Temperature group (numeric + degree/unit) */
+                /* Temperature group */
                 HorizontalLayout {
-                    spacing: 6px;
-                    //vertical-alignment: TextVerticalAlignment.center;
+                    spacing: 4px;       // Tighter spacing for temperature elements
+                    padding: 0px;
 
                     Text {
                         text: "124.4";
@@ -61,58 +62,71 @@ export component MainWindow inherits Window {
                         font-size: 40px;
                         color: #fff;
                         vertical-alignment: TextVerticalAlignment.center;
+                        font-weight: 900;
                     }
 
                     VerticalLayout {
-                        spacing: -6px; // bring degree and unit closer to the number
-                        // keep the combined height near the numeric height
+                        height: 46px;   // Match temperature text height
+                        padding: 0px;
+                        spacing: 0px;
+                        
                         Text {
-                            text: "°";
+                            text: "o";
                             font-size: 20px;
                             color: #fff;
-                            horizontal-alignment: TextHorizontalAlignment.center;
+                            font-family: "IosevkaTermSlab Nerd Font Mono";
+                            horizontal-alignment: TextHorizontalAlignment.left;
                             vertical-alignment: TextVerticalAlignment.bottom;
+                            height: 20px;
+                            font-weight: 800;
                         }
                         Text {
                             text: "F";
                             font-size: 18px;
                             color: #fff;
-                            horizontal-alignment: TextHorizontalAlignment.center;
+                            font-family: "IosevkaTermSlab Nerd Font Mono";
+                            horizontal-alignment: TextHorizontalAlignment.left;
                             vertical-alignment: TextVerticalAlignment.top;
+                            height: 20px;
+                            font-weight: 800;
                         }
                     }
                 }
             }
 
-            // Bottom: summary (left) + description (right).
+            /* Bottom: summary + description */
             HorizontalLayout {
-                spacing: 10px;
+                spacing: 8px;           
                 horizontal-stretch: 1.0;
-                height: 28px;                 
+                height: 32px;           
+                padding: 0px;
 
-                // Summary (left) — single prominent line, vertically centered
+                /* Summary */
                 Text {
                     text: "Thunderstorm";
-                    font-size: 22px;
+                    font-size: 18px;    
                     color: #fff;
                     font-family: "IosevkaTermSlab Nerd Font Mono";
-                    vertical-alignment: TextVerticalAlignment.center;
+                    vertical-alignment: TextVerticalAlignment.top;
                     horizontal-alignment: TextHorizontalAlignment.left;
-                    // width can be fixed or let text size itself
+                    width: 40%;         // Fixed percentage width for consistent layout
+                    font-weight: 800;
                 }
 
-                // Description (right) — can take remaining width and occupy same height
+                /* Description */
                 Text {
                     text: "Thunderstorm with heavy drizzle";
-                    font-size: 13px;
+                    font-size: 12px;    
                     color: #ffffffcc;
                     font-family: "IosevkaTermSlab Nerd Font Mono";
                     horizontal-alignment: TextHorizontalAlignment.left;
-                    vertical-alignment: TextVerticalAlignment.center;
+                    vertical-alignment: TextVerticalAlignment.bottom;
                     horizontal-stretch: 1.0;
-                    wrap: word-wrap;               
+                    wrap: word-wrap;
+                    height: 100%;
+                    font-weight: 600;
                 }
             }
         }
     }
-}
+}
\ No newline at end of file