feat: 100% on chain logo and spacing (#607)

* feat: 100% on chain badge * style: remove unused margin * style: positioning within the viewport of the main content optimized * style: media query for height for smaller devices * Run prettier * 🤖 Selenium screenshots auto-update Co-authored-by: Nicolas Mattia <nicolas@dfinity.org>
dfinity · Mar 29, 2022 · 0cddffc · 0cddffc
1 parent 8b2cb9c
commit 0cddffc
Show file tree

Hide file tree

Showing 38 changed files with 23 additions and 47 deletions.
diff --git a/screenshots/00-welcome-desktop.png b/screenshots/00-welcome-desktop.png
diff --git a/screenshots/00-welcome-mobile.png b/screenshots/00-welcome-mobile.png
diff --git a/screenshots/01-register-desktop.png b/screenshots/01-register-desktop.png
diff --git a/screenshots/01-register-mobile.png b/screenshots/01-register-mobile.png
diff --git a/screenshots/02-register-confirm-desktop.png b/screenshots/02-register-confirm-desktop.png
diff --git a/screenshots/02-register-confirm-mobile.png b/screenshots/02-register-confirm-mobile.png
diff --git a/screenshots/03-register-user-number-desktop.png b/screenshots/03-register-user-number-desktop.png
diff --git a/screenshots/04-recover-method-selector-desktop.png b/screenshots/04-recover-method-selector-desktop.png
diff --git a/screenshots/05-single-device-warning-desktop.png b/screenshots/05-single-device-warning-desktop.png
diff --git a/screenshots/06-main-desktop.png b/screenshots/06-main-desktop.png
diff --git a/screenshots/06-main-mobile.png b/screenshots/06-main-mobile.png
diff --git a/screenshots/07-welcome-back-desktop.png b/screenshots/07-welcome-back-desktop.png
diff --git a/screenshots/07-welcome-back-mobile.png b/screenshots/07-welcome-back-mobile.png
diff --git a/screenshots/08-new-device-flow-selection-desktop.png b/screenshots/08-new-device-flow-selection-desktop.png
diff --git a/screenshots/09-new-device-instructions-desktop.png b/screenshots/09-new-device-instructions-desktop.png
diff --git a/screenshots/10-new-device-user-number-desktop.png b/screenshots/10-new-device-user-number-desktop.png
diff --git a/screenshots/10-new-device-user-number-mobile.png b/screenshots/10-new-device-user-number-mobile.png
diff --git a/screenshots/11-new-device-alias-desktop.png b/screenshots/11-new-device-alias-desktop.png
diff --git a/screenshots/11-new-device-alias-mobile.png b/screenshots/11-new-device-alias-mobile.png
diff --git a/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png b/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png
diff --git a/screenshots/13-new-device-show-verification-code-desktop.png b/screenshots/13-new-device-show-verification-code-desktop.png
diff --git a/screenshots/14-new-device-enter-verification-code-desktop.png b/screenshots/14-new-device-enter-verification-code-desktop.png
diff --git a/screenshots/15-new-device-login-desktop.png b/screenshots/15-new-device-login-desktop.png
diff --git a/screenshots/15-new-device-login-mobile.png b/screenshots/15-new-device-login-mobile.png
diff --git a/screenshots/16-new-device-listed-desktop.png b/screenshots/16-new-device-listed-desktop.png
diff --git a/screenshots/16-new-device-listed-mobile.png b/screenshots/16-new-device-listed-mobile.png
diff --git a/screenshots/17-about-desktop.png b/screenshots/17-about-desktop.png
diff --git a/screenshots/18-about-legacy-desktop.png b/screenshots/18-about-legacy-desktop.png
diff --git a/screenshots/19-after-removal-desktop.png b/screenshots/19-after-removal-desktop.png
diff --git a/screenshots/19-after-removal-mobile.png b/screenshots/19-after-removal-mobile.png
diff --git a/screenshots/20-compatibility-notice-desktop.png b/screenshots/20-compatibility-notice-desktop.png
diff --git a/screenshots/21-faq-desktop.png b/screenshots/21-faq-desktop.png
diff --git a/screenshots/22-faq-open-desktop.png b/screenshots/22-faq-open-desktop.png
diff --git a/screenshots/23-features-warning-desktop.png b/screenshots/23-features-warning-desktop.png
diff --git a/screenshots/23-features-warning-mobile.png b/screenshots/23-features-warning-mobile.png
diff --git a/src/frontend/assets/ic-badge.svg b/src/frontend/assets/ic-badge.svg
diff --git a/src/frontend/src/features.ts b/src/frontend/src/features.ts
@@ -33,7 +33,6 @@ export const showWarning = (): void => {
         width: 100%;
         box-sizing: border-box;
         padding: 0.5em 1em;
-        margin: 0 0 1rem;
         text-align: center;
       }
 

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -34,7 +34,7 @@ body {
 }
 
 footer {
-  padding: 2em;
+  padding: 2em 2em 0;
 }
 
 .powered-by-link {
@@ -208,7 +208,8 @@ label {
   margin-bottom: 0.5rem;
 }
 
-main::before {
+main::before,
+main::after {
   content: "";
   display: block;
   flex-grow: 1;
@@ -222,11 +223,11 @@ main {
   align-items: center;
 }
 
-main::after {
-  content: "";
-  display: block;
-  flex-grow: 2;
-  height: 24px;
+@media (min-width: 512px) {
+  main {
+    height: auto;
+    min-height: 100vh;
+  }
 }
 
 .container {