-
Notifications
You must be signed in to change notification settings - Fork 14
Refactor country group switcher to CSS in JS #6645
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
Conversation
.component-country-group-switcher { | ||
display: inline-flex; | ||
|
||
.component-select-input__select { |
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 could not find this used anywhere, so I did not recreate in emotion
color: inherit; | ||
cursor: pointer; | ||
color: ${palette.neutral[100]}; | ||
${textSans17}; |
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.
The previous version was size 16, this doesn't exist in source so I went with 17px
Size Change: +4.72 kB (+0.21%) Total Size: 2.24 MB
ℹ️ View Unchanged
|
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.
LGTM. Great to get rid of this 👏
open ? 'open' : null, | ||
styled ? 'styled' : null, | ||
])} | ||
css={[dialog, open && openCss, styled && styledCss]} |
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.
Havent used that method before, saves passing the parameter in side the css, great
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 Good
Seen on PROD (merged by @andrewHEguardian 10 minutes and 7 seconds ago)
Sentry Release: support-client-side, support |
What are you doing in this PR?
Refactor the country group switcher and its subcomponents from scss to emotion.
Trello Card
Why are you doing this?
We no longer use sass in this project.
How to test
Go to https://support.thegulocal.com/uk/contribute and click on the country drop down. Also https://support.thegulocal.com/uk/subscribe/weekly. Test the hover states, and closing and opening the dialog.
Screenshots
Before (3 tier landing)

After

Before (subscription landing)

After
