Navigate Menu and Level bar

[KhueDao1]

Feature Description

Problem: What does the number indicate? Vocab number, Grammar number and Level number all too close to each other The level bar and menu avatar section are confusing and cluttered without a hierarchy design Need to simplify and add 3d Design elements

Rationale

Solution Redesign with hierarchy and consistent visual for clickable buttons Left is the avatar| menu button with drop shadow Right is the level bar with the Language button, Vocab, Grammar button, and the "LvL.number" to clearly indicate that the number is displaying the level and not the XP also make the button design bigger than just display the number.

Mockup

No response

Additional Context

No response

[linhtphung]

Also I suggest showing the total number of XPs somewhere.

[linhtphung]

Why are we simplifying fluffy chat options instead of improving what we already have there. Currently, it's Join space, New space, My Learning Settings, Settings, and Logout? Why going back to Fluffychat?

[KhueDao1]

Final version as of November 8th Linh and I are clear on this design, what do you think? @ggurdin @wcjord

[ggurdin]

I like it! Do those buttons have drop shadows or inset shadows?

[KhueDao1]

Yes, Avatar has Drop shadows left down, purple, more prominent, and 80% opacity @ggurdin

All buttons on the right have fill white Background color and Drop shadow down, right purple and 100 opacity, and little prominent. Bold text and with an icon on the left

Avatar height = right section height with a gap in between Top right section display user ID in regular text Then, the Language button to the left and 2 buttons for Vocab and Grammar to the right, same height Finally, the level progress bar is always in Yellow Brand color (independent from the System color setting so it doesn't change color when the user changes appearance color in the setting.)

[ggurdin]

@wcjord @KhueDao1 Here's an initial draft of this:

I prefer the look of the light-mode version - I couldn't find a good shadow color for the dark mode background

[wcjord]

@ggurdin Looks good! Definitely some tweaks to make but let's go ahead and merge it. We can make edits from there.

[KhueDao1]

Nov, 11th : Level bar variation