Upgrade to fontawesome 5

CHANGES.md

@@ -50,6 +50,7 @@
 
 - #956 Conversation pane should show my own identity in pane header
 - The UI is now based on Bootstrap4 and Flexbox is used extensively.
+- Fontawesome 5 is used for icons.
 - User Avatars are now shown in chat messages.
 
 ## Configuration changes 

Makefile

@@ -8,16 +8,16 @@ CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
 CLEANCSS		?= ./node_modules/clean-css-cli/bin/cleancss --skip-rebase
 ESLINT		  	?= ./node_modules/.bin/eslint
 HTTPSERVE	   	?= ./node_modules/.bin/http-server
-HTTPSERVE_PORT		?= 8000
+HTTPSERVE_PORT	?= 8000
 INKSCAPE		?= inkscape
 JSDOC			?=  ./node_modules/.bin/jsdoc
 OXIPNG			?= oxipng
 PAPER		   	=
 PO2JSON		 	?= ./node_modules/.bin/po2json
-RJS			?= ./node_modules/.bin/r.js
+RJS				?= ./node_modules/.bin/r.js
 WEBPACK 		?= ./node_modules/.bin/npx
 SASS			?= ./.bundle/bin/sass
-SED			?= sed
+SED				?= sed
 SPHINXBUILD	 	?= ./bin/sphinx-build
 SPHINXOPTS	  	=
 UGLIFYJS		?= node_modules/.bin/uglifyjs

dist/converse.js

@@ -79411,7 +79411,7 @@ __e(o.display_name) +
  if (o.allow_chat_pending_contacts)  { ;
 __p += '</a>\n';
  } ;
-__p += '\n<a class="remove-xmpp-contact fa fa-trash" title="' +
+__p += '\n<a class="remove-xmpp-contact far fa-trash-alt" title="' +
 __e(o.desc_remove) +
 '" href="#"></a>\n';
 return __p
@@ -80183,7 +80183,7 @@ __p += '">' +
 __e(o.display_name) +
 '</span></a>\n';
  if (o.allow_contact_removal) { ;
-__p += '\n<a class="list-item-action remove-xmpp-contact fa fa-trash" title="' +
+__p += '\n<a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="' +
 __e(o.desc_remove) +
 '" href="#"></a>\n';
  } ;
@@ -80367,7 +80367,7 @@ var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
 __p += '<!-- src/templates/toolbar.html -->\n';
  if (o.use_emoji)  { ;
-__p += '\n<li class="toggle-toolbar-menu toggle-smiley dropup">\n    <a class="toggle-smiley fa fa-smile-o" title="' +
+__p += '\n<li class="toggle-toolbar-menu toggle-smiley dropup">\n    <a class="toggle-smiley far fa-smile" title="' +
 __e(o.tooltip_insert_smiley) +
 '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> \n    <div class="emoji-picker dropdown-menu toolbar-menu"></div>\n</li>\n';
  } ;
@@ -80586,7 +80586,7 @@ __p += '\n                    </ul>\n                ';
  } ;
 __p += '\n            </div>\n            <div class="modal-footer">\n                ';
  if (o.allow_contact_removal && o.is_roster_contact) { ;
-__p += '\n                    <button type="button" class="btn btn-danger remove-contact"><i class="fa fa-trash"> </i>' +
+__p += '\n                    <button type="button" class="btn btn-danger remove-contact"><i class="far fa-trash-alt"> </i>' +
 __e(o.__('Remove as contact')) +
 '</button>\n                ';
  } ;

package-lock.json

@@ -853,6 +853,12 @@
         }
       }
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.3.1.tgz",
+      "integrity": "sha512-jt6yi7iZVtkY9Jc6zFo+G2vqL4M81pb3IA3WmnnDt9ci7Asz+mPg4gbZL8pjx0nGFBsG0Bmd7BjU9IQkebqxFA==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -4189,12 +4195,6 @@
         "readable-stream": "2.3.5"
       }
     },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
