Add heart button to toolbar popup

simple-translate/_locales/en/messages.json

@@ -5,6 +5,10 @@
     "extDescription": {
         "message": "View translations easily as you browse the web."
     },
+
+    "donateWithPaypalLabel": {
+        "message": "Donate with PayPal"
+    },
     "initialTextArea": {
         "message": "Enter text"
     },
@@ -17,6 +21,7 @@
     "langList": {
         "message": "af:Afrikaans, sq:Albanian, am:Amharic, ar:Arabic, hy:Armenian, az:Azerbaijani, eu:Basque, be:Belarusian, bn:Bengali, bs:Bosnian, bg:Bulgarian, ca:Catalan, ceb:Cebuano, ny:Chewa, zh-CN:Chinese (PRC), zh-TW:Chinese (Taiwan), co:Corsican, hr:Croatian, cs:Czech, da:Danish, nl:Dutch, en:English, eo:Esperanto, et:Estonian, fi:Finnish, fr:French, fy:Frisian, gl:Galician, ka:Georgian, de:German, el:Greek, gu:Gujarati, ht:Haitian, ha:Hausa, haw:Hawaiian, he:Hebrew, hi:Hindi, hu:Hungarian, is:Icelandic, ig:Igbo, id:Indonesian, ga:Irish, it:Italian, ja:Japanese, jv:Javanese, kn:Kannada, kk:Kazakh, km:Khmer, ky:Kirghiz, ko:Korean, ku:Kurdish, lo:Laotian, la:Latin, lv:Latvian, lt:Lithuanian, lb:Luxembourgish, mk:Macedonian, mg:Malagasy, ms:Malay, ml:Malayalam, mt:Maltese, mi:Maori, mr:Marathi, mn:Mongolian, hmn:Monk, my:Myanmar, ne:Nepali, no:Norwegian, fa:Persian, pl:Polish, pt:Portuguese, pa:Punjabi, ps:Pushto, ro:Romanian, ru:Russian, sm:Samoan, gd:Scottish Gaelic, sr:Serbian, sn:Shona, sd:Sindhi, si:Sinhala, sk:Slovak, sl:Slovenian, so:Somali, sx:Sotho, es:Spanish, su:Sundanese, sw:Swahili, sv:Swedish, tl:Tagalog, tg:Tajiki, ta:Tamil, te:Telugu, th:Thai, tr:Turkish, uk:Ukrainian, ur:Urdu, uz:Uzbek, vi:Vietnamese, cy:Welsh, xh:Xosa, yi:Yiddish, yo:Yoruba, zu:Zulu"
     },
+
     "settingsLabel": {
         "message": "Settings"
     },

simple-translate/popup/popup.css

@@ -5,6 +5,7 @@
     --button: #d7d7db;
     --highlight: #5595ff;
     --main-bg: #ffffff;
+    --confirm: #ff4f4f;
 }
 
 body {
@@ -56,6 +57,24 @@ svg {
     justify-content: flex-end;
 }
 
+#donate {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-right: 8px;
+}
+
+#donate svg {
+    height: 18px;
+    width: 18px;
+    fill: var(--sub-text);
+    transition: all 100ms;
+}
+
+#donate:hover svg {
+    fill: var(--confirm);
+}
+
 #setting {
     display: flex;
     align-items: center;

simple-translate/popup/popup.html

@@ -30,11 +30,25 @@
                                              C511.995,216.122,506.472,210.32,499.453,210.004z M256.01,339.618c-46.164,0-83.622-37.438-83.622-83.612
                                              c0-46.184,37.458-83.622,83.622-83.622s83.602,37.438,83.602,83.622C339.612,302.179,302.174,339.618,256.01,339.618z"></path>
             </symbol>
+            <symbol id="heartSvg" viewBox="0 0 492.719 492.719">
+                <path d="M492.719,166.008c0-73.486-59.573-133.056-133.059-133.056c-47.985,0-89.891,25.484-113.302,63.569
+                                 c-23.408-38.085-65.332-63.569-113.316-63.569C59.556,32.952,0,92.522,0,166.008c0,40.009,17.729,75.803,45.671,100.178
+                                 l188.545,188.553c3.22,3.22,7.587,5.029,12.142,5.029c4.555,0,8.922-1.809,12.142-5.029l188.545-188.553
+                                 C474.988,241.811,492.719,206.017,492.719,166.008z"></path>
+            </symbol>
         </defs>
     </svg>
     <div id=header>
         <div id=title>Simple Translate</div>
         <div class="rightButtons">
+            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&no_shipping=1&business=sienori.firefox@gmail.com&item_name=SimpleTranslate - Donation"
+                target="_blank">
+                <div id="donate" title="Donate with PayPal">
+                    <svg>
+                        <use xlink:href="#heartSvg"></use>
+                    </svg>
+                </div>
+            </a>
             <a href="../options/options.html" target="_blank">
                 <div id="setting" title="Setting">
                     <svg>

simple-translate/popup/popup.js

@@ -50,6 +50,7 @@ function setLangList() {
 
 setTitles();
 function setTitles(){
+    document.getElementById('donate').title = browser.i18n.getMessage('donateWithPaypalLabel');
     document.getElementById("setting").title = browser.i18n.getMessage('settingsLabel');
 }