Merge pull request #22200 from bdach/user-profile/update-design-basics

Update user profile appearance to closer match web

osu.Game.Tests/Visual/Online/TestSceneKudosuHistory.cs

@@ -5,12 +5,12 @@ using osu.Game.Overlays.Profile.Sections.Kudosu;
 using System.Collections.Generic;
 using System;
 using osu.Framework.Graphics.Containers;
-using osu.Game.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Framework.Extensions.IEnumerableExtensions;
+using osu.Game.Overlays;
 
 namespace osu.Game.Tests.Visual.Online
 {
@@ -18,6 +18,9 @@ namespace osu.Game.Tests.Visual.Online
     {
         private readonly Box background;
 
+        [Cached]
+        private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Pink);
+
         public TestSceneKudosuHistory()
         {
             FillFlowContainer<DrawableKudosuHistoryItem> content;
@@ -42,9 +45,9 @@ namespace osu.Game.Tests.Visual.Online
         }
 
         [BackgroundDependencyLoader]
-        private void load(OsuColour colours)
+        private void load()
         {
-            background.Colour = colours.GreySeaFoam;
+            background.Colour = colourProvider.Background4;
         }
 
         private readonly IEnumerable<APIKudosuHistory> items = new[]

osu.Game.Tests/Visual/Online/TestSceneUserProfileOverlay.cs

@@ -86,12 +86,21 @@ namespace osu.Game.Tests.Visual.Online
             CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c1.jpg",
             JoinDate = DateTimeOffset.Now.AddDays(-1),
             LastVisit = DateTimeOffset.Now,
-            ProfileOrder = new[] { "me" },
             Groups = new[]
             {
                 new APIUserGroup { Colour = "#EB47D0", ShortName = "DEV", Name = "Developers" },
                 new APIUserGroup { Colour = "#A347EB", ShortName = "BN", Name = "Beatmap Nominators", Playmodes = new[] { "osu", "taiko" } }
             },
+            ProfileOrder = new[]
+            {
+                @"me",
+                @"recent_activity",
+                @"beatmaps",
+                @"historical",
+                @"kudosu",
+                @"top_ranks",
+                @"medals"
+            },
             Statistics = new UserStatistics
             {
                 IsRanked = true,
@@ -128,7 +137,12 @@ namespace osu.Game.Tests.Visual.Online
             Title = "osu!volunteer",
             Colour = "ff0000",
             Achievements = Array.Empty<APIUserAchievement>(),
-            PlayMode = "osu"
+            PlayMode = "osu",
+            Kudosu = new APIUser.KudosuCount
+            {
+                Available = 10,
+                Total = 50
+            }
         };
     }
 }

osu.Game/Overlays/Profile/Header/CentreHeaderContainer.cs

