From 1b7fe4ee04f141a37c537cb1f8ac736322966350 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Oct 2021 17:58:25 -0500
Subject: [PATCH] Use custom Home and Post icons

---
 app/icons/COPYING.md                          |  5 +-
 app/icons/home-2-filled.svg                   |  3 -
 app/icons/home-square.svg                     | 59 ++++++++++++++
 app/icons/pen-add.svg                         | 78 +++++++++++++++++++
 app/soapbox/components/primary_navigation.js  |  5 +-
 app/soapbox/components/thumb_navigation.js    |  5 +-
 .../features/ui/components/tabs_bar.js        |  2 +-
 app/soapbox/features/ui/index.js              |  2 +-
 app/styles/components/icon.scss               |  4 +
 app/styles/components/tabs-bar.scss           |  5 ++
 app/styles/ui.scss                            |  8 +-
 11 files changed, 163 insertions(+), 13 deletions(-)
 delete mode 100644 app/icons/home-2-filled.svg
 create mode 100644 app/icons/home-square.svg
 create mode 100644 app/icons/pen-add.svg

diff --git a/app/icons/COPYING.md b/app/icons/COPYING.md
index e549a78f3..6a8df9bfd 100644
--- a/app/icons/COPYING.md
+++ b/app/icons/COPYING.md
@@ -2,8 +2,9 @@
 
 - dashboard-filled.svg - Modified from Tabler icons, MIT  
 - fediverse.svg - Modified from Wikipedia, CC0  
-- gavel.svg - Created by ramsha61 for this project, MIT
-- home-2-filled.svg - Modified from Tabler icons, MIT  
+- gavel.svg - Created by ramsha61 for this project, MIT  
+- home-squared.svg - Modified from Tabler icons, MIT  
+- pen-add.svg - Modified from Feather icons, MIT  
 
 Tabler: https://tabler-icons.io/  
 Feather: https://feathericons.com/  
