Fix up header sizing + styling

osu.Game.Tests/Visual/TestCaseMatchInfo.cs

@@ -1,6 +1,8 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
+using System;
+using System.Collections.Generic;
 using NUnit.Framework;
 using osu.Framework.Allocation;
 using osu.Game.Beatmaps;
@@ -13,6 +15,14 @@ namespace osu.Game.Tests.Visual
     [TestFixture]
     public class TestCaseMatchInfo : OsuTestCase
     {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(Info),
+            typeof(HeaderButton),
+            typeof(ReadyButton),
+            typeof(ViewBeatmapButton)
+        };
+
         [BackgroundDependencyLoader]
         private void load(RulesetStore rulesets)
         {

osu.Game/Screens/Multi/Match/Components/Header.cs

@@ -98,7 +98,7 @@ namespace osu.Game.Screens.Multi.Match.Components
             tabStrip.Colour = colours.Yellow;
         }
 
-        private class BeatmapSelectButton : TriangleButton
+        private class BeatmapSelectButton : HeaderButton
         {
             private readonly IBindable<int?> roomIDBind = new Bindable<int?>();
 

osu.Game/Screens/Multi/Match/Components/HeaderButton.cs

@@ -0,0 +1,48 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Screens.Multi.Match.Components
+{
+    public class HeaderButton : TriangleButton
+    {
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            BackgroundColour = OsuColour.FromHex(@"1187aa");
+
+            Triangles.ColourLight = OsuColour.FromHex(@"277b9c");
+            Triangles.ColourDark = OsuColour.FromHex(@"1f6682");
+            Triangles.TriangleScale = 1.5f;
+
+            Add(new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Alpha = 1f,
+                Child = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0.15f,
+                    Blending = BlendingMode.Additive,
+                },
+            });
+        }
+
+        protected override SpriteText CreateText() => new OsuSpriteText
+        {
+            Depth = -1,
+            Origin = Anchor.Centre,
+            Anchor = Anchor.Centre,
+            Font = @"Exo2.0-Light",
+            TextSize = 30,
+        };
+    }
+}

osu.Game/Screens/Multi/Match/Components/Info.cs

@@ -23,8 +23,6 @@ namespace osu.Game.Screens.Multi.Match.Components
 {
     public class Info : Container
     {
-        public const float HEIGHT = 156;
-
         public Action OnStart;
 
         private readonly OsuSpriteText availabilityStatus;
@@ -41,7 +39,7 @@ namespace osu.Game.Screens.Multi.Match.Components
         public Info()
         {
             RelativeSizeAxes = Axes.X;
-            Height = HEIGHT;
+            AutoSizeAxes = Axes.Y;
 
             BeatmapTypeInfo beatmapTypeInfo;
             OsuSpriteText name;
@@ -56,14 +54,16 @@ namespace osu.Game.Screens.Multi.Match.Components
                 },
                 new Container
                 {
-                    RelativeSizeAxes = Axes.Both,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
                     Padding = new MarginPadding { Horizontal = SearchableListOverlay.WIDTH_PADDING },
                     Children = new Drawable[]
                     {
-                        new Container
+                        new FillFlowContainer
                         {
-                            RelativeSizeAxes = Axes.Y,
+                            AutoSizeAxes = Axes.Both,
-                            AutoSizeAxes = Axes.X,
+                            Direction = FillDirection.Vertical,
+                            Spacing = new Vector2(0, 10),
                             Padding = new MarginPadding { Vertical = 20 },
                             Children = new Drawable[]
                             {
@@ -75,12 +75,10 @@ namespace osu.Game.Screens.Multi.Match.Components
                                     {
                                         name = new OsuSpriteText { TextSize = 30 },
                                         availabilityStatus = new OsuSpriteText { TextSize = 14 },
-                                    },
+                                    }
                                 },
                                 new FillFlowContainer
                                 {
-                                    Anchor = Anchor.BottomLeft,
-                                    Origin = Anchor.BottomLeft,
                                     AutoSizeAxes = Axes.Both,
                                     Direction = FillDirection.Vertical,
                                     Children = new Drawable[]
@@ -93,18 +91,25 @@ namespace osu.Game.Screens.Multi.Match.Components
                                         },
                                     }
                                 }
-
                             },
                         },