@@ -3,26 +3,18 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.LocalisationExtensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
-using osu.Framework.Localisation;
-using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays.Profile.Header.Components;
-using osu.Game.Resources.Localisation.Web;
 using osuTK;
 
 namespace osu.Game.Overlays.Profile.Header
 {
     public partial class CentreHeaderContainer : CompositeDrawable
     {
-        public readonly BindableBool DetailsVisible = new BindableBool(true);
         public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
 
-        private OverlinedInfoContainer hiddenDetailGlobal = null!;
-        private OverlinedInfoContainer hiddenDetailCountry = null!;
-
         public CentreHeaderContainer()
         {
             Height = 60;
@@ -31,15 +23,12 @@ namespace osu.Game.Overlays.Profile.Header
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider)
         {
-            Container<Drawable> hiddenDetailContainer;
-            Container<Drawable> expandedDetailContainer;
-
             InternalChildren = new Drawable[]
             {
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = colourProvider.Background4
+                    Colour = colourProvider.Background3
                 },
                 new FillFlowContainer
                 {
@@ -66,20 +55,6 @@ namespace osu.Game.Overlays.Profile.Header
                     }
                 },
                 new Container
-                {
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.CentreRight,
-                    RelativeSizeAxes = Axes.Y,
-                    Padding = new MarginPadding { Vertical = 10 },
-                    Width = UserProfileOverlay.CONTENT_X_MARGIN,
-                    Child = new ExpandDetailsButton
-                    {
-                        Anchor = Anchor.Centre,
-                        Origin = Anchor.Centre,
-                        DetailsVisible = { BindTarget = DetailsVisible }
-                    },
-                },
-                new Container
                 {
                     Anchor = Anchor.CentreRight,
                     Origin = Anchor.CentreRight,
@@ -94,7 +69,7 @@ namespace osu.Game.Overlays.Profile.Header
                             Size = new Vector2(40),
                             User = { BindTarget = User }
                         },
-                        expandedDetailContainer = new Container
+                        new Container
                         {
                             Anchor = Anchor.CentreRight,
                             Origin = Anchor.CentreRight,
@@ -107,47 +82,9 @@ namespace osu.Game.Overlays.Profile.Header
                                 User = { BindTarget = User }
                             }
                         },
-                        hiddenDetailContainer = new FillFlowContainer
-                        {
-                            Direction = FillDirection.Horizontal,
-                            Anchor = Anchor.CentreRight,
-                            Origin = Anchor.CentreRight,
-                            Width = 200,
-                            AutoSizeAxes = Axes.Y,
-                            Alpha = 0,
-                            Spacing = new Vector2(10, 0),
-                            Margin = new MarginPadding { Right = 50 },
-                            Children = new[]
-                            {
-                                hiddenDetailGlobal = new OverlinedInfoContainer
-                                {
-                                    Title = UsersStrings.ShowRankGlobalSimple,
-                                    LineColour = colourProvider.Highlight1
-                                },
-                                hiddenDetailCountry = new OverlinedInfoContainer
-                                {
-                                    Title = UsersStrings.ShowRankCountrySimple,
-                                    LineColour = colourProvider.Highlight1
-                                },
-                            }
-                        }
                     }
                 }
             };
-
-            DetailsVisible.BindValueChanged(visible =>
-            {
-                hiddenDetailContainer.FadeTo(visible.NewValue ? 0 : 1, 200, Easing.OutQuint);
-                expandedDetailContainer.FadeTo(visible.NewValue ? 1 : 0, 200, Easing.OutQuint);
-            });
-
-            User.BindValueChanged(user => updateDisplay(user.NewValue?.User));
-        }
-
-        private void updateDisplay(APIUser? user)
-        {
-            hiddenDetailGlobal.Content = user?.Statistics?.GlobalRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
-            hiddenDetailCountry.Content = user?.Statistics?.CountryRank?.ToLocalisableString("\\##,##0") ?? (LocalisableString)"-";
         }
     }
 }

osu.Game/Overlays/Profile/Header/Components/ProfileValueDisplay.cs

@@ -1,19 +1,17 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Localisation;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Profile.Header.Components
 {
-    public partial class OverlinedInfoContainer : CompositeDrawable
+    public partial class ProfileValueDisplay : CompositeDrawable
     {
-        private readonly Circle line;
         private readonly OsuSpriteText title;
         private readonly OsuSpriteText content;
 
@@ -27,12 +25,7 @@ namespace osu.Game.Overlays.Profile.Header.Components
             set => content.Text = value;
         }
 
-        public Color4 LineColour
+        public ProfileValueDisplay(bool big = false, int minimumWidth = 60)
-        {
-            set => line.Colour = value;
-        }
-
-        public OverlinedInfoContainer(bool big = false, int minimumWidth = 60)
         {
             AutoSizeAxes = Axes.Both;
             InternalChild = new FillFlowContainer
@@ -41,19 +34,13 @@ namespace osu.Game.Overlays.Profile.Header.Components
                 AutoSizeAxes = Axes.Both,
                 Children = new Drawable[]
                 {
-                    line = new Circle
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        Height = 2,
-                        Margin = new MarginPadding { Bottom = 2 }
-                    },
                     title = new OsuSpriteText
                     {
-                        Font = OsuFont.GetFont(size: big ? 14 : 12, weight: FontWeight.Bold)
+                        Font = OsuFont.GetFont(size: 12)
                     },
                     content = new OsuSpriteText
                     {
-                        Font = OsuFont.GetFont(size: big ? 40 : 18, weight: FontWeight.Light)
+                        Font = OsuFont.GetFont(size: big ? 30 : 20, weight: FontWeight.Light)
                     },
                     new Container // Add a minimum size to the FillFlowContainer
                     {
@@ -62,5 +49,12 @@ namespace osu.Game.Overlays.Profile.Header.Components
                 }
             };
         }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            title.Colour = colourProvider.Content1;
