feat: improve UI responsiveness #95
Conversation
…o also at 1280 they're not overlapping
src/components/Features/ToastProvider/ToastProvider.module.scss
Outdated
Show resolved
Hide resolved
… from 1 source of truth (scss)
src/components/Features/ToastProvider/ToastProvider.module.scss
Outdated
Show resolved
Hide resolved
| @@ -12,6 +12,7 @@ export const Button = ({ | |||
| height, | |||
| icon, | |||
| iconAlign = 'left', | |||
| buttonClass, | |||
There was a problem hiding this comment.
If you added an option to send class prop, why buttonClass as single and not just classes as array?
There was a problem hiding this comment.
currently, that's the only class a button gets in the whole project.
also, there's an extended usage of a util function that gets an array of values and returns a string.
| @@ -28,4 +30,12 @@ | |||
| svg { | |||
| margin-right: 10px; | |||
| } | |||
|
|
|||
| &[class~='wallet-btn'] { | |||
There was a problem hiding this comment.
Please change to scss syntax
There was a problem hiding this comment.
writing: &.wallet-btn doesn't seem to work.
There was a problem hiding this comment.
1.It won't work - CSS modules add id to each class at runtime. You should use the styles object of the CSS file imported to the component. i.e., styles.walletBtn.
2. Why are you adding app-specific class component styles (wallet-btn) to a generic component styles?
|
|
||
| :export { | ||
| mainOffset: $--main-offset; | ||
| mainOffsetSmall: $--main-offset-small; |
There was a problem hiding this comment.
What is small? tablet? mobile? please write the appropriate breakpoint.
There was a problem hiding this comment.
the '$--header-height' is for width 1280 and above. breakpoint DESKTOP.
and the '$--header-height-small' is for all the rest.
There was a problem hiding this comment.
So why not to change $--header-height to $--header-height-desktop and $--header-height-small to $--header-height???
CarmitKl
added
IN PROGRESS
and removed
ready for review
CarmitKl
added
ready for review
| @@ -133,7 +147,12 @@ export const ToastProvider = () => { | |||
|
|
|||
| return ( | |||
| <Toaster | |||
| className="toast" | |||
There was a problem hiding this comment.
Where is this call defined?
Implement UI support for small screens, like laptops and tablets. Smallest value: 600px. On this PR the toasts are overlapping the menu for vertical tablets. Horizontal tablets are without that overlap.
This change is related to this issue:
#26
This change is