UX: cleaning up some invite page styles (#25247)

app/assets/javascripts/discourse/app/templates/account-created/index.hbs

@@ -1,3 +1,4 @@
+{{body-class "account-activation-page"}}
 <div class="container invites-show">
   <div class="login-welcome-header">
     <h1 class="login-title">{{this.welcomeTitle}}</h1>

app/assets/stylesheets/common/base/activation.scss

@@ -1,26 +1,43 @@
 // Styles used before the user is logged into discourse. For example, activating their
 // account or changing their email.
 
-#simple-container {
-  border-radius: 10px;
-  background-color: var(--secondary);
-  padding: 20px;
-  width: 550px;
-  margin: 0 auto;
-
-  .account-created {
-    .ac-message {
-      font-size: var(--font-up-1);
-      line-height: var(--line-height-large);
+.account-activation-page {
+  .desktop-view & {
+    background: var(--primary-very-low);
+  }
+  #main-outlet-wrapper {
+    display: block;
+    .sidebar-wrapper {
+      display: none;
     }
-    .activation-controls {
-      button {
-        margin-right: 0.5em;
+  }
+  #main-outlet {
+    padding: 0;
+    height: 100%;
+  }
+  #simple-container {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    border-radius: 10px;
+    width: 100%;
+    padding: 20px;
+    justify-content: center;
+    margin-top: var(--header-offset);
+    .account-created {
+      .ac-message {
+        font-size: var(--font-up-1);
+        line-height: var(--line-height-large);
+      }
+      .activation-controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5em;
+      }
+      .ac-page {
+        border-radius: 10px;
+        margin-top: 25px;
       }
-    }
-    .ac-page {
-      border-radius: 10px;
-      margin-top: 25px;
     }
   }
 }

app/assets/stylesheets/common/base/login.scss

@@ -1,7 +1,9 @@
 body.invite-page {
-  background-color: var(--primary-50);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
+  #main-outlet-wrapper {
+    padding: 0;
+  }
 }
 
 .invites-show,

app/assets/stylesheets/common/login/invite-signup.scss

@@ -1,16 +1,3 @@
-#main-outlet-wrapper:has(.invites-show) {
-  display: block;
-  height: 100vh;
-
-  .sidebar-wrapper {
-    display: none;
-  }
-
-  #main-outlet {
-    padding: 0;
-    height: 100%;
-  }
-}
 .invites-show {
   padding: 2rem 3rem;
   background: var(--secondary);

app/assets/stylesheets/desktop/invite-signup.scss

@@ -1,10 +1,14 @@
+.invite-page {
+  background: var(--primary-50);
+}
+
 .invites-show {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
   max-width: 500px;
   padding: 2rem 3rem;
   background: var(--secondary);
   box-shadow: var(--shadow-menu-panel);
+  margin: 10vh auto 1em auto;
+  @media screen and (max-height: 700px) {
+    margin: 1em auto 1em auto;
+  }
 }

app/assets/stylesheets/mobile/invite-signup.scss

@@ -1,10 +1,7 @@
-#main-outlet-wrapper:has(.invites-show) {
-  padding: 0;
-}
 .invites-show {
-  height: 100vh;
   width: 100vw;
   box-sizing: border-box;
+  padding: 0 1em 1em;
 
   .invitation-cta {
     display: flex;