+            content.Colour = colourProvider.Content2;
+        }
     }
 }

osu.Game/Overlays/Profile/Header/Components/TotalPlayTime.cs

@@ -11,15 +11,15 @@ using osu.Game.Resources.Localisation.Web;
 
 namespace osu.Game.Overlays.Profile.Header.Components
 {
-    public partial class OverlinedTotalPlayTime : CompositeDrawable, IHasTooltip
+    public partial class TotalPlayTime : CompositeDrawable, IHasTooltip
     {
         public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
 
         public LocalisableString TooltipText { get; set; }
 
-        private OverlinedInfoContainer info = null!;
+        private ProfileValueDisplay info = null!;
 
-        public OverlinedTotalPlayTime()
+        public TotalPlayTime()
         {
             AutoSizeAxes = Axes.Both;
 
@@ -27,12 +27,11 @@ namespace osu.Game.Overlays.Profile.Header.Components
         }
 
         [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider)
+        private void load()
         {
-            InternalChild = info = new OverlinedInfoContainer
+            InternalChild = info = new ProfileValueDisplay(minimumWidth: 140)
             {
                 Title = UsersStrings.ShowStatsPlayTime,
-                LineColour = colourProvider.Highlight1,
             };
 
             User.BindValueChanged(updateTime, true);

osu.Game/Overlays/Profile/Header/DetailHeaderContainer.cs

@@ -22,41 +22,16 @@ namespace osu.Game.Overlays.Profile.Header
     public partial class DetailHeaderContainer : CompositeDrawable
     {
         private readonly Dictionary<ScoreRank, ScoreRankInfo> scoreRankInfos = new Dictionary<ScoreRank, ScoreRankInfo>();
-        private OverlinedInfoContainer medalInfo = null!;
+        private ProfileValueDisplay medalInfo = null!;
-        private OverlinedInfoContainer ppInfo = null!;
+        private ProfileValueDisplay ppInfo = null!;
-        private OverlinedInfoContainer detailGlobalRank = null!;
+        private ProfileValueDisplay detailGlobalRank = null!;
-        private OverlinedInfoContainer detailCountryRank = null!;
+        private ProfileValueDisplay detailCountryRank = null!;
-        private FillFlowContainer? fillFlow;
         private RankGraph rankGraph = null!;
 
         public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
 
-        private bool expanded = true;
-
-        public bool Expanded
-        {
-            set
-            {
-                if (expanded == value) return;
-
-                expanded = value;
-
-                if (fillFlow == null) return;
-
-                fillFlow.ClearTransforms();
-
-                if (expanded)
-                    fillFlow.AutoSizeAxes = Axes.Y;
-                else
-                {
-                    fillFlow.AutoSizeAxes = Axes.None;
-                    fillFlow.ResizeHeightTo(0, 200, Easing.OutQuint);
-                }
-            }
-        }
-
         [BackgroundDependencyLoader]
-        private void load(OverlayColourProvider colourProvider, OsuColour colours)
+        private void load(OverlayColourProvider colourProvider)
         {
             AutoSizeAxes = Axes.Y;
 
@@ -69,18 +44,48 @@ namespace osu.Game.Overlays.Profile.Header
                     RelativeSizeAxes = Axes.Both,
                     Colour = colourProvider.Background5,
                 },
-                fillFlow = new FillFlowContainer
+                new FillFlowContainer
                 {
                     RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = expanded ? Axes.Y : Axes.None,
+                    AutoSizeAxes = Axes.Y,
                     AutoSizeDuration = 200,
                     AutoSizeEasing = Easing.OutQuint,
                     Masking = true,
                     Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Vertical = 10 },
                     Direction = FillDirection.Vertical,
-                    Spacing = new Vector2(0, 20),
+                    Spacing = new Vector2(0, 15),
                     Children = new Drawable[]
                     {
+                        new FillFlowContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Direction = FillDirection.Horizontal,
+                            Spacing = new Vector2(20),
+                            Children = new Drawable[]
+                            {
+                                detailGlobalRank = new ProfileValueDisplay(true)
+                                {
+                                    Title = UsersStrings.ShowRankGlobalSimple,
+                                },
+                                detailCountryRank = new ProfileValueDisplay(true)
+                                {
+                                    Title = UsersStrings.ShowRankCountrySimple,
+                                },
+                            }
+                        },
+                        new Container
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = 60,
+                            Children = new Drawable[]
+                            {
+                                rankGraph = new RankGraph
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                },
+                            }
+                        },
                         new Container
                         {
                             RelativeSizeAxes = Axes.X,
@@ -96,19 +101,17 @@ namespace osu.Game.Overlays.Profile.Header
                                     Spacing = new Vector2(10, 0),
                                     Children = new Drawable[]
                                     {
-                                        new OverlinedTotalPlayTime
+                                        medalInfo = new ProfileValueDisplay
-                                        {
-                                            User = { BindTarget = User }
-                                        },
-                                        medalInfo = new OverlinedInfoContainer
                                         {
                                             Title = UsersStrings.ShowStatsMedals,
-                                            LineColour = colours.GreenLight,
                                         },
-                                        ppInfo = new OverlinedInfoContainer
+                                        ppInfo = new ProfileValueDisplay
                                         {
                                             Title = "pp",
-                                            LineColour = colours.Red,
+                                        },
+                                        new TotalPlayTime
+                                        {
+                                            User = { BindTarget = User }
                                         },
                                     }
                                 },
@@ -130,41 +133,6 @@ namespace osu.Game.Overlays.Profile.Header
                                 }
                             }
                         },
