✨ tweak: added firefox add-on link to readme and to popup.html

Merge pull request #20 from karenhernandeze/dev
Web3Philippines · Jul 7, 2023 · 46fb658 · 46fb658
2 parents 85f1b07 + 822d302
commit 46fb658
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ![screenshot](src/assets/screenshot.png)
 
-Matuto is a simple chromium-based browser extension that provides a glossary of terms and definitions related to web3, blockchain and cryptocurrencies when every time you open a new tab from your browser.
+Matuto is a simple browser extension that provides a glossary of terms and definitions related to web3, blockchain and cryptocurrencies when every time you open a new tab from your browser.
 
 It's a Filipino word which means "to learn". Which is the goal of this project, to help people learn more about web3, blockchain and cryptocurrencies. 💜💙📖
 
@@ -14,6 +14,7 @@ Browser | Download | Info
 --- | --- | ---
 **Chrome** | [Get Now](https://chrome.google.com/webstore/detail/matuto-learn-web3-in-ever/gbdkfpagopdnedcmmohlpmogekmfpobp) | For chromium-based browsers such as Brave, Opera, etc.
 **Edge** | [Get Now](https://microsoftedge.microsoft.com/addons/detail/matuto/djbnlpmjbdflnjdcphaofhifcgigdbbe) | For Microsoft Edge browser.
+**Firefox** | [Get Now](https://addons.mozilla.org/en-US/firefox/addon/matuto/) | For Firefox browser.
 
 ## ⚡ Demo
 
@@ -42,8 +43,6 @@ Please visit the official documentation here: [docs.web3philippines.org/matuto](
 > **Note**: Everytime you made changes please run `yarn rebuild` to update the extension. Go to extension management page in your browser and reload the extension.
 >
 > We'll think of a better way to automate this process in the future.
->
-> Firefox is not yet supported, test it only on chromium based browser such as Edge or Chrome.
 
 ## 📖 Source
 

diff --git a/src/popup.html b/src/popup.html
@@ -1,24 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <style>
         body {
             min-width: 200px;
             background-color: #1b1b23;
             color: #fff;
             padding: 10px;
         }
-
         a {
             color: #fff;
             text-decoration: none;
         }
         a:hover {
             text-decoration: underline;
         }
+        .title, .version, .description, .links, #download {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
         .title {
             font-size: 18px;
             font-weight: bold;
@@ -29,34 +33,67 @@
             color: #c1c1c1;
             font-weight: normal;
         }
-        .img-wrapper, .sponsor {
+        .img-wrapper,
+        .sponsor {
             text-align: center;
         }
-        .img-wrapper > img {
+        .img-wrapper>img {
             width: 50px;
         }
         .links {
             font-size: 14px;
             text-align: center;
         }
+        #download {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+        }
+        #download > span {
+            margin-right: 10px;
+            font-size: 12px;
+        }
+        #download > a {
+            margin-right: 10px;
+            font-size: 24px;
+        }
     </style>
     <title>Matuto</title>
 </head>
+
 <body>
     <div class="img-wrapper">
-        <img src="assets/icon.png" alt="Icon"/>
+        <img src="assets/icon.png" alt="Icon" />
     </div>
     <div class="title">Matuto <span class="version">v0.1.2</span></div>
-    <p>By <a href="https://web3philippines.org" target="_blank" rel="noopener">Web3 Philippines</a></p>
-    <p class="description">A simple chromium-based browser extension for learning web3 in every new tab. 💜💙📖</p>
+    <p class="description">By <a class="description" href="https://web3philippines.org" target="_blank"
+            rel="noopener">Web3 Philippines®</a></p>
+    <p class="description">A simple browser extension for learning web3 in every new tab. 💜💙📖</p>
     <div class="links">
         <a href="https://github.com/web3phl/matuto" target="_blank" rel="noopener">
-            Contribute 🤝
+            🤝 Contribute
         </a>
         <span>|</span>
         <a href="https://github.com/sponsors/web3phl" target="_blank" rel="noopener">
-            Sponsor 💖
+            💖 Sponsor
+        </a>
+    </div>
+    <div id="download">
+        <span>Available In:</span>
+        <a href="https://chrome.google.com/webstore/detail/matuto-learn-web3-in-ever/gbdkfpagopdnedcmmohlpmogekmfpobp"
+            target="_blank" rel="noopener">
+            <i class="fab fa-chrome"></i>
+        </a>
+        <a href="https://microsoftedge.microsoft.com/addons/detail/matuto/djbnlpmjbdflnjdcphaofhifcgigdbbe"
+            target="_blank" rel="noopener">
+            <i class="fab fa-edge"></i>
+        </a>
+        <a href="https://addons.mozilla.org/en-US/firefox/addon/matuto/" target="_blank" rel="noopener">
+            <i class="fab fa-firefox"></i>
         </a>
     </div>
+
 </body>
+
 </html>