Merge pull request #160 from aeternity/develop

Release 0.0.16

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.superhero.cordova" version="0.0.15" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.superhero.cordova" version="0.0.16" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>SuperHero</name>
     <description>SuperHero wallet</description>
     <author email="dev@cordova.apache.org" href="http://cordova.io">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "superhero-wallet",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Superhero wallet",
   "author": "SuperHero",
   "license": "MIT",

src/common/variables.scss

@@ -20,15 +20,16 @@ $bg-color: #16161D;
 $white-color: #F1F1F1;
 $border-color: #34343B;
 $input-bg-color: #121217;
-$button-color: #3F4048;
-$button-text-color: #CFCFCF;
+$button-color: #2A9CFF;
+$button-text-color: #FFFFFF;
+$modal-background: #1B1B23;
 $placeholder-color: #67676D;
 $text-color: #BCBCC4;
 $accent-color: #67f7b8;
 $secondary-color: #2a9cff;
 $nav-bg-color: #21212A;
-$input-focus-color: #67f7b8;
-$input-error-color: #2a9cff;
+$input-focus-color: #2a9cff;
+$input-error-color: #FF5857;
 $transactions-bg: #12121b;
 $nav-border-color: #3A3A47;
 $tx-border-color: #33343e;

src/popup/locales/en.json

@@ -155,7 +155,7 @@
       "wholeTransaction": "Whole transaction history",
       "latestTransactions": "Latest transactions",
       "noTransactionsFound": "No transactions found!",
-      "tipSomeone": "Send Tips",
+      "tipSomeone": "Send Tip",
       "howToClaim": "How to claim AE",
       "balance": "Balance",
       "copied": "Copied!",