-                        new Container
-                        {
-                            RelativeSizeAxes = Axes.X,
-                            AutoSizeAxes = Axes.Y,
-                            Padding = new MarginPadding { Right = 130 },
-                            Children = new Drawable[]
-                            {
-                                rankGraph = new RankGraph
-                                {
-                                    RelativeSizeAxes = Axes.Both,
-                                },
-                                new FillFlowContainer
-                                {
-                                    AutoSizeAxes = Axes.Y,
-                                    Width = 130,
-                                    Anchor = Anchor.TopRight,
-                                    Direction = FillDirection.Vertical,
-                                    Padding = new MarginPadding { Horizontal = 10 },
-                                    Spacing = new Vector2(0, 20),
-                                    Children = new Drawable[]
-                                    {
-                                        detailGlobalRank = new OverlinedInfoContainer(true, 110)
-                                        {
-                                            Title = UsersStrings.ShowRankGlobalSimple,
-                                            LineColour = colourProvider.Highlight1,
-                                        },
-                                        detailCountryRank = new OverlinedInfoContainer(false, 110)
-                                        {
-                                            Title = UsersStrings.ShowRankCountrySimple,
-                                            LineColour = colourProvider.Highlight1,
-                                        },
-                                    }
-                                }
-                            }
-                        },
                     }
                 },
             };
@@ -201,14 +169,14 @@ namespace osu.Game.Overlays.Profile.Header
                 InternalChild = new FillFlowContainer
                 {
                     AutoSizeAxes = Axes.Y,
-                    Width = 56,
+                    Width = 44,
                     Direction = FillDirection.Vertical,
                     Children = new Drawable[]
                     {
                         new DrawableRank(rank)
                         {
                             RelativeSizeAxes = Axes.X,
-                            Height = 30,
+                            Height = 22,
                         },
                         rankCount = new OsuSpriteText
                         {

osu.Game/Overlays/Profile/Header/MedalHeaderContainer.cs

@@ -4,7 +4,6 @@
 using System.Threading;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
@@ -12,7 +11,6 @@ using osu.Framework.Graphics.Shapes;
 using osu.Game.Online.API.Requests.Responses;
 using osu.Game.Overlays.Profile.Header.Components;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Overlays.Profile.Header
 {
@@ -43,23 +41,16 @@ namespace osu.Game.Overlays.Profile.Header
                     Child = new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Colour = new ColourInfo
+                        Colour = ColourInfo.GradientVertical(Colour4.Black.Opacity(0.2f), Colour4.Black.Opacity(0))
-                        {
+                    }
-                            TopLeft = Color4.Black.Opacity(0.2f),
-                            TopRight = Color4.Black.Opacity(0.2f),
-                            BottomLeft = Color4.Black.Opacity(0),
-                            BottomRight = Color4.Black.Opacity(0)
-                        }
-                    },
                 },
                 badgeFlowContainer = new FillFlowContainer
                 {
                     Direction = FillDirection.Full,
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
-                    Margin = new MarginPadding { Top = 5 },
                     Spacing = new Vector2(10, 10),
-                    Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Vertical = 10 },
+                    Padding = new MarginPadding { Horizontal = UserProfileOverlay.CONTENT_X_MARGIN, Top = 10 },
                 }
             };
         }

osu.Game/Overlays/Profile/Header/TopHeaderContainer.cs

@@ -51,7 +51,7 @@ namespace osu.Game.Overlays.Profile.Header
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Colour = colourProvider.Background5,
+                    Colour = colourProvider.Background4,
                 },
                 new FillFlowContainer
                 {

osu.Game/Overlays/Profile/ProfileHeader.cs

@@ -39,8 +39,6 @@ namespace osu.Game.Overlays.Profile
             // Haphazardly guaranteed by OverlayHeader constructor (see CreateBackground / CreateContent).
             Debug.Assert(centreHeaderContainer != null);
             Debug.Assert(detailHeaderContainer != null);
-
-            centreHeaderContainer.DetailsVisible.BindValueChanged(visible => detailHeaderContainer.Expanded = visible.NewValue, true);
         }
 
         protected override Drawable CreateBackground() =>
@@ -75,7 +73,7 @@ namespace osu.Game.Overlays.Profile
                     RelativeSizeAxes = Axes.X,
                     User = { BindTarget = User },
                 },
-                centreHeaderContainer = new CentreHeaderContainer
+                new MedalHeaderContainer
                 {
                     RelativeSizeAxes = Axes.X,
                     User = { BindTarget = User },
@@ -85,7 +83,7 @@ namespace osu.Game.Overlays.Profile
                     RelativeSizeAxes = Axes.X,
                     User = { BindTarget = User },
                 },
-                new MedalHeaderContainer
+                centreHeaderContainer = new CentreHeaderContainer
                 {
                     RelativeSizeAxes = Axes.X,
                     User = { BindTarget = User },

osu.Game/Overlays/Profile/ProfileSection.cs

@@ -3,16 +3,15 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Localisation;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Backgrounds;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osuTK;
 
 namespace osu.Game.Overlays.Profile
 {
@@ -30,22 +29,29 @@ namespace osu.Game.Overlays.Profile
 
         public readonly Bindable<UserProfileData?> User = new Bindable<UserProfileData?>();
 
+        private const float outer_gutter_width = 10;
+
         protected ProfileSection()
         {
             AutoSizeAxes = Axes.Y;
             RelativeSizeAxes = Axes.X;
 
+            Masking = true;
+            CornerRadius = 10;
+            EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Offset = new Vector2(0, 1),
+                Radius = 3,
+                Colour = Colour4.Black.Opacity(0.25f)
+            };
+
             InternalChildren = new Drawable[]
             {
                 background = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
                 },
-                new SectionTriangles
-                {
-                    Anchor = Anchor.BottomCentre,
-                    Origin = Anchor.BottomCentre,
-                },
                 new FillFlowContainer
                 {
                     Direction = FillDirection.Vertical,
@@ -58,8 +64,8 @@ namespace osu.Game.Overlays.Profile
                             AutoSizeAxes = Axes.Both,
                             Margin = new MarginPadding
                             {
-                                Horizontal = UserProfileOverlay.CONTENT_X_MARGIN,
+                                Horizontal = UserProfileOverlay.CONTENT_X_MARGIN - outer_gutter_width,
-                                Top = 15,
+                                Top = 20,
                                 Bottom = 20,
                             },
                             Children = new Drawable[]
@@ -67,7 +73,7 @@ namespace osu.Game.Overlays.Profile
                                 new OsuSpriteText
                                 {
                                     Text = Title,
-                                    Font = OsuFont.GetFont(size: 20, weight: FontWeight.Bold),
+                                    Font = OsuFont.GetFont(size: 16, weight: FontWeight.Bold),
                                 },
                                 underscore = new Box
                                 {
@@ -88,7 +94,7 @@ namespace osu.Game.Overlays.Profile
                             RelativeSizeAxes = Axes.X,
                             Padding = new MarginPadding
                             {
-                                Horizontal = UserProfileOverlay.CONTENT_X_MARGIN,
+                                Horizontal = UserProfileOverlay.CONTENT_X_MARGIN - outer_gutter_width,
                                 Bottom = 20
                             }
                         },
@@ -100,43 +106,8 @@ namespace osu.Game.Overlays.Profile
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider)
         {
-            background.Colour = colourProvider.Background5;
+            background.Colour = colourProvider.Background4;
             underscore.Colour = colourProvider.Highlight1;
         }
-
-        private partial class SectionTriangles : Container
-        {
-            private readonly Triangles triangles;
-            private readonly Box foreground;
-
-            public SectionTriangles()
-            {
-                RelativeSizeAxes = Axes.X;
-                Height = 100;
-                Masking = true;
-                Children = new Drawable[]
-                {
-                    triangles = new Triangles
-                    {
-                        Anchor = Anchor.BottomCentre,
-                        Origin = Anchor.BottomCentre,
-                        RelativeSizeAxes = Axes.Both,
-                        TriangleScale = 3,
-                    },
-                    foreground = new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                    }
-                };
-            }
-
-            [BackgroundDependencyLoader]
-            private void load(OverlayColourProvider colourProvider)
-            {
-                triangles.ColourLight = colourProvider.Background4;
-                triangles.ColourDark = colourProvider.Background5.Darken(0.2f);
-                foreground.Colour = ColourInfo.GradientVertical(colourProvider.Background5, colourProvider.Background5.Opacity(0));
-            }
-        }
     }
 }

