update deps

assets/package.json

@@ -9,36 +9,36 @@
     "test": "standard"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
+    "@fortawesome/fontawesome-free": "^6.1.1",
-    "alpinejs": "^3.9.0",
+    "alpinejs": "^3.10.2",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
-    "topbar": "^0.1.4"
+    "topbar": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-env": "^7.17.10",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.7",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.5",
-    "copy-webpack-plugin": "^9.0.0",
+    "copy-webpack-plugin": "^10.2.4",
-    "css-loader": "^5.2.7",
+    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.0.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "file-loader": "^6.2.0",
     "hard-source-webpack-plugin": "^0.13.1",
-    "mini-css-extract-plugin": "^1.6.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "^7.0.1",
-    "postcss": "^8.3.6",
+    "postcss": "^8.4.13",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^14.1.0",
-    "postcss-loader": "^6.1.1",
+    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.3.1",
+    "postcss-preset-env": "^7.5.0",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^12.6.0",
-    "standard": "^16.0.4",
+    "standard": "^17.0.0",
-    "style-loader": "^3.2.1",
+    "style-loader": "^3.3.1",
-    "tailwindcss": "^2.2.7",
+    "tailwindcss": "^3.0.24",
-    "terser-webpack-plugin": "^5.1.3",
+    "terser-webpack-plugin": "^5.3.1",
-    "webpack": "^5.67.0",
+    "webpack": "^5.72.0",
-    "webpack-cli": "^4.8.0",
+    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^4.9.0"
   }
 }

assets/tailwind.config.js

@@ -1,33 +1,42 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  purge: [
+  content: [
-    '../lib/**/*.ex',
+    '../lib/**/*.{ex,heex,leex,eex}',
-    '../lib/**/*.leex',
-    '../lib/**/*.eex',
     './js/**/*.js'
   ],
-  darkMode: 'media',
   theme: {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-
       primary: colors.indigo,
-
       black: colors.black,
       white: colors.white,
-      gray: colors.trueGray,
+      gray: colors.neutral,
       indigo: colors.indigo,
       red: colors.rose,
       yellow: colors.amber
     },
-    extend: {}
-  },
-  variants: {
     extend: {
-      backgroundColor: ['active'],
+      spacing: {
-      borderColor: ['active']
+        128: '32rem',
+        192: '48rem',
+        256: '64rem'
+      },
+      minWidth: {
+        4: '1rem',
+        8: '2rem',
+        12: '3rem',
+        16: '4rem',
+        20: '8rem'
+      },
+      maxWidth: {
+        4: '1rem',
+        8: '2rem',
+        12: '3rem',
+        16: '4rem',
+        20: '8rem'
+      }
     }
   },
   plugins: []

assets/webpack.config.js

@@ -44,19 +44,14 @@ module.exports = (env, options) => {
         },
         {
           test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-          loader: 'file-loader',
+          type: 'asset/resource',
-          options: {
+          generator: { filename: 'fonts/[name][ext]' }
-            name: '[name].[ext]?[hash]',
-            outputPath: '../fonts'
-          }
         }
       ]
     },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/app.css' }),
-      new CopyWebpackPlugin({
+      new CopyWebpackPlugin({ patterns: [{ from: 'static/', to: '../' }] })
-        patterns: [{ from: 'static/', to: '../' }]
-      })
     ]
   }
 }

lib/lokal_web/components/topbar.ex

@@ -55,14 +55,14 @@ defmodule LokalWeb.Components.Topbar do
               <li class="mx-2 my-1">
                 <%= live_redirect(gettext("Invites"),
                   to: Routes.invite_index_path(Endpoint, :index),
-                  class: "text-primary-600 text-white hover:underline"
+                  class: "text-white text-white hover:underline"
                 ) %>
               </li>
             <% end %>
             <li class="mx-2 my-1">
               <%= live_redirect(@current_user.email,
                 to: Routes.user_settings_path(Endpoint, :edit),
-                class: "text-primary-600 text-white hover:underline truncate"
+                class: "text-white text-white hover:underline truncate"
               ) %>
             </li>
             <li class="mx-2 my-1">
@@ -75,8 +75,8 @@ defmodule LokalWeb.Components.Topbar do
             <%= if @current_user.role == :admin and function_exported?(Routes, :live_dashboard_path, 2) do %>
               <li class="mx-2 my-1">
                 <%= live_redirect to: Routes.live_dashboard_path(Endpoint, :home),
-                  class: "text-primary-600 text-white hover:underline" do %>
+                  class: "text-white text-white hover:underline" do %>
-                  <i class="fas fa-tachometer-alt"></i>
+                  <i class="fas fa-gauge"></i>
                 <% end %>
               </li>
             <% end %>
@@ -85,14 +85,14 @@ defmodule LokalWeb.Components.Topbar do
               <li class="mx-2 my-1">
                 <%= live_redirect(dgettext("actions", "Register"),
                   to: Routes.user_registration_path(Endpoint, :new),
-                  class: "text-primary-600 text-white hover:underline truncate"
+                  class: "text-white text-white hover:underline truncate"
                 ) %>
               </li>
             <% end %>
             <li class="mx-2 my-1">
               <%= live_redirect(dgettext("actions", "Log in"),
                 to: Routes.user_session_path(Endpoint, :new),
-                class: "text-primary-600 text-white hover:underline truncate"
+                class: "text-white text-white hover:underline truncate"
               ) %>
             </li>
           <% end %>

lib/lokal_web/templates/layout/live.html.heex

@@ -37,7 +37,7 @@
     <%= gettext("Loading...") %>
   </h1>
 
-  <i class="fas fa-3x fa-spin fa-cog text-primary-500"></i>
+  <i class="fas fa-3x fa-spin fa-gear text-primary-500"></i>
 </div>
 
 <div