From e3b74b791afe1eb002cf348404aa7f88fde46fca Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 29 Apr 2023 12:26:03 +0700
Subject: [PATCH] migrated some icons to central-icon

---
 src/app/channel/components/createModal.tsx   |  7 ++++---
 src/app/channel/components/messages/form.tsx |  4 ++--
 src/shared/appHeader.tsx                     | 10 ++++++----
 src/shared/form/imagePicker.tsx              |  4 ++--
 src/shared/icons/arrowLeft.tsx               | 15 +++++++++++++++
 src/shared/icons/arrowRight.tsx              | 15 +++++++++++++++
 src/shared/icons/cancel.tsx                  | 14 ++++++++++++++
 src/shared/icons/navArrowDown.tsx            | 12 ++++++++++++
 src/shared/icons/plus.tsx                    | 15 +++++++++++++++
 src/shared/icons/refresh.tsx                 | 14 ++++++++++++++
 src/shared/multiAccounts.tsx                 |  4 ++--
 src/shared/navigation.tsx                    | 18 +++++++++---------
 12 files changed, 110 insertions(+), 22 deletions(-)
 create mode 100644 src/shared/icons/arrowLeft.tsx
 create mode 100644 src/shared/icons/arrowRight.tsx
 create mode 100644 src/shared/icons/cancel.tsx
 create mode 100644 src/shared/icons/navArrowDown.tsx
 create mode 100644 src/shared/icons/plus.tsx
 create mode 100644 src/shared/icons/refresh.tsx

diff --git a/src/app/channel/components/createModal.tsx b/src/app/channel/components/createModal.tsx
index 9001f0ce..b98f5fcc 100644
--- a/src/app/channel/components/createModal.tsx
+++ b/src/app/channel/components/createModal.tsx
@@ -1,4 +1,6 @@
 import { AvatarUploader } from '@lume/shared/avatarUploader';
+import CancelIcon from '@lume/shared/icons/cancel';
+import PlusIcon from '@lume/shared/icons/plus';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { DEFAULT_AVATAR, WRITEONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix } from '@lume/utils/getDate';
@@ -6,7 +8,6 @@ import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 import { createChannel } from '@lume/utils/storage';
 
 import { Dialog, Transition } from '@headlessui/react';
