Merge pull request #8132 from EVAST9919/user-cards-update

Update user panel design

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

@@ -54,7 +54,7 @@ namespace osu.Game.Tests.Visual.Online
             API.Logout();
 
             localUser = API.LocalUser.GetBoundCopy();
-            localUser.BindValueChanged(user => { userPanelArea.Child = new UserPanel(user.NewValue) { Width = 200 }; }, true);
+            localUser.BindValueChanged(user => { userPanelArea.Child = new UserGridPanel(user.NewValue) { Width = 200 }; }, true);
 
             AddStep("logout", API.Logout);
         }

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

@@ -18,10 +18,9 @@ namespace osu.Game.Tests.Visual.Online
         public override IReadOnlyList<Type> RequiredTypes => new[]
         {
             typeof(UserPanel),
-            typeof(SocialPanel),
             typeof(FilterControl),
-            typeof(SocialGridPanel),
+            typeof(UserGridPanel),
-            typeof(SocialListPanel)
+            typeof(UserListPanel)
         };
 
         public TestSceneSocialOverlay()

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

@@ -1,6 +1,8 @@
 // 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 System;
+using System.Collections.Generic;
 using NUnit.Framework;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
@@ -15,9 +17,18 @@ namespace osu.Game.Tests.Visual.Online
     [TestFixture]
     public class TestSceneUserPanel : OsuTestScene
     {
-        private readonly Bindable<UserActivity> activity = new Bindable<UserActivity>();
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(UserPanel),
+            typeof(UserListPanel),
+            typeof(UserGridPanel),
+        };
 
-        private UserPanel peppy;
+        private readonly Bindable<UserActivity> activity = new Bindable<UserActivity>();
+        private readonly Bindable<UserStatus> status = new Bindable<UserStatus>();
+
+        private UserGridPanel peppy;
+        private UserListPanel evast;
 
         [Resolved]
         private RulesetStore rulesetStore { get; set; }
@@ -25,24 +36,25 @@ namespace osu.Game.Tests.Visual.Online
         [SetUp]
         public void SetUp() => Schedule(() =>
         {
-            UserPanel flyte;
+            UserGridPanel flyte;
 
             Child = new FillFlowContainer
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,
-                AutoSizeAxes = Axes.Both,
+                AutoSizeAxes = Axes.Y,
+                RelativeSizeAxes = Axes.X,
                 Spacing = new Vector2(10f),
-                Children = new[]
+                Children = new Drawable[]
                 {
-                    flyte = new UserPanel(new User
+                    flyte = new UserGridPanel(new User
                     {
                         Username = @"flyte",
                         Id = 3103765,
                         Country = new Country { FlagName = @"JP" },
                         CoverUrl = @"https://osu.ppy.sh/images/headers/profile-covers/c6.jpg"
                     }) { Width = 300 },
-                    peppy = new UserPanel(new User
+                    peppy = new UserGridPanel(new User
                     {
                         Username = @"peppy",
                         Id = 2,
@@ -51,27 +63,40 @@ namespace osu.Game.Tests.Visual.Online
                         IsSupporter = true,
                         SupportLevel = 3,
                     }) { Width = 300 },
+                    evast = new UserListPanel(new User
+                    {
+                        Username = @"Evast",
+                        Id = 8195163,
+                        Country = new Country { FlagName = @"BY" },
+                        CoverUrl = @"https://assets.ppy.sh/user-profile-covers/8195163/4a8e2ad5a02a2642b631438cfa6c6bd7e2f9db289be881cb27df18331f64144c.jpeg",
+                        IsOnline = false,
+                        LastVisit = DateTimeOffset.Now
+                    })
                 },
             };
 
             flyte.Status.Value = new UserStatusOnline();
-            peppy.Status.Value = null;
+
+            peppy.Status.BindTo(status);
             peppy.Activity.BindTo(activity);
+
+            evast.Status.BindTo(status);
+            evast.Activity.BindTo(activity);
         });
 
         [Test]
         public void TestUserStatus()
         {
-            AddStep("online", () => peppy.Status.Value = new UserStatusOnline());
+            AddStep("online", () => status.Value = new UserStatusOnline());
-            AddStep("do not disturb", () => peppy.Status.Value = new UserStatusDoNotDisturb());
+            AddStep("do not disturb", () => status.Value = new UserStatusDoNotDisturb());
-            AddStep("offline", () => peppy.Status.Value = new UserStatusOffline());
+            AddStep("offline", () => status.Value = new UserStatusOffline());
-            AddStep("null status", () => peppy.Status.Value = null);
+            AddStep("null status", () => status.Value = null);
         }
 
         [Test]
         public void TestUserActivity()
         {
-            AddStep("set online status", () => peppy.Status.Value = new UserStatusOnline());
+            AddStep("set online status", () => peppy.Status.Value = evast.Status.Value = new UserStatusOnline());
 
             AddStep("idle", () => activity.Value = null);
             AddStep("spectating", () => activity.Value = new UserActivity.Spectating());

osu.Game.Tournament/Screens/Editors/TeamEditorScreen.cs

@@ -296,7 +296,7 @@ namespace osu.Game.Tournament.Screens.Editors
 
                     private void updatePanel()
                     {
-                        drawableContainer.Child = new UserPanel(user) { Width = 300 };
+                        drawableContainer.Child = new UserGridPanel(user) { Width = 300 };
                     }
                 }
             }

osu.Game/Overlays/Settings/Sections/General/LoginSettings.cs

@@ -143,7 +143,7 @@ namespace osu.Game.Overlays.Settings.Sections.General
                                         },
                                     },
                                 },
-                                panel = new UserPanel(api.LocalUser.Value)
+                                panel = new UserGridPanel(api.LocalUser.Value)
                                 {
                                     RelativeSizeAxes = Axes.X,
                                     Action = RequestHide

osu.Game/Overlays/Social/SocialGridPanel.cs

@@ -1,16 +0,0 @@
-// 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.Game.Users;
-
-namespace osu.Game.Overlays.Social
-{
-    public class SocialGridPanel : SocialPanel
-    {
-        public SocialGridPanel(User user)
-            : base(user)
-        {
-            Width = 300;
-        }
-    }
-}

osu.Game/Overlays/Social/SocialListPanel.cs

@@ -1,17 +0,0 @@
-// 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.Graphics;
-using osu.Game.Users;
-
-namespace osu.Game.Overlays.Social
-{
-    public class SocialListPanel : SocialPanel
-    {
-        public SocialListPanel(User user)
-            : base(user)
-        {
-            RelativeSizeAxes = Axes.X;
-        }
-    }
-}

osu.Game/Overlays/Social/SocialPanel.cs

@@ -1,61 +0,0 @@
-// 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.Extensions.Color4Extensions;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Effects;
-using osu.Framework.Input.Events;
-using osu.Game.Users;
-
-namespace osu.Game.Overlays.Social
-{
-    public class SocialPanel : UserPanel
-    {
-        private const double hover_transition_time = 400;
-
-        public SocialPanel(User user)
-            : base(user)
-        {
-        }
-
-        private readonly EdgeEffectParameters edgeEffectNormal = new EdgeEffectParameters
-        {
-            Type = EdgeEffectType.Shadow,
-            Offset = new Vector2(0f, 1f),
-            Radius = 2f,
-            Colour = Color4.Black.Opacity(0.25f),
-        };
-
-        private readonly EdgeEffectParameters edgeEffectHovered = new EdgeEffectParameters
-        {
-            Type = EdgeEffectType.Shadow,
-            Offset = new Vector2(0f, 5f),
-            Radius = 10f,
-            Colour = Color4.Black.Opacity(0.3f),
-        };
-
-        protected override bool OnHover(HoverEvent e)
-        {
-            Content.TweenEdgeEffectTo(edgeEffectHovered, hover_transition_time, Easing.OutQuint);
-            Content.MoveToY(-4, hover_transition_time, Easing.OutQuint);
-
-            return base.OnHover(e);
-        }
-
-        protected override void OnHoverLost(HoverLostEvent e)
-        {
-            Content.TweenEdgeEffectTo(edgeEffectNormal, hover_transition_time, Easing.OutQuint);
-            Content.MoveToY(0, hover_transition_time, Easing.OutQuint);
-
-            base.OnHoverLost(e);
-        }
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-            this.FadeInFromZero(200, Easing.Out);
-        }
-    }
-}