-                        new ReadyButton
+                        new FillFlowContainer
                         {
-                            Anchor = Anchor.TopRight,
+                            Anchor = Anchor.CentreRight,
-                            Origin = Anchor.TopRight,
+                            Origin = Anchor.CentreRight,
-                            RelativeSizeAxes = Axes.Y,
+                            AutoSizeAxes = Axes.X,
-                            Size = new Vector2(200, 1),
+                            Height = 70,
-                            Padding = new MarginPadding { Vertical = 10 },
+                            Spacing = new Vector2(10, 0),
-                            Action = () => OnStart?.Invoke()
+                            Direction = FillDirection.Horizontal,
-                        },
+                            Children = new Drawable[]
+                            {
+                                new ViewBeatmapButton(),
+                                new ReadyButton
+                                {
+                                    Action = () => OnStart?.Invoke()
+                                }
+                            }
+                        }
                     },
                 },
             };

osu.Game/Screens/Multi/Match/Components/ReadyButton.cs

@@ -1,50 +1,19 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
-using osu.Framework.Allocation;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
+using osuTK;
-using osu.Framework.Graphics.Shapes;
-using osu.Framework.Graphics.Sprites;
-using osu.Game.Graphics;
-using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Screens.Multi.Match.Components
 {
-    public class ReadyButton : TriangleButton
+    public class ReadyButton : HeaderButton
     {
-        [BackgroundDependencyLoader]
+        public ReadyButton()
-        private void load()
         {
-            BackgroundColour = OsuColour.FromHex(@"1187aa");
+            RelativeSizeAxes = Axes.Y;
-
+            Size = new Vector2(200, 1);
-            Triangles.ColourLight = OsuColour.FromHex(@"277b9c");
-            Triangles.ColourDark = OsuColour.FromHex(@"1f6682");
-            Triangles.TriangleScale = 1.5f;
 
             Text = "Start";
-
-            Add(new Container
-            {
-                RelativeSizeAxes = Axes.Both,
-                Alpha = 1f,
-                Child = new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Alpha = 0.15f,
-                    Blending = BlendingMode.Additive,
-                },
-            });
         }
-
-        protected override SpriteText CreateText() => new OsuSpriteText
-        {
-            Depth = -1,
-            Origin = Anchor.Centre,
-            Anchor = Anchor.Centre,
-            Font = @"Exo2.0-Light",
-            TextSize = 30,
-        };
     }
 }

osu.Game/Screens/Multi/Match/Components/ViewBeatmapButton.cs

@@ -0,0 +1,19 @@
+// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.Graphics;
+using osuTK;
+
+namespace osu.Game.Screens.Multi.Match.Components
+{
+    public class ViewBeatmapButton : HeaderButton
+    {
+        public ViewBeatmapButton()
+        {
+            RelativeSizeAxes = Axes.Y;
+            Size = new Vector2(200, 1);
+
+            Text = "View beatmap";
+        }
+    }
+}

osu.Game/Screens/Multi/Match/MatchScreen.cs

@@ -66,19 +66,21 @@ namespace osu.Game.Screens.Multi.Match
 
             Children = new Drawable[]
             {
-                header = new Components.Header
+                new GridContainer
-                {
-                    Depth = -1,
-                },
-                info = new Info
-                {
-                    Margin = new MarginPadding { Top = Components.Header.HEIGHT },
-                    OnStart = onStart
-                },
-                participants = new Participants
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Top = Components.Header.HEIGHT + Info.HEIGHT },
+                    Content = new[]
+                    {
+                        new Drawable[] { header = new Components.Header { Depth = -1 } },
+                        new Drawable[] { info = new Info { OnStart = onStart } },
+                        new Drawable[] { participants = new Participants { RelativeSizeAxes = Axes.Both } },
+                    },
+                    RowDimensions = new[]
+                    {
+                        new Dimension(GridSizeMode.AutoSize),
+                        new Dimension(GridSizeMode.AutoSize),
+                        new Dimension(GridSizeMode.Distributed),
+                    }
                 },
                 new Container
                 {