From 3de8dcced0dd465a028022a110cf5cc4792d6a26 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 20 Sep 2021 17:05:59 -0500
Subject: [PATCH] Tabler: add icons to ThumbNavigation

---
 app/icons/dashboard-filled.svg              |  3 +++
 app/icons/home-2-filled.svg                 |  3 +++
 app/soapbox/components/icon.js              |  2 +-
 app/soapbox/components/icon_with_counter.js |  2 +-
 app/soapbox/components/thumb_navigation.js  | 27 ++++++++++++++++-----
 app/styles/navigation.scss                  | 26 ++++++++++++++++++++
 app/styles/ui.scss                          |  2 +-
 webpack/rules/assets.js                     |  2 +-
 webpack/shared.js                           |  1 +
 9 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 app/icons/dashboard-filled.svg
 create mode 100644 app/icons/home-2-filled.svg

diff --git a/app/icons/dashboard-filled.svg b/app/icons/dashboard-filled.svg
new file mode 100644
index 000000000..69de13b00
--- /dev/null
+++ b/app/icons/dashboard-filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" stroke-width="2" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.969 3.955A9 9 0 0 0 6.4 20H17.6a9 9 0 0 0-5.631-16.045zM15.529 8.5a1 1 0 0 1 .678 1.707l-1.51 1.51c.189.391.303.823.303 1.283 0 1.645-1.355 3-3 3s-3-1.355-3-3 1.355-3 3-3c.46 0 .892.114 1.283.303l1.51-1.51a1 1 0 0 1 .736-.293zM12 12c-.564 0-1 .436-1 1s.436 1 1 1 1-.436 1-1-.436-1-1-1z"/>
+</svg>
diff --git a/app/icons/home-2-filled.svg b/app/icons/home-2-filled.svg
new file mode 100644
index 000000000..f08cd6fea
--- /dev/null
+++ b/app/icons/home-2-filled.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" stroke-width="2" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M12 3l-9 9h2v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7h2l-9-9zm-2 9h4v4h-4v-4z"/>
+</svg>
diff --git a/app/soapbox/components/icon.js b/app/soapbox/components/icon.js
index 4dff5cf61..9c0ec0d2c 100644
--- a/app/soapbox/components/icon.js
+++ b/app/soapbox/components/icon.js
@@ -13,7 +13,7 @@ import SvgIcon from './svg_icon';
 export default class Icon extends React.PureComponent {
 
   static propTypes = {
-    id: PropTypes.string.isRequired,
+    id: PropTypes.string,
     src: PropTypes.string,
     className: PropTypes.string,
   };
diff --git a/app/soapbox/components/icon_with_counter.js b/app/soapbox/components/icon_with_counter.js
index fcbfe707e..3a8f1b64e 100644
--- a/app/soapbox/components/icon_with_counter.js
+++ b/app/soapbox/components/icon_with_counter.js
@@ -15,7 +15,7 @@ const IconWithCounter = ({ icon, count, ...rest }) => {
 };
 
 IconWithCounter.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.string,
   count: PropTypes.number.isRequired,
 };
 
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 91e65d973..1b968f51b 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
@@ -9,6 +9,7 @@ import IconWithCounter from 'soapbox/components/icon_with_counter';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { isStaff } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
+import classNames from 'classnames';
 
 const mapStateToProps = state => {
   const me = state.get('me');
@@ -37,15 +38,16 @@ class ThumbNavigation extends React.PureComponent {
     notificationCount: PropTypes.number,
     chatsCount: PropTypes.number,
     features: PropTypes.object.isRequired,
+    location: PropTypes.object,
   }
 
   render() {
-    const { account, dashboardCount, features } = this.props;
+    const { account, notificationCount, dashboardCount, location, features } = this.props;
 
     return (
       <div className='thumb-navigation'>
         <NavLink to='/' exact className='thumb-navigation__link'>
-          <Icon id='home' />
+          <Icon src={location.pathname === '/' ? require('icons/home-2-filled.svg') : require('@tabler/icons/icons/home-2.svg')} />
           <span>
             <FormattedMessage id='navigation.home' defaultMessage='Home' />
           </span>
@@ -53,7 +55,11 @@ class ThumbNavigation extends React.PureComponent {
 
         {account && (
           <NavLink to='/notifications' className='thumb-navigation__link'>
-            <Icon id='bell' />
+            <IconWithCounter
+              src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
+              className={classNames({ 'svg-icon--active': location.pathname === '/notifications' })}
+              count={notificationCount}
+            />
             <span>
               <FormattedMessage id='navigation.notifications' defaultMessage='Notifications' />
             </span>
@@ -62,7 +68,10 @@ class ThumbNavigation extends React.PureComponent {
 
         {(features.chats && account) && (
           <NavLink to='/chats' className='thumb-navigation__link'>
-            <Icon id='comment' />
+            <Icon
+              src={require('@tabler/icons/icons/messages.svg')}
+              className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
+            />
             <span>
               <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
             </span>
@@ -70,7 +79,10 @@ class ThumbNavigation extends React.PureComponent {
         )}
 
         <NavLink to='/search' className='thumb-navigation__link'>
-          <Icon id='search' />
+          <Icon
+            src={require('@tabler/icons/icons/search.svg')}
+            className={classNames({ 'svg-icon--active': location.pathname === '/search' })}
+          />
           <span>
             <FormattedMessage id='navigation.search' defaultMessage='Search' />
           </span>
@@ -78,7 +90,10 @@ class ThumbNavigation extends React.PureComponent {
 
         {(account && isStaff(account)) && (
           <NavLink key='dashboard' to='/admin' className='thumb-navigation__link'>
-            <IconWithCounter icon='tachometer' count={dashboardCount} />
+            <IconWithCounter
+              src={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
+              count={dashboardCount}
+            />
             <span>
               <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
             </span>
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index f02d14a44..82c21475d 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -60,6 +60,32 @@
     span {
       display: none;
     }
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+
+      svg {
+        stroke-width: 1px;
+      }
+
+      &--active {
+        svg.icon-tabler-search {
+          stroke-width: 2px;
+        }
+
+        svg.icon-tabler-bell,
+        svg.icon-tabler-messages {
+          path:nth-child(2) {
+            fill: var(--primary-text-color);
+          }
+        }
+      }
+    }
+
+    .icon-with-counter__counter {
+      right: -8px;
+    }
   }
 
   @media (min-width: 895px) {
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index d1116ed7d..ed3530e3d 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -733,7 +733,7 @@
     @include line-height(14);
     position: absolute;
     box-sizing: border-box;
-    left: 8px;
+    right: -5px;
     top: -12px;
     min-width: 16px;
     height: 16px;
diff --git a/webpack/rules/assets.js b/webpack/rules/assets.js
index 14ed250ad..60b7d49cb 100644
--- a/webpack/rules/assets.js
+++ b/webpack/rules/assets.js
@@ -44,7 +44,7 @@ module.exports = [{
 }, {
   test: /\.svg$/,
   type: 'asset/inline',
-  include: resolve('node_modules', '@material-design-icons'),
+  include: resolve('app', 'icons'),
   generator: {
     dataUrl: content => svgToMiniDataURI(content.toString()),
   },
diff --git a/webpack/shared.js b/webpack/shared.js
index 0e732d81e..c7343f005 100644
--- a/webpack/shared.js
+++ b/webpack/shared.js
@@ -110,6 +110,7 @@ module.exports = {
       // Override tabler's package.json to allow importing .svg files directly
       // https://stackoverflow.com/a/35990101/8811886
       '@tabler': resolve('node_modules', '@tabler'),
+      'icons': resolve('app', 'icons'),
     },
     fallback: {
       path: require.resolve('path-browserify'),