From 936d530dabbcb03ec618032b2f60a26578a81d6b Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Sun, 7 Aug 2022 20:14:05 +0100
Subject: [PATCH] feat: replace some icons with heroicons

---
 src/components/common/ConnectButton.tsx |  7 +++----
 src/components/icons/CollectIcon.tsx    | 21 --------------------
 src/components/icons/CopyIcon.tsx       | 22 ---------------------
 src/components/icons/LogoutIcon.tsx     | 23 ----------------------
 src/components/icons/MoreIcon.tsx       | 18 -----------------
 src/components/icons/RSS3Icon.tsx       | 26 -------------------------
 src/components/site/PostFooter.tsx      |  4 ++--
 src/components/site/SiteHeader.tsx      |  7 +++----
 8 files changed, 8 insertions(+), 120 deletions(-)
 delete mode 100644 src/components/icons/CollectIcon.tsx
 delete mode 100644 src/components/icons/CopyIcon.tsx
 delete mode 100644 src/components/icons/LogoutIcon.tsx
 delete mode 100644 src/components/icons/MoreIcon.tsx
 delete mode 100644 src/components/icons/RSS3Icon.tsx

diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 95d1267d..7ad9ba62 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -4,12 +4,11 @@ import { useAccount, useDisconnect } from "wagmi"
 import { Avatar } from "~/components/ui/Avatar"
 import type { HeaderLinkType } from "~/components/site/SiteHeader"
 import { DashboardIcon } from "../icons/DashboardIcon"
-import { LogoutIcon } from "../icons/LogoutIcon"
-import { CopyIcon } from "../icons/CopyIcon"
 import { IS_PROD } from "~/lib/constants"
 import { OUR_DOMAIN } from "~/lib/env"
 import { UniLink } from "../ui/UniLink"
 import { useEffect, useState } from "react"
+import { DuplicateIcon, LogoutIcon } from "@heroicons/react/outline"
 
 export const ConnectButton: React.FC<{
   left?: boolean
@@ -27,7 +26,7 @@ export const ConnectButton: React.FC<{
 
   const dropdownLinks: HeaderLinkType[] = [
     {
-      icon: <CopyIcon />,
+      icon: <DuplicateIcon className="w-4 h-4" />,
       label: copyLabel,
       onClick() {
         navigator.clipboard.writeText(address || "")
@@ -43,7 +42,7 @@ export const ConnectButton: React.FC<{
       url: `${IS_PROD ? "https" : "http"}://${OUR_DOMAIN}/dashboard`,
     },
     {
-      icon: <LogoutIcon />,
+      icon: <LogoutIcon className="w-4 h-4" />,
       label: "Disconnect",
       onClick() {
         disconnect()
diff --git a/src/components/icons/CollectIcon.tsx b/src/components/icons/CollectIcon.tsx
deleted file mode 100644
index 95b23125..00000000
--- a/src/components/icons/CollectIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react"
-
-export const CollectIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      {...props}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M388.821333 375.466667c14.506667-12.672 31.744-22.442667 50.773334-28.202667l10.538666-2.773333 6.826667-1.28 7.509333-1.066667 7.68-0.64 7.850667-0.213333h320a138.666667 138.666667 0 0 1 138.453333 130.773333l0.213334 7.893333v320a138.666667 138.666667 0 0 1-130.816 138.453334l-7.850667 0.213333h-320a138.666667 138.666667 0 0 1-138.453333-130.816L341.333333 800v-320l0.128-6.357333 0.597334-8.106667 1.109333-8.149333 1.536-7.936 2.517333-9.514667 3.413334-10.069333 3.712-8.618667 3.498666-6.912 4.010667-6.954667 6.229333-9.258666 4.010667-5.248 5.76-6.656 4.608-4.778667 6.357333-5.930667zM640 469.333333a32 32 0 0 0-31.701333 27.648l-0.298667 4.352v106.624h-106.666667a32 32 0 0 0-31.701333 27.648l-0.298667 4.352c0 16.213333 12.032 29.568 27.648 31.701334l4.352 0.298666h106.666667v106.709334c0 16.213333 12.032 29.610667 27.648 31.701333L640 810.666667a32 32 0 0 0 31.701333-27.648l0.298667-4.352v-106.709334h106.666667a32 32 0 0 0 31.701333-27.690666L810.666667 640a32 32 0 0 0-27.648-31.701333l-4.352-0.298667h-106.666667V501.333333a32 32 0 0 0-27.648-31.701333L640 469.333333z m24.832-288.725333l2.218667 7.552 29.610666 110.421333H480A181.333333 181.333333 0 0 0 298.666667 479.957333v274.517334a138.752 138.752 0 0 1-123.52-95.061334l-2.218667-7.509333-82.816-309.12a138.666667 138.666667 0 0 1 90.453333-167.594667l7.594667-2.218666 309.077333-82.816a138.666667 138.666667 0 0 1 167.594667 90.453333z"
-        p-id="863"
-      ></path>
-    </svg>
-  )
-}
diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx
deleted file mode 100644
index 63bf0c2c..00000000
--- a/src/components/icons/CopyIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react"
-
-export const CopyIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      {...props}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      p-id="5253"
-    >
-      <path
-        d="M832 128c-12.8-76.8-76.8-128-160-128h-448C102.4 0 0 102.4 0 224v448c0 76.8 57.6 140.8 128 160 12.8 76.8 76.8 128 160 128h512c89.6 0 160-70.4 160-160v-512c0-76.8-57.6-140.8-128-160zM64 672v-448C64 134.4 134.4 64 224 64h448c44.8 0 76.8 25.6 89.6 64H288C198.4 128 128 198.4 128 288v473.6c-38.4-12.8-64-44.8-64-89.6z m832 128c0 51.2-44.8 96-96 96h-512c-51.2 0-96-44.8-96-96v-512C192 236.8 236.8 192 288 192h512c51.2 0 96 44.8 96 96v512z"
-        p-id="5254"
-      ></path>
-    </svg>
-  )
-}
diff --git a/src/components/icons/LogoutIcon.tsx b/src/components/icons/LogoutIcon.tsx
deleted file mode 100644
index 278b366a..00000000
--- a/src/components/icons/LogoutIcon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react"
-
-export const LogoutIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      {...props}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      p-id="2564"
-    >
-      <path
-        d="M896 512c0-14.16-6.128-26.896-15.888-35.68l-160-144a48 48 0 0 0-64.224 71.36L722.912 464H432a48 48 0 1 0 0 96h290.912l-67.008 60.32a48 48 0 1 0 64.208 71.36l160-144A47.84 47.84 0 0 0 896 512zM416 832H224V192h192a48 48 0 1 0 0-96H176a48 48 0 0 0-48 48v736a48 48 0 0 0 48 48h240a48 48 0 1 0 0-96z"
-        fill=""
-        p-id="2565"
-      ></path>
-    </svg>
-  )
-}
diff --git a/src/components/icons/MoreIcon.tsx b/src/components/icons/MoreIcon.tsx
deleted file mode 100644
index 9a3e3391..00000000
--- a/src/components/icons/MoreIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react"
-
-export const MoreIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      {...props}
-      width="1em"
-      height="1em"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
-    </svg>
-  )
-}
diff --git a/src/components/icons/RSS3Icon.tsx b/src/components/icons/RSS3Icon.tsx
deleted file mode 100644
index 23e09a40..00000000
--- a/src/components/icons/RSS3Icon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react"
-
-export const RSS3Icon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
-  props,
-) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      {...props}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      p-id="6994"
-    >
-      <path
-        d="M139.093333 974.336a96.426667 96.426667 0 1 0 0-192.853333 96.426667 96.426667 0 0 0 0 192.853333zM926.122667 971.264c-26.453333 0-46.634667-20.224-46.634667-46.677333 0-433.962667-353.066667-788.608-788.608-788.608-26.453333 0-46.634667-20.224-46.634667-46.634667C44.202667 62.890667 64.426667 42.666667 90.88 42.666667 577.706667 42.666667 972.8 439.296 972.8 924.586667c0 26.453333-20.224 46.634667-46.677333 46.634666z"
-        p-id="6995"
-      ></path>
-      <path
-        d="M601.045333 972.8c-26.453333 0-46.634667-20.224-46.634666-46.677333 0-255.061333-208.426667-463.488-463.530667-463.488-26.453333 0-46.634667-20.224-46.634667-46.677334 0-26.453333 20.181333-46.634667 46.634667-46.634666 307.968 0 556.842667 250.410667 556.842667 556.8 0 24.917333-21.76 46.677333-46.677334 46.677333z"
-        p-id="6996"
-      ></path>
-    </svg>
-  )
-}
diff --git a/src/components/site/PostFooter.tsx b/src/components/site/PostFooter.tsx
index 146699ec..627444ef 100644
--- a/src/components/site/PostFooter.tsx
+++ b/src/components/site/PostFooter.tsx
@@ -1,6 +1,5 @@
 import { Note } from "~/lib/types"
 import { LikeIcon } from "~/components/icons/LikeIcon"
