Uploaded image for project: 'SonarQube'
  1. SonarQube
  2. SONAR-11714

Improve badges visual design so they don't look like buttons

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 8.0
    • Component/s: Web
    • Labels:
    • Edition:
      Community
    • Production Notes:
      None

      Description

      Badges (public, private, admin...) have a visual design very similar to buttons.

      We need to change the visual design of badges to make sure users can make a clear distinction between clickable and unclickable elements.

      Solution:

      • all badges should have a padding of 2px 4px 2px 4px
      • all badges text should be capitalized
      • font-size: 12px

       

      Main badges ("default badge" is now grey and no longer blue):

      • Background color: #E6E6E6
      • color: #444444

      Badges to indicate a new or depreciated feature:

      • "New" background color: #D9EDF7
      • "New" color: #0E516F
      • "Deprecated" background color: #F2DEDE
      • "Deprecated" color: #862422

      Built-in badge (this badge was grey and should now be blue):

      • Background color: #D9EDF7
      • Color: #0E516F

       When working on this ticket, please also do SONAR-12276

       

        Attachments

        1. admin.png
          admin.png
          3 kB
        2. private.png
          private.png
          4 kB
        3. screenshot-1.png
          screenshot-1.png
          4 kB
        4. screenshot-2.png
          screenshot-2.png
          12 kB
        5. Screenshot 2019-05-06 at 12.01.14.png
          Screenshot 2019-05-06 at 12.01.14.png
          6 kB
        6. Screenshot 2019-05-06 at 12.01.21.png
          Screenshot 2019-05-06 at 12.01.21.png
          7 kB
        7. Screenshot 2019-05-06 at 12.01.23.png
          Screenshot 2019-05-06 at 12.01.23.png
          6 kB
        8. Screenshot 2019-05-06 at 12.01.26.png
          Screenshot 2019-05-06 at 12.01.26.png
          5 kB
        9. Screenshot 2019-05-06 at 12.05.08.png
          Screenshot 2019-05-06 at 12.05.08.png
          6 kB
        10. Screenshot 2019-07-10 at 09.20.34.png
          Screenshot 2019-07-10 at 09.20.34.png
          30 kB
        11. Screenshot 2019-07-10 at 09.27.49.png
          Screenshot 2019-07-10 at 09.27.49.png
          46 kB
        12. Screenshot 2019-07-10 at 09.33.09.png
          Screenshot 2019-07-10 at 09.33.09.png
          7 kB
        13. Screenshot 2019-07-17 at 16.08.00.png
          Screenshot 2019-07-17 at 16.08.00.png
          76 kB
        14. screenshot-3.png
          screenshot-3.png
          6 kB

          Issue Links

            Activity

              People

              Assignee:
              wouter.admiraal Wouter Admiraal
              Reporter:
              mathieu.cutivel Mathieu Cutivel (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

                Dates

                Due:
                Created:
                Updated:
                Resolved: