feat: new lock screen and challenge modal design (#957)

app/assets/stylesheets/_modals.scss

@@ -12,8 +12,7 @@
 }
 
 .challenge-modal {
-  max-width: 480px;
-  min-width: 400px !important;
+  min-width: 0 !important;
 
   .prompt, .subprompt {
     text-align: center;
@@ -21,9 +20,6 @@
   .sk-panel .sk-panel-header {
     justify-content: center;
   }
-  input {
-    text-align: center;
-  }
 }
 
 #account-switcher {

app/assets/stylesheets/_reach-sub.scss

@@ -17,6 +17,9 @@
   left: 0px;
   opacity: 0.75;
 }
+.challenge-modal-overlay::before {
+  background-color: var(--sn-stylekit-grey-5);
+}
 
 [data-reach-dialog-content] {
   width: auto;

app/assets/stylesheets/_sn.scss

@@ -246,6 +246,10 @@
   margin-left: 0.75rem;
 }
 
+.sn-component .mr-0 {
+  margin-right: 0;
+}
+
 .mr-2\.5 {
   margin-right: 0.625rem;
 }
@@ -298,6 +302,10 @@
   margin-bottom: 0.5rem;
 }
 
+.mb-3\.5 {
+  margin-bottom: 0.75rem;
+}
+
 .max-w-40\% {
   max-width: 40%;
 }
@@ -314,10 +322,18 @@
   max-width: 80%;
 }
 
+.max-w-68 {
+  max-width: 17rem;
+}
+
 .max-w-72 {
   max-width: 18rem;
 }
 
+.max-w-76 {
+  max-width: 19rem;
+}
+
 .max-w-89 {
   max-width: 22.25rem;
 }
@@ -397,6 +413,10 @@
   min-width: 17.5rem;
 }
 
+.min-w-76 {
+  min-width: 19rem;
+}
+
 .min-w-24 {
   min-width: 6rem;
 }
@@ -457,7 +477,7 @@
   max-height: 27.5rem;
 }
 
-.border-danger {
+.sn-component .border-danger {
   border-color: var(--sn-stylekit-danger-color);
 }
 
@@ -501,6 +521,10 @@
   padding: 0.375rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -610,6 +634,11 @@
   padding-bottom: 2.25rem;
 }
 
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -626,6 +655,10 @@
   position: sticky;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
 .top-30\% {
   top: 30%;
 }
@@ -694,6 +727,10 @@
   right: 0.5rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
 .-right-2 {
   right: -0.5rem;
 }
@@ -1054,6 +1091,10 @@
   vertical-align: middle;
 }
 
+.shadow-overlay-light {
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
+}
+
 .sn-component .focus\:brightness-default:focus {
   filter: brightness(100%);
 }
@@ -1062,6 +1103,11 @@
   filter: brightness(100%);
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .sn-component .focus\:bg-default:focus {
   background-color: var(--sn-stylekit-background-color);
 }