[DTRA-1047] henry/dtra-1047/feat: snackbar UI #56
Conversation
Deploying quill-ui with
|
| Latest commit: |
34b5fc7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://97f9164b.quill-ui.pages.dev |
| Branch Preview URL: | https://henry-dtra-1047-snackbar-com.quill-ui.pages.dev |
henry-deriv
changed the title
henry-deriv
changed the title
|
|
||
| .snackbar { | ||
| display: flex; | ||
| width: 340px; |
There was a problem hiding this comment.
can we remove width for mobile devices. For smaller mobiles, width 340px will go out of the container.
There was a problem hiding this comment.
should I? i'm trying to follow figma design
There was a problem hiding this comment.
yeah, it's better to do something like this:
left: 16px;
width: calc(100vw - 32px);
and i guess all px values in this file should be replaced with var()'s :)
There was a problem hiding this comment.
why's it left: 16px? It'll be centered by the wrapper.
henry-deriv
changed the title
| ? "fast-animation" | ||
| : "slow-animation", | ||
| )} | ||
| {...rest} |
There was a problem hiding this comment.
Because of the position of {...rest} it might overwrite className. Maybe it's better to insert {..rest} in the top?
There was a problem hiding this comment.
@henry-deriv you might have forgotten to address this :)
There was a problem hiding this comment.
i didnt make any changes because it makes no difference in this case. The animations are very much working as they should.
|
|
||
| .snackbar { | ||
| display: flex; | ||
| width: 340px; |
There was a problem hiding this comment.
yeah, it's better to do something like this:
left: 16px;
width: calc(100vw - 32px);
and i guess all px values in this file should be replaced with var()'s :)
| import { Snackbar } from "."; | ||
| import React, { useState } from "react"; | ||
|
|
||
| export const SnackbarWrapper = () => { |
There was a problem hiding this comment.
it's weird but i couldn't find the place where this component is used..
There was a problem hiding this comment.
its just a wrapper to pass functions into the component to work for now. For the next task it'll be used.
| ? "fast-animation" | ||
| : "slow-animation", | ||
| )} | ||
| {...rest} |
There was a problem hiding this comment.
@henry-deriv you might have forgotten to address this :)
|
🎉 This PR is included in version 1.6.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Snackbar component - mobile and desktop. Dark mode only.