From 64601779f0303283fa6df876bc1cf32d3d7ca5e0 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 28 Sep 2022 12:31:56 -0500
Subject: [PATCH] UX: Style changes to match updates (#18397)

---
 app/assets/stylesheets/common/base/login.scss | 31 +++++++++++++++++--
 app/assets/stylesheets/wizard.scss            | 23 ++------------
 public/images/branded-background-mobile.svg   |  8 +++++
 public/images/branded-background.svg          |  8 +++++
 4 files changed, 46 insertions(+), 24 deletions(-)
 create mode 100644 public/images/branded-background-mobile.svg
 create mode 100644 public/images/branded-background.svg

diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index b6e379faade..fc04c5bc53c 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -1,3 +1,6 @@
+$invite-bg: absolute-image-url("/branded-background.svg");
+$invite-mobile-bg: absolute-image-url("/branded-background-mobile.svg");
+
 .caps-lock-warning {
   color: var(--danger);
   font-size: $font-down-1;
@@ -31,10 +34,30 @@
   }
 }
 
+body.invite-page {
+  background-image: $invite-bg;
+  background-size: 110vw 110vh; // crops better than cover at various viewport sizes
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-color: var(--secondary);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
+  @include breakpoint("mobile-extra-large") {
+    background: $invite-mobile-bg;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: bottom;
+  }
+  .d-header {
+    display: none;
+  }
+}
+
 // Create Account + Login
 .d-modal.create-account,
 .d-modal.login-modal,
-.invites-show {
+.invites-show,
+.admin-invite-page {
   .modal-inner-container {
     position: relative;
   }
@@ -310,12 +333,14 @@
     border-radius: 10px;
     margin-top: 25px;
     border-top: 6px solid var(--tertiary);
+    background-color: var(--secondary);
   }
 
   .invite-form {
     margin-bottom: 50px;
-    max-width: 33em;
-    border-top: 6px solid var(--tertiary);
+    box-shadow: 0 4px 19px 6px rgba(0, 0, 0, 0.05);
+    padding: 1em 3em;
+    max-width: calc(33em - 6em);
     .tip {
       display: block;
     }
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 2e2e59ca161..847d5c7979f 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -1,24 +1,5 @@
-$wizard-bg: svg-uri(
-  '<?xml version="1.0" encoding="UTF-8"?>
-  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1906.75" height="980" viewBox="0 0 1906.75 980">
-    <path d="M488.66,863.09c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52Zm3.05,65.4c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45Z"/>
-    <path d="M252.13,687.19c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
-    <path d="M1849.08,829.55c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06Z" style="fill: #e84a51; fill-rule: evenodd;"/>
-    <path d="M1749.82,834.36c-17.29,16.8-36.86,24.94-53.76,12.76-16.9-12.18-19.47-31.75-3.5-49.8,15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
-    <path d="M269.84,223.52c0,19.4-22.98,39.33-40.94,39.33s-38.06-16.61-38.06-36.01,25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
-  </svg>'
-);
-
-$wizard-mobile-bg: svg-uri(
-  '<?xml version="1.0" encoding="UTF-8"?>
-  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
-    <path d="M65.11,755.03c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52h-.01Zm3.05,65.41c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45h0Z"/>
-    <path d="M118.58,461.13c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52h0Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
-    <path d="M492.26,712.49c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06h0Z" style="fill: #e84a51; fill-rule: evenodd;"/>
-    <path d="M393,717.3c-17.29,16.8-36.86,24.94-53.76,12.76s-19.47-31.75-3.5-49.8c15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05h0Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
-    <path d="M69.29,124.46c0,19.4-22.98,39.33-40.94,39.33S-9.71,147.18-9.71,127.78s25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
-  </svg>'
-);
+$wizard-bg: absolute-image-url("/branded-background.svg");
+$wizard-mobile-bg: absolute-image-url("/branded-background-mobile.svg");
 
 @keyframes bump {
   0% {
diff --git a/public/images/branded-background-mobile.svg b/public/images/branded-background-mobile.svg
new file mode 100644
index 00000000000..4962535d595
--- /dev/null
+++ b/public/images/branded-background-mobile.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
+  <path d="M65.11,755.03c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52h-.01Zm3.05,65.41c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45h0Z"/>
+  <path d="M118.58,461.13c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52h0Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
+  <path d="M492.26,712.49c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06h0Z" style="fill: #e84a51; fill-rule: evenodd;"/>
+  <path d="M393,717.3c-17.29,16.8-36.86,24.94-53.76,12.76s-19.47-31.75-3.5-49.8c15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05h0Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
+  <path d="M69.29,124.46c0,19.4-22.98,39.33-40.94,39.33S-9.71,147.18-9.71,127.78s25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/branded-background.svg b/public/images/branded-background.svg
new file mode 100644
index 00000000000..16e04279f69
--- /dev/null
+++ b/public/images/branded-background.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1906.75" height="980" viewBox="0 0 1906.75 980">
+  <path d="M488.66,863.09c-.95,0-1.9,.08-2.87,.23-10.9,1.74-20.73,12.53-18.33,27.56,2.4,15.03,16.43,23.52,27.44,21.76,5.23-.84,9.15-3.57,11.65-8.12,2.72-4.93,3.55-11.8,2.36-19.32-1.19-7.39-4.29-13.63-8.75-17.6-3.35-2.98-7.28-4.52-11.49-4.52Zm3.05,65.4c-18.96,0-36.43-14.97-39.65-35.14-3.53-22.1,10.2-42.06,31.26-45.43,9.94-1.58,19.59,1.27,27.2,8.04,7.14,6.35,12.04,15.87,13.78,26.78,1.78,11.1,.36,21.23-4.08,29.3-4.8,8.74-12.92,14.41-22.86,16-1.89,.3-3.77,.45-5.65,.45Z"/>
+  <path d="M252.13,687.19c0,42.64-27.43,60.69-72.35,60.69s-101.49-63.7-101.49-106.34,70.65-54.87,115.57-54.87,58.27,57.88,58.27,100.52Z" style="fill: #0ca64e; fill-rule: evenodd;"/>
+  <path d="M1849.08,829.55c-90.96,16.64-161.99-38.28-219.31-142.86-47.68-87.02,25.41-193.64,97.18-244.1,80.59-56.65,193.7,26.32,248.35,183.9,32.51,93.76-28.61,185.21-126.22,203.06Z" style="fill: #e84a51; fill-rule: evenodd;"/>
+  <path d="M1749.82,834.36c-17.29,16.8-36.86,24.94-53.76,12.76-16.9-12.18-19.47-31.75-3.5-49.8,15.58-17.6,37.62-33.19,54.52-21.02,16.9,12.18,20.84,40.46,2.74,58.05Z" style="fill: #fbf5af; fill-rule: evenodd;"/>
+  <path d="M269.84,223.52c0,19.4-22.98,39.33-40.94,39.33s-38.06-16.61-38.06-36.01,25.03-43.21,42.99-43.21,36.01,20.49,36.01,39.89Z" style="fill: #f0794a; fill-rule: evenodd;"/>
+</svg>
\ No newline at end of file