Update styling to adapt to new sharing button

fatih-yavuz / links.dev

A free linktree alternative only for devs. Get a nice page at links.dev/username. Simple site to group all your links. Register your username before someone else does.

MIT License

227 stars 149 forks source link

Update styling to adapt to new sharing button #183

Closed esau-morais closed 1 year ago

esau-morais commented 1 year ago

Description

What types of changes does your code introduce to links.dev?

:information_source: Put a x in one or more boxes that might apply to it

[ ] Bug fix (non-breaking change which fixes an issue)
[X] Feature (non-breaking change which adds functionality)
[X] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Documentation (if none of the other choices apply)

fatih-yavuz commented 1 year ago

Would these changes affect the existing design? If so, how? Can you add a screenshot?

esau-morais commented 1 year ago

Would these changes affect the existing design? If so, how? Can you add a screenshot?

Changes

This PR applies abstraction to some classes, which affects the following elements:

[ ] icons
[ ] buttons

The idea is to divide styling between an icon and button handling with their use cases without implying the custom.css

I've applied a default background for the icon button, but it can be forced in the custom.css using !important

Screenshots

desktop view

mobile view

fatih-yavuz commented 1 year ago

As you mentioned @esau-morais, this is a destructive PR. It forces people to update their custom CSS or their page will look bad. We cannot do it. Everything we do must be backward compatible. Example:

esau-morais commented 1 year ago

As you mentioned @esau-morais, this is a destructive PR. It forces people to update their custom CSS or their page will look bad. We cannot do it. Everything we do must be backward compatible. Example:

I don't think the user will actually need to update the custom.css besides what I pointed out in the last comment once I've only extracted class names in refactor way. How did you reproduce this kind of styling change? Because before I made this PR, I tested with many users' links, including this one

alfreddagenais's links.dev page

PS.: I don't think my solution is the best and or the most beautiful to be honest, maybe suggesting a new default styling to the button is a great idea

fatih-yavuz commented 1 year ago

@esau-morais sorry, I tested it without applying the changes for the backend. I will fully test it tomorrow