-import { Cancel, Plus } from 'iconoir-react';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { Fragment, useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -84,7 +85,7 @@ export default function ChannelCreateModal() {
         className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
       >
         <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">
-          <Plus width={12} height={12} className="text-zinc-500" />
+          <PlusIcon width={12} height={12} className="text-zinc-500" />
         </div>
         <div>
           <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
@@ -129,7 +130,7 @@ export default function ChannelCreateModal() {
                         autoFocus={false}
                         className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                       >
-                        <Cancel width={20} height={20} className="text-zinc-300" />
+                        <CancelIcon width={20} height={20} className="text-zinc-300" />
                       </button>
                     </div>
                     <Dialog.Description className="leading-tight text-zinc-400">
diff --git a/src/app/channel/components/messages/form.tsx b/src/app/channel/components/messages/form.tsx
index 6c89ed2e..14363fba 100644
--- a/src/app/channel/components/messages/form.tsx
+++ b/src/app/channel/components/messages/form.tsx
@@ -1,12 +1,12 @@
 import UserReply from '@lume/app/channel/components/messages/userReply';
 import { ImagePicker } from '@lume/shared/form/imagePicker';
+import CancelIcon from '@lume/shared/icons/cancel';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { channelContentAtom, channelReplyAtom } from '@lume/stores/channel';
 import { WRITEONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix } from '@lume/utils/getDate';
 import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 
-import { Cancel } from 'iconoir-react';
 import { useAtom, useAtomValue } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -87,7 +87,7 @@ export default function ChannelMessageForm({ channelID }: { channelID: string |
               onClick={() => stopReply()}
               className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800"
             >
-              <Cancel width={12} height={12} className="text-zinc-100" />
+              <CancelIcon width={12} height={12} className="text-zinc-100" />
             </button>
           </div>
         </div>
diff --git a/src/shared/appHeader.tsx b/src/shared/appHeader.tsx
index 8f94c165..7429d9cd 100644
--- a/src/shared/appHeader.tsx
+++ b/src/shared/appHeader.tsx
@@ -1,4 +1,6 @@
-import { ArrowLeft, ArrowRight, Refresh } from 'iconoir-react';
+import ArrowLeftIcon from '@lume/shared/icons/arrowLeft';
+import ArrowRightIcon from '@lume/shared/icons/arrowRight';
+import RefreshIcon from '@lume/shared/icons/refresh';
 
 let platformName = 'darwin';
 
@@ -27,19 +29,19 @@ export default function AppHeader() {
           onClick={() => goBack()}
           className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
         >
-          <ArrowLeft width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+          <ArrowLeftIcon width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
         </button>
         <button
           onClick={() => goForward()}
           className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
         >
-          <ArrowRight width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+          <ArrowRightIcon width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
         </button>
         <button
           onClick={() => reload()}
           className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
         >
-          <Refresh width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
+          <RefreshIcon width={16} height={16} className="text-zinc-500 group-hover:text-zinc-300" />
         </button>
       </div>
       <div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
diff --git a/src/shared/form/imagePicker.tsx b/src/shared/form/imagePicker.tsx
index 209d583c..dfaed859 100644
--- a/src/shared/form/imagePicker.tsx
+++ b/src/shared/form/imagePicker.tsx
@@ -1,3 +1,4 @@
+import PlusIcon from '@lume/shared/icons/plus';
 import { channelContentAtom } from '@lume/stores/channel';
 import { chatContentAtom } from '@lume/stores/chat';
 import { noteContentAtom } from '@lume/stores/note';
@@ -5,7 +6,6 @@ import { createBlobFromFile } from '@lume/utils/createBlobFromFile';
 
 import { open } from '@tauri-apps/api/dialog';
 import { Body, fetch } from '@tauri-apps/api/http';
-import { Plus } from 'iconoir-react';
 import { useSetAtom } from 'jotai';
 import { useState } from 'react';
 
@@ -89,7 +89,7 @@ export const ImagePicker = ({ type }: { type: string }) => {
           ></path>
         </svg>
       ) : (
-        <Plus width={16} height={16} className="text-zinc-400" />
+        <PlusIcon width={16} height={16} className="text-zinc-400" />
       )}
     </button>
   );
diff --git a/src/shared/icons/arrowLeft.tsx b/src/shared/icons/arrowLeft.tsx
new file mode 100644
index 00000000..626fa642
--- /dev/null
+++ b/src/shared/icons/arrowLeft.tsx
@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function ArrowLeftIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M10 18.25L3.75 12M3.75 12L10 5.75M3.75 12H20.25"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/icons/arrowRight.tsx b/src/shared/icons/arrowRight.tsx
new file mode 100644
index 00000000..432ab8be
--- /dev/null
+++ b/src/shared/icons/arrowRight.tsx
@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function ArrowRightIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14 5.75L20.25 12M20.25 12L14 18.25M20.25 12H3.75"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/icons/cancel.tsx b/src/shared/icons/cancel.tsx
new file mode 100644
index 00000000..b4f89592
--- /dev/null
+++ b/src/shared/icons/cancel.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+
+export default function CancelIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M4.75 4.75L19.25 19.25M19.25 4.75L4.75 19.25"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/icons/navArrowDown.tsx b/src/shared/icons/navArrowDown.tsx
new file mode 100644
index 00000000..c2061dbf
--- /dev/null
+++ b/src/shared/icons/navArrowDown.tsx
@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+
+export default function NavArrowDownIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M4.29233 7.97419C3.37989 6.14866 4.70668 4 6.74799 4H17.2519C19.2932 4 20.62 6.14866 19.7076 7.97419L14.4556 18.4819C13.4439 20.5061 10.556 20.506 9.54431 18.4819L4.29233 7.97419Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/icons/plus.tsx b/src/shared/icons/plus.tsx
new file mode 100644
index 00000000..9f77a000
--- /dev/null
+++ b/src/shared/icons/plus.tsx
@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+export default function PlusIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12 3.75V12M12 12V20.25M12 12H3.75M12 12H20.25"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/icons/refresh.tsx b/src/shared/icons/refresh.tsx
new file mode 100644
index 00000000..177eab0a
--- /dev/null
+++ b/src/shared/icons/refresh.tsx
@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+
+export default function RefreshIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.979 4.5C7.83687 4.5 4.479 7.85786 4.479 12C4.479 16.1421 7.83687 19.5 11.979 19.5C15.2434 19.5 18.0225 17.4141 19.0524 14.5001C19.1905 14.1095 19.619 13.9048 20.0095 14.0429C20.4 14.1809 20.6047 14.6094 20.4667 14.9999C19.2315 18.4945 15.8988 21 11.979 21C7.00844 21 2.979 16.9706 2.979 12C2.979 7.02944 7.00844 3 11.979 3C13.709 3 15.1419 3.42256 16.4191 4.20651C17.1663 4.6651 17.8487 5.24046 18.5 5.90708V4C18.5 3.58579 18.8358 3.25 19.25 3.25C19.6642 3.25 20 3.58579 20 4V8C20 8.41421 19.6642 8.75 19.25 8.75H15.25C14.8358 8.75 14.5 8.41421 14.5 8C14.5 7.58579 14.8358 7.25 15.25 7.25H17.7068C17.0285 6.51595 16.3546 5.92693 15.6345 5.4849C14.6015 4.85088 13.4417 4.5 11.979 4.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/multiAccounts.tsx b/src/shared/multiAccounts.tsx
index b7b026ff..aa5aca91 100644
--- a/src/shared/multiAccounts.tsx
+++ b/src/shared/multiAccounts.tsx
@@ -1,10 +1,10 @@
 import ActiveAccount from '@lume/shared/accounts/active';
 import InactiveAccount from '@lume/shared/accounts/inactive';
 import LumeIcon from '@lume/shared/icons/lume';
+import PlusIcon from '@lume/shared/icons/plus';
 import { APP_VERSION } from '@lume/stores/constants';
 import { getAccounts } from '@lume/utils/storage';
 
-import { Plus } from 'iconoir-react';
 import useSWR from 'swr';
 
 const fetcher = () => getAccounts();
@@ -39,7 +39,7 @@ export default function MultiAccounts() {
           href="/onboarding"
           className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
         >
-          <Plus width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
+          <PlusIcon width={16} height={16} className="text-zinc-400 group-hover:text-zinc-200" />
         </a>
       </div>
       <div className="flex flex-col gap-0.5 text-center">
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 612e8b6a..f0a23d3e 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -1,9 +1,9 @@
 import ChannelsList from '@lume/app/channel/components/list';
 import ChatsList from '@lume/app/chat/components/list';
 import ActiveLink from '@lume/shared/activeLink';
+import NavArrowDownIcon from '@lume/shared/icons/navArrowDown';
 
 import { Disclosure } from '@headlessui/react';
-import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
 
 export default function Navigation() {
   return (
@@ -15,10 +15,10 @@ export default function Navigation() {
             <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-                  open ? 'rotate-180' : ''
+                  open ? '' : 'rotate-180'
                 }`}
               >
-                <NavArrowUp width={16} height={16} className="text-zinc-700" />
+                <NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
               </div>
               <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
             </Disclosure.Button>
@@ -28,7 +28,7 @@ export default function Navigation() {
                 className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
                 activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
               >
-                <PeopleTag width={16} height={16} className="text-zinc-500" />
+                <span>#</span>
                 <span>Following</span>
               </ActiveLink>
               <ActiveLink
@@ -36,7 +36,7 @@ export default function Navigation() {
                 className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
                 activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
               >
-                <Bonfire width={16} height={16} className="text-zinc-500" />
+                <span>#</span>
                 <span>Circle</span>
               </ActiveLink>
             </Disclosure.Panel>
@@ -50,10 +50,10 @@ export default function Navigation() {
             <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-                  open ? 'rotate-180' : ''
+                  open ? '' : 'rotate-180'
                 }`}
               >
-                <NavArrowUp width={16} height={16} className="text-zinc-700" />
+                <NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
               </div>
               <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
             </Disclosure.Button>
@@ -70,10 +70,10 @@ export default function Navigation() {
             <Disclosure.Button className="flex cursor-pointer items-center gap-1 px-1 py-1">
               <div
                 className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
-                  open ? 'rotate-180' : ''
+                  open ? '' : 'rotate-180'
                 }`}
               >
-                <NavArrowUp width={16} height={16} className="text-zinc-700" />
+                <NavArrowDownIcon width={12} height={12} className="text-zinc-700" />
               </div>
               <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Chats</h3>
             </Disclosure.Button>