Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5501

Consistency across all buttons, implement new buttons design


    • Icon: Task Task
    • Resolution: Released
    • Icon: Should have Should have
    • 2.42.1
    • 13
    • Styling/Theme
    • Sprint #147
    • umbriel

      All buttons should now have a 4px corner radius, be in Roboto Bold and in Lower Case. This applies to all buttons CTA, Secondary, and Donate.


      • Apply 4px radius to all button styles.
      • Use Roboto and font-weight bold.
      • Don't use custom text-tranform (eg. uppercase). That includes also blocks (eg. Split Two Columns, Carousel Header) and Donate button on Navbar. Instead we should use text-transform: capitalize, that will capitalize first letter on each word.
      • Add a text-transform-none class
      • Remove any custom border-radius from Campaign themes.
      • Confirm/Update colors from Design System. (Rollover=Hover, On Press=Active/Focus). Important: Primary button bg color is changing to #F36B35
      • Implement the text-transform in preview mode if possible (alternatively as a Feature toggle) / Pending asking Design Team if we want to enforce a text-transform or not. (No longer need that since we are enforcing a new rule)
      • Remove custom styles from Carousel Header buttons
      • Update default button texts when needed
      • Remove btn-medium class as it just duplicates the "regular" button styles

            mleray Maud Leray
            wmorrisj William Morris-Julien (Inactive)
            William Morris-Julien William Morris-Julien (Inactive)
            0 Vote for this issue
            3 Start watching this issue