osu.Game/Overlays/Profile/Sections/Historical/DrawableMostPlayedBeatmap.cs

@@ -112,8 +112,8 @@ namespace osu.Game.Overlays.Profile.Sections.Historical
             [BackgroundDependencyLoader]
             private void load(OverlayColourProvider colourProvider)
             {
-                IdleColour = colourProvider.Background4;
+                IdleColour = colourProvider.Background3;
-                HoverColour = colourProvider.Background3;
+                HoverColour = colourProvider.Background2;
             }
         }
 

osu.Game/Overlays/Profile/Sections/Kudosu/DrawableKudosuHistoryItem.cs

@@ -17,9 +17,6 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
     {
         private const int height = 25;
 
-        [Resolved]
-        private OsuColour colours { get; set; } = null!;
-
         private readonly APIKudosuHistory historyItem;
         private readonly LinkFlowContainer linkFlowContainer;
         private readonly DrawableDate date;
@@ -48,9 +45,9 @@ namespace osu.Game.Overlays.Profile.Sections.Kudosu
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OverlayColourProvider colourProvider)
         {
-            date.Colour = colours.GreySeaFoamLighter;
+            date.Colour = colourProvider.Foreground1;
             var formattedSource = MessageFormatter.FormatText(getString(historyItem));
             linkFlowContainer.AddLinks(formattedSource.Text, formattedSource.Links);
         }

osu.Game/Overlays/Profile/Sections/ProfileItemContainer.cs

@@ -65,8 +65,8 @@ namespace osu.Game.Overlays.Profile.Sections
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider)
         {
-            IdleColour = colourProvider.Background3;
+            IdleColour = colourProvider.Background2;
-            HoverColour = colourProvider.Background2;
+            HoverColour = colourProvider.Background1;
         }
 
         protected override bool OnHover(HoverEvent e)

osu.Game/Overlays/Profile/Sections/Ranks/DrawableProfileScore.cs

@@ -160,7 +160,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                                 Origin = Anchor.TopRight,
                                 RelativeSizeAxes = Axes.Both,
                                 Height = 0.5f,
-                                Colour = colourProvider.Background4,
+                                Colour = colourProvider.Background3,
                                 Shear = new Vector2(-performance_background_shear, 0),
                                 EdgeSmoothness = new Vector2(2, 0),
                             },
@@ -172,7 +172,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                                 RelativePositionAxes = Axes.Y,
                                 Height = -0.5f,
                                 Position = new Vector2(0, 1),
-                                Colour = colourProvider.Background4,
+                                Colour = colourProvider.Background3,
                                 Shear = new Vector2(performance_background_shear, 0),
                                 EdgeSmoothness = new Vector2(2, 0),
                             },

osu.Game/Overlays/UserProfileOverlay.cs

@@ -12,7 +12,9 @@ using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Input.Events;
 using osu.Game.Extensions;
+using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Online;
 using osu.Game.Online.API.Requests;
@@ -42,7 +44,7 @@ namespace osu.Game.Overlays
         [Resolved]
         private RulesetStore rulesets { get; set; } = null!;
 
