diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index cdce9e46..0742e4e3 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -15,6 +15,7 @@ const Wrapper = styled.div` position: relative; height: 70px; width: 320px; + z-index: 10; display: flex; align-items: center; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; diff --git a/src/config/animations.js b/src/config/animations.js index 950ea9e2..c7fee813 100644 --- a/src/config/animations.js +++ b/src/config/animations.js @@ -71,4 +71,13 @@ export const FADE_IN = keyframes` 100% { opacity: 1; } +`; + +export const SLIDE_DOWN = keyframes` + 0% { + transform: translateY(-100%); + } + 100% { + transform: translateY(0%); + } `; \ No newline at end of file diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index f49f1764..5879fc79 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -6,6 +6,7 @@ import type { TrezorDevice } from 'flowtype'; import COLORS from 'config/colors'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; +import { SLIDE_DOWN } from 'config/animations'; import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; @@ -21,6 +22,7 @@ const Wrapper = styled.div` border-bottom: 1px solid #E3E3E3; background: white; box-shadow: 0 3px 8px rgba(0,0,0,0.06); + animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards; `; const ButtonWrapper = styled.div`