@@ -187,9 +187,6 @@
     "recentTransactions": {
       "recentActivity": "Recent Activity",
       "viewAll": "View all",
-      "pendingStatus": "Pending",
-      "sentStatus": "Sent",
-      "receivedStatus": "Received",
       "noTransactionsFound": "No transactions found!"
     },
     "addFungibleToken": {
@@ -597,6 +594,7 @@
     },
     "tipPage": {
       "back": "Back",
+      "OkButton": "OK",
       "noImage": "No Image",
       "domainVerified": "Verified",
       "domainNotVerified": "Not verified",
@@ -610,6 +608,9 @@
       "tipDetails": "Details",
       "tipWebsite": "Website",
       "heading": "Send",
+      "sendTipConfirmationHeader": "Send Tip Confirmation",
+      "sendTipConfirmationBody": "You are going to send tip to untrusted URL. Third party issues prevent us to ensure that tips will be directly delivered to the URL owner.",
+      "sendTipConfirmationQstn":"Are you sure you would like to send the tip anyway?",
       "headingSending": "Sending",
       "selectTip": "Select amount to tip",
       "tipDomain": "Tip domain",
@@ -621,15 +622,19 @@
       "title": "Title",
       "titlePlaceholder": "Send a message of #support along with your donation...",
       "account": "Account",
-      "next": "Send Tips",
-      "url": "Send a tip to",
+      "next": "Send Tip",
+      "url": "Send Tip to",
       "to": "to",
       "amountPlaceholder": "Enter amount",
       "amountLabel": "Amount",
       "availableLabel": "Available",
       "confirm": "Confirm",
       "cancel": "Cancel",
-      "edit": "Edit AE Details"
+      "edit": "Edit AE Details",
+      "whatIsVerifieddUrl": "What is \"Verified\" URL?",
+      "whatIsUntrustedUrl": "What is \"Untrusted\" URL?",
+      "untrustedUrlInfo": "Third party issues prevent us to ensure that tips will be directly delivered to the URL owner. You are sending the tip at your own risk.",
+      "verifiedUrlInfo": "If a URL is marked as verified, it means the owner of this URL is already a fellow Superhero — and that is awesome! An AE address has been included in the URL and tips can be claimed."
     },
     "successTip": {
       "sendMore": "Send More AE",
@@ -707,7 +712,10 @@
       "nameUpdate": "name update tx",
       "createTx": "create tx",
       "clear": "Clear filter",
-      "apply": "Apply filter"
+      "apply": "Apply filter",
+      "sent": "Sent",
+      "received": "Received",
+      "pending": "Pending"
     },
     "utilities": {
       "heading": "Utilities",

src/popup/router/components/Button.vue

@@ -13,6 +13,7 @@ export default {
     small: Boolean,
     third: Boolean,
     onboarding: Boolean,
+    dark: Boolean,
   },
   computed: {
     getClasses() {
@@ -23,6 +24,7 @@ export default {
       if (this.small) c.push('small');
       if (this.third) c.push('third');
       if (this.onboarding) c.push('onboarding');
+      if (this.dark) c.push('dark');
       return c.join(' ');
     },
   },
@@ -61,6 +63,9 @@ export default {
   width: 48% !important;
   margin: 0 !important;
 }
+.primary-button.dark {
+  background: $box-button-color !important;
+}
 .primary-button.small {
   width: auto !important;
   line-height: 1px !important;

src/popup/router/components/CheckBox.vue

@@ -40,7 +40,6 @@ export default {
 .checkbox-container {
   display: flex;
   position: relative;
-  padding-left: 15px;
   height: 20px;
   cursor: pointer;
   justify-content: start;

src/popup/router/components/Loader.vue

@@ -37,40 +37,47 @@ export default {
 .fadeOut-leave-active {
   transition: all 0.5s ease-in-out;
 }
+
 .fadeOut-leave-to {
   opacity: 0;
 }
+
 .ae-loader {
   border: 0.2em solid $secondary-color !important;
   border-left-color: transparent !important;
   border-right-color: transparent !important;
 }
+
 .mainLoader {
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: $bg-color;
   top: 0;
   z-index: 6;
-}
-.mainLoader .ae-loader {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -1.5em;
-  width: 3em !important;
-  height: 3em !important;
-  border-radius: 3em !important;
   padding-top: 50px;
   padding-top: calc(50px + env(safe-area-inset-top));
+
+  .ae-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -1.5em;
+    width: 3em !important;
+    height: 3em !important;
+    border-radius: 3em !important;
+  }
+
+  &.mainLoaderTransparent {
+    opacity: 0.6;
+  }
 }
-.mainLoader.mainLoaderTransparent {
-  opacity: 0.6;
-}
+
 .loader .loading {
   width: 32px;
   margin-right: 15px;
 }
+
 .center {
   position: relative;
   z-index: 5;

src/popup/router/components/Modal.vue

@@ -2,9 +2,9 @@
   <div class="popup">
     <transition name="modal">
       <div class="modal--mask">
-        <div class="modal--wrapper" @click="$emit('close')">
+        <div class="modal--wrapper">
           <div class="modal--container">
-            <!-- <Close class="modal--close" @click="$emit('close')" /> -->
+            <Close class="modal--close" @click="$emit('close')" />
             <div class="modal--header">
               <slot name="header" />
             </div>
@@ -22,7 +22,12 @@
 </template>
 
 <script>
+import Close from '../../../icons/close.svg?vue-component';
+
 export default {
+  components: {
+    Close,
+  },
   mounted() {
     if (document.body.style.overflow) return;
     document.body.style.overflow = 'hidden';
@@ -32,6 +37,7 @@ export default {
   },
 };
 </script>
+
 <style lang="scss" scoped>
 @import '../../../common/variables';
 .modal--mask {
@@ -41,50 +47,50 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
   display: table;
   transition: opacity 0.3s ease;
-}
-.modal--wrapper {
-  display: table-cell;
-  vertical-align: middle;
-}
-.modal--container {
-  position: relative;
-  width: 90%;
-  margin: 0 auto;
-  padding: 20px;
-  background: #fff;
-  border: 1px solid $tx-border-color;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-}
-.modal--close {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  cursor: pointer;
-}
-.modal--header {
-  color: $white-color;
-  font-size: 16px;
-}
-.modal--body {
-  margin: 20px 0;
-  color: $text-color;
-  font-size: 14px;
-  word-break: break-word;
-  text-align: left;
-}
-.modal--enter {
-  opacity: 0;
-}
-.modal--leave--active {
-  opacity: 0;
-}
-.modal--enter .modal--container,
-.modal--leave--active .modal--container {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+  .modal--wrapper {
+    display: table-cell;
+    vertical-align: middle;
+  }
+  .modal--container {
+    position: relative;
+    width: 87%;
+    margin: 0 auto;
+    padding: 62px 25px 30px;
+    background: $modal-background;
+    border: 1px solid $tx-border-color;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+  }
+  .modal--close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+  }
+  .modal--header {
+    color: $white-color;
+    font-size: 16px;
+  }
+  .modal--body {
+    margin: 20px 0;
+    color: $text-color;
+    font-size: 14px;
+    word-break: break-word;
+    text-align: left;
+  }
+  .modal--enter {
+    opacity: 0;
+  }
+  .modal--leave--active {
+    opacity: 0;
+  }
+  .modal--enter .modal--container,
+  .modal--leave--active .modal--container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
 }
 </style>