feat: improve markup and styling in index.vue and App.vue for better readability

Author: kvhnuke

packages/extension/src/ui/action/views/restricted/index.vue

@@ -10,16 +10,10 @@
     </p>
     <p>
       If this address has been incorrectly flagged, you can contact us at
-      <a class="blocked-page__support" href="mailto:support@myetherwallet.com"
-        >support@myetherwallet.com</a
-      >.
+      <a class="blocked-page__support" href="mailto:support@myetherwallet.com">support@myetherwallet.com</a>.
     </p>
-    <a
-      class="blocked-page__more-info"
-      target="_blank"
-      href="https://help.myetherwallet.com/en/articles/12897302-geographic-restrictions-for-mew"
-      >More info</a
-    >
+    <a class="blocked-page__more-info" target="_blank" rel="noopener noreferrer"
+      href="https://help.myetherwallet.com/en/articles/12897302-geographic-restrictions-for-mew">More info</a>
     <div v-if="isInitialized">
       <div class="blocked-page__divider-top"></div>
       <div class="blocked-page__content">
@@ -38,31 +32,17 @@
       <div @click="supportAction">Contact support</div>
     </div>
 
-    <modal-sign
-      v-if="isOpenSign"
-      :is-unlock="true"
-      v-bind="$attrs"
-      @window:close="closeUnlock"
-      @toggle:forgot="openForgot"
-      @action:recovery-phrase="displayMnemonic"
-    />
-
-    <modal-forgot
-      v-if="isOpenForgot"
-      :is-forgot="isOpenForgot"
-      @toggle:forgot="closeForgot"
-    />
+    <modal-sign v-if="isOpenSign" :is-unlock="true" v-bind="$attrs" @window:close="closeUnlock"
+      @toggle:forgot="openForgot" @action:recovery-phrase="displayMnemonic" />
+
+    <modal-forgot v-if="isOpenForgot" :is-forgot="isOpenForgot" @toggle:forgot="closeForgot" />
   </div>
 
   <div class="settings__container" v-if="showMnemonic">
     <div class="settings__overlay" @click="closeMnemonic()" />
     <div class="settings__wrap">
-      <settings-recovery
-        :has-back="false"
-        :mnemonic="mnemonic"
-        @window:back="closeMnemonic"
-        @window:close="closeMnemonic"
-      />
+      <settings-recovery :has-back="false" :mnemonic="mnemonic" @window:back="closeMnemonic"
+        @window:close="closeMnemonic" />
     </div>
   </div>
 </template>

packages/extension/src/ui/onboard/App.vue

@@ -8,13 +8,10 @@
       <router-view />
     </div>
 
-    <div
-      v-if="
-        route.name == 'create-wallet-wallet-ready' ||
-        route.name == 'restore-wallet-wallet-ready'
-      "
-      class="onboard__info"
-    >
+    <div v-if="
+      route.name == 'create-wallet-wallet-ready' ||
+      route.name == 'restore-wallet-wallet-ready'
+    " class="onboard__info">
       <h4>Pin the Enkrypt extension</h4>
       <p>Click on <extension-icon /> in your browser</p>
       <p>
@@ -75,8 +72,7 @@ const wrapClassObject = () => {
 
 <style lang="less">
 @import '@action/styles/theme.less';
-@import (css)
-  url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
+@import (css) url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
 
 body {
   width: 100vw;