🔀 Merge login UI flow revamp

assets/_sliding-menu.scss

@@ -10,6 +10,7 @@ $sliding-menu-narrow-width: 260px;
   bottom: 0;
 
   width: $sliding-menu-width;
+  min-height: 100vh;
 
   background-color: $like-gray-1;
 

assets/css/main.css

@@ -24,3 +24,8 @@ a, a:hover, a:focus, a:visited
   max-width: 400px;
   max-height: 289px;
 }
+
+/* HACK: Fix for vendor CSS overwritten WalletConnect style */
+.walletconnect-modal__headerLogo {
+  height: 21px !important;
+}

assets/index.scss

@@ -7,6 +7,8 @@
 /* sliding menu style for global */
 @import "sliding-menu";
 
+@import "v2/global";
+
 * {
   margin: 0;
   padding: 0;
@@ -154,8 +156,7 @@ a,
 .lc-page-wrapper {
   display: flex;
   flex-direction: column;
-
-  min-height: 100vh;
+  flex-grow: 1;
 
   .lc-page-content {
     flex-grow: 1;
@@ -171,7 +172,6 @@ a,
   }
 }
 
-
 .lc-container-0,
 .lc-container-1,
 [class^="lc-container-2"],
@@ -608,6 +608,10 @@ $line-height-map: (
 }
 
 .lc-bg- {
+  &white {
+    background-color: white;
+  }
+
   &transparent {
     background-color: transparent;
   }

assets/v2/global.css

@@ -0,0 +1,97 @@
+html * {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.v2-card-view {
+  border-radius: 24px;
+  background-color: #fff;
+}
+
+.v2-card-view__content {
+  padding: 32px 24px;
+}
+
+.v2-modal__title {
+  text-align: center;
+
+  color: #4a4a4a;
+
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.v2-modal__description {
+  margin-top: 16px;
+
+  text-align: center;
+
+  color: #9b9b9b;
+
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.v2-modal__actions {
+  display: grid;
+  align-items: center;
+  grid-auto-flow: column;
+  column-gap: 8px;
+  justify-content: center;
+
+  margin-top: 24px;
+}
+
+.v2-form,
+.v2-form__content,
+.v2-form__body {
+  display: grid;
+  grid-auto-rows: auto;
+  row-gap: 12px;
+}
+.v2-form__header,
+.v2-form__footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.v2-form__footer {
+  margin-top: 24px;
+}
+
+.v2-form__header-left-slot,
+.v2-form__header-right-slot,
+.v2-form__footer-left-slot,
+.v2-form__footer-right-slot {
+  display: flex;
+  align-items: center;
+}
+
+.v2-form__header-left-slot,
+.v2-form__footer-left-slot {
+  justify-content: flex-start;
+
+  margin-right: auto;
+}
+
+.v2-form__header-right-slot,
+.v2-form__footer-right-slot {
+  justify-content: flex-end;
+
+  margin-left: auto;
+}
+
+.v2-form__header h2 {
+  margin: 0 12px;
+
+  color: #28646E;
+
+  font-size: 16px;
+  line-height: 1.25;
+}
+
+.v2-form__body {
+  color: #9b9b9b;
+
+  font-size: 16px;
+  line-height: 1.375;
+}