osu.Game/Overlays/SocialOverlay.cs

@@ -25,7 +25,7 @@ namespace osu.Game.Overlays
     public class SocialOverlay : SearchableListOverlay<SocialTab, SocialSortCriteria, SortDirection>
     {
         private readonly LoadingSpinner loading;
-        private FillFlowContainer<SocialPanel> panels;
+        private FillFlowContainer<UserPanel> panels;
 
         protected override Color4 BackgroundColour => Color4Extensions.FromHex(@"60284b");
         protected override Color4 TrianglesColourLight => Color4Extensions.FromHex(@"672b51");
@@ -158,7 +158,7 @@ namespace osu.Game.Overlays
             if (Filter.DisplayStyleControl.Dropdown.Current.Value == SortDirection.Descending)
                 sortedUsers = sortedUsers.Reverse();
 
-            var newPanels = new FillFlowContainer<SocialPanel>
+            var newPanels = new FillFlowContainer<UserPanel>
             {
                 RelativeSizeAxes = Axes.X,
                 AutoSizeAxes = Axes.Y,
@@ -166,20 +166,21 @@ namespace osu.Game.Overlays
                 Margin = new MarginPadding { Top = 10 },
                 ChildrenEnumerable = sortedUsers.Select(u =>
                 {
-                    SocialPanel panel;
+                    UserPanel panel;
 
                     switch (Filter.DisplayStyleControl.DisplayStyle.Value)
                     {
                         case PanelDisplayStyle.Grid:
-                            panel = new SocialGridPanel(u)
+                            panel = new UserGridPanel(u)
                             {
                                 Anchor = Anchor.TopCentre,
-                                Origin = Anchor.TopCentre
+                                Origin = Anchor.TopCentre,
+                                Width = 290,
                             };
                             break;
 
                         default:
-                            panel = new SocialListPanel(u);
+                            panel = new UserListPanel(u);
                             break;
                     }
 

osu.Game/Users/UserGridPanel.cs

@@ -0,0 +1,139 @@
+// 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.Game.Overlays.Profile.Header.Components;
+using osuTK;
+
+namespace osu.Game.Users
+{
+    public class UserGridPanel : UserPanel
+    {
+        private const int margin = 10;
+
+        public UserGridPanel(User user)
+            : base(user)
+        {
+            Height = 120;
+            CornerRadius = 10;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Background.FadeTo(0.3f);
+        }
+
+        protected override Drawable CreateLayout()
+        {
+            FillFlowContainer details;
+
+            var layout = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Padding = new MarginPadding(margin),
+                Child = new GridContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    ColumnDimensions = new[]
+                    {
+                        new Dimension(GridSizeMode.AutoSize),
+                        new Dimension()
+                    },
+                    RowDimensions = new[]
+                    {
+                        new Dimension(GridSizeMode.AutoSize),
+                        new Dimension(GridSizeMode.Absolute, margin),
+                        new Dimension()
+                    },
+                    Content = new[]
+                    {
+                        new Drawable[]
+                        {
+                            CreateAvatar().With(avatar =>
+                            {
+                                avatar.Size = new Vector2(60);
+                                avatar.Masking = true;
+                                avatar.CornerRadius = 6;
+                            }),
+                            new Container
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Padding = new MarginPadding { Left = margin },
+                                Child = new GridContainer
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    ColumnDimensions = new[]
+                                    {
+                                        new Dimension()
+                                    },
+                                    RowDimensions = new[]
+                                    {
+                                        new Dimension(GridSizeMode.AutoSize),
+                                        new Dimension()
+                                    },
+                                    Content = new[]
+                                    {
+                                        new Drawable[]
+                                        {
+                                            details = new FillFlowContainer
+                                            {
+                                                AutoSizeAxes = Axes.Both,
+                                                Direction = FillDirection.Horizontal,
+                                                Spacing = new Vector2(6),
+                                                Children = new Drawable[]
+                                                {
+                                                    CreateFlag(),
+                                                }
+                                            }
+                                        },
+                                        new Drawable[]
+                                        {
+                                            CreateUsername().With(username =>
+                                            {
+                                                username.Anchor = Anchor.CentreLeft;
+                                                username.Origin = Anchor.CentreLeft;
+                                            })
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        new[]
+                        {
+                            Empty(),
+                            Empty()
+                        },
+                        new Drawable[]
+                        {
+                            CreateStatusIcon().With(icon =>
+                            {
+                                icon.Anchor = Anchor.Centre;
+                                icon.Origin = Anchor.Centre;
+                            }),
+                            CreateStatusMessage(false).With(message =>
+                            {
+                                message.Anchor = Anchor.CentreLeft;
+                                message.Origin = Anchor.CentreLeft;
+                                message.Margin = new MarginPadding { Left = margin };
+                            })
+                        }
+                    }
+                }
+            };
+
+            if (User.IsSupporter)
+            {
+                details.Add(new SupporterIcon
+                {
+                    Height = 26,
+                    SupportLevel = User.SupportLevel
+                });
+            }
+
+            return layout;
+        }
+    }
+}

osu.Game/Users/UserListPanel.cs

@@ -0,0 +1,107 @@
+// 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.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Extensions.Color4Extensions;
+using osuTK.Graphics;
+using osu.Framework.Graphics.Containers;
+using osuTK;
+using osu.Game.Overlays.Profile.Header.Components;
+
+namespace osu.Game.Users
+{
+    public class UserListPanel : UserPanel
+    {
+        public UserListPanel(User user)
+            : base(user)
+        {
+            RelativeSizeAxes = Axes.X;
+            Height = 40;
+            CornerRadius = 6;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Background.Width = 0.5f;
+            Background.Colour = ColourInfo.GradientHorizontal(Color4.White.Opacity(1), Color4.White.Opacity(0.3f));
+        }
+
+        protected override Drawable CreateLayout()
+        {
+            FillFlowContainer details;
+
+            var layout = new Container
+            {
+                RelativeSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    details = new FillFlowContainer
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(10, 0),
+                        Children = new Drawable[]
+                        {
+                            CreateAvatar().With(avatar =>
+                            {
+                                avatar.Anchor = Anchor.CentreLeft;
+                                avatar.Origin = Anchor.CentreLeft;
+                                avatar.Size = new Vector2(40);
+                            }),
+                            CreateFlag().With(flag =>
+                            {
+                                flag.Anchor = Anchor.CentreLeft;
+                                flag.Origin = Anchor.CentreLeft;
+                            }),
+                            CreateUsername().With(username =>
+                            {
+                                username.Anchor = Anchor.CentreLeft;
+                                username.Origin = Anchor.CentreLeft;
+                            })
+                        }
+                    },
+                    new FillFlowContainer
+                    {
+                        Anchor = Anchor.CentreRight,
+                        Origin = Anchor.CentreRight,
+                        AutoSizeAxes = Axes.Both,
+                        Direction = FillDirection.Horizontal,
+                        Spacing = new Vector2(10, 0),
+                        Margin = new MarginPadding { Right = 10 },
+                        Children = new Drawable[]
+                        {
+                            CreateStatusIcon().With(icon =>
+                            {
+                                icon.Anchor = Anchor.CentreRight;
+                                icon.Origin = Anchor.CentreRight;
+                            }),
+                            CreateStatusMessage(true).With(message =>
+                            {
+                                message.Anchor = Anchor.CentreRight;
+                                message.Origin = Anchor.CentreRight;
+                            })
+                        }
+                    }
+                }
+            };
+
+            if (User.IsSupporter)
+            {
+                details.Add(new SupporterIcon
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Height = 20,
+                    SupportLevel = User.SupportLevel
+                });
+            }
+
+            return layout;
+        }
+    }
+}

osu.Game/Users/UserPanel.cs

@@ -3,10 +3,8 @@
 
 using System;
 using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -16,198 +14,84 @@ using osu.Game.Overlays;
 using osu.Framework.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterface;
 using osu.Framework.Graphics.Cursor;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics.Containers;
-using osu.Game.Overlays.Profile.Header.Components;
 using osu.Game.Users.Drawables;
+using JetBrains.Annotations;
+using osu.Framework.Input.Events;
 
 namespace osu.Game.Users
 {
-    public class UserPanel : OsuClickableContainer, IHasContextMenu
+    public abstract class UserPanel : OsuClickableContainer, IHasContextMenu
     {
-        private const float height = 100;
-        private const float content_padding = 10;
-        private const float status_height = 30;
-
         public readonly User User;
 
-        [Resolved(canBeNull: true)]
-        private OsuColour colours { get; set; }
-
-        private Container statusBar;
-        private Box statusBg;
-        private OsuSpriteText statusMessage;
-
-        private Container content;
-        protected override Container<Drawable> Content => content;
-
         public readonly Bindable<UserStatus> Status = new Bindable<UserStatus>();
 
         public readonly IBindable<UserActivity> Activity = new Bindable<UserActivity>();
 
         public new Action Action;
 
-        protected Action ViewProfile;
+        protected Action ViewProfile { get; private set; }
 
-        public UserPanel(User user)
+        protected DelayedLoadUnloadWrapper Background { get; private set; }
+
+        private SpriteIcon statusIcon;
+        private OsuSpriteText statusMessage;
+        private TextFlowContainer lastVisitMessage;
+
+        protected UserPanel(User user)
         {
             if (user == null)
                 throw new ArgumentNullException(nameof(user));
 
             User = user;
-
-            Height = height - status_height;
         }
 
-        [BackgroundDependencyLoader(permitNulls: true)]
+        [Resolved(canBeNull: true)]
-        private void load(UserProfileOverlay profile)
+        private UserProfileOverlay profileOverlay { get; set; }
+
+        [Resolved(canBeNull: true)]
+        private OverlayColourProvider colourProvider { get; set; }
+
+        [Resolved]
+        private OsuColour colours { get; set; }
+
+        [BackgroundDependencyLoader]
+        private void load()
         {
-            if (colours == null)
+            Masking = true;
-                throw new InvalidOperationException($"{nameof(colours)} not initialized!");
+            BorderColour = colourProvider?.Light1 ?? colours.GreyVioletLighter;
 
-            FillFlowContainer infoContainer;
+            AddRange(new[]
-
-            AddInternal(content = new Container
             {
-                RelativeSizeAxes = Axes.Both,
+                new Box
-                Masking = true,
-                CornerRadius = 5,
-                EdgeEffect = new EdgeEffectParameters
                 {
-                    Type = EdgeEffectType.Shadow,
+                    RelativeSizeAxes = Axes.Both,
-                    Colour = Color4.Black.Opacity(0.25f),
+                    Colour = colourProvider?.Background5 ?? colours.Gray1
-                    Radius = 4,
                 },
-
+                Background = new DelayedLoadUnloadWrapper(() => new UserCoverBackground
-                Children = new Drawable[]
                 {
-                    new DelayedLoadUnloadWrapper(() => new UserCoverBackground
+                    RelativeSizeAxes = Axes.Both,
-                    {
+                    Anchor = Anchor.Centre,
-                        RelativeSizeAxes = Axes.Both,
+                    Origin = Anchor.Centre,
-                        Anchor = Anchor.Centre,
+                    User = User,
-                        Origin = Anchor.Centre,
+                }, 300, 5000)
-                        User = User,
+                {
-                    }, 300, 5000)
+                    Anchor = Anchor.CentreRight,
-                    {
+                    Origin = Anchor.CentreRight,
-                        RelativeSizeAxes = Axes.Both,
+                    RelativeSizeAxes = Axes.Both,
-                    },
+                },
-                    new Box
+                CreateLayout()
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = Color4.Black.Opacity(0.7f),
-                    },
-                    new Container
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y,
-                        Padding = new MarginPadding { Top = content_padding, Horizontal = content_padding },
-                        Children = new Drawable[]
-                        {
-                            new UpdateableAvatar
-                            {
-                                Size = new Vector2(height - status_height - content_padding * 2),
-                                User = User,
-                                Masking = true,
-                                CornerRadius = 5,
-                                OpenOnClick = { Value = false },
-                                EdgeEffect = new EdgeEffectParameters
-                                {
-                                    Type = EdgeEffectType.Shadow,
-                                    Colour = Color4.Black.Opacity(0.25f),
-                                    Radius = 4,
-                                },
-                            },
-                            new Container
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding { Left = height - status_height - content_padding },
-                                Children = new Drawable[]
-                                {
-                                    new OsuSpriteText
-                                    {
-                                        Text = User.Username,
-                                        Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: 18, italics: true),
-                                    },
-                                    infoContainer = new FillFlowContainer
-                                    {
-                                        Anchor = Anchor.BottomLeft,
-                                        Origin = Anchor.BottomLeft,
-                                        AutoSizeAxes = Axes.X,
-                                        Height = 20f,
-                                        Direction = FillDirection.Horizontal,
-                                        Spacing = new Vector2(5f, 0f),
-                                        Children = new Drawable[]
-                                        {
-                                            new UpdateableFlag(User.Country)
-                                            {
-                                                Width = 30f,
-                                                RelativeSizeAxes = Axes.Y,
-                                            },
-                                        },
-                                    },
-                                },
-                            },
-                        },
-                    },
-                    statusBar = new Container
-                    {
-                        Anchor = Anchor.BottomLeft,
-                        Origin = Anchor.BottomLeft,
-                        RelativeSizeAxes = Axes.X,
-                        Alpha = 0f,
-                        Children = new Drawable[]
-                        {
-                            statusBg = new Box
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Alpha = 0.5f,
-                            },
-                            new FillFlowContainer
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                AutoSizeAxes = Axes.Both,
-                                Spacing = new Vector2(5f, 0f),
-                                Children = new Drawable[]
-                                {
-                                    new SpriteIcon
-                                    {
-                                        Anchor = Anchor.CentreLeft,
-                                        Origin = Anchor.CentreLeft,
-                                        Icon = FontAwesome.Regular.Circle,
-                                        Shadow = true,
-                                        Size = new Vector2(14),
-                                    },
-                                    statusMessage = new OsuSpriteText
-                                    {
-                                        Anchor = Anchor.CentreLeft,
-                                        Origin = Anchor.CentreLeft,
-                                        Font = OsuFont.GetFont(weight: FontWeight.SemiBold),
-                                    },
-                                },
-                            },
-                        },
-                    },
-                }
             });
 
