fix(suite): update the country select component on trade dashboard #13403
Conversation
| @@ -179,13 +179,24 @@ const Wrapper = styled.div<WrapperProps>` | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: ${({ $isClean }) => ($isClean ? 'flex-end' : 'flex-start')}; | |||
| width: 100%; | |||
| width: ${({ $isSearchable }) => !$isSearchable && '100%'}; | |||
There was a problem hiding this comment.
this will result into invalid css in case that isSearchable is false
There was a problem hiding this comment.
Noted, thanks. Had thought Styled would handle this and not render the property at all. I will fix it:)
| margin: 0; | ||
|
|
||
| &:hover { | ||
| cursor: ${({ $isSearchable }) => $isSearchable && 'text'}; |
| @@ -170,7 +170,7 @@ const Wrapper = styled.div<WrapperProps>` | |||
| flex-wrap: nowrap; | |||
| min-width: ${({ $minValueWidth }) => $minValueWidth}; | |||
| justify-content: ${({ $isClean }) => ($isClean ? 'flex-end' : 'flex-start')}; | |||
| padding: 0; | |||
| padding: 0 25px 0 0; | |||
There was a problem hiding this comment.
We try to use predefined spacings if possible.
Could you use it this way? 🙏
padding: 0 ${spacingsPx.xl} 0 0;
| @@ -36,6 +36,7 @@ const Label = styled.div` | |||
| padding-top: 1px; | |||
| color: ${({ theme }) => theme.TYPE_LIGHT_GREY}; | |||
| font-weight: ${variables.FONT_WEIGHT.MEDIUM}; | |||
| margin-right: 10px; | |||
There was a problem hiding this comment.
please use spacings here🙏
margin-right: ${spacingsPx.xs}
| @@ -170,7 +170,7 @@ const Wrapper = styled.div<WrapperProps>` | |||
| flex-wrap: nowrap; | |||
| min-width: ${({ $minValueWidth }) => $minValueWidth}; | |||
| justify-content: ${({ $isClean }) => ($isClean ? 'flex-end' : 'flex-start')}; | |||
| padding: 0; | |||
| padding: 0 25px 0 0; | |||
There was a problem hiding this comment.
We try to user constants for spacing everywhere: ${spacings.xl} is 24px can we use this here?
If not and 25 is just needed in this case, no no big deal leaving it here.
| } | ||
| } | ||
|
|
||
| .${reactSelectClassNamePrefix}__single-value + .${reactSelectClassNamePrefix}__input-container { |
There was a problem hiding this comment.
@jvaclavik This component is full of the Dark Arts 🔮. WEN floating UI?
There was a problem hiding this comment.
The sooner, the better. Wen you have free week? 😀
There was a problem hiding this comment.
Me? You have the biggest team now... :D
adamhavel
force-pushed
the
fix/unable-to-type-country-in-the-dropdown-menu
branch
2 times, most recently
from
e69468e to
7ad0bcf
Compare
adamhavel
force-pushed
the
fix/unable-to-type-country-in-the-dropdown-menu
branch
from
7ad0bcf to
8f3688f
Compare
Description
Updated the country select component on trade dashboard so that is more obvious it can be used to type in the country. Fixed some visual issues. Could not fix the issue where the selected country can be deleted with backspace, should be supported by the underlying react-select component (via props
isClearableandbackspaceRemovesValue) but custom components probably prevent it to work properly.Screenshots:
Before:
After: