Making `/settings`' buttons consistent
See original GitHub issueIs your feature request related to a problem? Please describe.
There are 3 buttons with different innerText View
, Show Code
, Show Solution
Edit: did I just put same buttons twice🤦🤣, because I am currently away from laptop check setting
Describe the solution you’d like
Swapping Show Code
and Show Solution
with View
for consistent look, while adding .sr-only
to span
in the button
with innerText
equal to Code or Solution.
Examples:
- <button>Show Code</button>
- <button>Show Solution</button>
+ <button>View <span class="sr-only>Code</span></button>
+ <button>View <span class="sr-only>Solution</span></button>
Describe alternatives you’ve considered
Nothing, this isn’t a true issue. Quality of life change
Additional context
This idea is originated from full button width
for more info check comment in https://github.com/freeCodeCamp/freeCodeCamp/issues/45947#issuecomment-1130030952
Issue Analytics
- State:
- Created a year ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
How To Design Better Buttons - Smashing Magazine
A safe bet is to make buttons square or square with rounded corners, depending on the style of the site or app. Rectangular...
Read more >Icon consistency in buttons - User Experience Stack Exchange
Consistency for button can only be achieved if all buttons are text only · However, having common icon (such as 'Settings', 'Sync') in...
Read more >Buttons - Menus and actions - Human Interface Guidelines
When buttons are instantly recognizable and easy to understand, an app tends to feel intuitive and well designed. Make buttons easy for people...
Read more >How to Maintain a Consistent Look for Buttons in GeneratePress
For the GenerateBlocks Button block, you can make the change in the block settings under Advanced > CSS Classes.
Read more >Set consistent font styles and create buttons with auto layout ...
Figma gives us the ability to save styles, colors and other components that can be re-used at a later time. This ensures consistency...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@tom-raley Hello! I am working on this at the moment 😄
@Hdanzo yeab that would be lovely 👍.
If you would like to fix this issue, please make sure you read our guidelines for contributing, we prioritize contributors following the instructions in our guides. Join us in our chat room or the forum if you need help contributing, our moderators will guide you through this.