Scheduled for resolution UX improvements

Hi;
I'd like to post about some UX improvements that could be made in CSS.


  • These buttons aren't lined up 🙁
    1639745655977.png

  • Certain buttons/actions lack feedback:
    • "Okay" button is grey, whether or not you have chosen an avatar or not. It's usual for this button to turn 'active' when the action is available (after uploading.)
    • There is no hover feedback on Okay
    • There is no hover feedback on Delete for the purpose of warning a user they are performing a destructive action.
  • The Paid Member icon seems a pixel too small for the star to center properly (this is a lower-dpi or lower-zoom related issue.)
    1639745862660.png
  • The Paid Member icon could use a text feedback/marker. I did not know what this icon was until I opened the debug console.
    In the below code, I found that the user banner text (which is in bold/strong html5 tags) is hidden by virtue of setting the font size to 0, inherited from the parent container that holds both the icon and the text (<em class="userBanner diy_paidUser">.)
    HTML:
    <em class="userBanner diy_paidUser">    <span class="userBanner-before"></span>
        <strong>Paid Member</strong>
        <span class="userBanner-after"></span>
    </em>
    CSS:
    .userBanner strong {
        font-weight: inherit;
    }
    
    .diy_paidUser {
        font-size: 0;
    }
  • The icons on the side bar under a user could use some improvement in consistency. As with precious display, the UserBanner that shows paidUser has a tag (in <strong>), but hidden. The OP/Original Poster tag does not; but it's also styled and sized differently, leading me to believe it might be simply an oversight 🙂.
    1639747337556.png
  • Some more cut off text :s
    1639747978799.png
  • Hovering here does not turn the text white to contrast it with the purple - or it's not supposed to turn purple
    1639748058281.png

  • This icon has done a disappearance trick.
    1639748186576.png
 
Last edited by a moderator: