Updated dialogs and welcome screen

lib/states/message_dialog.rb

@@ -8,24 +8,30 @@ class W3DHub
 
         background 0xee_444444
 
-        stack(width: 1.0, height: 1.0, margin: 128, background: 0xee_222222) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
-            background 0x88_000000
+        flow(width: 1.0, height: 1.0) do
+          flow(fill: true, height: 1.0)
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 0.04, align: :center, color: 0xff_ff8800
+          stack(width: 1.0, height: 1.0, max_width: MAX_PAGE_WIDTH, margin: 128, background: 0xee_222222) do
+            flow(width: 1.0, height: 32, padding: 8) do
+              background 0x88_000000
 
-            tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
-          end
+              image "#{GAME_ROOT_PATH}/media/ui_icons/warning.png", width: 32, align: :center, color: 0xff_ff8800
 
-          stack(width: 1.0, height: 0.78, padding: 16) do
-            para @options[:message], width: 1.0
-          end
+              tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
+            end
 
-          stack(width: 1.0, height: 0.1, padding: 8) do
-            button "Okay", width: 1.0 do
-              pop_state
+            stack(width: 1.0, fill: true, padding: 16) do
+              para @options[:message], width: 1.0
+            end
+
+            stack(width: 1.0, height: 40, padding: 8) do
+              button "Okay", width: 1.0 do
+                pop_state
+              end
             end
           end
+
+          flow(fill: true, height: 1.0)
         end
       end
 

lib/states/prompt_dialog.rb

@@ -8,35 +8,41 @@ class W3DHub
 
         background 0xee_444444
 
-        stack(width: 1.0, height: 1.0, margin: 128, background: 0xee_222222) do
-          flow(width: 1.0, height: 0.1, padding: 8) do
-            background 0x88_000000
+        flow(width: 1.0, height: 1.0) do
+          flow(fill: true, height: 1.0)
 
-            image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 0.04, align: :center, color: 0xff_ff8800
+          stack(width: 1.0, max_width: MAX_PAGE_WIDTH, height: 1.0, margin: 128, background: 0xee_222222) do
+            flow(width: 1.0, height: 32, padding: 8) do
+              background 0x88_000000
 
-            tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
-          end
+              image "#{GAME_ROOT_PATH}/media/ui_icons/question.png", width: 32, align: :center, color: 0xff_ff8800
 
-          stack(width: 1.0, height: 0.78, padding: 16) do
-            para @options[:message], width: 1.0
-            @prompt_entry = edit_line @options[:prefill].to_s, margin_top: 24, width: 1.0, autofocus: true, focus: true, type: @options[:input_type] == :password ? :password : :text
-          end
-
-          flow(width: 1.0, height: 0.1, padding: 8) do
-            button "Cancel", width: 0.25 do
-              pop_state
-              @options[:cancel_callback]&.call(@prompt_entry.value)
+              tagline "<b>#{@options[:title]}</b>", width: 0.9, text_align: :center
             end
 
-            stack(width: 0.5)
+            stack(width: 1.0, fill: true, padding: 16) do
+              para @options[:message], width: 1.0
+              @prompt_entry = edit_line @options[:prefill].to_s, margin_top: 24, width: 1.0, autofocus: true, focus: true, type: @options[:input_type] == :password ? :password : :text
+            end
 
-            @accept_button = button "Accept", width: 0.25 do
-              if @options[:valid_callback]&.call(@prompt_entry.value)
+            flow(width: 1.0, height: 40, padding: 8) do
+              button "Cancel", width: 0.25 do
                 pop_state
-                @options[:accept_callback]&.call(@prompt_entry.value)
+                @options[:cancel_callback]&.call(@prompt_entry.value)
+              end
+
+              stack(fill: true)
+
+              @accept_button = button "Accept", width: 0.25 do
+                if @options[:valid_callback]&.call(@prompt_entry.value)
+                  pop_state
+                  @options[:accept_callback]&.call(@prompt_entry.value)
+                end
               end
             end
           end
+
+          flow(fill: true, height: 1.0)
         end
 
         @prompt_entry.subscribe(:changed) do

lib/states/welcome.rb

@@ -8,8 +8,14 @@ class W3DHub
         background 0x88_252525
 
 
-        @card_container = stack(width: 1.0, height: 1.0, margin: 128, padding: 16) do
-          background 0xff_252525
+        flow(width: 1.0, height: 1.0) do
+          flow(fill: true)
+
+          @card_container = stack(width: 1.0, max_width: MAX_PAGE_WIDTH, height: 1.0, max_height: 720, margin: 128, padding: 16) do
+            background 0xff_252525
+          end
+
+          flow(fill: true)
         end
 
         @card_container.clear do
@@ -18,14 +24,14 @@ class W3DHub
       end
 
       def card_welcome
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "Welcome", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Welcome to the #{I18n.t(:app_name_simple)}"
           caption "The #{I18n.t(:app_name_simple)} is a one-stop shop for your W3D gaming needs, providing game downloads, automatic updating, an integrated server browser, and centralized management of in-game options.", width: 1.0, margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.1) do
-          stack(width: 0.83, height: 1.0) do
+        flow(width: 1.0, height: 40) do
+          stack(fill: true, height: 1.0) do
             link "Skip", border_color_bottom: 0xff_777777 do
               pop_state
             end
@@ -38,7 +44,7 @@ class W3DHub
       end
 
       def card_getting_started
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "Getting Started", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Import C&C Renegade"
           caption "You can import your installed copy of Renegade if it wasn't automatically imported from the Games tab. If you need to procure a copy of Renegade, EA's Origin Store has the Command & Conquer The Ultimate Collection available. We cannot provide Renegade for installation.", width: 1.0, margin_left: 32
@@ -49,8 +55,8 @@ class W3DHub
           caption "Browse our selection of games from the left panel of the Games tab.\n• Interim Apex - Renegade but with hundreds of vehicles and characters.\n• Red Alert: A Path Beyond - DESCRIPTION\n• Tiberian Sun: Reborn - DESCRIPTION\n\nAnd more... Check out the left panel on the Games tab.", width: 1.0, margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.9) do
-          flow(width: 0.83, height: 1.0) do
+        flow(width: 1.0, height: 40) do
+          flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_welcome }
             end
@@ -67,7 +73,7 @@ class W3DHub
       end
 
       def card_communitiy
-        stack(width: 1.0, height: 0.9) do
+        stack(width: 1.0, fill: true) do
           banner "W3D Hub Community", width: 1.0, border_thickness_bottom: 4, border_color_bottom: 0xff_000000
           title "Forums"
           caption "Join our forum community", margin_left: 32
@@ -82,8 +88,8 @@ class W3DHub
           caption "Subscribe to our YouTube channel", margin_left: 32
         end
 
-        flow(width: 1.0, height: 0.1) do
-          flow(width: 0.83, height: 1.0) do
+        flow(width: 1.0, height: 40) do
+          flow(fill: true, height: 1.0) do
             button "< Back" do
               @card_container.clear { card_getting_started }
             end