From a0de32bcb0153c41cfbc26fdce3d9f4b0623ee81 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 20 Sep 2021 20:49:24 -0500 Subject: [PATCH] StatusActionBar: update icons --- app/soapbox/components/icon_button.js | 5 +++-- app/soapbox/components/status_action_bar.js | 16 +++----------- app/styles/components/emoji-reacts.scss | 4 ++++ app/styles/components/status.scss | 12 ++++++++++- app/styles/navigation.scss | 4 ++++ app/styles/ui.scss | 2 +- package.json | 2 ++ webpack/rules/assets.js | 15 ++++++++++++++ yarn.lock | 23 ++++++++++++++++----- 9 files changed, 61 insertions(+), 22 deletions(-) diff --git a/app/soapbox/components/icon_button.js b/app/soapbox/components/icon_button.js index 191c77e74..7c0f6383a 100644 --- a/app/soapbox/components/icon_button.js +++ b/app/soapbox/components/icon_button.js @@ -106,6 +106,7 @@ export default class IconButton extends React.PureComponent { title, text, emoji, + ...rest } = this.props; const classes = classNames(className, 'icon-button', { @@ -138,7 +139,7 @@ export default class IconButton extends React.PureComponent {
{emoji ? {text && {text}} @@ -167,7 +168,7 @@ export default class IconButton extends React.PureComponent {
{emoji ? {text && {text}} diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js index 7e15c9d9f..f4fc457c5 100644 --- a/app/soapbox/components/status_action_bar.js +++ b/app/soapbox/components/status_action_bar.js @@ -401,21 +401,11 @@ class StatusActionBar extends ImmutablePureComponent { }[meEmojiReact] || messages.favourite); const menu = this._makeMenu(publicStatus); - let reblogIcon = 'retweet'; - let replyIcon; let replyTitle; - if (status.get('visibility') === 'direct') { - reblogIcon = 'envelope'; - } else if (status.get('visibility') === 'private') { - reblogIcon = 'lock'; - } - if (status.get('in_reply_to_id', null) === null) { - replyIcon = 'reply'; replyTitle = intl.formatMessage(messages.reply); } else { - replyIcon = 'reply-all'; replyTitle = intl.formatMessage(messages.replyAll); } @@ -426,11 +416,11 @@ class StatusActionBar extends ImmutablePureComponent { return (
- + {replyCount !== 0 && {replyCount}}
- + {reblogCount !== 0 && {reblogCount}}
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss index 847c557ea..5f347b045 100644 --- a/app/styles/components/emoji-reacts.scss +++ b/app/styles/components/emoji-reacts.scss @@ -128,6 +128,10 @@ @media (max-width: 455px) { position: static; } + + .svg-icon { + height: 24px !important; + } } .detailed-status__wrapper .emoji-react-selector { diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 4ca0b34d8..6439cb50f 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -128,7 +128,8 @@ .status__wrapper { @include standard-panel; - margin: 5px 0; + margin-bottom: 15px; + padding: 15px 0 10px; } .slist > .item-list > article { @@ -354,6 +355,15 @@ color: var(--brand-color); } } + + .svg-icon { + width: 24px; + height: 20px; + + svg { + stroke-width: 2px; + } + } } .status__action-bar-button { diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss index 75962777f..2c0355ecc 100644 --- a/app/styles/navigation.scss +++ b/app/styles/navigation.scss @@ -28,6 +28,10 @@ margin-right: 5px; } + .icon-with-counter__counter { + right: 0; + } + hr { border: 0; height: 1px; diff --git a/app/styles/ui.scss b/app/styles/ui.scss index ed3530e3d..034e63cd9 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -734,7 +734,7 @@ position: absolute; box-sizing: border-box; right: -5px; - top: -12px; + top: -9px; min-width: 16px; height: 16px; padding: 1px 3px 0; diff --git a/package.json b/package.json index de8aaf608..6d07c8306 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "babel-plugin-react-intl": "^7.5.20", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "blurhash": "^1.0.0", + "bootstrap-icons": "^1.5.0", "bowser": "^2.11.0", "browserslist": "^4.16.6", "cheerio": "^1.0.0-rc.10", @@ -83,6 +84,7 @@ "es6-symbol": "^3.1.1", "escape-html": "^1.0.3", "exif-js": "^2.3.0", + "feather-icons": "^4.28.0", "fork-awesome": "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265", "html-webpack-harddisk-plugin": "^2.0.0", "html-webpack-plugin": "^5.3.2", diff --git a/webpack/rules/assets.js b/webpack/rules/assets.js index 60b7d49cb..e27e51cb0 100644 --- a/webpack/rules/assets.js +++ b/webpack/rules/assets.js @@ -48,6 +48,21 @@ module.exports = [{ generator: { dataUrl: content => svgToMiniDataURI(content.toString()), }, +}, { + test: /\.svg$/, + type: 'asset/inline', + include: resolve('node_modules', 'bootstrap-icons'), + generator: { + dataUrl: content => svgToMiniDataURI(content.toString()), + }, +}, { + + test: /\.svg$/, + type: 'asset/inline', + include: resolve('node_modules', 'feather-icons'), + generator: { + dataUrl: content => svgToMiniDataURI(content.toString()), + }, }, { test: /\.svg$/, type: 'asset/inline', diff --git a/yarn.lock b/yarn.lock index e5dc94e30..e31eb1ca8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2478,6 +2478,11 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= +bootstrap-icons@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz#2cb19da148aa9105cb3174de2963564982d3dc55" + integrity sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA== + bowser@^2.11.0: version "2.11.0" resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f" @@ -2969,16 +2974,16 @@ core-js-pure@^3.16.0: resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.17.3.tgz#98ea3587188ab7ef4695db6518eeb71aec42604a" integrity sha512-YusrqwiOTTn8058JDa0cv9unbXdIiIgcgI9gXso0ey4WgkFLd3lYlV9rp9n7nDCsYxXsMDTjA4m1h3T348mdlQ== +core-js@^3.1.3, core-js@^3.6.5: + version "3.18.0" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49" + integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w== + core-js@^3.15.2: version "3.17.3" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.17.3.tgz#8e8bd20e91df9951e903cabe91f9af4a0895bc1e" integrity sha512-lyvajs+wd8N1hXfzob1LdOCCHFU4bGMbqqmLn1Q4QlCpDqWPpGf+p0nj+LNrvDDG33j0hZXw2nsvvVpHysxyNw== -core-js@^3.6.5: - version "3.18.0" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.18.0.tgz#9af3f4a6df9ba3428a3fb1b171f1503b3f40cc49" - integrity sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w== - core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -4214,6 +4219,14 @@ fb-watchman@^2.0.0: dependencies: bser "2.1.1" +feather-icons@^4.28.0: + version "4.28.0" + resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f" + integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg== + dependencies: + classnames "^2.2.5" + core-js "^3.1.3" + file-entry-cache@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"