From 78f3de07463b0038ab14123ff8e26e697e73c40e Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Wed, 24 Mar 2021 16:45:01 +0300
Subject: [PATCH] rebrand tip icon

---
 package-lock.json               | 116 ++++++++++++++++++++++----------
 src/assets/iconTipRebranded.svg |   6 ++
 src/components/TipInput.vue     |  78 ++++++++++++++++-----
 3 files changed, 148 insertions(+), 52 deletions(-)
 create mode 100644 src/assets/iconTipRebranded.svg

diff --git a/package-lock.json b/package-lock.json
index 85d031797..e27a9c2c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2857,17 +2857,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2919,18 +2908,6 @@
             "supports-color": "^7.0.0"
           }
         },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2997,18 +2974,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -19540,6 +19505,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.1.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+      "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-meta": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
diff --git a/src/assets/iconTipRebranded.svg b/src/assets/iconTipRebranded.svg
new file mode 100644
index 000000000..901eab073
--- /dev/null
+++ b/src/assets/iconTipRebranded.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path class="inner" d="M7.88702 6.37701H10.76L16.901 12.437L12 17.056L4.19702 9.72001L7.88702 6.37701Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 9.69197L7.296 4.90997H16.704L22 9.69197L12.028 19.094L2 9.69197ZM7.887 6.37697H10.76L16.901 12.437L12 17.056L4.197 9.71997L7.887 6.37697Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/components/TipInput.vue b/src/components/TipInput.vue
index b51b5115d..0250c7479 100644
--- a/src/components/TipInput.vue
+++ b/src/components/TipInput.vue
@@ -7,7 +7,12 @@
       :title="title"
       @click="useSdkWallet && (showModal = true)"
     >
-      <img :src="iconTip">
+      <template v-if="userAddress">
+        <IconTipUser />
+      </template>
+      <template v-else>
+        <IconTip :class="{ tipped: tipUrlStats.isTipped }" />
+      </template>
       <AeAmountFiat
         v-if="!userAddress && tipAmount.value"
         :amount="tipAmount.value"
@@ -59,7 +64,7 @@
           <div class="not-bootstrap-row">
             <AeInputAmount
               v-model="inputValue"
-              :select-token-f="(token) => inputToken = token"
+              :select-token-f="token => (inputToken = token)"
             />
             <AeButton :disabled="!isValid || v1TipWarning">
               {{ tip ? $t('retip') : $t('tip') }}
@@ -73,9 +78,8 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
-import iconTip from '../assets/iconTip.svg';
-import iconTipUser from '../assets/iconTipUser.svg';
-import iconTipped from '../assets/iconTipped.svg';
+import IconTipUser from '../assets/iconTipUser.svg?icon-component';
+import IconTip from '../assets/iconTipRebranded.svg?icon-component';
 import Backend from '../utils/backend';
 import { EventBus } from '../utils/eventBus';
 import { createDeepLinkUrl, shiftDecimalPlaces } from '../utils';
@@ -94,6 +98,8 @@ export default {
     AeAmountFiat,
     Modal,
     Dropdown,
+    IconTip,
+    IconTipUser,
   },
   props: {
     tip: { type: Object, default: null },
@@ -142,29 +148,37 @@ export default {
         };
     },
     v1TipWarning() {
-      return this.tip && this.tip.id.split('_')[1] === 'v1' && this.inputToken !== null;
+      return (
+        this.tip
+        && this.tip.id.split('_')[1] === 'v1'
+        && this.inputToken !== null
+      );
     },
     tipUrl() {
       if (this.comment) {
         return `https://superhero.com/tip/${this.comment.tipId}/comment/${this.comment.id}`;
       }
       if (this.userAddress) {
-        const { href } = this.$router.resolve({ name: 'user-profile', params: { address: this.userAddress } });
+        const { href } = this.$router.resolve({
+          name: 'user-profile',
+          params: { address: this.userAddress },
+        });
         return `https://superhero.com${href}`;
       }
       return this.tip.url;
     },
     deepLink() {
-      return createDeepLinkUrl(this.tip
-        ? { type: 'retip', id: this.tip.id } : { type: 'tip', url: this.tipUrl });
+      return createDeepLinkUrl(
+        this.tip
+          ? { type: 'retip', id: this.tip.id }
+          : { type: 'tip', url: this.tipUrl },
+      );
     },
     isValid() {
-      return (this.tip || this.message.trim().length > 0)
-        && (this.inputToken !== null || this.inputValue > this.minTipAmount);
-    },
-    iconTip() {
-      if (this.userAddress) return iconTipUser;
-      return this.tipUrlStats.isTipped ? iconTipped : iconTip;
+      return (
+        (this.tip || this.message.trim().length > 0)
+        && (this.inputToken !== null || this.inputValue > this.minTipAmount)
+      );
     },
     title() {
       if (this.userAddress) return this.$t('components.TipInput.tipUser');
@@ -179,8 +193,12 @@ export default {
       if (!this.isValid) return;
       this.showLoading = true;
       try {
-        const amount = shiftDecimalPlaces(this.inputValue,
-          this.inputToken !== null ? this.tokenInfo[this.inputToken].decimals : 18).toFixed();
+        const amount = shiftDecimalPlaces(
+          this.inputValue,
+          this.inputToken !== null
+            ? this.tokenInfo[this.inputToken].decimals
+            : 18,
+        ).toFixed();
 
         if (!this.tip) {
           await this.$store.dispatch('aeternity/tip', {
@@ -284,5 +302,31 @@ export default {
       }
     }
   }
+
+  .iconTipRebranded {
+    width: 24px;
+    height: 24px;
+    opacity: 0.44;
+
+    path.inner {
+      opacity: 0.44;
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.tipped {
+      opacity: 1;
+
+      &:hover path {
+        fill: #0e52d8;
+      }
+
+      path {
+        fill: $secondary_color;
+      }
+    }
+  }
 }
 </style>