Merge pull request #15020 from bdach/settings-sidebar-redesign

Update settings sidebar colour scheme and general appearance

osu.Game/Overlays/Settings/Sections/Input/KeyBindingRow.cs

@@ -78,7 +78,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
         private RealmContextFactory realmFactory { get; set; }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
@@ -101,7 +101,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
                     EdgeEffect = new EdgeEffectParameters
                     {
                         Radius = 2,
-                        Colour = colours.YellowDark.Opacity(0),
+                        Colour = colourProvider.Highlight1.Opacity(0),
                         Type = EdgeEffectType.Shadow,
                         Hollow = true,
                     },
@@ -110,13 +110,12 @@ namespace osu.Game.Overlays.Settings.Sections.Input
                         new Box
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Colour = Color4.Black,
+                            Colour = colourProvider.Background5,
-                            Alpha = 0.6f,
                         },
                         text = new OsuSpriteText
                         {
                             Text = action.GetLocalisableDescription(),
-                            Margin = new MarginPadding(padding),
+                            Margin = new MarginPadding(1.5f * padding),
                         },
                         buttons = new FillFlowContainer<KeyButton>
                         {
@@ -405,7 +404,8 @@ namespace osu.Game.Overlays.Settings.Sections.Input
             private readonly Box box;
             public readonly OsuSpriteText Text;
 
-            private Color4 hoverColour;
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; }
 
             private bool isBinding;
 
@@ -448,7 +448,6 @@ namespace osu.Game.Overlays.Settings.Sections.Input
                     box = new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Colour = Color4.Black
                     },
                     Text = new OsuSpriteText
                     {
@@ -463,9 +462,9 @@ namespace osu.Game.Overlays.Settings.Sections.Input
             }
 
             [BackgroundDependencyLoader]
-            private void load(OsuColour colours)
+            private void load()
             {
-                hoverColour = colours.YellowDark;
+                updateHoverState();
             }
 
             protected override bool OnHover(HoverEvent e)
@@ -484,12 +483,12 @@ namespace osu.Game.Overlays.Settings.Sections.Input
             {
                 if (isBinding)
                 {
-                    box.FadeColour(Color4.White, transition_time, Easing.OutQuint);
+                    box.FadeColour(colourProvider.Light2, transition_time, Easing.OutQuint);
                     Text.FadeColour(Color4.Black, transition_time, Easing.OutQuint);
                 }
                 else
                 {
-                    box.FadeColour(IsHovered ? hoverColour : Color4.Black, transition_time, Easing.OutQuint);
+                    box.FadeColour(IsHovered ? colourProvider.Light4 : colourProvider.Background6, transition_time, Easing.OutQuint);
                     Text.FadeColour(IsHovered ? Color4.Black : Color4.White, transition_time, Easing.OutQuint);
                 }
             }

osu.Game/Overlays/Settings/Sections/Input/KeyBindingsSubsection.cs

@@ -27,8 +27,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
         {
             this.variant = variant;
 
-            FlowContent.Spacing = new Vector2(0, 1);
+            FlowContent.Spacing = new Vector2(0, 3);
-            FlowContent.Padding = new MarginPadding { Left = SettingsPanel.CONTENT_MARGINS, Right = SettingsPanel.CONTENT_MARGINS };
         }
 
         [BackgroundDependencyLoader]

osu.Game/Overlays/Settings/Sections/Input/TabletSettings.cs

@@ -165,7 +165,13 @@ namespace osu.Game.Overlays.Settings.Sections.Input
                             LabelText = TabletSettingsStrings.Rotation,
                             Current = rotation
                         },
