UX: improved invite accept page layout (#15418)

app/assets/javascripts/discourse/app/templates/invites/show.hbs

@@ -2,9 +2,12 @@
   <div class="login-welcome-header">
     <h1 class="login-title">{{welcomeTitle}}</h1>
     <img src={{wavingHandURL}} alt="" class="waving-hand">
+    {{#unless successMessage}}
       <p class="login-subheader">{{i18n "create_account.subheader_title"}}</p>
+    {{/unless}}
   </div>
 
+  <div class={{if successMessage "invite-success" "invite-form"}}>
     <div class="two-col">
       <div class="col-image">
         <img src={{inviteImageUrl}} alt={{i18n "invites.emoji"}}>
@@ -12,8 +15,7 @@
 
       <div class="col-form">
         {{#if successMessage}}
-        <br><br>
-        <div class="alert alert-info">
+          <div class="success-info">
             <p>{{html-safe successMessage}}</p>
           </div>
         {{else}}
@@ -131,4 +133,5 @@
         {{/if}}
       </div>
     </div>
+  </div>
 </div>

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

@@ -66,7 +66,6 @@
     display: inline;
   }
   .login-welcome-header {
-    z-index: z("modal", "content");
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
@@ -293,12 +292,31 @@
 }
 
 .invites-show {
+  display: grid;
+  justify-content: center;
   .two-col {
     position: relative;
-    display: flex;
+    display: grid;
     margin-top: 5px;
   }
 
+  .invite-form,
+  .invite-success {
+    border-radius: 10px;
+    margin-top: 25px;
+  }
+
+  .invite-form {
+    padding-left: 20px;
+    margin-bottom: 50px;
+    .tip {
+      display: block;
+    }
+    .col-image {
+      display: none;
+    }
+  }
+
   #login-buttons {
     .btn {
       background-color: var(--primary-low);
@@ -309,6 +327,7 @@
   .col-image {
     position: relative;
     margin-right: 20px;
+    justify-self: center;
     @media screen and (max-width: 600px) {
       display: none;
     }

app/assets/stylesheets/desktop/login.scss

@@ -395,7 +395,7 @@
 .invites-show {
   .col-form {
     padding-left: 20px;
-    width: 400px;
+    width: 470px;
   }
   .col-image {
     width: 175px;
@@ -410,6 +410,10 @@
     // 80% width on checkboxes messes up the layout for custom fields
     width: 80%;
   }
+  .invite-form,
+  .invite-success {
+    box-shadow: 0 1px 10px 1px rgba(var(--primary-low-rgb), 1.25);
+  }
 }
 
 .password-reset,

app/assets/stylesheets/mobile/login.scss

@@ -256,4 +256,7 @@
   .col-image {
     display: none;
   }
+  h1.login-title {
+    font-size: $font-up-3;
+  }
 }