Add font-awesome

Co-authored-by: katibest <katibest@gaslight.co>

apps/explorer_web/assets/brunch-config.js

@@ -60,12 +60,20 @@ exports.config = {
       ignore: [/vendor/]
     },
 
+    copycat: {
+      'fonts': ['node_modules/font-awesome/fonts']
+    },
+
     sass: {
       mode: 'native',
       precision: 8,
       allowCache: true,
       options: {
-        includePaths: ['node_modules/bootstrap/scss', 'node_modules/jasmine-core/lib']
+        includePaths: [
+          'node_modules/bootstrap/scss',
+          'node_modules/font-awesome/scss',
+          'node_modules/jasmine-core/lib'
+        ]
       }
     },
 

apps/explorer_web/assets/css/app.scss

@@ -3,9 +3,13 @@
 
 /* Phoenix flash messages */
 .alert:empty { display: none; }
+
 /* This file is for your main application css. */
 
-//Bootstrap Core CSS
+// Font Awesome
+@import "font-awesome";
+
+// Bootstrap Core CSS
 @import "node_modules/bootstrap/scss/functions";
 @import "theme/variables";
 @import "node_modules/bootstrap/scss/mixins";
@@ -16,8 +20,7 @@
 @import "node_modules/bootstrap/scss/dropdown";
 @import "node_modules/bootstrap/scss/transitions";
 
-
+// Custom SCSS
-//Custom SCSS
 @import "explorer/wrapper";
 @import "theme/fonts";
 @import "utilities";

apps/explorer_web/assets/css/components/_menu.scss

@@ -165,8 +165,3 @@ a[data-toggle="collapse"] {
         transform: rotate(-45deg) translate(1px, -1px);
     }
 }
-
-.caret-down {
-  width: 11px !important;
-  margin-left: 5px;
-}

apps/explorer_web/assets/package-lock.json

@@ -80,6 +80,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "ansi-color": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-color/-/ansi-color-0.2.1.tgz",
+      "integrity": "sha1-PnXAN0dSF1RO12Oo21cJ+prlv5o="
+    },
     "ansi-escapes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.0.0.tgz",
@@ -1596,6 +1601,28 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "copycat-brunch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/copycat-brunch/-/copycat-brunch-1.1.0.tgz",
+      "integrity": "sha1-EOF7hZCeDhKZgd+5AwuYZkg9Zr0=",
+      "requires": {
+        "loggy": "0.2.2",
+        "mkdirp": "0.5.1",
+        "quickly-copy-file": "0.1.0"
+      },
+      "dependencies": {
+        "loggy": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/loggy/-/loggy-0.2.2.tgz",
+          "integrity": "sha1-ftyFcGqC12HOnO+Gjxr7rYQWVCc=",
+          "requires": {
+            "ansi-color": "0.2.1",
+            "date-utils": "1.2.21",
+            "growl": "1.8.1"
+          }
+        }
+      }
+    },
     "core-js": {
       "version": "2.5.3",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.3.tgz",
@@ -1829,6 +1856,11 @@
         "assert-plus": "1.0.0"
       }
     },
+    "date-utils": {
+      "version": "1.2.21",
+      "resolved": "https://registry.npmjs.org/date-utils/-/date-utils-1.2.21.tgz",
+      "integrity": "sha1-YfsWzcEnSzyayq/+n8ad+HIKK2Q="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -2638,6 +2670,11 @@
       "resolved": "https://registry.npmjs.org/fn-args/-/fn-args-1.0.0.tgz",
       "integrity": "sha1-l02voa6sSsfCH6Ccw7gPZQEG7TI="
     },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -5555,6 +5592,14 @@
       "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
     },
+    "quickly-copy-file": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/quickly-copy-file/-/quickly-copy-file-0.1.0.tgz",
+      "integrity": "sha1-0UBj/2WfaGl+fL/ugXoHu2NSN8I=",
+      "requires": {
+        "mkdirp": "0.5.1"
+      }
+    },
     "randomatic": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",

apps/explorer_web/assets/package.json

@@ -25,7 +25,9 @@
     "babel-preset-react": "^6.24.1",
     "bootstrap": "^4.1.0",
     "brunch": "2.10.9",
+    "copycat-brunch": "^1.1.0",
     "csswring": "^6.0.3",
+    "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "phoenix": "file:../../../deps/phoenix",
     "phoenix_html": "file:../../../deps/phoenix_html",

apps/explorer_web/assets/static/images/caret-down.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 345"><defs><style>.cls-1{fill:#bac4cb;}</style></defs><title>caret-down</title><path class="cls-1" d="M8,34.437c2.285-5.214,4.036-10.928,6.955-15.548C23.938,4.667,41.835,2.014,53.1,13.649c8.177,8.446,15.536,18.08,23.138,27.333Q162.282,145.7,248.28,250.476c.987,1.2,2.038,2.324,3.492,3.974,5.768-7.161,11.326-14.176,16.985-21.068q88.21-107.436,176.422-214.869c6.364-7.759,13.709-12.494,22.8-11.958,12.032.709,21.514,9.741,25.5,23.638.417,1.453,1.007,2.831,1.517,4.244V46.752c-3.546,16.083-14.345,25.392-23.2,36.419-15.007,18.7-30.3,37.059-45.486,55.54q-24.432,29.727-48.894,59.419-22.508,27.4-44.976,54.843-22.506,27.4-45.065,54.725c-6.142,7.427-12.228,14.947-18.666,21.982-9.086,9.93-25.413,10.143-34.4-.018-11.646-13.176-22.821-26.973-34.108-40.614-13.587-16.422-27.079-32.961-40.613-49.449q-22.5-27.409-45-54.816T69.578,130.009c-14.909-18.157-29.913-36.2-44.637-54.579A232.761,232.761,0,0,1,10.824,54.942c-1.44-2.259-1.91-5.434-2.824-8.19Q8,40.594,8,34.437Z"/></svg>

apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex

@@ -6,8 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= gettext "POA Network Explorer" %></title>
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
-    <!-- Custom fonts for this template-->
-    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
   </head>
 
   <body>
@@ -30,7 +28,7 @@
             <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
               <img class="" src="<%= static_path(@conn, "/images/transaction.svg") %>" />
               <%= gettext("Transactions") %>
-              <img class="caret-down" src="<%= static_path(@conn, "/images/caret-down.svg") %>" / >
+              <i class="fa fa-caret-down"></i>
             </a>
             <ul class="collapse list-unstyled" id="pageSubmenu">
               <li><a href="<%= transaction_path(@conn, :index, Gettext.get_locale) %>">Validated</a></li>
@@ -83,6 +81,6 @@
              });
          });
       </script>
- 
+
   </body>
 </html>