feat: Purchase "Create account" & "Sign in" flows and Floating label input (#672)

app/assets/stylesheets/_main.scss

@@ -14,6 +14,8 @@ $z-index-footer-bar-item-panel: 2000;
 
 $z-index-preferences: 3000;
 
+$z-index-purchase-flow: 4000;
+
 $z-index-lock-screen: 10000;
 $z-index-modal: 10000;
 
@@ -244,3 +246,7 @@ $footer-height: 2rem;
 .z-index-preferences {
   z-index: $z-index-preferences;
 }
+
+.z-index-purchase-flow {
+  z-index: $z-index-purchase-flow;
+}

app/assets/stylesheets/_sn.scss

@@ -1,9 +1,21 @@
 /* Components and utilities that are good candidates for extraction to StyleKit. */
 
+:root {
+  --sn-stylekit-grey-2: #f8f9fc;
+}
+
+.bg-grey-2 {
+  background-color: var(--sn-stylekit-grey-2);
+}
+
 .h-90vh {
   height: 90vh;
 }
 
+.h-26 {
+  width: 6.5rem;
+}
+
 .h-33 {
   height: 8.25rem;
 }
@@ -219,6 +231,10 @@
   margin-right: 0.75rem;
 }
 
+.mr-12 {
+  margin-right: 3rem;
+}
+
 .my-0\.5 {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
@@ -234,14 +250,30 @@
   margin-bottom: 1rem;
 }
 
+.mt-0 {
+  margin-top: 0;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .max-w-89 {
   max-width: 22.25rem;
 }
 
+.w-26 {
+  width: 6.5rem;
+}
+
 .w-92 {
   width: 23rem;
 }
@@ -274,6 +306,18 @@
   min-width: 3.75rem;
 }
 
+.min-w-24 {
+  min-width: 6rem;
+}
+
+.min-w-30 {
+  min-width: 7.5rem;
+}
+
+.min-w-90 {
+  min-width: 22.5rem;
+}  
+
 .min-h-1px {
   min-height: 1px;
 }
@@ -314,6 +358,18 @@
   color: var(--sn-stylekit-background-color);
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.p-12 {
+  padding: 3rem;
+}
+
 .pt-1 {
   padding-top: 0.25rem;
 }
@@ -326,10 +382,26 @@
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
 
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-2\.5 {
+  padding-bottom: 0.625rem;
+}
+
 .px-9 {
   padding-left: 2.25rem;
   padding-right: 2.25rem;
@@ -340,6 +412,11 @@
   padding-right: 3rem;
 }
 
+.sn-component .py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+
 .py-9 {
   padding-top: 2.25rem;
   padding-bottom: 2.25rem;
@@ -349,6 +426,118 @@
   user-select: none;
 }
 
+.placeholder-dark-red::placeholder {
+  @extend .color-dark-red;
+}
+
+.placeholder-medium::placeholder {
+  font-weight: 500;
+}
+
+.top-30\% {
+  top: 30%;
+}
+
+.top-35\% {
+  top: 35%;
+}
+
+.top-40\% {
+  top: 40%;
+}
+
+.-top-0\.25 {
+  top: -0.0625rem;
+}
+
+.bottom-20\% {
+  bottom: 20%;
+}
+
+.bottom-25\% {
+  bottom: 25%;
+}
+
+.bottom-30\% {
+  bottom: 30%;
+}
+
+.bottom-35\% {
+  bottom: 35%;
+}
+
+.bottom-40\% {
+  bottom: 40%;
+}
+
+.left-2 {
+  left: 0.5rem;
+}
+
+.-left-10 {
+  left: -2.5rem;
+}
+
+.-left-28 {
+  left: -7rem;
+}
+
+.-left-16 {
+  left: -4rem;
+}
+
+.-left-40 {
+  left: -10rem;
+}
+
+.-left-56 {
+  left: -14rem;
+}
+
+.-right-2 {
+  right: -0.5rem;
+}
+
+.-right-10 {
+  right: -2.5rem;
+}
+
+.-right-20 {
+  right: -5rem;
+}
+
+.-right-24 {
+  right: -6rem;
+}
+
+.-right-44 {
+  right: -11rem;
+}
+
+.-right-56 {
+  right: -14rem;
+}
+
+.-translate-x-1\/2 {
+  transform: translateX(-50%);
+}
+
+.-translate-y-1\/2 {
+  transform: translateY(-50%);
+}
+
+.translate-x-1\/2 {
+  transform: translateX(50%);
+}
+
+.-bottom-5 {
+  bottom: -1.25rem;
+}
+
+.-z-index-1 {
+  z-index: -1;
+}
+  
 .sn-component .btn-w-full {
   width: 100%;
 }