update to FA6, move npm depends

assets/css/common/_header.scss

@@ -6,45 +6,16 @@
   margin-left: auto;
 }
 
-$search_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjE2IDgzMnEwLTE4NS0xMzEuNS0zMTYuNXQtMzE2LjUtMTMxLjUtMzE2LjUgMTMxLjUtMTMxLjUgMzE2LjUgMTMxLjUgMzE2LjUgMzE2LjUgMTMxLjUgMzE2LjUtMTMxLjUgMTMxLjUtMzE2LjV6bTUxMiA4MzJxMCA1Mi0zOCA5MHQtOTAgMzhxLTU0IDAtOTAtMzhsLTM0My0zNDJxLTE3OSAxMjQtMzk5IDEyNC0xNDMgMC0yNzMuNS01NS41dC0yMjUtMTUwLTE1MC0yMjUtNTUuNS0yNzMuNSA1NS41LTI3My41IDE1MC0yMjUgMjI1LTE1MCAyNzMuNS01NS41IDI3My41IDU1LjUgMjI1IDE1MCAxNTAgMjI1IDU1LjUgMjczLjVxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
-$camera_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik04OTYgNjcycTExOSAwIDIwMy41IDg0LjV0ODQuNSAyMDMuNS04NC41IDIwMy41LTIwMy41IDg0LjUtMjAzLjUtODQuNS04NC41LTIwMy41IDg0LjUtMjAzLjUgMjAzLjUtODQuNXptNzA0LTQxNnExMDYgMCAxODEgNzV0NzUgMTgxdjg5NnEwIDEwNi03NSAxODF0LTE4MSA3NWgtMTQwOHEtMTA2IDAtMTgxLTc1dC03NS0xODF2LTg5NnEwLTEwNiA3NS0xODF0MTgxLTc1aDIyNGw1MS0xMzZxMTktNDkgNjkuNS04NC41dDEwMy41LTM1LjVoNTEycTUzIDAgMTAzLjUgMzUuNXQ2OS41IDg0LjVsNTEgMTM2aDIyNHptLTcwNCAxMTUycTE4NSAwIDMxNi41LTEzMS41dDEzMS41LTMxNi41LTEzMS41LTMxNi41LTMxNi41LTEzMS41LTMxNi41IDEzMS41LTEzMS41IDMxNi41IDEzMS41IDMxNi41IDMxNi41IDEzMS41eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
-$help_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");
-$notification_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik05MTIgMTY5NnEwLTE2LTE2LTE2LTU5IDAtMTAxLjUtNDIuNXQtNDIuNS0xMDEuNXEwLTE2LTE2LTE2dC0xNiAxNnEwIDczIDUxLjUgMTI0LjV0MTI0LjUgNTEuNXExNiAwIDE2LTE2em04MTYtMjg4cTAgNTItMzggOTB0LTkwIDM4aC00NDhxMCAxMDYtNzUgMTgxdC0xODEgNzUtMTgxLTc1LTc1LTE4MWgtNDQ4cS01MiAwLTkwLTM4dC0zOC05MHE1MC00MiA5MS04OHQ4NS0xMTkuNSA3NC41LTE1OC41IDUwLTIwNiAxOS41LTI2MHEwLTE1MiAxMTctMjgyLjV0MzA3LTE1OC41cS04LTE5LTgtMzkgMC00MCAyOC02OHQ2OC0yOCA2OCAyOCAyOCA2OHEwIDIwLTggMzkgMTkwIDI4IDMwNyAxNTguNXQxMTcgMjgyLjVxMCAxMzkgMTkuNSAyNjB0NTAgMjA2IDc0LjUgMTU4LjUgODUgMTE5LjUgOTEgODh6IiBmaWxsPSIjZmZmIi8+PC9zdmc+");
-$message_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
-$message_unread_icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzkyIDcxMHY3OTRxMCA2Ni00NyAxMTN0LTExMyA0N2gtMTQ3MnEtNjYgMC0xMTMtNDd0LTQ3LTExM3YtNzk0cTQ0IDQ5IDEwMSA4NyAzNjIgMjQ2IDQ5NyAzNDUgNTcgNDIgOTIuNSA2NS41dDk0LjUgNDggMTEwIDI0LjVoMnE1MSAwIDExMC0yNC41dDk0LjUtNDggOTIuNS02NS41cTE3MC0xMjMgNDk4LTM0NSA1Ny0zOSAxMDAtODd6bTAtMjk0cTAgNzktNDkgMTUxdC0xMjIgMTIzcS0zNzYgMjYxLTQ2OCAzMjUtMTAgNy00Mi41IDMwLjV0LTU0IDM4LTUyIDMyLjUtNTcuNSAyNy01MCA5aC0ycS0yMyAwLTUwLTl0LTU3LjUtMjctNTItMzIuNS01NC0zOC00Mi41LTMwLjVxLTkxLTY0LTI2Mi0xODIuNXQtMjA1LTE0Mi41cS02Mi00Mi0xMTctMTE1LjV0LTU1LTEzNi41cTAtNzggNDEuNS0xMzB0MTE4LjUtNTJoMTQ3MnE2NSAwIDExMi41IDQ3dDQ3LjUgMTEzeiIgZmlsbD0iI2Y4MCIvPjwvc3ZnPgo=");
-
-i.fa-embedded--search {
-  background: $search_icon center 0px / 16px 16px no-repeat;
-  padding-left: 16px;
-}
-
-i.fa-embedded--camera {
-  background: $camera_icon center 1px / 16px 16px no-repeat;
-  padding-left: 28px;
-}
-
-i.fa-embedded--help {
-  background: $help_icon 4px -1px / 19px 19px no-repeat;
-  padding-left: 28px;
-}
-
-i.fa-embedded--notification {
-  background: $notification_icon center / 15px 15px no-repeat;
-  padding-left: 16px;
-}
-
 [data-notification-count="0"] {
   display: none !important;
 }
 
