diff options
| -rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 2 | ||||
| -rw-r--r-- | mascara/src/app/first-time/index.css | 56 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/newui-sections.scss | 24 |
3 files changed, 57 insertions, 25 deletions
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 450d6a479..ff56542d7 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component { : ( <div> <div className="first-view-main"> - <div className="mascara-info"> + <div className="mascara-info first-view-phone-invisible"> <Mascot animationEventEmitter={this.animationEventEmitter} width="225" diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index f59eb4ce1..a1e1a8200 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -21,6 +21,24 @@ justify-content: space-between; } +@media screen and (min-width: 576px) { + .first-view-main { + width: 85vw; + } +} + +@media screen and (min-width: 769px) { + .first-view-main { + width: 80vw; + } +} + +@media screen and (min-width: 1281px) { + .first-view-main { + width: 62vw; + } +} + .mascara-info { display: flex; flex-flow: column; @@ -81,6 +99,44 @@ width: initial !important; } + .alpha-warning { + line-height: 1em; + padding: 8px 12px; + } + + .first-view-main { + height: 100%; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + margin-top: 12px; + } + + .first-view-main .create-password { + margin-top: 0px; + } + + .mascara-info { + margin-top: 0px; + width: 100%; + align-items: center; + } + + .mascara-info .info { + text-align: center; + font-size: 16px; + margin: 0 10px; + padding-left: 0px; + } + + .mascara-info :first-child { + align-self: center; + } + + .first-view-phone-invisible { + display: none; + } + .first-time-flow__input { width: initial !important; font-size: 14px !important; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index ecf5e1036..73faebe8b 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -290,27 +290,3 @@ $wallet-view-bg: $alabaster; .token-balance__amount { padding-right: 6px; } - - -// first time -.first-view-main { - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - - @media screen and (max-width: 575px) { - height: 100%; - } - - @media screen and (min-width: 576px) { - width: 85vw; - } - - @media screen and (min-width: 769px) { - width: 80vw; - } - - @media screen and (min-width: 1281px) { - width: 62vw; - } -}
\ No newline at end of file |