Revert: add a class to center the main window (#1366)

* Revert: add a class to center the main window This reverts 1344 due to inconsistent vertical centering. * 🤖 Selenium screenshots auto-update * Trigger CI --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
dfinity · Mar 27, 2023 · a78ec40 · a78ec40
1 parent 3cbdaf7
commit a78ec40
Show file tree

Hide file tree

Showing 16 changed files with 31 additions and 8 deletions.
diff --git a/screenshots/desktop/banner.png b/screenshots/desktop/banner.png
diff --git a/screenshots/desktop/confirmSeedPhrase.png b/screenshots/desktop/confirmSeedPhrase.png
diff --git a/screenshots/desktop/constructing.png b/screenshots/desktop/constructing.png
diff --git a/screenshots/desktop/displaySeedPhrase.png b/screenshots/desktop/displaySeedPhrase.png
diff --git a/screenshots/desktop/displayUserNumber.png b/screenshots/desktop/displayUserNumber.png
diff --git a/screenshots/desktop/promptCaptcha.png b/screenshots/desktop/promptCaptcha.png
diff --git a/screenshots/desktop/promptCaptchaReady.png b/screenshots/desktop/promptCaptchaReady.png
diff --git a/screenshots/mobile/banner.png b/screenshots/mobile/banner.png
diff --git a/screenshots/mobile/confirmSeedPhrase.png b/screenshots/mobile/confirmSeedPhrase.png
diff --git a/screenshots/mobile/constructing.png b/screenshots/mobile/constructing.png
diff --git a/screenshots/mobile/displaySeedPhrase.png b/screenshots/mobile/displaySeedPhrase.png
diff --git a/screenshots/mobile/displayUserNumber.png b/screenshots/mobile/displayUserNumber.png
diff --git a/screenshots/mobile/promptCaptcha.png b/screenshots/mobile/promptCaptcha.png
diff --git a/screenshots/mobile/promptCaptchaReady.png b/screenshots/mobile/promptCaptchaReady.png
diff --git a/src/frontend/src/flows/register/construct.ts b/src/frontend/src/flows/register/construct.ts
@@ -26,7 +26,7 @@ const constructingContentSlot = ({
 
 const constructingContent = (props: { message?: string }) =>
   mainWindow({
-    additionalContainerClasses: ["t-centered", "l-container--centered"],
+    additionalContainerClasses: ["t-centered"],
     showFooter: false,
     showLogo: false,
     slot: constructingContentSlot(props),

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -494,13 +494,6 @@ a:hover,
   max-width: 60rem;
 }
 
-.l-container--centered {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .l-divider {
   display: block;
   margin-top: calc(var(--vs-stack) * 2);
@@ -702,6 +695,36 @@ a:hover,
   }
 }
 
+.c-card--background::before {
+  position: absolute;
+  content: "";
+  z-index: -2;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background-image: linear-gradient(170deg, var(--rg-brand));
+  background-size: 200% 200%;
+  filter: blur(120px);
+  opacity: 0.75;
+  pointer-events: none;
+  transform: translate3d(-50%, -50%, 0);
+
+  animation: 20s bganim linear infinite;
+}
+
+@keyframes bganim {
+  0%,
+  100% {
+    background-position: 0% 0%;
+  }
+
+  50% {
+    background-position: 0% -200%;
+  }
+}
+
 @media (max-width: 512px) {
   .c-card--highlight {
     border: none;