-i.fa-embedded--message {
+.fa-search-button {
-  background: $message_icon center / 16px 16px no-repeat;
+  padding: 0 0.5rem;
-  padding-left: 16px;
 }
 
-i.fa-embedded--unread-message {
+.fa-unread-icon {
-  background: $message_unread_icon center / 16px 16px no-repeat;
+  color: $unread_message_color;
-  padding-left: 16px;
 }
 
 // For text preceded by an icon
@@ -130,13 +101,15 @@ select.header__input, select.header__input:focus {
   border: none;
 }
 
-.header__search__button {
+.header__search__button, .header__search__button:visited {
   border: none;
   // Chrome loves extra padding for some reason
   padding-top: 0;
   padding-bottom: 0;
   line-height: $header_field_height;
 
+  font-size: 1.25em;
+
   background: $header_field_color;
   color: $text_light_color;
 

assets/css/themes/dark.scss

@@ -45,6 +45,7 @@ $vote_down_color: #da3412;
 $hide_color: #da3412;
 
 $assistant_color: #511b4e;
+$unread_message_color: #ff8800;
 
 $tag_normal_color: #4aa158;
 $tag_category_rating_color: #418dd9;

assets/css/themes/default.scss

@@ -28,6 +28,7 @@ $hide_color: #cf0001;
 $destroyed_content_color: #ffdcdc;
 
 $assistant_color: #eeceed;
+$unread_message_color: #ff8800;
 
 $tag_normal_color: #6f8f0e;
 $tag_category_rating_color: #267ead;

assets/css/themes/red.scss

@@ -41,13 +41,13 @@ $border_color: #7c2424;
 
 $media_box_color: #7c2424;
 
-
 $fave_color: #a18e27;
 $vote_up_color: #5b9b26;
 $vote_down_color: #da3412;
 $hide_color: #da3412;
 
 $assistant_color: #511b4e;
+$unread_message_color: #ff8800;
 
 $tag_normal_color: #d16767;
 $tag_category_rating_color: #9dc3e9;

assets/package.json

@@ -8,34 +8,24 @@
     "watch": "webpack --watch"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "brunch": "^3.0.0",
-    "copycat-brunch": "^1.1.1",
-    "postcss": "^8.3.7",
-    "tslib": "^2.3.1"
-  },
-  "devDependencies": {
     "@rollup/plugin-typescript": "^8.2.5",
-    "@testing-library/dom": "^8.7.2",
+    "@fortawesome/fontawesome-free": "^6.1.1",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@types/jest": "^27.0.3",
-    "@types/web": "^0.0.40",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
     "@typescript-eslint/parser": "^5.8.0",
+    "@types/web": "^0.0.40",
+    "brunch": "^3.0.0",
     "acorn": "^7.4.1",
     "autoprefixer": "^10.3.5",
     "copy-webpack-plugin": "^6.4.1",
+    "copycat-brunch": "^1.1.1",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-jest": "^25.7.0",
-    "eslint-plugin-jest-dom": "^4.0.1",
     "eslint-webpack-plugin": "^3.0.1",
     "file-loader": "^6.2.0",
     "ignore-emit-webpack-plugin": "^2.0.6",
-    "jest": "^27.4.7",
+    "postcss": "^8.3.7",
-    "jest-fetch-mock": "^3.0.3",
     "mini-css-extract-plugin": "^2.3.0",
     "normalize-scss": "^7.0.1",
     "postcss-loader": "^5.3.0",
@@ -51,10 +41,20 @@
     "source-map-support": "^0.5.20",
     "style-loader": "^1.3.0",
     "terser-webpack-plugin": "^3.1.0",
-    "ts-jest": "^27.0.4",
+    "tslib": "^2.3.1",
     "typescript": "^4.4",
     "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0",
     "webpack-rollup-loader": "^0.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^8.7.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@types/jest": "^27.0.3",
+    "eslint-plugin-jest": "^25.7.0",
+    "eslint-plugin-jest-dom": "^4.0.1",
+    "jest": "^27.4.7",
+    "jest-fetch-mock": "^3.0.3",
+    "ts-jest": "^27.0.4"
   }
 }

assets/webpack.config.js

@@ -33,6 +33,7 @@ let plugins = [
     ],
   }),
 ];
