StatusActionBar: update icons

2021-09-20 20:49:24 -05:00 · 2021-09-20 20:49:24 -05:00 · a0de32bcb0
commit a0de32bcb0
--- 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 {
          <div style={style}>
            {emoji
              ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-              : <Icon id={icon} iconset={iconset} fixedWidth aria-hidden='true' />}
+              : <Icon id={icon} {...rest} aria-hidden='true' />}
          </div>
          {text && <span className='icon_button__text'>{text}</span>}
        </button>
@ -167,7 +168,7 @@ export default class IconButton extends React.PureComponent {
            <div style={style}>
              {emoji
                ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-                : <Icon id={icon} iconset={iconset} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
+                : <Icon id={icon} {...rest} style={{ transform: `rotate(${rotate}deg)` }} aria-hidden='true' />}
            </div>
            {text && <span className='icon_button__text'>{text}</span>}
          </button>
--- 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 (
      <div className='status__action-bar'>
        <div className='status__action-bar__counter'>
-          <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
+          <IconButton className='status__action-bar-button' title={replyTitle} src={require('feather-icons/dist/icons/message-circle.svg')} onClick={this.handleReplyClick} />
          {replyCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`} className='detailed-status__link'>{replyCount}</Link>}
        </div>
        <div className='status__action-bar__counter'>
-          <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
+          <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} src={require('feather-icons/dist/icons/repeat.svg')} onClick={this.handleReblogClick} />
          {reblogCount !== 0 && <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/reblogs`} className='detailed-status__link'>{reblogCount}</Link>}
        </div>
        <div
@ -450,7 +440,7 @@ class StatusActionBar extends ImmutablePureComponent {
            animate
            active={Boolean(meEmojiReact)}
            title={meEmojiTitle}
-            icon='thumbs-up'
+            src={require('@tabler/icons/icons/thumb-up.svg')}
            emoji={meEmojiReact}
            onClick={this.handleLikeButtonClick}
          />
--- 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 {
--- 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 {
--- 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;
--- 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;
--- 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",
--- 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',
--- 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"