From 3cae3622146d80aef8e43e5790d25f5e2fc9931e Mon Sep 17 00:00:00 2001 From: David Yip Date: Sat, 20 Jan 2018 11:23:06 -0600 Subject: [PATCH] Merge new onboarding styles; delete refs to PNGs. --- .../glitch/styles/components/drawer.scss | 4 +- .../glitch/styles/components/modal.scss | 95 ++++++++++++------- .../flavours/glitch/styles/modal.scss | 4 +- 3 files changed, 67 insertions(+), 36 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss index 11ac0a37f..0ed8c392a 100644 --- a/app/javascript/flavours/glitch/styles/components/drawer.scss +++ b/app/javascript/flavours/glitch/styles/components/drawer.scss @@ -296,7 +296,7 @@ position: absolute; top: 0; left: 0; - background: lighten($ui-base-color, 13%) url('~images/wave-drawer.png') no-repeat bottom / 100% auto; + background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; box-sizing: border-box; padding: 0; display: flex; @@ -311,7 +311,7 @@ } > .mastodon { - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain; flex: 1; } } diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss index c12f56828..1ac399fa1 100644 --- a/app/javascript/flavours/glitch/styles/components/modal.scss +++ b/app/javascript/flavours/glitch/styles/components/modal.scss @@ -77,13 +77,12 @@ height: 80vh; width: 80vw; max-width: 520px; - max-height: 420px; + max-height: 470px; .react-swipeable-view-container > div { width: 100%; height: 100%; box-sizing: border-box; - padding: 25px; display: none; flex-direction: column; align-items: center; @@ -156,23 +155,32 @@ .onboarding-modal__nav, .error-modal__nav { color: darken($ui-secondary-color, 34%); - background-color: transparent; border: 0; font-size: 14px; font-weight: 500; - padding: 0; + padding: 10px 25px; line-height: inherit; height: auto; + margin: -10px; + border-radius: 4px; + background-color: transparent; &:hover, &:focus, &:active { color: darken($ui-secondary-color, 38%); + background-color: darken($ui-secondary-color, 16%); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $ui-highlight-color; + color: $ui-base-color; + + &:hover, + &:focus, + &:active { + color: darken($ui-base-color, 4%); + } } } } @@ -208,6 +216,8 @@ .onboarding-modal__page__wrapper { pointer-events: none; + padding: 25px; + padding-bottom: 0; &.onboarding-modal__page__wrapper--active { pointer-events: auto; @@ -235,6 +245,10 @@ } } + .navigation-bar a { + color: inherit; + } + p { font-size: 16px; color: lighten($ui-base-color, 8%); @@ -262,29 +276,56 @@ } } -.onboarding-modal__page-one { - display: flex; - align-items: center; +.onboarding-modal__page__wrapper-0 { + background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px; + height: 100%; + padding: 0; } -.onboarding-modal__page-one__elephant-friend { - background: url('~images/elephant-friend-1.png') no-repeat center center / contain; - width: 155px; - height: 193px; - margin-right: 15px; +.onboarding-modal__page-one { + &__lead { + padding: 65px; + padding-top: 45px; + padding-bottom: 0; + margin-bottom: 10px; + + h1 { + font-size: 26px; + line-height: 36px; + margin-bottom: 8px; + } + + p { + margin-bottom: 0; + } + } + + &__extra { + padding-right: 65px; + padding-left: 185px; + text-align: center; + } } -@media screen and (max-width: 400px) { - .onboarding-modal__page-one { - flex-direction: column; - align-items: normal; +.display-case { + text-align: center; + font-size: 15px; + margin-bottom: 15px; + + &__label { + font-weight: 500; + color: $ui-base-color; + margin-bottom: 5px; + text-transform: uppercase; + font-size: 12px; } - .onboarding-modal__page-one__elephant-friend { - width: 100%; - height: 30vh; - max-height: 160px; - margin-bottom: 5vh; + &__case { + background: $ui-base-color; + color: $ui-secondary-color; + font-weight: 500; + padding: 10px; + border-radius: 4px; } } @@ -374,16 +415,6 @@ } } -.onboarding-modal__image { - border-radius: 8px; - width: 70vw; - max-width: 450px; - max-height: auto; - display: block; - margin: auto; - margin-bottom: 20px; -} - .onboard-sliders { display: inline-block; max-width: 30px; diff --git a/app/javascript/flavours/glitch/styles/modal.scss b/app/javascript/flavours/glitch/styles/modal.scss index a17476ccb..ceb79bbb9 100644 --- a/app/javascript/flavours/glitch/styles/modal.scss +++ b/app/javascript/flavours/glitch/styles/modal.scss @@ -1,5 +1,5 @@ .modal-layout { - background: $ui-base-color url('~images/wave-modal.png') repeat-x bottom fixed; + background: $ui-base-color url('data:image/svg+xml;utf8,') repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; @@ -15,6 +15,6 @@ > * { flex: 1; max-height: 235px; - background: url('~images/mastodon-ui.png') no-repeat left bottom / contain; + background: url('~images/elephant_ui_plane.svg') no-repeat left bottom / contain; } }