-            if (User.IsSupporter)
-            {
-                infoContainer.Add(new SupporterIcon
-                {
-                    Height = 20f,
-                    SupportLevel = User.SupportLevel
-                });
-            }
-
             Status.ValueChanged += status => displayStatus(status.NewValue, Activity.Value);
             Activity.ValueChanged += activity => displayStatus(Status.Value, activity.NewValue);
 
             base.Action = ViewProfile = () =>
             {
                 Action?.Invoke();
-                profile?.ShowUser(User);
+                profileOverlay?.ShowUser(User);
             };
         }
 
@@ -217,33 +101,110 @@ namespace osu.Game.Users
             Status.TriggerChange();
         }
 
+        protected override bool OnHover(HoverEvent e)
+        {
+            BorderThickness = 2;
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            BorderThickness = 0;
+            base.OnHoverLost(e);
+        }
+
+        [NotNull]
+        protected abstract Drawable CreateLayout();
+
+        protected UpdateableAvatar CreateAvatar() => new UpdateableAvatar
+        {
+            User = User,
+            OpenOnClick = { Value = false }
+        };
+
+        protected UpdateableFlag CreateFlag() => new UpdateableFlag(User.Country)
+        {
+            Size = new Vector2(39, 26)
+        };
+
+        protected OsuSpriteText CreateUsername() => new OsuSpriteText
+        {
+            Font = OsuFont.GetFont(size: 16, weight: FontWeight.Bold),
+            Shadow = false,
+            Text = User.Username,
+        };
+
+        protected SpriteIcon CreateStatusIcon() => statusIcon = new SpriteIcon
+        {
+            Icon = FontAwesome.Regular.Circle,
+            Size = new Vector2(25)
+        };
+
+        protected FillFlowContainer CreateStatusMessage(bool rightAlignedChildren)
+        {
+            var statusContainer = new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.Both,
+                Direction = FillDirection.Vertical
+            };
+
+            var alignment = rightAlignedChildren ? Anchor.CentreRight : Anchor.CentreLeft;
+
+            statusContainer.Add(lastVisitMessage = new TextFlowContainer(t => t.Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold)).With(text =>
+            {
+                text.Anchor = alignment;
+                text.Origin = alignment;
+                text.AutoSizeAxes = Axes.Both;
+                text.Alpha = 0;
+
+                if (User.LastVisit.HasValue)
+                {
+                    text.AddText(@"Last seen ");
+                    text.AddText(new DrawableDate(User.LastVisit.Value, italic: false)
+                    {
+                        Shadow = false
+                    });
+                }
+            }));
+
+            statusContainer.Add(statusMessage = new OsuSpriteText
+            {
+                Anchor = alignment,
+                Origin = alignment,
+                Font = OsuFont.GetFont(size: 14, weight: FontWeight.SemiBold)
+            });
+
+            return statusContainer;
+        }
+
         private void displayStatus(UserStatus status, UserActivity activity = null)
         {
-            const float transition_duration = 500;
+            if (status != null)
+            {
+                // Set status message based on activity (if we have one) and status is not offline
+                if (activity != null && !(status is UserStatusOffline))
+                {
+                    statusMessage.Text = activity.Status;
+                    statusIcon.FadeColour(activity.GetAppropriateColour(colours), 500, Easing.OutQuint);
+                    return;
+                }
 
-            if (status == null)
+                // Otherwise use only status
-            {
+                lastVisitMessage.FadeTo(status is UserStatusOffline && User.LastVisit.HasValue ? 1 : 0);
-                statusBar.ResizeHeightTo(0f, transition_duration, Easing.OutQuint);
+                statusMessage.Text = status.Message;
-                statusBar.FadeOut(transition_duration, Easing.OutQuint);
+                statusIcon.FadeColour(status.GetAppropriateColour(colours), 500, Easing.OutQuint);
-                this.ResizeHeightTo(height - status_height, transition_duration, Easing.OutQuint);
+
-            }
+                return;
-            else
-            {
-                statusBar.ResizeHeightTo(status_height, transition_duration, Easing.OutQuint);
-                statusBar.FadeIn(transition_duration, Easing.OutQuint);
-                this.ResizeHeightTo(height, transition_duration, Easing.OutQuint);
             }
 
-            if (status is UserStatusOnline && activity != null)
+            // Fallback to web status if local one is null
+            if (User.IsOnline)
             {
-                statusMessage.Text = activity.Status;
+                Status.Value = new UserStatusOnline();
-                statusBg.FadeColour(activity.GetAppropriateColour(colours), 500, Easing.OutQuint);
+                return;
-            }
-            else
-            {
-                statusMessage.Text = status?.Message;
-                statusBg.FadeColour(status?.GetAppropriateColour(colours) ?? colours.Gray5, 500, Easing.OutQuint);
             }
+
+            Status.Value = new UserStatusOffline();
         }
 
         public MenuItem[] ContextMenuItems => new MenuItem[]

osu.Game/Users/UserStatus.cs

@@ -15,7 +15,7 @@ namespace osu.Game.Users
     public class UserStatusOnline : UserStatus
     {
         public override string Message => @"Online";
-        public override Color4 GetAppropriateColour(OsuColour colours) => colours.BlueDarker;
+        public override Color4 GetAppropriateColour(OsuColour colours) => colours.GreenLight;
     }
 
     public abstract class UserStatusBusy : UserStatusOnline
@@ -26,7 +26,7 @@ namespace osu.Game.Users
     public class UserStatusOffline : UserStatus
     {
         public override string Message => @"Offline";
-        public override Color4 GetAppropriateColour(OsuColour colours) => colours.Gray7;
+        public override Color4 GetAppropriateColour(OsuColour colours) => Color4.Black;
     }
 
     public class UserStatusDoNotDisturb : UserStatus