-
-
Notifications
You must be signed in to change notification settings - Fork 246
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
fix(suite): Make view only promo content screen more responsive #13415
Conversation
97e0ce0
to
c48bd06
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks much better. Few comments and ready to go
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏 thanks for cleaning up my ugly CSS coding 🙇 😁
const ViewOnlyButton = styled(Button)` | ||
width: 50%; | ||
|
||
@media (max-width: ${variables.SCREEN_SIZE.SM}) { | ||
width: 100%; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm thinking could we avoid overriding Button component? 🙏 We try to avoid overriding as much as possible, because it increases complexity and lowers predictability.
I think it should be possible to do it here with following changes:
ButtonsContainer
should contain media queries logic and it should changeflex-direction
Button
component should haveisFullWidth
prop which is the same likewidth: 100%
WDYT?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Of course I do know we try to avoid overriding components as much as possible. I wouldn't do it if I saw some nicer ways to achieve the expected look and behavior.
Suggested ButtonsContainer
changes could work, but without adjusting Button
itself here I'm not sure if we can achieve the expectations easily. The thing is that...
...with isFullWidth
the button takes too much horizontal space for big screens (when used with css flex props we need to make the screen more responsive). We'd still need to specify its width to avoid that and when we do this, using isFullWidth
becomes unnecessary, so I've removed that.
But let's take some more time to figure this out...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nicely done! Works like a charm 👍
4f6e0df
to
7e4a244
Compare
Description
Use
spacingsPx
for some css padding/margin values instead, where possible, add some more small adjustments.Related Issue
Resolve #13261
Screenshots:
Before:
![promo_before](https://private-user-images.githubusercontent.com/13417815/349993737-1830722d-5be3-48a5-9af9-81aaad5865ae.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTk1NjIsIm5iZiI6MTcyNTU5OTI2MiwicGF0aCI6Ii8xMzQxNzgxNS8zNDk5OTM3MzctMTgzMDcyMmQtNWJlMy00OGE1LTlhZjktODFhYWFkNTg2NWFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDA1MDc0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAxYTE1ZjY5ODczMjg4MGQ3N2M1MTE2ZThkY2MzYzhjMWM3YTU5NTNhZDVmYmE5Y2VmYmY5ODAwMGEwODc4YWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.2Zp6ufPHYzC3HbgrF-5HWkJ1OeJxYIG5gKDPH_OmqzA)
After:
![promo_after](https://private-user-images.githubusercontent.com/13417815/349993715-baf2c284-64a8-4349-8daf-dbe6fa298e40.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTk1NjIsIm5iZiI6MTcyNTU5OTI2MiwicGF0aCI6Ii8xMzQxNzgxNS8zNDk5OTM3MTUtYmFmMmMyODQtNjRhOC00MzQ5LThkYWYtZGJlNmZhMjk4ZTQwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTA2VDA1MDc0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVlMTgzY2I3MTNiM2UwYmM0OWI4YTdmNjQ4YzE0MTQ2YzUxZTJjNTc0NTcyMDVlMjJkMjljYjUwN2JhNWVjMDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.uX6Eb0WkmAXYzrohrXuA_QwzG0uhzIl1z8Z2RJWlEOA)