aboutsummaryrefslogtreecommitdiffstats
path: root/mascara
diff options
context:
space:
mode:
Diffstat (limited to 'mascara')
-rw-r--r--mascara/src/app/first-time/create-password-screen.js2
-rw-r--r--mascara/src/app/first-time/index.css56
2 files changed, 57 insertions, 1 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;