From 4a78deb7d33633da4165804fe59302422d1dd9d4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 20 Sep 2021 18:28:55 -0500
Subject: [PATCH] PrimaryNavigation: use Tabler icons, add timelines

---
 app/icons/fediverse.svg                      |  3 ++
 app/soapbox/components/primary_navigation.js | 45 ++++++++++++++------
 app/soapbox/components/thumb_navigation.js   |  5 ++-
 app/styles/navigation.scss                   | 28 +++++++-----
 4 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 app/icons/fediverse.svg

diff --git a/app/icons/fediverse.svg b/app/icons/fediverse.svg
new file mode 100644
index 000000000..4cd3cb938
--- /dev/null
+++ b/app/icons/fediverse.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792" fill="currentColor">
+    <path d="M 343.16176,591.34767 A 171.09965,171.09965 0 0 1 163.0094,752.88799 171.09965,171.09965 0 0 1 1.4690156,572.73567 171.09965,171.09965 0 0 1 181.62138,411.19523 171.09965,171.09965 0 0 1 343.16176,591.34767 Z M 482.96755,1485.6494 A 171.09965,171.09965 0 0 1 302.81519,1647.1895 171.09965,171.09965 0 0 1 141.2748,1467.0372 171.09965,171.09965 0 0 1 321.42717,1305.4967 171.09965,171.09965 0 0 1 482.96755,1485.6494 Z m 893.94285,143.4473 a 171.09965,171.09965 0 0 1 -180.1523,161.5405 171.09965,171.09965 0 0 1 -161.5404,-180.1524 171.09965,171.09965 0 0 1 180.1524,-161.5405 171.09965,171.09965 0 0 1 161.5403,180.1524 z M 1789.5918,823.45087 A 171.09965,171.09965 0 0 1 1609.4395,984.99118 171.09965,171.09965 0 0 1 1447.899,804.83886 171.09965,171.09965 0 0 1 1628.0513,643.29854 171.09965,171.09965 0 0 1 1789.5918,823.45087 Z M 1150.7,182.08661 A 171.09965,171.09965 0 0 1 970.54747,343.627 171.09965,171.09965 0 0 1 809.00715,163.47462 171.09965,171.09965 0 0 1 989.15948,1.9342312 171.09965,171.09965 0 0 1 1150.7,182.08661 Z m -792.52346,371.6819 a 188.20963,188.20963 0 0 1 2.07029,38.5086 188.20963,188.20963 0 0 1 -19.56107,73.71432 l 276.93395,44.47923 54.4306,-106.2947 z m 474.63645,76.2221 -54.43595,106.30538 654.33596,105.0888 a 188.20963,188.20963 0 0 1 -1.8996,-37.47876 188.20963,188.20963 0 0 1 20.0788,-74.64799 z M 1065.1875,340.27205 a 188.20963,188.20963 0 0 1 -95.56964,20.44149 188.20963,188.20963 0 0 1 -16.47175,-1.72883 l 43.21482,276.72059 117.91607,18.92069 z m -43.7109,456.30786 102.1755,654.25059 a 188.20963,188.20963 0 0 1 92.651,-18.9688 188.20963,188.20963 0 0 1 19.6891,2.1609 L 1139.398,815.49535 Z M 794.34712,203.1417 306.48853,450.37661 a 188.20963,188.20963 0 0 1 51.34118,101.31626 L 845.683,304.44741 A 188.20963,188.20963 0 0 1 794.34712,203.1417 Z m 352.24368,56.54894 a 188.20963,188.20963 0 0 1 -80.5121,80.13321 l 385.9286,387.41724 a 188.20963,188.20963 0 0 1 80.5069,-80.13321 z m 339.8804,688.09027 -249.2037,486.50849 a 188.20963,188.20963 0 0 1 101.0656,51.8588 L 1587.5315,999.64494 A 188.20963,188.20963 0 0 1 1486.4712,947.78091 Z M 498.08153,1448.6696 a 188.20963,188.20963 0 0 1 1.9689,37.9111 188.20963,188.20963 0 0 1 -19.85455,74.2528 l 539.90952,86.6376 a 188.20963,188.20963 0 0 1 -1.9742,-37.9162 188.20963,188.20963 0 0 1 19.8598,-74.2477 z M 256.10246,750.31321 a 188.20963,188.20963 0 0 1 -94.02233,19.65712 188.20963,188.20963 0 0 1 -18.16843,-1.89976 l 84.42322,540.00023 a 188.20963,188.20963 0 0 1 94.02233,-19.6571 188.20963,188.20963 0 0 1 18.15773,1.9001 z M 847.58784,306.427 562.15394,863.6618 646.42776,948.26106 948.64274,358.28043 A 188.20963,188.20963 0 0 1 847.58784,306.427 Z m -359.67106,702.1662 -144.57913,282.2484 a 188.20963,188.20963 0 0 1 101.04426,51.8481 l 127.80337,-249.5025 z m 945.31912,-164.10293 -250.1803,126.78949 18.446,117.99084 283.07,-143.4639 A 188.20963,188.20963 0 0 1 1433.2359,844.49027 Z M 1037.8202,1044.882 446.28679,1344.6691 a 188.20963,188.20963 0 0 1 51.34651,101.3273 l 558.6328,-283.1181 z M 339.05298,668.95274 a 188.20963,188.20963 0 0 1 -80.49604,80.12252 l 441.91192,443.63544 106.54017,-53.9931 z m 582.89469,585.14656 -106.54012,53.993 223.91735,224.7922 a 188.20963,188.20963 0 0 1 80.5121,-80.1332 z" fill-opacity=".996"/>
+</svg>
diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js
index a1c3b5362..0e1474081 100644
--- a/app/soapbox/components/primary_navigation.js
+++ b/app/soapbox/components/primary_navigation.js
@@ -51,40 +51,61 @@ class PrimaryNavigation extends React.PureComponent {
   };
 
   render() {
-    const { account, features, notificationCount, chatsCount, dashboardCount } = this.props;
+    const { account, features, notificationCount, chatsCount, dashboardCount, siteTitle } = this.props;
 
     return (
       <div className='column-header__wrapper primary-navigation__wrapper'>
         <h1 className='column-header primary-navigation'>
           <NavLink to='/' exact className='btn grouped'>
-            <Icon id='home' className='primary-navigation__icon' />
+            <Icon src={require('@tabler/icons/icons/home-2.svg')} className='primary-navigation__icon' />
             <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
           </NavLink>
 
           {account && <NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
-            <IconWithCounter icon='bell' count={notificationCount} />
+            <IconWithCounter
+              src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
+              className='primary-navigation__icon'
+              count={notificationCount}
+            />
             <FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />
           </NavLink>}
 
           {(features.chats && account) && <NavLink key='chats' className='btn grouped' to='/chats' data-preview-title-id='column.chats'>
-            <IconWithCounter icon='comment' count={chatsCount} />
+            <IconWithCounter
+              src={require('@tabler/icons/icons/messages.svg')}
+              className='primary-navigation__icon'
+              count={chatsCount}
+            />
             <FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />
           </NavLink>}
 
           {(account && isStaff(account)) && <NavLink key='dashboard' className='btn grouped' to='/admin' data-preview-title-id='tabs_bar.dashboard'>
-            <IconWithCounter icon='tachometer' count={dashboardCount} />
+            <IconWithCounter
+              src={require('@tabler/icons/icons/dashboard.svg')}
+              className='primary-navigation__icon'
+              count={dashboardCount}
+            />
             <FormattedMessage id='tabs_bar.dashboard' defaultMessage='Dashboard' />
           </NavLink>}
 
-          {/* <NavLink to='/timeline/local' className='btn grouped'>
-            <Icon id={federating ? 'users' : 'globe-w'} fixedWidth className='column-header__icon' />
-            {federating ? siteTitle : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
-          </NavLink> */}
+          <hr />
 
-          {/* federating && <NavLink to='/timeline/fediverse' className='btn grouped'>
-            <Icon id='fediverse' fixedWidth className='column-header__icon' />
+          {features.federating ? (
+            <NavLink to='/timeline/local' className='btn grouped'>
+              <Icon src={require('@tabler/icons/icons/users.svg')} className='primary-navigation__icon' />
+              {siteTitle}
+            </NavLink>
+          ) : (
+            <NavLink to='/timeline/local' className='btn grouped'>
+              <Icon src={require('@tabler/icons/icons/world.svg')} className='primary-navigation__icon' />
+              <FormattedMessage id='tabs_bar.all' defaultMessage='All' />
+            </NavLink>
+          )}
+
+          {features.federating && <NavLink to='/timeline/fediverse' className='btn grouped'>
+            <Icon src={require('icons/fediverse.svg')} className='column-header__icon' />
             <FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />
-          </NavLink> */}
+          </NavLink>}
         </h1>
       </div>
     );
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index 1b968f51b..9ffd4c0fb 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
@@ -42,7 +42,7 @@ class ThumbNavigation extends React.PureComponent {
   }
 
   render() {
-    const { account, notificationCount, dashboardCount, location, features } = this.props;
+    const { account, notificationCount, chatsCount, dashboardCount, location, features } = this.props;
 
     return (
       <div className='thumb-navigation'>
@@ -68,9 +68,10 @@ class ThumbNavigation extends React.PureComponent {
 
         {(features.chats && account) && (
           <NavLink to='/chats' className='thumb-navigation__link'>
-            <Icon
+            <IconWithCounter
               src={require('@tabler/icons/icons/messages.svg')}
               className={classNames({ 'svg-icon--active': location.pathname === '/chats' })}
+              count={chatsCount}
             />
             <span>
               <FormattedMessage id='navigation.chats' defaultMessage='Chats' />
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index 82c21475d..75962777f 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -8,18 +8,14 @@
       font-size: 19px;
       font-weight: bold;
 
-      > i.fa,
-      > .icon-with-counter {
-        width: 25px;
-        margin-right: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+      .svg-icon {
+        width: 26px;
+        height: 26px;
+        margin-right: 10px;
 
-      > .svg-icon {
-        width: 25px;
-        margin-right: 5px;
+        svg.icon-tabler {
+          stroke-width: 1.5px;
+        }
       }
 
       &::before {
@@ -31,6 +27,16 @@
     &__icon {
       margin-right: 5px;
     }
+
+    hr {
+      border: 0;
+      height: 1px;
+      width: 100%;
+      background: hsla(var(--primary-text-color_hsl), 0.12);
+      max-width: 230px;
+      text-align: left;
+      margin: 10px 0;
+    }
   }
 }