From f169ed82a3d23b56d6426efc3ffe17634b6fdea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=9C=E8=8C=82=E6=A3=AE?=
 <35170687+dumaosen@users.noreply.github.com>
Date: Fri, 8 Nov 2019 02:01:28 +0800
Subject: [PATCH] UI fix bundle XII (#4114)

* Change arena addon icon

* Categorize UI

* Give small margin

* Better icon size in help

* Several screen fix

* Fix bug

* Better GP line size

* Give more space to texts

* Better size
---
 data/gui/screens/addons_screen.stkgui       |  2 +-
 data/gui/screens/gp_info.stkgui             |  4 +--
 data/gui/screens/help1.stkgui               | 28 ++++++++--------
 data/gui/screens/help2.stkgui               | 28 ++++++++--------
 data/gui/screens/help3.stkgui               | 36 ++++++++++-----------
 data/gui/screens/help4.stkgui               | 12 +++----
 data/gui/screens/help5.stkgui               | 12 +++----
 data/gui/screens/help6.stkgui               | 20 ++++++------
 data/gui/screens/help7.stkgui               | 16 ++++-----
 data/gui/screens/tracks_and_gp.stkgui       | 13 +++++---
 src/guiengine/layout_manager.cpp            |  9 ++++--
 src/states_screens/gp_info_screen.cpp       |  1 +
 src/states_screens/tracks_and_gp_screen.cpp |  2 +-
 13 files changed, 95 insertions(+), 88 deletions(-)

diff --git a/data/gui/screens/addons_screen.stkgui b/data/gui/screens/addons_screen.stkgui
index f7a489581..1f38fcc74 100644
--- a/data/gui/screens/addons_screen.stkgui
+++ b/data/gui/screens/addons_screen.stkgui
@@ -32,7 +32,7 @@
                     I18N="In the addons screen" text="Karts"/>
             <icon-button id="tab_track" width="128" height="128" icon="gui/icons/mode_normal.png"
                     I18N="In the addons screen" text="Tracks"/>
-            <icon-button id="tab_arena" width="128" height="128" icon="gui/icons/mode_normal.png"
+            <icon-button id="tab_arena" width="128" height="128" icon="gui/icons/mode_weapons.png"
                     I18N="In the addons screen" text="Arenas"/>
         </tabs>
 
diff --git a/data/gui/screens/gp_info.stkgui b/data/gui/screens/gp_info.stkgui
index 3582a8d79..ff948a4ed 100644
--- a/data/gui/screens/gp_info.stkgui
+++ b/data/gui/screens/gp_info.stkgui
@@ -6,7 +6,7 @@
         <header id="name" height="8%" width="80%" align="center" text_align="center"/>
         <spacer width="1" height="1%"/>
 
-        <box width="100%" height="40%" padding="10" layout="horizontal-row">
+        <box width="100%" height="36%" padding="10" layout="horizontal-row">
             <!-- Left pane -->
             <div proportion="1" height="100%" layout="vertical-row">
                 <icon-button proportion="1" width="100%" height="100%" id="screenshot" custom_ratio="1.33333"/>
@@ -17,7 +17,7 @@
             </div>
         </box>
         <spacer width="1" height="1%"/>
-        <box width="100%" height="31%" layout="vertical-row">
+        <box width="100%" height="35%" layout="vertical-row">
             <div width="100%" height="fit" layout="horizontal-row" >
                 <label id="ai-text" proportion="1" I18N="In the grand prix info screen" text="AI karts" text_align="right"/>
                 <spacer width="40"/>
diff --git a/data/gui/screens/help1.stkgui b/data/gui/screens/help1.stkgui
index abb97f420..857a866c3 100644
--- a/data/gui/screens/help1.stkgui
+++ b/data/gui/screens/help1.stkgui
@@ -30,52 +30,52 @@
 
                 <spacer width="5" height="1%"/>
                 <div width="50%" height="7%" align="center" layout="horizontal-row">
-                    <icon id="tutorialIcon" width="64" height="64" align="center" icon="gui/icons/tutorial.png"/>
+                    <icon id="tutorialIcon" width="8%" height="100%" align="center" icon="gui/icons/tutorial.png"/>
                     <button id="startTutorial" align="center" text="Start the tutorial"/>
                 </div>
                 <spacer width="5" height="2%"/>
 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/gift.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/gift.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="7" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="Collect blue gift boxes, they will give you powerups."/>
-                    <spacer width="25" height="25"/>
-                    <icon align="center" width="64" height="64" icon="gui/icons/banana.png"/>
-                    <spacer width="25" height="25"/>
+                    <spacer width="3%" height="100%"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/banana.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="3" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="Avoid bananas!"/>
                 </div>
 
                 <div width="100%" proportion="6" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/nitro.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/nitro.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="3" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="Collecting nitro allows you to get speed boosts whenever you wish by pressing the appropriate key or button. You can see your current level of nitro in the gauge at the bottom-right of the race screen."/>
                     </div>
 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/gui_lock.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/gui_lock.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="2" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="If you see a button with a lock like this one, you need to complete a challenge to unlock it."/>
                 </div>
 
                 <div width="100%" proportion="6" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/android/drift.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/android/drift.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="2" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="You can skid by pressing a special key or button. Successive short skids help to take sharp turns; while medium skids will boost your speed, long skids more so. You can't stop turning while skidding, so orient your kart carefully before!"/>
                 </div>
 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/speed.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/speed.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="2" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="You can get a startup boost by pressing the accelerate button at 'Set!', before the race's start."/>
diff --git a/data/gui/screens/help2.stkgui b/data/gui/screens/help2.stkgui
index 5931ac72d..835e5c9f9 100644
--- a/data/gui/screens/help2.stkgui
+++ b/data/gui/screens/help2.stkgui
@@ -32,55 +32,55 @@
                 <spacer height="2%" width="10"/>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_normal.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_normal.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Regular Race: All blows allowed, so collect powerups and use them smartly!"/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_tt.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_tt.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Time Trial: Contains no powerups, so only your driving skills matter!"/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_ftl.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_ftl.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Follow the leader: Run for second place, as the last kart will be disqualified every time the counter hits zero. Beware: going in front of the leader will get you eliminated too!"/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_weapons.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_weapons.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="There are 3 types of battle mode: In 3 Strikes Battle, you need to hit others with weapons until they lose all their lives. In Free-For-All, the player who hits others the most will win in a given hit or time limit. In Capture The Flag, your team needs to bring the flag of the other team to your own flag base, as long as your flag is not captured by the other team."/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_soccer.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_soccer.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Soccer: Use your kart to push the ball into the goal."/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_easter.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_easter.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Egg hunt: Explore tracks to find all hidden eggs."/>
                 </div>
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mode_ghost.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mode_ghost.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Ghost replay: Race against ghost replays in time-trial or egg hunt mode, and record your own!"/>
diff --git a/data/gui/screens/help3.stkgui b/data/gui/screens/help3.stkgui
index 730f64761..74baba4a0 100644
--- a/data/gui/screens/help3.stkgui
+++ b/data/gui/screens/help3.stkgui
@@ -32,58 +32,58 @@
                 <spacer height="2%" width="10"/>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/bubblegum-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/bubblegum-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="BubbleGum - protect yourself with a shield, or use while looking back to leave a sticky pink puddle behind you."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                     <icon align="center" width="64" height="64" icon="models/zipper_collect.png"/>
-                     <spacer width="25" height="25"/>
+                     <icon align="center" width="8%" height="100%" icon="models/zipper_collect.png"/>
+                     <spacer width="3%" height="100%"/>
                      <bubble proportion="1" height="100%" text="Zipper - will give you a strong speed boost. But beware of not losing control of your kart!"/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/cake-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/cake-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             text="Cake - thrown at the closest rival, best on short ranges and long straights. It also affects other karts close to the explosion."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/plunger-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/plunger-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Plunger - throw straight to pull an opponent back, or throw while looking back to make one lose sight."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/bowling-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/bowling-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             text="Bowling Ball - goes straight until it strikes, it can bounce off walls. If you are looking back, it will be thrown backwards."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/parachute-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/parachute-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Parachute - slows down all karts in a better position."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/swap-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/swap-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" text="Swapper - gift boxes are transformed into bananas, nitro cans into bubblegums, and vice versa for a short time."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                     <icon align="center" width="64" height="64" icon="models/rubber_ball-icon.png"/>
-                     <spacer width="25" height="25"/>
+                     <icon align="center" width="8%" height="100%" icon="models/rubber_ball-icon.png"/>
+                     <spacer width="3%" height="100%"/>
                      <bubble proportion="1" height="100%" text="Basket Ball - bounces after the leader, and might squash and slow down karts down on the way."/>
                 </div>
 
                 <div width="100%" proportion="1" layout="horizontal-row">
-                     <icon align="center" width="64" height="64" icon="models/swatter-icon.png"/>
-                     <spacer width="25" height="25"/>
+                     <icon align="center" width="8%" height="100%" icon="models/swatter-icon.png"/>
+                     <spacer width="3%" height="100%"/>
                      <bubble proportion="1" height="100%" text="Swatter - will squash karts close by, slowing them down. Can also be used to remove parachutes and bombs."/>
                 </div>
 
diff --git a/data/gui/screens/help4.stkgui b/data/gui/screens/help4.stkgui
index 4ffc17b68..8bb27db59 100644
--- a/data/gui/screens/help4.stkgui
+++ b/data/gui/screens/help4.stkgui
@@ -32,24 +32,24 @@
                 <spacer height="2%" width="10"/>                
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/anchor-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/anchor-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Anchor - slows down the kart suddenly."/>
                 </div>
                 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="models/parachute-icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="models/parachute-icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Parachute - slows down the kart, more progressively than the anchor. The faster you go, the stronger it slows you down."/>
                 </div>
                 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/bomb_icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/bomb_icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Bomb - detonates after some amount of time, throwing the kart up in the air. Bump into another kart to transfer the bomb to it."/>
diff --git a/data/gui/screens/help5.stkgui b/data/gui/screens/help5.stkgui
index 620fbd709..cbe29cc6a 100644
--- a/data/gui/screens/help5.stkgui
+++ b/data/gui/screens/help5.stkgui
@@ -32,24 +32,24 @@
                 <spacer height="2%" width="10"/>
                 
                 <div width="100%" proportion="5" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/challenge.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/challenge.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="This icon on the minimap shows the available challenges you've not completed. In the top-right of the screen, it also tells you how many points you currently have. Complete as many challenges as possible, and Nolok will accept to race against you. Win to liberate Gnu!"/>
                 </div>
                 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/cup_gold.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/cup_gold.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="When you complete a challenge, you get a cup. Each cup is worth several points. The higher the difficulty you completed the challenge in, the better the cup and the more points it is worth."/>
                 </div>
                 
                 <div width="100%" proportion="3" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mystery_unlock.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mystery_unlock.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="When you get the number of points indicated below this icon, you'll be gifted a surprise. There are several to collect."/>
diff --git a/data/gui/screens/help6.stkgui b/data/gui/screens/help6.stkgui
index 51779604e..6afbdfbaf 100644
--- a/data/gui/screens/help6.stkgui
+++ b/data/gui/screens/help6.stkgui
@@ -32,40 +32,40 @@
                 <spacer height="2%" width="10"/>                
 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/mass.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/mass.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Mass - there are three classes of karts, depending on their mass: light, medium and heavy. Heavier karts are less affected by parachutes and are more resistant to explosions."/>
                 </div>
                 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/power.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/power.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Acceleration - especially useful at start, after an accident, or in tracks with a lot of sharp curves. The lighter the kart, the faster it accelerates, especially at low speeds."/>
                 </div>
                 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/speed.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/speed.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Max speed - the higher it is, the faster the kart can go. Especially useful in tracks with straight lines and gentle curves. Heavier karts have a higher top speed."/>
                 </div>
 
                 <div width="100%" proportion="3" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/nitro.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/nitro.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Nitro consumption - the lower it is, the more speed you can get from a can of nitro. The lighter the kart, the lower its nitro consumption."/>
                 </div>
 
                 <div width="100%" proportion="4" layout="horizontal-row">
-                    <icon align="center" width="128" height="128" icon="gui/icons/slipstream_icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="12%" height="100%" icon="gui/icons/slipstream_icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%" word_wrap="true"
                             I18N="In the help menu"
                             text="If you follow closely another kart for a few seconds, you'll get a slipstream speed bonus when you overtake it. The lighter your kart, the easier it is."/>
diff --git a/data/gui/screens/help7.stkgui b/data/gui/screens/help7.stkgui
index 4e91fd91c..943eccd67 100644
--- a/data/gui/screens/help7.stkgui
+++ b/data/gui/screens/help7.stkgui
@@ -29,16 +29,16 @@
             <box width="80%" height="100%" layout="vertical-row">
                 <label align="center" I18N="In the help menu" text="SuperTuxKart can be played in multiplayer mode online...:"/>
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/networking_icon.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/networking_icon.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="First, select the 'online' icon in the main menu. Choose either local networking, or global networking (requires internet to be enabled in the options). Then, you can either create your own server with custom options, or search among a list of existing servers to join. Some of them are recommended servers with optionally ranked races."/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/crown.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/crown.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="Once in a server, a race will begin once its owner (symbolized with the crown) decides so. Official servers may auto-start races only when there are enough players. Then, you can choose your kart and vote for the next track to race on. An addon kart or track is allowed only if it exists on all joined players and the server."/>
@@ -47,16 +47,16 @@
                 <label align="center" I18N="In the help menu" text="... or on the same computer:"/>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/options_input.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/options_input.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="First, you will need several input devices. Use the input configuration screen to set them up. Multiple gamepads or joysticks are ideal: on keyboard(s), each player will need a different set of keys, and most keyboards are not appropriate for multiplayer because they don't support multiple simultaneous keypresses."/>
                 </div>
 
                 <div width="100%" proportion="2" layout="horizontal-row">
-                    <icon align="center" width="64" height="64" icon="gui/icons/random_kart.png"/>
-                    <spacer width="25" height="25"/>
+                    <icon align="center" width="8%" height="100%" icon="gui/icons/random_kart.png"/>
+                    <spacer width="3%" height="100%"/>
                     <bubble proportion="1" height="100%"
                             I18N="In the help menu"
                             text="When input devices are configured, select the 'multiplayer' icon in the main menu. Each player can press the 'fire' key of their gamepad or keyboard to join the game, and use their input device to select their kart. The game continues when everyone selected their kart. Note that the mouse may not be used for this operation."/>
diff --git a/data/gui/screens/tracks_and_gp.stkgui b/data/gui/screens/tracks_and_gp.stkgui
index fce055629..3fa1bdf67 100644
--- a/data/gui/screens/tracks_and_gp.stkgui
+++ b/data/gui/screens/tracks_and_gp.stkgui
@@ -7,21 +7,24 @@
                 align="center" text_align="center" />
         <spacer width="100%" height="1%" />
         
-        <div width="100%" proportion="1" layout="horizontal-row" >
+        <div width="100%" proportion="3" layout="horizontal-row" >
             <box width="80%" height="100%" layout="vertical-row" padding="0">
                 <scrollable_toolbar id="gps" x="1%" y="1%" width="98%" height="98%" align="center" label_location="each"
-                                    square_items="true" child_width="175" child_height="120" />
+                                    square_items="true" child_width="165" child_height="120" />
             </box>
             <spacer width="2%" height="20" />
-            <icon-button id="rand-gp" width="18%" height="80%" icon="gui/icons/gp_new.png" align="center"
-                    I18N="In the track and grand prix selection screen" text="Random Grand Prix"/>
+            <box width="18%" height="100%" layout="vertical-row">
+                <icon-button id="rand-gp" width="100%" proportion="1" icon="gui/icons/gp_new.png" align="center"
+                        I18N="In the track and grand prix selection screen" text="Random Grand Prix"/>
+                <spacer width="20" height="1f" />
+            </box>
         </div>
 
         <header width="8%" I18N="In the track and grand prix selection screen" text="All Tracks"
                 align="center" text_align="center" />
         <spacer width="100%" height="1%" />
 
-        <box proportion="3" width="100%" layout="vertical-row" padding="1">
+        <box proportion="8" width="100%" layout="vertical-row" padding="1">
             <ribbon_grid id="tracks" proportion="1" width="100%" square_items="true"
                 label_location="bottom" align="center" max_rows="3"
                 child_width="160" child_height="120" />
diff --git a/src/guiengine/layout_manager.cpp b/src/guiengine/layout_manager.cpp
index 1d1c3ecb3..ad0b9c3e2 100644
--- a/src/guiengine/layout_manager.cpp
+++ b/src/guiengine/layout_manager.cpp
@@ -247,7 +247,8 @@ void LayoutManager::readCoords(Widget* self)
         //Add padding to <box> elements
         if (self->getType() == WTYPE_DIV && self->m_show_bounding_box)
         {
-            int padding = GUIEngine::getFontHeight() / 2;
+            int padding = std::min(irr_driver->getActualScreenSize().Height,
+                                   irr_driver->getActualScreenSize().Width)  / 36.0f;
             if (self->m_properties[PROP_DIV_PADDING].length() > 0)
                 padding = atoi(self->m_properties[PROP_DIV_PADDING].c_str());
             child_max_height += padding * 2;
@@ -322,7 +323,8 @@ void LayoutManager::applyCoords(Widget* self, AbstractTopLevelContainer* topLeve
     
     if (parent != NULL && parent->getType() == WTYPE_DIV && parent->m_show_bounding_box)
     {
-        int padding = GUIEngine::getFontHeight() / 2;
+        int padding = std::min(irr_driver->getActualScreenSize().Height,
+                               irr_driver->getActualScreenSize().Width)  / 36.0f;
         if (parent->m_properties[PROP_DIV_PADDING].length() > 0)
             padding = atoi(parent->m_properties[PROP_DIV_PADDING].c_str());
             
@@ -448,7 +450,8 @@ void LayoutManager::doCalculateLayout(PtrVector<Widget>& widgets, AbstractTopLev
 
         if (parent != NULL && parent->getType() == WTYPE_DIV && parent->m_show_bounding_box)
         {
-            int padding = GUIEngine::getFontHeight() / 2;
+            int padding = std::min(irr_driver->getActualScreenSize().Height,
+                                   irr_driver->getActualScreenSize().Width)  / 36.0f;
             if (parent->m_properties[PROP_DIV_PADDING].length() > 0)
                 padding = atoi(parent->m_properties[PROP_DIV_PADDING].c_str());
             
diff --git a/src/states_screens/gp_info_screen.cpp b/src/states_screens/gp_info_screen.cpp
index 54154d7a3..6b45b91d7 100644
--- a/src/states_screens/gp_info_screen.cpp
+++ b/src/states_screens/gp_info_screen.cpp
@@ -150,6 +150,7 @@ void GPInfoScreen::beforeAddingWidget()
         int id_continue_button = ribbonButtons->findItemNamed("continue");
         ribbonButtons->setItemVisible(id_continue_button, true);
         ribbonButtons->setLabel(id_continue_button, _("Reload"));
+        getWidget<IconButtonWidget>("continue")->setImage("gui/icons/restart.png");
     }
 }
 
diff --git a/src/states_screens/tracks_and_gp_screen.cpp b/src/states_screens/tracks_and_gp_screen.cpp
index e24c5497b..63d3e6fac 100644
--- a/src/states_screens/tracks_and_gp_screen.cpp
+++ b/src/states_screens/tracks_and_gp_screen.cpp
@@ -285,7 +285,7 @@ void TracksAndGPScreen::buildTrackList()
     }
 
     tracks_widget->addItem(_("Random Track"), "random_track",
-                           "", 0 /* no badge */,
+                           "/gui/icons/track_random.png", 0 /* no badge */,
                            IconButtonWidget::ICON_PATH_TYPE_RELATIVE);
 
     tracks_widget->updateItemDisplay();