From c28fda6b282aca79bb30811dca6fc5205f80e616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Thu, 7 Dec 2017 23:01:58 -0500 Subject: [PATCH 1/2] Switch to Font Awesome 5 --- client/css/style.css | 25 +++++++++++++------------ package.json | 2 +- test/tests/build.js | 4 ++-- webpack.config.js | 2 +- yarn.lock | 8 ++++---- 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 432b3316..fd2b7d32 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,10 +1,11 @@ @font-face { + /* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */ font-family: "FontAwesome"; font-weight: normal; font-style: normal; src: - url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), - url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"); + url("../fonts/fa-solid-900.woff2") format("woff2"), + url("../fonts/fa-solid-900.woff") format("woff"); } html, @@ -262,7 +263,7 @@ kbd { #viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ } #viewport .rt::before { - content: "\f0c0"; /* http://fontawesome.io/icon/users/ */ + content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ line-height: 36px; /* fix alignment in Microsoft Edge */ } @@ -279,20 +280,20 @@ kbd { .context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ } .context-menu-network::before, -#chat .lobby .title::before { content: "\f0a0"; /* http://fontawesome.io/icon/hdd-o/ */ } +#chat .lobby .title::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ } #sidebar .not-secure-icon::before { content: "\f09c"; /* https://fontawesome.com/v4.7.0/icon/unlock/ */ } #sidebar .not-connected-icon::before { - content: "\f127"; /* https://fontawesome.com/v4.7.0/icon/chain-broken/ TODO v5: unlink */ + content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */ } .context-menu-query::before, .context-menu-action-query::before, #sidebar .chan.query::before, -#chat .query .title::before { content: "\f0e5"; /* http://fontawesome.io/icon/comment-o/ */ } +#chat .query .title::before { content: "\f075"; /* https://fontawesome.com/icons/comment?style=solid */ } .context-menu-chan::before, #sidebar .chan.channel::before, @@ -311,7 +312,7 @@ kbd { #chat .away .from::before, #chat .back .from::before { - content: "\f017"; /* http://fontawesome.io/icon/clock-o/ */ + content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */ color: #7f8c8d; } @@ -340,7 +341,7 @@ kbd { } #chat .invite .from::before { - content: "\f003"; /* http://fontawesome.io/icon/envelope-o/ */ + content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */ color: #2ecc40; } @@ -365,7 +366,7 @@ kbd { #chat .ctcp .from::before, #chat .ctcp_request .from::before { - content: "\f0f6"; /* http://fontawesome.io/icon/file-text-o/ */ + content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */ } #chat .whois .from::before { @@ -428,7 +429,7 @@ kbd { } #set-nick::before { - content: "\f040"; /* http://fontawesome.io/icon/pencil/ */ + content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */ } #submit-nick::before { @@ -1785,7 +1786,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ } #version-checker.loading::before { - content: "\f250"; /* http://fontawesome.io/icon/hourglass-o/ */ + content: "\f253"; /* https://fontawesome.com/icons/hourglass-end?style=solid */ } #version-checker.new-version { @@ -1794,7 +1795,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ } #version-checker.new-version::before { - content: "\f087"; /* http://fontawesome.io/icon/thumbs-o-up/ */ + content: "\f164"; /* https://fontawesome.com/icons/thumbs-up?style=solid */ } #version-checker.error { diff --git a/package.json b/package.json index b332182b..3f22b624 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "yarn": "1.5.1" }, "devDependencies": { + "@fortawesome/fontawesome-free-webfonts": "1.0.4", "babel-core": "6.26.0", "babel-loader": "7.1.2", "babel-preset-env": "1.6.1", @@ -73,7 +74,6 @@ "css.escape": "1.5.1", "emoji-regex": "6.5.1", "eslint": "4.18.2", - "font-awesome": "4.7.0", "fuzzy": "0.1.3", "graphql-request": "1.5.1", "handlebars": "4.0.11", diff --git a/test/tests/build.js b/test/tests/build.js index 3329ed22..337ec5d7 100644 --- a/test/tests/build.js +++ b/test/tests/build.js @@ -8,8 +8,8 @@ describe("public folder", function() { const publicFolder = path.join(__dirname, "..", "..", "public"); it("font awesome files are copied", function() { - expect(fs.existsSync(path.join(publicFolder, "fonts", "fontawesome-webfont.woff"))).to.be.true; - expect(fs.existsSync(path.join(publicFolder, "fonts", "fontawesome-webfont.woff2"))).to.be.true; + expect(fs.existsSync(path.join(publicFolder, "fonts", "fa-solid-900.woff"))).to.be.true; + expect(fs.existsSync(path.join(publicFolder, "fonts", "fa-solid-900.woff2"))).to.be.true; }); it("index HTML file is not copied", function() { diff --git a/webpack.config.js b/webpack.config.js index 449e4313..7c03e782 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -63,7 +63,7 @@ const config = { plugins: [ new CopyPlugin([ { - from: "./node_modules/font-awesome/fonts/fontawesome-webfont.woff*", + from: "./node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/fa-solid-900.woff*", to: "fonts/[name].[ext]", }, { diff --git a/yarn.lock b/yarn.lock index dc9b4c14..67da7f1a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,10 @@ # yarn lockfile v1 +"@fortawesome/fontawesome-free-webfonts@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.4.tgz#bac5d89755bf3bc2d2b4deee47d92febf641bb1f" + abbrev@1: version "1.1.1" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" @@ -2665,10 +2669,6 @@ flush-write-stream@^1.0.0: inherits "^2.0.1" readable-stream "^2.0.4" -font-awesome@4.7.0: - version "4.7.0" - resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" - for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" From da5a876f93156f6efc102a8cb814862b1bf67f4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sun, 11 Mar 2018 15:15:14 -0400 Subject: [PATCH 2/2] Use warning icon for insecure connections --- client/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/css/style.css b/client/css/style.css index fd2b7d32..a726122c 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -283,7 +283,7 @@ kbd { #chat .lobby .title::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ } #sidebar .not-secure-icon::before { - content: "\f09c"; /* https://fontawesome.com/v4.7.0/icon/unlock/ */ + content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */ } #sidebar .not-connected-icon::before {