diff --git a/app/icons/home-2-filled.svg b/app/icons/home-2-filled.svg
deleted file mode 100644
index f08cd6fea..000000000
--- a/app/icons/home-2-filled.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<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/icons/home-square.svg b/app/icons/home-square.svg
new file mode 100644
index 000000000..4bba6cc81
--- /dev/null
+++ b/app/icons/home-square.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="home-square.svg"
+   inkscape:version="1.0.2 (1.0.2+r75+1)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="4.2821102"
+     inkscape:cx="18.631545"
+     inkscape:cy="20.30869"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m 12,3 -9,7 v 11 c 1.9540513,0 3.8465823,0 6,0 v -6 c 0,-1.104569 0.8954305,-2 2,-2 h 2 c 1.104569,0 2,0.895431 2,2 v 6 c 2,0 4,0 6,0 V 10 Z"
+     id="path2"
+     sodipodi:nodetypes="ccccsssscccc" />
+</svg>
diff --git a/app/icons/pen-add.svg b/app/icons/pen-add.svg
new file mode 100644
index 000000000..89da128c5
--- /dev/null
+++ b/app/icons/pen-add.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   fill="none"
+   stroke="currentColor"
+   stroke-width="1.5"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   class="feather feather-pen-tool"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="pen-add.svg"
+   inkscape:version="1.0.2 (1.0.2+r75+1)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="705"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="8"
+     inkscape:cx="10.674175"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     d="M 20.47236,13.274579 14.302339,7.1045579 16.946633,4.460263 23.116655,10.630284 Z"
+     id="path2" />
+  <path
+     d="M 15.18377,7.9859895 8.5730298,9.3081369 5.4880191,22.088895 18.268781,19.003885 19.590928,12.393148 Z"
+     id="path4" />
+  <path
+     d="m 5.4880191,22.088895 6.6865439,-6.68654"
+     id="path6" />
+  <circle
+     cx="-14.156011"
+     cy="13.420902"
+     id="circle8"
+     r="1.7628632"
+     transform="rotate(-90)" />
+  <path
+     d="M 4.7036412,1 V 8.4072824"
+     id="path841" />
+  <path
+     d="M 8.4072823,4.7036412 H 1"
+     id="path841-3" />
+</svg>
diff --git a/app/soapbox/components/primary_navigation.js b/app/soapbox/components/primary_navigation.js
index 3b358cb71..c9c3f915e 100644
--- a/app/soapbox/components/primary_navigation.js
+++ b/app/soapbox/components/primary_navigation.js
@@ -56,7 +56,10 @@ class PrimaryNavigation extends React.PureComponent {
       <div className='column-header__wrapper primary-navigation__wrapper'>
         <h1 className='column-header primary-navigation'>
           <NavLink to='/' exact className='btn grouped'>
-            <Icon src={location.pathname === '/' ? require('icons/home-2-filled.svg') : require('@tabler/icons/icons/home-2.svg')} className='primary-navigation__icon' />
+            <Icon
+              src={require('icons/home-square.svg')}
+              className={classNames('primary-navigation__icon', 'svg-icon--home', { 'svg-icon--active': location.pathname === '/' })}
+            />
             <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
           </NavLink>
 
diff --git a/app/soapbox/components/thumb_navigation.js b/app/soapbox/components/thumb_navigation.js
index eea799e34..dd09506d0 100644
--- a/app/soapbox/components/thumb_navigation.js
+++ b/app/soapbox/components/thumb_navigation.js
@@ -47,7 +47,10 @@ class ThumbNavigation extends React.PureComponent {
     return (
       <div className='thumb-navigation'>
         <NavLink to='/' exact className='thumb-navigation__link'>
-          <Icon src={location.pathname === '/' ? require('icons/home-2-filled.svg') : require('@tabler/icons/icons/home-2.svg')} />
+          <Icon
+            src={require('icons/home-square.svg')}
+            className={classNames('svg-icon--home', { 'svg-icon--active': location.pathname === '/' })}
+          />
           <span>
             <FormattedMessage id='navigation.home' defaultMessage='Home' />
           </span>
diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js
index 15b293cbd..8a7dbaf18 100644
--- a/app/soapbox/features/ui/components/tabs_bar.js
+++ b/app/soapbox/features/ui/components/tabs_bar.js
@@ -65,7 +65,7 @@ class TabsBar extends React.PureComponent {
               </Link>
             ) : (
               <Link key='logo' className='tabs-bar__link--logo' to='/' data-preview-title-id='column.home'>
-                <Icon alt='Logo' src={require('icons/home-2-filled.svg')} />
+                <Icon alt='Logo' src={require('icons/home-square.svg')} />
                 <span><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
               </Link>
             )}
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 2b32f01e3..27e7d13fd 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -668,7 +668,7 @@ class UI extends React.PureComponent {
         className='floating-action-button'
         aria-label={intl.formatMessage(messages.publish)}
       >
-        <Icon src={require('@tabler/icons/icons/pencil.svg')} fixedWidth />
+        <Icon src={require('icons/pen-add.svg')} />
       </button>
     );
 
diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
index 2ffa23241..40b55cdda 100644
--- a/app/styles/components/icon.scss
+++ b/app/styles/components/icon.scss
@@ -14,6 +14,10 @@
   }
 
   &--active {
+    &.svg-icon--home svg {
+      fill: currentColor;
+    }
+
     svg.icon-tabler-search {
       stroke-width: 2.3px;
     }
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
index 5038f05da..a0226aef8 100644
--- a/app/styles/components/tabs-bar.scss
+++ b/app/styles/components/tabs-bar.scss
@@ -289,6 +289,11 @@
       width: 26px;
       height: 26px;
       margin: 0 auto;
+
+      svg {
+        fill: currentColor;
+        stroke-width: 1px;
+      }
     }
 
     &:hover {
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index dfac97c09..528b16b9b 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -391,12 +391,12 @@
   }
 
   .svg-icon {
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
 
     svg {
-      stroke-width: 1px;
-      width: 40px; // iOS fix
+      stroke: 1.5px;
+      width: 30px; // iOS fix
     }
   }
 }