Merge pull request ava-labs#140 from ava-labs/01_19_cleanup

Various cleanup before master merge

src/App.vue

@@ -129,7 +129,7 @@ p {
 
 @include main.mobile-device {
     #router_view {
-        padding: main.$container_padding_mobile !important;
+        padding: 9px !important;
     }
 
     #nav {

src/components/CreateWalletWorkflow/CreateWallet.vue

@@ -148,7 +148,7 @@ import MnemonicDisplay from '@/components/misc/MnemonicDisplay.vue'
 import CopyText from '@/components/misc/CopyText.vue'
 import * as bip39 from 'bip39'
 
-import VerifyMnemonic from '@/components/CreateWalletWorkflow/VerifyMnemonic.vue'
+import VerifyMnemonic from '@/components/modals/VerifyMnemonic.vue'
 import MnemonicCopied from '@/components/CreateWalletWorkflow/MnemonicCopied.vue'
 import ToS from '@/components/misc/ToS.vue'
 

src/components/misc/AvaxInput.vue

@@ -79,6 +79,8 @@ export default class AvaxInput extends Vue {
 }
 </script>
 <style scoped lang="scss">
+@use '../../main';
+
 .avax_input {
     display: grid;
     grid-template-columns: 1fr max-content;
@@ -170,4 +172,10 @@ p {
         opacity: 1;
     }
 }
+
+@include main.mobile-device {
+    .balance {
+        font-size: 12px;
+    }
+}
 </style>

src/components/modals/ExportKeys.vue

@@ -50,7 +50,8 @@ export default class ExportKeys extends Vue {
 
 .export_body {
     padding: 30px;
-    width: 450px;
+    width: 100%;
+    max-width: 450px;
     min-height: 315px;
 }
 
@@ -68,7 +69,6 @@ export default class ExportKeys extends Vue {
 
 @include main.mobile-device {
     .export_body {
-        width: 90vw;
     }
 }
 </style>

src/components/modals/HdDerivationList/HDDerivationList.vue

@@ -217,7 +217,7 @@ export default class HDDerivationList extends Vue {
 .headers,
 .list_row {
     display: grid;
-    grid-template-columns: 35px max-content 1fr;
+    grid-template-columns: 35px 2fr 1fr;
     padding: 5px 0px;
     column-gap: 10px;
 }

src/components/modals/ImportKeys.vue

@@ -3,7 +3,15 @@
         <div class="add_key_body">
             <img src="@/assets/import_key_bg.png" class="bg" />
             <p class="explain">Add additional keys to use with your wallet.</p>
-            <v-tabs color="#4C2E56" height="38" :grow="true" v-model="selectedTab">
+            <v-tabs
+                color="#4C2E56"
+                height="38"
+                :grow="true"
+                v-model="selectedTab"
+                :show-arrows="false"
+                :centered="true"
+                :mobile-breakpoint="900"
+            >
                 <!--                <v-tab key="private">{{$t('private_key')}}</v-tab>-->
                 <v-tab key="mnemonic">{{ $t('keys.import_key_option1') }}</v-tab>
                 <v-tab key="keystore">{{ $t('keys.import_key_option2') }}</v-tab>
@@ -73,7 +81,7 @@ export default class ImportKeys extends Vue {
 
 .add_key_body {
     padding: 30px;
-    width: 450px;
+    max-width: 450px;
     min-height: 315px;
 }
 
@@ -94,7 +102,9 @@ export default class ImportKeys extends Vue {
 .bg {
     display: block;
     max-height: 50px;
-    margin: 12px auto;
+    object-fit: contain;
+    width: 100%;
+    //margin: 12px auto;
 }
 
 .explain {
@@ -103,9 +113,6 @@ export default class ImportKeys extends Vue {
 }
 
 @include main.mobile-device {
-    .add_key_body {
-        width: 90vw;
-    }
 }
 </style>
 

src/components/modals/MnemonicPhrase.vue

@@ -33,8 +33,8 @@ export default class MnemonicPhrase extends Vue {
 <style scoped lang="scss">
 .mnemonic_modal_body {
     /*width: 600px;*/
-    width: 400px;
-    max-width: 100%;
+    max-width: 400px;
+    width: 100%;
     padding: 30px;
     background-color: var(--bg-light);
 }

src/components/modals/Modal.vue

@@ -1,7 +1,7 @@
 <template>
     <transition name="fade">
         <div class="modal_main" v-show="isActive">
-            <div class="modal_bg" @click="bgclick"></div>
+            <div class="modal_bg" @click="bgclick" :icy="icy"></div>
             <div class="modal_body">
                 <div class="modal_topbar">
                     <h4 class="modal_title">{{ title }}</h4>
@@ -22,6 +22,7 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 export default class Modal extends Vue {
     @Prop({ default: 'Modal Title' }) title!: string
     @Prop({ default: true }) can_close!: boolean
+    @Prop({ default: false }) icy!: boolean
 
     isActive: boolean = false
 
@@ -86,6 +87,10 @@ export default class Modal extends Vue {
     display: flex;
     vertical-align: center;
     align-items: center;
+
+    &[icy] {
+        backdrop-filter: blur(4px);
+    }
 }
 
 .modal_body {
@@ -101,11 +106,14 @@ export default class Modal extends Vue {
 
 @include main.mobile-device {
     .modal_body {
-        position: absolute;
+        position: fixed;
         bottom: 0;
         width: 100%;
         margin: 0;
+        padding-bottom: 20px;
         max-width: none;
+        border-top-right-radius: 30px;
+        border-top-left-radius: 30px;
     }
 }
 </style>

src/components/modals/PaperWallet/PaperWallet.vue

@@ -1,21 +1,25 @@
 <template>
     <modal ref="modal" :title="$t('modal.print.title')" class="print_modal">
-        <div class="qr_body">
+        <div class="qr_body" ref="qr_body">
             <img
                 ref="bg"
                 src="@/assets/paper_wallet/bg.png"
                 :style="{
                     display: 'none',
-                    height: `${600}px`,
-                    width: `${600 * aspectRatio}px`,
+                    height: `${height}px`,
+                    width: `100%`,
+                    // width: '100%',
+                    // paddingTop: `${100 / aspectRatio}%`,
                 }"
             />
             <canvas
                 class="pdf_preview"
                 ref="pdf"
                 :style="{
-                    height: `${600}px`,
-                    width: `${600 * aspectRatio}px`,
+                    width: `100%`,
+                    height: `${height}px`,
+                    // width: '100%',
+                    // paddingTop: `${100 / aspectRatio}%`,
                 }"
             ></canvas>
             <v-btn depressed block @click="print">{{ $t('modal.print.submit') }}</v-btn>
@@ -38,6 +42,8 @@ const PDF_W = 8.5
 const PDF_H = 11
 const PDF_ASPECT_RATIO = PDF_W / PDF_H
 
+// Contents of the pdf are set according to this value
+const designWidth = 525 - 60
 @Component({
     components: {
         Modal,
@@ -53,14 +59,23 @@ export default class PaperWallet extends Vue {
     qrImg: HTMLImageElement | null = null
     mnemonicImg: HTMLImageElement | null = null
 
+    // Height and Width of the img and canvas
+    width = 100
+    height = 100
+
     open() {
         let modal = this.$refs.modal
         // @ts-ignore
         modal.open()
 
         setTimeout(() => {
-            this.initBg()
+            this.setSizes()
         }, 200)
+
+        setTimeout(() => {
+            // this.setSizes()
+            this.initBg()
+        }, 500)
     }
 
     get address() {
@@ -118,25 +133,53 @@ export default class PaperWallet extends Vue {
         let addr1 = addr.substr(0, wrapChar)
         let addr2 = addr.substr(wrapChar)
 
-        cont.font = '8px Helvetica'
-        cont.fillText(addr1, 352, 140, 120)
-        cont.fillText(addr2, 352, 150, 120)
-        cont.drawImage(this.qrImg as HTMLImageElement, 352, 10)
+        cont.font = `${this.designPxToReal(8)}px Helvetica`
+        cont.fillText(
+            addr1,
+            this.designPxToReal(352),
+            this.designPxToReal(140),
+            this.designPxToReal(120)
+        )
+        cont.fillText(
+            addr2,
+            this.designPxToReal(352),
+            this.designPxToReal(150),
+            this.designPxToReal(120)
+        )
+        cont.drawImage(
+            this.qrImg as HTMLImageElement,
+            this.designPxToReal(352),
+            this.designPxToReal(10),
+            this.designPxToReal(100),
+            this.designPxToReal(100)
+        )
 
         // Bottom Address
-        cont.font = '10px Helvetica'
-        cont.fillText(addr, 40, 380)
-        cont.drawImage(this.qrImg as HTMLImageElement, 352, 335, 90, 90)
+        cont.font = `${this.designPxToReal(10)}px Helvetica`
+        cont.fillText(addr, this.designPxToReal(40), this.designPxToReal(380))
+        cont.drawImage(
+            this.qrImg as HTMLImageElement,
+            this.designPxToReal(352),
+            this.designPxToReal(335),
+            this.designPxToReal(90),
+            this.designPxToReal(90)
+        )
 
         // Mnemonic
         let mnemonicWords: string[] = this.mnemonic.split(' ')
         let row1 = mnemonicWords.slice(0, 8).join(' ')
         let row2 = mnemonicWords.slice(8, 16).join(' ')
         let row3 = mnemonicWords.slice(16).join(' ')
-        cont.fillText(row1, 40, 490)
-        cont.fillText(row2, 40, 505)
-        cont.fillText(row3, 40, 520)
-        cont.drawImage(this.mnemonicImg as HTMLImageElement, 352, 445)
+        cont.fillText(row1, this.designPxToReal(40), this.designPxToReal(490))
+        cont.fillText(row2, this.designPxToReal(40), this.designPxToReal(505))
+        cont.fillText(row3, this.designPxToReal(40), this.designPxToReal(520))
+        cont.drawImage(
+            this.mnemonicImg as HTMLImageElement,
+            this.designPxToReal(352),
+            this.designPxToReal(445),
+            this.designPxToReal(90),
+            this.designPxToReal(90)
+        )
     }
 
     @Watch('address')
@@ -146,7 +189,7 @@ export default class PaperWallet extends Vue {
         QRCode.toDataURL(
             this.address,
             {
-                width: 100,
+                width: this.designPxToReal(100),
             },
             function (err, url) {
                 var img = new Image()
@@ -158,7 +201,7 @@ export default class PaperWallet extends Vue {
         QRCode.toDataURL(
             this.mnemonic,
             {
-                width: 90,
+                width: this.designPxToReal(90),
             },
             function (err, url) {
                 var img = new Image()
@@ -168,10 +211,23 @@ export default class PaperWallet extends Vue {
         )
     }
 
+    setSizes() {
+        // Set height and width
+        //@ts-ignore
+        let contW = this.$refs['pdf'].clientWidth
+
+        this.width = contW
+        this.height = contW / this.aspectRatio
+    }
+
     mounted() {
         this.buildQr()
     }
 
+    designPxToReal(px: number) {
+        return (this.width / designWidth) * px
+    }
+
     print() {
         let canv: HTMLCanvasElement = this.$refs.pdf
         printjs({
@@ -185,19 +241,20 @@ export default class PaperWallet extends Vue {
 }
 </script>
 <style scoped>
-.print_modal >>> .modal_body {
-    width: auto !important;
-}
 .qr_body {
+    width: 525px;
+    max-width: 100%;
     padding: 30px;
 }
 
 .qr_body p {
     word-break: break-all;
 }
+
 .pdf_preview {
-    width: 420px;
-    height: 320px;
+    /*width: 420px;*/
+    /*max-width: 100%;*/
+    /*height: 320px;*/
     border: 1px solid #ddd;
 }
 </style>

src/components/CreateWalletWorkflow/VerifyMnemonic.vue → src/components/modals/VerifyMnemonic.vue

@@ -1,5 +1,5 @@
 <template>
-    <modal ref="modal" :title="title">
+    <modal ref="modal" :title="title" class="modal_parent" icy>
         <div class="mnemonic_body">
             <button @click="close" class="close_but">
                 <fa icon="times"></fa>
@@ -125,6 +125,7 @@ export default class VerifyMnemonic extends Vue {
 .mnemonic_body {
     padding: 30px;
     text-align: center;
+    max-width: 100%;
     width: 450px;
 }
 
@@ -227,7 +228,7 @@ h3 {
 
 @include main.mobile-device {
     .mnemonic-body {
-        width: 90vw;
+        width: 100%;
     }
 
     .words {

src/components/wallet/TopInfo.vue

@@ -117,6 +117,7 @@ export default {
     .top_cards {
         grid-template-columns: none;
         grid-template-rows: min-content;
+        grid-gap: 9px;
     }
 
     .top_card {