-import { CollectIcon } from "~/components/icons/CollectIcon"
 import {
   useLikePage,
   useUnlikePage,
@@ -17,6 +16,7 @@ import { useState, useEffect } from "react"
 import { Button } from "../ui/Button"
 import { useRouter } from "next/router"
 import { SITE_URL } from "~/lib/env"
+import { DuplicateIcon } from "@heroicons/react/solid"
 
 export const PostFooter: React.FC<{
   page?: Note
@@ -176,7 +176,7 @@ export const PostFooter: React.FC<{
             : {}
         }
       >
-        <CollectIcon className="mr-2 w-10 h-10" />
+        <DuplicateIcon className="mr-2 w-10 h-10" />
         <span>{mints.data?.count || 0}</span>
       </Button>
     </div>
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index be986c1e..b84bf626 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -25,10 +25,9 @@ import {
 } from "~/queries/site"
 import { useConnectModal } from "@rainbow-me/rainbowkit"
 import { Menu } from "@headlessui/react"
-import { MoreIcon } from "~/components/icons/MoreIcon"
-import { RSS3Icon } from "~/components/icons/RSS3Icon"
 import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
+import { DotsHorizontalIcon, RssIcon } from "@heroicons/react/solid"
 
 export type HeaderLinkType = {
   icon?: React.ReactNode
@@ -140,7 +139,7 @@ export const SiteHeader: React.FC<{
     },
     {
       text: "View on RSS3",
-      icon: <RSS3Icon />,
+      icon: <RssIcon className="w-4 h-4" />,
       url: `https://rss3.io/result?search=${site?.metadata?.owner}`,
     },
     {
@@ -223,7 +222,7 @@ export const SiteHeader: React.FC<{
                               e.stopPropagation()
                             }}
                           >
-                            <MoreIcon className="w-5 h-5" />
+                            <DotsHorizontalIcon className="w-5 h-5" />
                           </Button>
                         </Menu.Button>
                         <Menu.Items className="text-sm absolute z-20 left-0 top-8 bg-white shadow-modal rounded-lg overflow-hidden py-2 w-60 text-gray-500">