+
 if (isDevelopment) {
   plugins = plugins.concat([
     new ESLintPlugin({

lib/philomena_web/templates/layout/_header.html.slime

@@ -25,26 +25,26 @@ header.header
         = select f, :del, [{"-D", ""}, {"+D", 1}, {"*D", "deleted"}, {"DO", "only"}], name: "del", class: "input header__input js-staff-action", autocomplete: "off"
 
       button.header__search__button type="submit" title="Search"
-        i.fa-embedded--search
+        i.fas.fa-search
       a.header__search__button href="/search/reverse" title="Search using an image"
-        i.fa-embedded--camera
+        i.fa-search-button.fas.fa-camera
       a.header__search__button href="/pages/search_syntax" title="Search syntax help"
-        i.fa-embedded--help
+        i.fa-search-button.fas.fa-question
 
     .flex.flex--centered.flex--no-wrap.header__force-right
       = if @current_user do
         a.header__link href="/notifications" title="Notifications"
-          i.fa-embedded--notification>
+          i.fas.fa-bell>
           span.js-notification-ticker.fa__text.header__counter data-notification-count=@notification_count = @notification_count
 
         a.header__link href="/conversations" title="Conversations"
           = if @conversation_count > 0 do
-            i.fa-embedded--unread-message>
+            i.fa-unread-icon.fas.fa-envelope-open>
-            span.fa-embedded__text.header__counter
+            span.header__counter
               = @conversation_count
           - else
-            i.fa-embedded--message>
+            i.fas.fa-envelope>
-            span.fa-embedded__text.header__counter.hidden
+            span.header__counter.hidden
               | 0
 
         a.header__link.hide-mobile href="/filters" title="Filters"