add font awesome

assets/css/app.scss

@@ -2,6 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/regular";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/brands";
+
 @import "components";
 
 /* LiveView specific classes for your customizations */

assets/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "license": "MIT",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.4",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
         "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -19,6 +20,7 @@
         "copy-webpack-plugin": "^9.0.0",
         "css-loader": "^5.2.7",
         "css-minimizer-webpack-plugin": "^3.0.1",
+        "file-loader": "^6.2.0",
         "hard-source-webpack-plugin": "^0.13.1",
         "mini-css-extract-plugin": "^1.6.0",
         "node-sass": "^6.0.0",
@@ -1379,6 +1381,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4437,6 +4448,58 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/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,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -13564,6 +13627,11 @@
       "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
       "dev": true
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz",
+      "integrity": "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -16113,6 +16181,40 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "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,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",

assets/package.json

@@ -7,6 +7,7 @@
     "watch": "webpack --mode development --watch --watch-options-stdin"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -20,6 +21,7 @@
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^3.0.1",
+    "file-loader": "^6.2.0",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^1.6.0",
     "node-sass": "^6.0.0",

assets/webpack.config.js

@@ -40,7 +40,15 @@ module.exports = (env, options) => {
             "css-loader",
             "postcss-loader",
             "sass-loader",
-          ],
+          ]
+        },
+        {
+          test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]?[hash]',
+            outputPath: '../fonts'
+          }
         }
       ]
     },

assets/yarn.lock

@@ -878,6 +878,11 @@
   "resolved" "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz"
   "version" "0.5.3"
 
+"@fortawesome/fontawesome-free@^5.15.4":
+  "integrity" "sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg=="
+  "resolved" "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz"
+  "version" "5.15.4"
+
 "@nodelib/fs.scandir@2.1.5":
   "integrity" "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="
   "resolved" "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -2675,6 +2680,14 @@
   dependencies:
     "websocket-driver" ">=0.5.1"
 
+"file-loader@^6.2.0":
+  "integrity" "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw=="
+  "resolved" "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz"
+  "version" "6.2.0"
+  dependencies:
+    "loader-utils" "^2.0.0"
+    "schema-utils" "^3.0.0"
+
 "fill-range@^4.0.0":
   "integrity" "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc="
   "resolved" "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
@@ -6735,7 +6748,7 @@
   "resolved" "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.0.tgz"
   "version" "3.2.0"
 
-"webpack@^5.50.0":
+"webpack@^4.0.0 || ^5.0.0", "webpack@^5.50.0":
   "integrity" "sha512-hqxI7t/KVygs0WRv/kTgUW8Kl3YC81uyWQSo/7WUs5LsuRw0htH/fCwbVBGCuiX/t4s7qzjXFcf41O8Reiypag=="
   "resolved" "https://registry.npmjs.org/webpack/-/webpack-5.50.0.tgz"
   "version" "5.50.0"

lib/cannery_web/live/component/topbar.ex

@@ -43,14 +43,13 @@ defmodule CanneryWeb.Live.Component.Topbar do
             <%# user settings %>
             <%= if @current_user do %>
               <li>
-                <%= @current_user.email %></li>
+                <%= link @current_user.email, class: "hover:underline",
-              <li>
-                <%= link "Settings", class: "hover:underline",
                   to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) %>
               </li>
               <li>
-                <%= link "Log out", class: "hover:underline",
+                <%= link to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete do %>
-                  to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete %>
+                  <i class="fas fa-sign-out-alt"></i>
+                <% end %>
               </li>
 
               <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>

lib/cannery_web/templates/layout/topbar.html.eex

@@ -9,14 +9,13 @@
       <%# user settings %>
       <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
         <li>
-          <%= @current_user.email %></li>
+          <%= link @current_user.email, class: "hover:underline",
-        <li>
-          <%= link "Settings", class: "hover:underline",
             to: Routes.user_settings_path(CanneryWeb.Endpoint, :edit) %>
         </li>
         <li>
-          <%= link "Log out", class: "hover:underline",
+          <%= link to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete do %>
-            to: Routes.user_session_path(CanneryWeb.Endpoint, :delete), method: :delete %>
+            <i class="fas fa-sign-out-alt"></i>
+          <% end %>
         </li>
 
         <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>