-        public const float CONTENT_X_MARGIN = 70;
+        public const float CONTENT_X_MARGIN = 50;
 
         public UserProfileOverlay()
             : base(OverlayColourScheme.Pink)
@@ -59,7 +61,7 @@ namespace osu.Game.Overlays
 
         protected override ProfileHeader CreateHeader() => new ProfileHeader();
 
-        protected override Color4 BackgroundColour => ColourProvider.Background6;
+        protected override Color4 BackgroundColour => ColourProvider.Background5;
 
         public void ShowUser(IUser user, IRulesetInfo? ruleset = null)
         {
@@ -171,46 +173,72 @@ namespace osu.Game.Overlays
             loadingLayer.Hide();
         }
 
-        private partial class ProfileSectionTabControl : OverlayTabControl<ProfileSection>
+        private partial class ProfileSectionTabControl : OsuTabControl<ProfileSection>
         {
-            private const float bar_height = 2;
-
             public ProfileSectionTabControl()
             {
-                TabContainer.RelativeSizeAxes &= ~Axes.X;
+                Height = 40;
-                TabContainer.AutoSizeAxes |= Axes.X;
+                Padding = new MarginPadding { Horizontal = CONTENT_X_MARGIN };
-                TabContainer.Anchor |= Anchor.x1;
+                TabContainer.Spacing = new Vector2(20);
-                TabContainer.Origin |= Anchor.x1;
-
-                Height = 36 + bar_height;
-                BarHeight = bar_height;
             }
 
-            protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileSectionTabItem(value)
+            protected override TabItem<ProfileSection> CreateTabItem(ProfileSection value) => new ProfileSectionTabItem(value);
-            {
-                AccentColour = AccentColour,
-            };
-
-            [BackgroundDependencyLoader]
-            private void load(OverlayColourProvider colourProvider)
-            {
-                AccentColour = colourProvider.Highlight1;
-            }
 
             protected override bool OnClick(ClickEvent e) => true;
 
             protected override bool OnHover(HoverEvent e) => true;
 
-            private partial class ProfileSectionTabItem : OverlayTabItem
+            private partial class ProfileSectionTabItem : TabItem<ProfileSection>
             {
+                private OsuSpriteText text = null!;
+
+                [Resolved]
+                private OverlayColourProvider colourProvider { get; set; } = null!;
+
                 public ProfileSectionTabItem(ProfileSection value)
                     : base(value)
                 {
-                    Text.Text = value.Title;
+                }
-                    Text.Font = Text.Font.With(size: 16);
+
-                    Text.Margin = new MarginPadding { Bottom = 10 + bar_height };
+                [BackgroundDependencyLoader]
-                    Bar.ExpandedSize = 10;
+                private void load()
-                    Bar.Margin = new MarginPadding { Bottom = bar_height };
+                {
+                    AutoSizeAxes = Axes.Both;
+                    Anchor = Anchor.CentreLeft;
+                    Origin = Anchor.CentreLeft;
+
+                    InternalChild = text = new OsuSpriteText
+                    {
+                        Text = Value.Title
+                    };
+
+                    updateState();
+                }
+
+                protected override void OnActivated() => updateState();
+
+                protected override void OnDeactivated() => updateState();
+
+                protected override bool OnHover(HoverEvent e)
+                {
+                    updateState();
+                    return true;
+                }
+
+                protected override void OnHoverLost(HoverLostEvent e) => updateState();
+
+                private void updateState()
+                {
+                    text.Font = OsuFont.Default.With(size: 14, weight: Active.Value ? FontWeight.SemiBold : FontWeight.Regular);
+
+                    Colour4 textColour;
+
+                    if (IsHovered)
+                        textColour = colourProvider.Light1;
+                    else
+                        textColour = Active.Value ? colourProvider.Content1 : colourProvider.Light2;
+
+                    text.FadeColour(textColour, 300, Easing.OutQuint);
                 }
             }
         }
@@ -231,7 +259,9 @@ namespace osu.Game.Overlays
                 Direction = FillDirection.Vertical,
                 AutoSizeAxes = Axes.Y,
                 RelativeSizeAxes = Axes.X,
-                Spacing = new Vector2(0, 20),
+                Spacing = new Vector2(0, 10),
+                Padding = new MarginPadding { Horizontal = 10 },
+                Margin = new MarginPadding { Bottom = 10 },
             };
         }
     }