✨ Revamp login flow (#1617)

* 🚧 Revamp signin UI

* 🚧 Integrate WalletConnect for sign in

* 💄 [WalletConnect] Use custom QR code modal

* 🚚 Relocate files for easier integration on liker.land

* 🚸 [WalletConnect] Add loading UX

* 🔨 Add command for fixing stylelint

* ✨ Revamp sign up UI

* 🔧 Redirect /in to /in/settings

* 🐛 Fix register API

* ♻️ Refactor CSS in RegisterForm

* ✨ Revamp settings page for non-Authcore users

* 🚸 Check Liker ID availability earlier

* 🔥 Remove oice from button settings

* 🌐 Add missing translation keys

* 🔥 Remove LikeCoin button intro

* 🔥 Hide Whitepaper menu item

* 🚸 [AuthDialogV2] Show back button for error

* 🔥 Remove deprecated Civic Liker CTA

* ✨ [AuthDialogV2] Support overlay mode

* 🔥 Remove deprecated LikeCoin button settings

* 🥅 Redirect policies pages to privacy

* 🐛 Fix verify email CTA not dismiss after verified

* 🚸 Check Liker ID availability earlier

Check ID available

* ✨ Enable user description field

* 🐛 Fix email settings

* 💄 Fix InputField width

* 🚸 [Register] Add Liker ID hint

* 💬 [AuthDaialogV2] Use different texts for loading

* 🚸 [Register] Disable confirm when checking Liker ID

* ✨ [ProfileSettings] Add wallet address field

* 💄 Fix sliding menu height

* 🐛 Fix update empty email

* ✨ [InputField] Support textarea

* 🐛 Fix MetaMask entrance

* 💄 Fix duplicated AuthDialog

* ⬆️ [API] Support user description & changing email

* 🐛 Fix like prefix merge conflict

* 🐛 Fix missing app name in translation

* 🌐 [AuthDialogV2] Update translations

* 💄 Clean up settings page

* 💄 Improve InputField padding

* 🥅 [Settings] Guard empty email/display name

* 💫 [AuthDialogV2] Add proper transition

* 🐛 [AuthDialogV2] Fix unable to recover from WalletConnect error

* 💫 [BaseDialogV3] Add resize transition

* 💫 [BaseDialogV3] Improve transitions

* 💫 [AuthDialogV2] Improve transitions

* 🚸 Redirect to /in/register after logout

* 🐛 Fix wallet is not shown

* 🐛 [ProfileSettings] Fix field value not reactive

* 💄 [InputField] Fix placeholder align

* 🚨 Fix stylint warning

* 🐛 [Keplr] Fix accounts not refresh after reinit

* ⬆️ [API] Guard email update

* 🚸 [AuthDialogV2] Not show error when rejected wallet sign-in

* 👽 Update exchange URL

* 🎨 [WalletConnectQRCodeView] Clean up DOM

* 🐛 [WalletConnect] Fix unable to re-login

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;
+}