-      "dev": true
-    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -53,7 +53,7 @@
     "eslint-plugin-lodash": "^2.3.3",
     "exports-loader": "^0.7.0",
     "filesize": "^3.6.1",
-    "font-awesome": "^4.7.0",
+    "@fortawesome/fontawesome-free": "5.3.1",
     "hellojs": "^1.16.1",
     "http-server": "^0.10.0",
     "imports-loader": "^0.8.0",

sass/_chatbox.scss

@@ -78,7 +78,9 @@
 
         a, a:visited, a:hover, a:not([href]):not([tabindex]) {
             &.chatbox-btn {
-                &.fa {
+                &.fa,
+                &.fas,
+                &.far {
                     color: white;
                     &.button-on:before {
                         padding: 0.2em;
@@ -91,7 +93,7 @@
 
         .chatbox-btn {
             color: white;
-            &.fa  {
+            &.fa, &.far, &.fas  {
                 color: white;
             }
             &:active {
@@ -294,7 +296,9 @@
                 border-top: 4px solid $chat-head-color;
                 background-color: white;
                 color: $chat-head-color;
-                .fa, .fa:hover {
+                .fa, .fa:hover,
+                .far, .far:hover,
+                .fas, .fas:hover {
                     color: $chat-head-color;
                     font-size: $font-size-large;
                 }

sass/_chatrooms.scss

@@ -262,6 +262,8 @@
                 background-color: white;
                 border-top: 4px solid $chatroom-head-color;
                 color: $chatroom-head-color;
+                .fas, .fas:hover,
+                .far, .far:hover,
                 .fa, .fa:hover {
                     color: $chatroom-head-color;
                 }

sass/_core.scss

@@ -190,7 +190,7 @@ body.reset {
             text-shadow: none;
         }
 
-        &.fa {
+        &.fa, &.far, &.fas {
             color: $subdued-color;
             &:hover {
                 color: $gray-color;
@@ -202,11 +202,11 @@ body.reset {
         border-radius: $chatbox-border-radius;
     }
 
-    .fa {
+    .fa, .far, .fas {
         color: $subdued-color;
     }
 
-    .fa:hover {
+    .fa:hover, .far:hover, .fas:hover {
         color: $gray-color;
     }
 
@@ -256,20 +256,11 @@ body.reset {
         font-size: 90%;
     }
 
-    .fa {
-        font: normal normal normal 14px/1 ConverseFontAwesome;
-        display: inline-block;
-        font-size: inherit;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-    }
-
     .btn {
         font-family: $heading-font; 
         font-weight: normal;
         color: #fff;
-        .fa {
+        .fa, .far, .fas {
             color: #fff;
             margin-right: 0.5em;
         }

sass/_lists.scss

@@ -98,7 +98,7 @@
 
             &:hover {
                 background-color: lighten($controlbox-head-color, 45%);
-                .fa {
+                .fa, .far, .fas {
                     opacity: 1;
                 }
             }

sass/_roster.scss

@@ -75,7 +75,7 @@
                 &.requesting-xmpp-contact {
                     a {
                         line-height: $line-height;
-                        &.fa {
+                        &.far, &.fas, &.fa {
                             width: 1.5em;
                         }
                     }

sass/font-awesome.scss

@@ -1,25 +1,56 @@
-@import "font-awesome/scss/variables";
-@import "font-awesome/scss/mixins";
-
 @font-face {
-  font-family: 'ConverseFontAwesome';
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
-    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
-    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+  font-family: 'ConverseFontAwesomeRegular';
+  font-style: normal;
+  font-weight: 400;
+  src: url('webfonts/fa-regular-400.eot');
+  src: url('webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
+    url('webfonts/fa-regular-400.woff2') format('woff2'),
+    url('webfonts/fa-regular-400.woff') format('woff'),
+    url('webfonts/fa-regular-400.ttf') format('truetype'),
+    url('webfonts/fa-regular-400.svg#fontawesome') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-@import "font-awesome/scss/core";
-@import "font-awesome/scss/larger";
-@import "font-awesome/scss/fixed-width";
-@import "font-awesome/scss/list";
-@import "font-awesome/scss/bordered-pulled";
-@import "font-awesome/scss/animated";
-@import "font-awesome/scss/rotated-flipped";
-@import "font-awesome/scss/stacked";
-@import "font-awesome/scss/icons";
-@import "font-awesome/scss/screen-reader";
+@font-face {
+  font-family: 'ConverseFontAwesomeSolid';
+  font-style: normal;
+  font-weight: 900;
+  src: url('webfonts/fa-solid-900.eot');
+  src: url('webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
+  url('webfonts/fa-solid-900.woff2') format('woff2'),
+  url('webfonts/fa-solid-900.woff') format('woff'),
+  url('webfonts/fa-solid-900.ttf') format('truetype'),
+  url('webfonts/fa-solid-900.svg#fontawesome') format('svg');
+}
+
+.far {
+  font-family: 'ConverseFontAwesomeRegular' !important;
+  font-weight: 400;
+}
+.fa,
+.fas {
+  font-family: 'ConverseFontAwesomeSolid' !important;
+  font-weight: 900;
+}
+
+.fa, .far, .fas {
+    display: inline-block;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+@import "@fortawesome/fontawesome-free/scss/variables";
+@import "@fortawesome/fontawesome-free/scss/mixins";
+@import "@fortawesome/fontawesome-free/scss/core";
+@import "@fortawesome/fontawesome-free/scss/larger";
+@import "@fortawesome/fontawesome-free/scss/fixed-width";
+@import "@fortawesome/fontawesome-free/scss/list";
+@import "@fortawesome/fontawesome-free/scss/bordered-pulled";
+@import "@fortawesome/fontawesome-free/scss/animated";
+@import "@fortawesome/fontawesome-free/scss/rotated-flipped";
+@import "@fortawesome/fontawesome-free/scss/stacked";
+@import "@fortawesome/fontawesome-free/scss/icons";
+@import "@fortawesome/fontawesome-free/scss/screen-reader";

src/templates/pending_contact.html

@@ -4,4 +4,4 @@
 <span class="pending-contact-name w-100" title="JID: {{{o.jid}}}">{{{o.display_name}}}</span> 
 {[ if (o.allow_chat_pending_contacts)  { ]}</a>
 {[ } ]}
-<a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
+<a class="remove-xmpp-contact far fa-trash-alt" title="{{{o.desc_remove}}}" href="#"></a>

src/templates/roster_item.html

@@ -6,5 +6,5 @@
     {[ } ]}
     <span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span></a>
 {[ if (o.allow_contact_removal) { ]}
-<a class="list-item-action remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
+<a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="{{{o.desc_remove}}}" href="#"></a>
 {[ } ]}

src/templates/toolbar.html

@@ -1,6 +1,6 @@
 {[ if (o.use_emoji)  { ]}
 <li class="toggle-toolbar-menu toggle-smiley dropup">
-    <a class="toggle-smiley fa fa-smile-o" title="{{{o.tooltip_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
+    <a class="toggle-smiley far fa-smile" title="{{{o.tooltip_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
     <div class="emoji-picker dropdown-menu toolbar-menu"></div>
 </li>
 {[ } ]}

src/templates/user_details_modal.html

@@ -61,7 +61,7 @@
             </div>
             <div class="modal-footer">
                 {[ if (o.allow_contact_removal && o.is_roster_contact) { ]}
-                    <button type="button" class="btn btn-danger remove-contact"><i class="fa fa-trash"> </i>{{{o.__('Remove as contact')}}}</button>
+                    <button type="button" class="btn btn-danger remove-contact"><i class="far fa-trash-alt"> </i>{{{o.__('Remove as contact')}}}</button>
                 {[ } ]}
                 <button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>{{{o.__('Refresh')}}}</button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.__('Close')}}}</button>