Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: Aligned the button content in center #1710

Conversation

poswalsameer
Copy link

Description

This PR solves the issue of button content not being in center because of some inconsistent styling used in the example.css file. Refactored the code by introducing flexbox in it and aligning everything to the center.

Fixes: #1220

Implementation

Just needed to figure out where the applied class is present. Found it, and got to know that flexbox is not applied to it correctly. So changed the classes accordingly.

Tests

Basic CSS change, no tests required.

Todos

No

Additional context

Attaching the screenshot of the code file changed for reference:
Screenshot (116)

…ake sure the button content is aligned in center
@trueqbit
Copy link

How can I test this if I am using the 'dist' version of elements.js [version v1.1 downloaded from a CDN]?

@trueqbit
Copy link

@poswalsameer When I change the inline styles directly in the browser's developer console, the icon and the text are now too close together, as you can see in the screenshot.

@bjoern-m
Copy link
Contributor

Just a quick hint: The example CSS file isn’t embedded directly by Hanko elements. As the name suggests, it's only an example. For more information, check this section of the README. If you need to make adjustments, modify the SASS file located at frontend/elements/src/components/icons/styles.sass.

@poswalsameer
Copy link
Author

@poswalsameer When I change the inline styles directly in the browser's developer console, the icon and the text are now too close together, as you can see in the screenshot.

Thanks for pointing this out, I will surely look into this again.

@FlxMgdnz
Copy link
Member

/award 150

Copy link

oss-gg bot commented Oct 31, 2024

Awarding poswalsameer: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/poswalsameer

@bjoern-m
Copy link
Contributor

bjoern-m commented Nov 7, 2024

The example.css file has been regenerated, see PR. Hence, I am closing this ticket.

@bjoern-m bjoern-m closed this Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Alignment of button content
4 participants