From 204e11b400a30feb0040bb324a0baccf4810bb00 Mon Sep 17 00:00:00 2001 From: notmd Date: Sun, 22 Jan 2023 21:02:52 +0700 Subject: [PATCH] migrate all icon to lucide --- website/package-lock.json | 15 --------------- website/package.json | 1 - website/src/components/CallToAction.tsx | 4 ++-- website/src/components/DataTable.tsx | 4 ++-- website/src/components/FlaggableElement.tsx | 4 ++-- website/src/components/Icons/Discord.tsx | 16 ++++++++++++++++ website/src/components/UserTable.tsx | 4 ++-- website/src/pages/auth/signin.tsx | 15 ++++++++------- 8 files changed, 32 insertions(+), 31 deletions(-) create mode 100644 website/src/components/Icons/Discord.tsx diff --git a/website/package-lock.json b/website/package-lock.json index 7091406b..71177bf5 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -46,7 +46,6 @@ "react-feature-flags": "^1.0.0", "react-hook-form": "^7.42.1", "react-i18next": "^12.1.4", - "react-icons": "^4.7.1", "react-table": "^7.8.0", "sharp": "^0.31.3", "swr": "^2.0.0", @@ -32666,14 +32665,6 @@ } } }, - "node_modules/react-icons": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", - "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", - "peerDependencies": { - "react": "*" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -62158,12 +62149,6 @@ "html-parse-stringify": "^3.0.1" } }, - "react-icons": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", - "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", - "requires": {} - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/website/package.json b/website/package.json index 0e710439..f2499920 100644 --- a/website/package.json +++ b/website/package.json @@ -63,7 +63,6 @@ "react-feature-flags": "^1.0.0", "react-hook-form": "^7.42.1", "react-i18next": "^12.1.4", - "react-icons": "^4.7.1", "react-table": "^7.8.0", "sharp": "^0.31.3", "swr": "^2.0.0", diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx index ddeed6b7..3b132797 100644 --- a/website/src/components/CallToAction.tsx +++ b/website/src/components/CallToAction.tsx @@ -2,9 +2,9 @@ import { Box, Link, Text, useColorMode } from "@chakra-ui/react"; import { Github } from "lucide-react"; import { useTranslation } from "next-i18next"; import { useId } from "react"; -import { FaDiscord } from "react-icons/fa"; import { Container } from "./Container"; +import { Discord } from "./Icons/Discord"; const CIRCLE_HEIGHT = 558; const CIRCLE_WIDTH = 558; @@ -71,7 +71,7 @@ export function CallToAction() { type="button" className="mb-2 ml-6 flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" > - + {t("discord")} diff --git a/website/src/components/DataTable.tsx b/website/src/components/DataTable.tsx index f9ef4e49..466393eb 100644 --- a/website/src/components/DataTable.tsx +++ b/website/src/components/DataTable.tsx @@ -25,8 +25,8 @@ import { useDisclosure, } from "@chakra-ui/react"; import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; +import { Filter } from "lucide-react"; import { ChangeEvent, ReactNode } from "react"; -import { FaFilter } from "react-icons/fa"; import { useDebouncedCallback } from "use-debounce"; export type DataTableColumnDef = ColumnDef & { @@ -148,7 +148,7 @@ const FilterModal = ({ diff --git a/website/src/components/FlaggableElement.tsx b/website/src/components/FlaggableElement.tsx index 7e28f2c2..58c7559f 100644 --- a/website/src/components/FlaggableElement.tsx +++ b/website/src/components/FlaggableElement.tsx @@ -22,8 +22,8 @@ import { } from "@chakra-ui/react"; import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid"; import clsx from "clsx"; +import { AlertCircle } from "lucide-react"; import { useEffect, useReducer } from "react"; -import { FiAlertCircle } from "react-icons/fi"; import { get, post } from "src/lib/api"; import { colors } from "src/styles/Theme/colors"; import { Message } from "src/types/Conversation"; @@ -154,7 +154,7 @@ export const FlaggableElement = (props: FlaggableElementProps) => { - diff --git a/website/src/components/Icons/Discord.tsx b/website/src/components/Icons/Discord.tsx new file mode 100644 index 00000000..ea1118fb --- /dev/null +++ b/website/src/components/Icons/Discord.tsx @@ -0,0 +1,16 @@ +import { LucideIcon } from "lucide-react"; + +export const Discord: LucideIcon = ({ size = 24, ...rest }) => { + return ( + + + + ); +}; diff --git a/website/src/components/UserTable.tsx b/website/src/components/UserTable.tsx index df412bbc..5e5828ea 100644 --- a/website/src/components/UserTable.tsx +++ b/website/src/components/UserTable.tsx @@ -1,8 +1,8 @@ import { IconButton } from "@chakra-ui/react"; import { createColumnHelper } from "@tanstack/react-table"; +import { Pencil } from "lucide-react"; import Link from "next/link"; import { memo, useState } from "react"; -import { FaPen } from "react-icons/fa"; import { get } from "src/lib/api"; import { FetchUsersResponse } from "src/lib/oasst_api_client"; import type { User } from "src/types/Users"; @@ -49,7 +49,7 @@ const columns: DataTableColumnDef[] = [ as={Link} href={`/admin/manage_user/${getValue()}`} aria-label="Manage" - icon={} + icon={} > ), header: "Update", diff --git a/website/src/pages/auth/signin.tsx b/website/src/pages/auth/signin.tsx index e3757190..d171182d 100644 --- a/website/src/pages/auth/signin.tsx +++ b/website/src/pages/auth/signin.tsx @@ -1,17 +1,18 @@ import { Button, ButtonProps, Input, Stack, useColorModeValue } from "@chakra-ui/react"; import { useColorMode } from "@chakra-ui/react"; +import { Bug, Github, Mail } from "lucide-react"; import { GetServerSideProps } from "next"; import Head from "next/head"; import Link from "next/link"; import { useRouter } from "next/router"; import { ClientSafeProvider, getProviders, signIn } from "next-auth/react"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; -import { FaBug, FaDiscord, FaEnvelope, FaGithub } from "react-icons/fa"; import { AuthLayout } from "src/components/AuthLayout"; import { Footer } from "src/components/Footer"; import { Header } from "src/components/Header"; +import { Discord } from "src/components/Icons/Discord"; import { Role, RoleSelect } from "src/components/RoleSelect"; export type SignInErrorTypes = @@ -89,7 +90,7 @@ function Signin({ providers }: SigninProps) { placeholder="Email Address" {...register("email")} /> - }> + }> Continue with Email @@ -103,7 +104,7 @@ function Signin({ providers }: SigninProps) { bg: "#454FBF", }} size="lg" - leftIcon={} + leftIcon={} color="white" onClick={() => signIn(discord.id, { callbackUrl: "/" })} // isDisabled="false" @@ -119,7 +120,7 @@ function Signin({ providers }: SigninProps) { bg: "#101010", }} size={"lg"} - leftIcon={} + leftIcon={} colorScheme="blue" // isDisabled="false" > @@ -165,7 +166,7 @@ const SigninButton = (props: ButtonProps) => { return (