diff --git a/assets/css/app.scss b/assets/css/app.scss
index 05224e8c..60414dde 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -13,6 +13,21 @@
/* LiveView specific CSS */
@import "phx-liveview";
+/* Navbar toggler icon override */
+.navbar-toggler-icon {
+ -webkit-transition: background 150ms ease;
+ -moz-transition: background 150ms ease;
+ -o-transition: background 150ms ease;
+ -ms-transition: background 150ms ease;
+ transition: background 150ms ease;
+}
+.navbar-light .navbar-toggler.collapsed .navbar-toggler-icon {
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>');
+}
+.navbar-light .navbar-toggler .navbar-toggler-icon {
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(0, 0, 0, 0.55)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>');
+}
+
/* Alerts and form errors */
.alert:empty {
display: none;
diff --git a/assets/js/app.js b/assets/js/app.js
index d382cbcb..ffd04151 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -4,8 +4,8 @@
import "../css/app.scss";
// Import icons for sprite-loader
-// brand icon
-import "../node_modules/@fortawesome/fontawesome-free/svgs/solid/skull-crossbones.svg";
+// navbar brand icon
+import "../node_modules/@mdi/svg/svg/skull-crossbones.svg";
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
diff --git a/assets/package-lock.json b/assets/package-lock.json
index be8971df..e8273216 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -7,11 +7,11 @@
"license": "MIT",
"dependencies": {
"@fontsource/lato": "^4.2.1",
- "@fortawesome/fontawesome-free": "^5.15.2",
"@mdi/svg": "^5.9.55",
"@popperjs/core": "^2.8.4",
"bootstrap": "^5.0.0-beta2",
"bootstrap-icons": "^1.4.0",
+ "heroicons": "^0.4.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
@@ -1279,15 +1279,6 @@
"resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz",
"integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ=="
},
- "node_modules/@fortawesome/fontawesome-free": {
- "version": "5.15.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
- "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==",
- "hasInstallScript": true,
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/@mdi/svg": {
"version": "5.9.55",
"resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
@@ -4042,6 +4033,11 @@
"he": "bin/he"
}
},
+ "node_modules/heroicons": {
+ "version": "0.4.2",
+ "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-0.4.2.tgz",
+ "integrity": "sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w=="
+ },
"node_modules/hex-color-regex": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -10806,11 +10802,6 @@
"resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-4.2.1.tgz",
"integrity": "sha512-prsPmSttIWKF52AK6fNbe1a/wT3Rm5ho2qwegXlU0Qu72dksQIjGrttDtuvs3OlXdlmYXFTmLKOWQKwBMAsMmQ=="
},
- "@fortawesome/fontawesome-free": {
- "version": "5.15.2",
- "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz",
- "integrity": "sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA=="
- },
"@mdi/svg": {
"version": "5.9.55",
"resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz",
@@ -12945,6 +12936,11 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
+ "heroicons": {
+ "version": "0.4.2",
+ "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-0.4.2.tgz",
+ "integrity": "sha512-24Bc6LKmamKHzGiNC80/r9v/7pQrma2V5KlaLUHGoarqm+hggmxnngU+RjHQT8sANWPa5FWKLftn4fpmvry/7w=="
+ },
"hex-color-regex": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index 34995eaa..ae7164e7 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -8,11 +8,11 @@
},
"dependencies": {
"@fontsource/lato": "^4.2.1",
- "@fortawesome/fontawesome-free": "^5.15.2",
"@mdi/svg": "^5.9.55",
"@popperjs/core": "^2.8.4",
"bootstrap": "^5.0.0-beta2",
"bootstrap-icons": "^1.4.0",
+ "heroicons": "^0.4.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
index 710ceafb..65d8d8a4 100644
--- a/assets/webpack.config.js
+++ b/assets/webpack.config.js
@@ -59,16 +59,14 @@ module.exports = (env, options) => {
symbolId: (filePath) => {
if (filePath.includes("bootstrap-icons")) {
return `bi-${path.basename(filePath).slice(0, -4)}`;
- } else if (filePath.includes("@fortawesome")) {
- if (filePath.includes("brands")) {
- return `fab-${path.basename(filePath).slice(0, -4)}`;
- } else if (filePath.includes("solid")) {
- return `fas-${path.basename(filePath).slice(0, -4)}`;
- } else {
- return `far-${path.basename(filePath).slice(0, -4)}`;
- }
} else if (filePath.includes("@mdi")) {
return `mdi-${path.basename(filePath).slice(0, -4)}`;
+ } else if (filePath.includes("heroicons")) {
+ if (filePath.includes("outline")) {
+ return `hio-${path.basename(filePath).slice(0, -4)}`;
+ } else {
+ return `his-${path.basename(filePath).slice(0, -4)}`;
+ }
} else {
return `${path.basename(filePath).slice(0, -4)}`;
}
diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex
index ade773de..605284d3 100644
--- a/lib/bones73k_web/templates/layout/_navbar.html.eex
+++ b/lib/bones73k_web/templates/layout/_navbar.html.eex
@@ -1,12 +1,12 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
- <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand" do %>
- <%= icon_div @conn, "fas-skull-crossbones", [class: "icon baseline"] %>
- Bones73k
+ <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0" do %>
+ <%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
+ <span>Bones73k</span>
<% end %>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>