DEV Community

Cover image for Styling issues with response Templates Buttons
Thomas Bnt β˜•
Thomas Bnt β˜• Subscriber

Posted on

Styling issues with response Templates Buttons

Hello here! I'm Thomas and 22 years old. I really in love of DEV.to(gether) and sometimes I contribute to the code.

Open Source Background

I started a few years ago to contribute to Open Source projects, basically I love helping people.

This merger allowed me to better understand some aspects of web developers, to say that you are never alone with a problem, that you can always be helped. You just have to ask!

About This Bug

I have already seen this possibility issue, but never created a new issue on the repository. it's absolutely nothing but seeing buttons with a default style, it stings my eyes 😡

Preview of the default buttons

Styling Issues With Response Templates Buttons #13747

Describe the bug

The moderator templates button under response templates is not styled.

Expected behavior

The buttons should be styled so that you can see when you click on one!

Screenshots

Image 2021-05-12 at 9 28 42 AM

How I Smashed It

I modified the style of the two buttons while adding a black color to the active class.
Preview of buttons stylised

Others themes work, good!
Others themes colors

Oh and edited submit buttons like 'Send as Mod' and 'Insert'. More margin 😎

Two buttons with style

Edit buttons styles for Templates responses (Mod) #14468

What type of PR is this? (check all applicable)

  • [x] Refactor
  • [ ] Feature
  • [ ] Bug Fix
  • [ ] Optimization
  • [ ] Documentation Update

Description

Make styles for buttons "Personal" and "Moderator" for Templates responses.

Related Tickets & Documents

From https://github.com/forem/forem/issues/13747

QA Instructions, Screenshots, Recordings

https://user-images.githubusercontent.com/14293805/128946040-412c7195-ad9b-4c2b-8186-2dcba84a992f.mp4

Added/updated tests?

  • [x] Yes
  • [ ] No, and this is why: please replace this line with details on why tests have not been included
  • [ ] I need help with writing tests

[Forem core team only] How will this change be communicated?

Will this PR introduce a change that impacts Forem members or creators, the development process, or any of our internal teams? If so, please note how you will share this change with the people who need to know about it.

  • [ ] I've updated the Developer Docs and/or Admin Guide, or Storybook (for Crayons components)
  • [ ] I've updated the README or added inline documentation
  • [ ] I've added an entry to CHANGELOG.md
  • [ ] I will share this change in a Changelog or in a forem.dev post
  • [ ] I will share this change internally with the appropriate teams
  • [ ] I'm not sure how best to communicate this change and need help
  • [ ] This change does not need to be communicated, and this is why not: please replace this line with details on why this change doesn't need to be shared

[optional] What gif best describes this PR or how it makes you feel?

New Girl Fistbump GIF

Reflection

I learned how used @extend with SCSS. Pretty nice tool, yeah! πŸ’ͺ🏼
Maybe smash others bugs like that for Forem 😎

Suggestions for DEV Community Bug Smash

Noope ! Just thanks again to @nickytonline @rhymes @citizen428 @s_aitchison and @coffeecraftcode for helping me !

Top comments (4)

Collapse
 
s_aitchison profile image
Suzanne Aitchison

Thanks for smashing this bug - it looks great! 🀩

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

Booom!

Collapse
 
nickytonline profile image
Nick Taylor

This looks so much better! πŸ”₯

Collapse
 
thomasbnt profile image
Thomas Bnt β˜•

Yep much better than defaults buttons πŸ˜†πŸ‘ŒπŸΌ