-                        new RotationPresetButtons(tabletHandler),
+                        new RotationPresetButtons(tabletHandler)
+                        {
+                            Padding = new MarginPadding
+                            {
+                                Horizontal = SettingsPanel.CONTENT_MARGINS
+                            }
+                        },
                         new SettingsSlider<float>
                         {
                             TransferValueOnCommit = true,

osu.Game/Overlays/Settings/Sections/MaintenanceSection.cs

@@ -6,7 +6,6 @@ using osu.Framework.Graphics.Sprites;
 using osu.Framework.Localisation;
 using osu.Game.Localisation;
 using osu.Game.Overlays.Settings.Sections.Maintenance;
-using osuTK;
 
 namespace osu.Game.Overlays.Settings.Sections
 {
@@ -21,7 +20,6 @@ namespace osu.Game.Overlays.Settings.Sections
 
         public MaintenanceSection()
         {
-            FlowContent.Spacing = new Vector2(0, 5);
             Children = new Drawable[]
             {
                 new GeneralSettings()

osu.Game/Overlays/Settings/Sections/SkinSection.cs

@@ -16,7 +16,6 @@ using osu.Game.Graphics.UserInterface;
 using osu.Game.Localisation;
 using osu.Game.Skinning;
 using osu.Game.Skinning.Editor;
-using osuTK;
 
 namespace osu.Game.Overlays.Settings.Sections
 {
@@ -63,8 +62,6 @@ namespace osu.Game.Overlays.Settings.Sections
         [BackgroundDependencyLoader(permitNulls: true)]
         private void load(OsuConfigManager config, [CanBeNull] SkinEditorOverlay skinEditor)
         {
-            FlowContent.Spacing = new Vector2(0, 5);
-
             Children = new Drawable[]
             {
                 skinDropdown = new SkinSettingsDropdown(),

osu.Game/Overlays/Settings/SettingsHeader.cs

@@ -22,7 +22,7 @@ namespace osu.Game.Overlays.Settings
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
@@ -39,7 +39,7 @@ namespace osu.Game.Overlays.Settings
                         new OsuSpriteText
                         {
                             Text = heading,
-                            Font = OsuFont.GetFont(size: 40),
+                            Font = OsuFont.TorusAlternate.With(size: 40),
                             Margin = new MarginPadding
                             {
                                 Left = SettingsPanel.CONTENT_MARGINS,
@@ -48,7 +48,7 @@ namespace osu.Game.Overlays.Settings
                         },
                         new OsuSpriteText
                         {
-                            Colour = colours.Pink,
+                            Colour = colourProvider.Content2,
                             Text = subheading,
                             Font = OsuFont.GetFont(size: 18),
                             Margin = new MarginPadding

osu.Game/Overlays/Settings/SettingsSection.cs

@@ -12,7 +12,7 @@ using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osuTK.Graphics;
+using osuTK;
 
 namespace osu.Game.Overlays.Settings
 {
@@ -31,9 +31,10 @@ namespace osu.Game.Overlays.Settings
         public IEnumerable<IFilterable> FilterableChildren => Children.OfType<IFilterable>();
         public virtual IEnumerable<string> FilterTerms => new[] { Header.ToString() };
 
-        private const int header_size = 26;
+        public const int ITEM_SPACING = 14;
-        private const int margin = 20;
+
-        private const int border_size = 2;
+        private const int header_size = 24;
+        private const int border_size = 4;
 
         public bool MatchingFilter
         {
@@ -54,8 +55,9 @@ namespace osu.Game.Overlays.Settings
             {
                 Margin = new MarginPadding
                 {
-                    Top = header_size
+                    Top = 36
                 },
+                Spacing = new Vector2(0, ITEM_SPACING),
                 Direction = FillDirection.Vertical,
                 AutoSizeAxes = Axes.Y,
                 RelativeSizeAxes = Axes.X,
@@ -63,14 +65,14 @@ namespace osu.Game.Overlays.Settings
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load(OverlayColourProvider colourProvider, OsuColour colours)
         {
             AddRangeInternal(new Drawable[]
             {
                 new Box
                 {
                     Name = "separator",
-                    Colour = new Color4(0, 0, 0, 255),
+                    Colour = colourProvider.Background6,
                     RelativeSizeAxes = Axes.X,
                     Height = border_size,
                 },
@@ -78,8 +80,8 @@ namespace osu.Game.Overlays.Settings
                 {
                     Padding = new MarginPadding
                     {
-                        Top = margin + border_size,
+                        Top = 28,
-                        Bottom = margin + 10,
+                        Bottom = 40,
                     },
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
@@ -87,13 +89,11 @@ namespace osu.Game.Overlays.Settings
                     {
                         header = new OsuSpriteText
                         {
-                            Font = OsuFont.GetFont(size: header_size),
+                            Font = OsuFont.TorusAlternate.With(size: header_size),
                             Text = Header,
-                            Colour = colours.Yellow,
                             Margin = new MarginPadding
                             {
-                                Left = SettingsPanel.CONTENT_MARGINS,
+                                Horizontal = SettingsPanel.CONTENT_MARGINS
-                                Right = SettingsPanel.CONTENT_MARGINS
                             }
                         },
                         FlowContent

osu.Game/Overlays/Settings/SettingsSubsection.cs

@@ -46,13 +46,17 @@ namespace osu.Game.Overlays.Settings
 
             FlowContent = new FillFlowContainer
             {
+                Margin = new MarginPadding { Top = SettingsSection.ITEM_SPACING },
                 Direction = FillDirection.Vertical,
-                Spacing = new Vector2(0, 8),
+                Spacing = new Vector2(0, SettingsSection.ITEM_SPACING),
                 RelativeSizeAxes = Axes.X,
                 AutoSizeAxes = Axes.Y,
             };
         }
 
+        private const int header_height = 43;
+        private const int header_font_size = 20;
+
         [BackgroundDependencyLoader]
         private void load()
         {
@@ -60,9 +64,9 @@ namespace osu.Game.Overlays.Settings
             {
                 new OsuSpriteText
                 {
-                    Text = Header.ToString().ToUpper(), // TODO: Add localisation support after https://github.com/ppy/osu-framework/pull/4603 is merged.
+                    Text = Header,
-                    Margin = new MarginPadding { Vertical = 30, Left = SettingsPanel.CONTENT_MARGINS, Right = SettingsPanel.CONTENT_MARGINS },
+                    Margin = new MarginPadding { Vertical = (header_height - header_font_size) * 0.5f, Horizontal = SettingsPanel.CONTENT_MARGINS },
-                    Font = OsuFont.GetFont(weight: FontWeight.Bold),
+                    Font = OsuFont.GetFont(size: header_font_size),
                 },
                 FlowContent
             });

osu.Game/Overlays/Settings/Sidebar.cs

@@ -4,6 +4,7 @@
 using System;
 using System.Linq;
 using osu.Framework;
+using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -15,22 +16,23 @@ using osuTK;
 
 namespace osu.Game.Overlays.Settings
 {
-    public class Sidebar : Container<SidebarButton>, IStateful<ExpandedState>
+    public class Sidebar : Container<SidebarIconButton>, IStateful<ExpandedState>
     {
-        private readonly FillFlowContainer<SidebarButton> content;
+        private readonly Box background;
-        public const float DEFAULT_WIDTH = Toolbar.Toolbar.HEIGHT * 1.4f;
+        private readonly FillFlowContainer<SidebarIconButton> content;
+        public const float DEFAULT_WIDTH = 70;
         public const int EXPANDED_WIDTH = 200;
 
         public event Action<ExpandedState> StateChanged;
 
-        protected override Container<SidebarButton> Content => content;
+        protected override Container<SidebarIconButton> Content => content;
 
         public Sidebar()
         {
             RelativeSizeAxes = Axes.Y;
             InternalChildren = new Drawable[]
             {
-                new Box
+                background = new Box
                 {
                     Colour = OsuColour.Gray(0.02f),
                     RelativeSizeAxes = Axes.Both,
@@ -39,7 +41,7 @@ namespace osu.Game.Overlays.Settings
                 {
                     Children = new[]
                     {
-                        content = new FillFlowContainer<SidebarButton>
+                        content = new FillFlowContainer<SidebarIconButton>
                         {
                             Origin = Anchor.CentreLeft,
                             Anchor = Anchor.CentreLeft,
@@ -52,6 +54,12 @@ namespace osu.Game.Overlays.Settings
             };
         }
 
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            background.Colour = colourProvider.Background5;
+        }
+
         private ScheduledDelegate expandEvent;
         private ExpandedState state;
 
@@ -80,8 +88,6 @@ namespace osu.Game.Overlays.Settings
         {
             public SidebarScrollContainer()
             {
-                Content.Anchor = Anchor.CentreLeft;
-                Content.Origin = Anchor.CentreLeft;
                 RelativeSizeAxes = Axes.Both;
                 ScrollbarVisible = false;
             }

osu.Game/Overlays/Settings/SidebarButton.cs

@@ -1,110 +1,40 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
-using osu.Framework.Graphics;
+using osu.Framework.Input.Events;
-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;
-using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Overlays.Settings
 {
-    public class SidebarButton : OsuButton
+    public abstract class SidebarButton : OsuButton
     {
-        private readonly ConstrainedIconContainer iconContainer;
+        protected const double FADE_DURATION = 500;
-        private readonly SpriteText headerText;
-        private readonly Box selectionIndicator;
-        private readonly Container text;
 
-        // always consider as part of flow, even when not visible (for the sake of the initial animation).
+        [Resolved]
-        public override bool IsPresent => true;
+        protected OverlayColourProvider ColourProvider { get; private set; }
-
-        private SettingsSection section;
-
-        public SettingsSection Section
-        {
-            get => section;
-            set
-            {
-                section = value;
-                headerText.Text = value.Header;
-                iconContainer.Icon = value.CreateIcon();
-            }
-        }
-
-        private bool selected;
-
-        public bool Selected
-        {
-            get => selected;
-            set
-            {
-                selected = value;
-
-                if (selected)
-                {
-                    selectionIndicator.FadeIn(50);
-                    text.FadeColour(Color4.White, 50);
-                }
-                else
-                {
-                    selectionIndicator.FadeOut(50);
-                    text.FadeColour(OsuColour.Gray(0.6f), 50);
-                }
-            }
-        }
-
-        public SidebarButton()
-        {
-            Height = Sidebar.DEFAULT_WIDTH;
-            RelativeSizeAxes = Axes.X;
-
-            BackgroundColour = Color4.Black;
-
-            AddRange(new Drawable[]
-            {
-                text = new Container
-                {
-                    Width = Sidebar.DEFAULT_WIDTH,
-                    RelativeSizeAxes = Axes.Y,
-                    Colour = OsuColour.Gray(0.6f),
-                    Children = new Drawable[]
-                    {
-                        headerText = new OsuSpriteText
-                        {
-                            Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
-                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.CentreLeft,
-                        },
-                        iconContainer = new ConstrainedIconContainer
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Size = new Vector2(20),
-                        },
-                    }
-                },
-                selectionIndicator = new Box
-                {
-                    Alpha = 0,
-                    RelativeSizeAxes = Axes.Y,
-                    Width = 5,
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.CentreRight,
-                },
-            });
-        }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load()
         {
-            selectionIndicator.Colour = colours.Yellow;
+            BackgroundColour = ColourProvider.Background5;
         }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            UpdateState();
+            FinishTransforms(true);
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            UpdateState();
+            return false;
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e) => UpdateState();
+
+        protected abstract void UpdateState();
     }
 }

osu.Game/Overlays/Settings/SidebarIconButton.cs

@@ -0,0 +1,130 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osuTK;
+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.Containers;
+
+namespace osu.Game.Overlays.Settings
+{
+    public class SidebarIconButton : SidebarButton
+    {
+        private const float selection_indicator_height_active = 18;
+        private const float selection_indicator_height_inactive = 4;
+
+        private readonly ConstrainedIconContainer iconContainer;
+        private readonly SpriteText headerText;
+        private readonly CircularContainer selectionIndicator;
+        private readonly Container textIconContent;
+
+        // always consider as part of flow, even when not visible (for the sake of the initial animation).
+        public override bool IsPresent => true;
+
+        private SettingsSection section;
+
+        public SettingsSection Section
+        {
+            get => section;
+            set
+            {
+                section = value;
+                headerText.Text = value.Header;
+                iconContainer.Icon = value.CreateIcon();
+            }
+        }
+
+        private bool selected;
+
+        public bool Selected
+        {
+            get => selected;
+            set
+            {
+                selected = value;
+
+                if (IsLoaded)
+                    UpdateState();
+            }
+        }
+
+        public SidebarIconButton()
+        {
+            RelativeSizeAxes = Axes.X;
+            Height = 46;
+
+            AddRange(new Drawable[]
+            {
+                textIconContent = new Container
+                {
+                    Width = Sidebar.DEFAULT_WIDTH,
+                    RelativeSizeAxes = Axes.Y,
+                    Colour = OsuColour.Gray(0.6f),
+                    Children = new Drawable[]
+                    {
+                        headerText = new OsuSpriteText
+                        {
+                            Position = new Vector2(Sidebar.DEFAULT_WIDTH + 10, 0),
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                        },
+                        iconContainer = new ConstrainedIconContainer
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(20),
+                        },
+                    }
+                },
+                selectionIndicator = new CircularContainer
+                {
+                    Alpha = 0,
+                    Width = 4,
+                    Height = selection_indicator_height_inactive,
+                    Masking = true,
+                    CornerRadius = 1.5f,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Margin = new MarginPadding
+                    {
+                        Left = 9,
+                    },
+                    Child = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Colour4.White
+                    }
+                },
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            selectionIndicator.Colour = ColourProvider.Highlight1;
+        }
+
+        protected override void UpdateState()
+        {
+            if (Selected)
+            {
+                textIconContent.FadeColour(ColourProvider.Content1, FADE_DURATION, Easing.OutQuint);
+
+                selectionIndicator.FadeIn(FADE_DURATION, Easing.OutQuint);
+                selectionIndicator.ResizeHeightTo(selection_indicator_height_active, FADE_DURATION, Easing.OutElasticHalf);
+            }
+            else
+            {
+                textIconContent.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, FADE_DURATION, Easing.OutQuint);
+
+                selectionIndicator.FadeOut(FADE_DURATION, Easing.OutQuint);
+                selectionIndicator.ResizeHeightTo(selection_indicator_height_inactive, FADE_DURATION, Easing.OutQuint);
+            }
+        }
+    }
+}

osu.Game/Overlays/SettingsPanel.cs

@@ -6,7 +6,6 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions.IEnumerableExtensions;
@@ -15,7 +14,6 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Events;
-using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Settings;
@@ -25,7 +23,7 @@ namespace osu.Game.Overlays
     [Cached]
     public abstract class SettingsPanel : OsuFocusedOverlayContainer
     {
-        public const float CONTENT_MARGINS = 15;
+        public const float CONTENT_MARGINS = 20;
 
         public const float TRANSITION_LENGTH = 600;
 
@@ -46,7 +44,7 @@ namespace osu.Game.Overlays
         protected override Container<Drawable> Content => ContentContainer;
 
         protected Sidebar Sidebar;
-        private SidebarButton selectedSidebarButton;
+        private SidebarIconButton selectedSidebarButton;
 
         public SettingsSectionsContainer SectionsContainer { get; private set; }
 
@@ -64,6 +62,9 @@ namespace osu.Game.Overlays
 
         public IBindable<SettingsSection> CurrentSection = new Bindable<SettingsSection>();
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
+
         protected SettingsPanel(bool showSidebar)
         {
             this.showSidebar = showSidebar;
@@ -89,7 +90,7 @@ namespace osu.Game.Overlays
                         Origin = Anchor.TopRight,
                         Scale = new Vector2(2, 1), // over-extend to the left for transitions
                         RelativeSizeAxes = Axes.Both,
-                        Colour = OsuColour.Gray(0.05f),
+                        Colour = colourProvider.Background4,
                         Alpha = 1,
                     },
                     loading = new LoadingLayer
@@ -105,17 +106,23 @@ namespace osu.Game.Overlays
                 RelativeSizeAxes = Axes.Both,
                 ExpandableHeader = CreateHeader(),
                 SelectedSection = { BindTarget = CurrentSection },
-                FixedHeader = searchTextBox = new SeekLimitedSearchTextBox
+                FixedHeader = new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Padding = new MarginPadding
+                    {
+                        Vertical = 20,
+                        Horizontal = CONTENT_MARGINS
+                    },
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                    Child = searchTextBox = new SeekLimitedSearchTextBox
                     {
                         RelativeSizeAxes = Axes.X,
                         Origin = Anchor.TopCentre,
                         Anchor = Anchor.TopCentre,
-                    Width = 0.95f,
+                    }
-                    Margin = new MarginPadding
-                    {
-                        Top = 20,
-                        Bottom = 20
-                    },
                 },
                 Footer = CreateFooter().With(f => f.Alpha = 0)
             });
@@ -245,11 +252,11 @@ namespace osu.Game.Overlays
             });
         }
 
-        private IEnumerable<SidebarButton> createSidebarButtons()
+        private IEnumerable<SidebarIconButton> createSidebarButtons()
         {
             foreach (var section in SectionsContainer)
             {
-                yield return new SidebarButton
+                yield return new SidebarIconButton
                 {
                     Section = section,
                     Action = () =>
@@ -292,11 +299,12 @@ namespace osu.Game.Overlays
                     Direction = FillDirection.Vertical,
                 };
 
-            public SettingsSectionsContainer()
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
             {
                 HeaderBackground = new Box
                 {
-                    Colour = Color4.Black,
+                    Colour = colourProvider.Background4,
                     RelativeSizeAxes = Axes.Both
                 };
             }

osu.Game/Overlays/SettingsSubPanel.cs

@@ -7,10 +7,8 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays.Settings;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays
 {
@@ -34,18 +32,18 @@ namespace osu.Game.Overlays
 
         protected override bool DimMainContent => false; // dimming is handled by main overlay
 
-        private class BackButton : OsuButton
+        private class BackButton : SidebarButton
         {
+            private Container content;
+
             [BackgroundDependencyLoader]
             private void load()
             {
                 Size = new Vector2(Sidebar.DEFAULT_WIDTH);
 
-                BackgroundColour = Color4.Black;
-
                 AddRange(new Drawable[]
                 {
-                    new Container
+                    content = new Container
                     {
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,
@@ -71,6 +69,11 @@ namespace osu.Game.Overlays
                     }
                 });
             }
+
+            protected override void UpdateState()
+            {
+                content.FadeColour(IsHovered ? ColourProvider.Light1 : ColourProvider.Light3, FADE_DURATION, Easing.OutQuint);
+            }
         }
     }
 }