tailwind heroicons package, active footer icons

package.json

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@fontsource/lato": "^4.5.10",
+    "@heroicons/react": "^2.0.17",
     "@noble/hashes": "^1.2.0",
     "@noble/secp256k1": "^1.7.1",
     "@scure/bip32": "^1.1.5",

src/css/style.css

@@ -432,7 +432,7 @@ a.logo img:not(:last-child) {
 }
 
 .header-content a.active {
-  color: var(--purple);
+  color: var(--msg-form-button-color);
 }
 
 .header .header-content > a:not(:first-child) {
@@ -452,7 +452,7 @@ a.logo img:not(:last-child) {
 }
 
 .nav a.my-profile:focus .identicon img {
-  border: 1px solid var(--purple);
+  border: 1px solid var(--text-color);
 }
 
 .nav a.my-profile {

src/js/Icons.tsx

@@ -45,20 +45,6 @@ export default {
     </svg>
   ),
 
-  plus: (
-    <svg
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      className="w-6 h-6"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-    </svg>
-  ),
-
   reply: (
     <svg
       width="24"

src/js/components/Footer.tsx

@@ -1,3 +1,9 @@
+import { HomeIcon, PaperAirplaneIcon, PlusCircleIcon } from '@heroicons/react/24/outline';
+import {
+  HomeIcon as HomeIconFull,
+  PaperAirplaneIcon as PaperAirplaneIconFull,
+  PlusCircleIcon as PlusCircleIconFull,
+} from '@heroicons/react/24/solid';
 import { route } from 'preact-router';
 
 import Component from '../BaseComponent';
@@ -64,7 +70,7 @@ class Footer extends Component<Props, State> {
             onClick={(e) => this.handleFeedClick(e)}
             class={`btn ${activeRoute === '/' ? 'active' : ''}`}
           >
-            {Icons.home}
+            {activeRoute === '/' ? <HomeIconFull width={24} /> : <HomeIcon width={24} />}
           </a>
           <a href="/chat" className={`btn ${activeRoute.indexOf('/chat') === 0 ? 'active' : ''}`}>
             {this.state.unseenMsgsTotal ? (
@@ -72,10 +78,18 @@ class Footer extends Component<Props, State> {
             ) : (
               ''
             )}
-            {Icons.chat}
+            {activeRoute.indexOf('/chat') === 0 ? (
+              <PaperAirplaneIconFull width={24} />
+            ) : (
+              <PaperAirplaneIcon width={24} />
+            )}
           </a>
           <a href="/post/new" class={`btn ${activeRoute === '/post/new' ? 'active' : ''}`}>
-            {Icons.plus}
+            {activeRoute === '/post/new' ? (
+              <PlusCircleIconFull width={24} />
+            ) : (
+              <PlusCircleIcon width={24} />
+            )}
           </a>
           <a href={`/${key}`} class={`${activeRoute === `/${key}` ? 'active' : ''} my-profile`}>
             <Identicon str={key} width={34} />

src/js/components/Header.tsx

@@ -9,10 +9,8 @@ import localState from '../LocalState';
 import Key from '../nostr/Key';
 import Relays from '../nostr/Relays';
 import { translate as t } from '../translations/Translation';
-import Login from '../views/Login';
 
 import { Button, PrimaryButton } from './buttons/Button';
-import Modal from './modal/Modal';
 import Identicon from './Identicon';
 import Name from './Name';
 import SearchBox from './SearchBox';

yarn.lock

@@ -1072,6 +1072,11 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
+"@heroicons/react@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.17.tgz#42a8086bc434ceefc03592f20c4e81b11e915cf8"
+  integrity sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"