From d466e63d66ef9081b981c7a0598f7ec24cff867c Mon Sep 17 00:00:00 2001 From: notmd Date: Sun, 22 Jan 2023 20:35:31 +0700 Subject: [PATCH 1/2] wip --- website/package-lock.json | 15 +++++++++++++++ website/package.json | 1 + website/src/components/CallToAction.tsx | 5 +++-- website/src/components/EmptyState.tsx | 7 +++---- website/src/components/Header/Header.tsx | 4 ++-- website/src/components/Header/UserMenu.tsx | 14 +++++++------- website/src/components/Layout.tsx | 12 ++++++------ website/src/components/SideMenu.tsx | 9 ++++----- website/src/components/Sortable/SortableItem.tsx | 4 ++-- website/src/components/Survey/TaskControls.tsx | 10 ++++++++-- .../components/Tasks/TaskHeader/TaskHeader.tsx | 4 ++-- website/src/pages/404.tsx | 6 +++--- website/src/pages/500.tsx | 9 +++------ website/src/pages/account/index.tsx | 6 +++--- 14 files changed, 62 insertions(+), 44 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index 5c5dc795..65fde28e 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -32,6 +32,7 @@ "focus-visible": "^5.2.0", "framer-motion": "^6.5.1", "install": "^0.13.0", + "lucide-react": "^0.105.0", "next": "13.0.6", "next-auth": "^4.18.6", "next-i18next": "^13.0.3", @@ -26694,6 +26695,14 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.105.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.105.0.tgz", + "integrity": "sha512-iHaIkd4Wq6aNIVrFMXt3If8E/+2lnJd4WlCyntoJNIzZ8nWhdSSHWpsw7XM4rlw2319LZ2t4WLdnM8Z0ECDTOQ==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", @@ -57869,6 +57878,12 @@ "yallist": "^3.0.2" } }, + "lucide-react": { + "version": "0.105.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.105.0.tgz", + "integrity": "sha512-iHaIkd4Wq6aNIVrFMXt3If8E/+2lnJd4WlCyntoJNIzZ8nWhdSSHWpsw7XM4rlw2319LZ2t4WLdnM8Z0ECDTOQ==", + "requires": {} + }, "lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", diff --git a/website/package.json b/website/package.json index 8866a9e2..c0195163 100644 --- a/website/package.json +++ b/website/package.json @@ -49,6 +49,7 @@ "focus-visible": "^5.2.0", "framer-motion": "^6.5.1", "install": "^0.13.0", + "lucide-react": "^0.105.0", "next": "13.0.6", "next-auth": "^4.18.6", "next-i18next": "^13.0.3", diff --git a/website/src/components/CallToAction.tsx b/website/src/components/CallToAction.tsx index e374a471..ddeed6b7 100644 --- a/website/src/components/CallToAction.tsx +++ b/website/src/components/CallToAction.tsx @@ -1,7 +1,8 @@ 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, FaGithub } from "react-icons/fa"; +import { FaDiscord } from "react-icons/fa"; import { Container } from "./Container"; @@ -81,7 +82,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("github")} diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx index 14715518..d2acea7f 100644 --- a/website/src/components/EmptyState.tsx +++ b/website/src/components/EmptyState.tsx @@ -1,11 +1,10 @@ import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react"; +import { AlertTriangle, LucideIcon } from "lucide-react"; import { useRouter } from "next/router"; -import { FiAlertTriangle } from "react-icons/fi"; -import { IconType } from "react-icons/lib"; type EmptyStateProps = { text: string; - icon: IconType; + icon: LucideIcon; }; export const EmptyState = (props: EmptyStateProps) => { @@ -26,5 +25,5 @@ export const EmptyState = (props: EmptyStateProps) => { }; export const TaskEmptyState = () => { - return ; + return ; }; diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx index 64614578..0d70a442 100644 --- a/website/src/components/Header/Header.tsx +++ b/website/src/components/Header/Header.tsx @@ -1,10 +1,10 @@ import { Box, Button, Flex, Text } from "@chakra-ui/react"; +import { User } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useSession } from "next-auth/react"; import { useTranslation } from "next-i18next"; import { Flags } from "react-feature-flags"; -import { FaUser } from "react-icons/fa"; import { LanguageSelector } from "src/components/LanguageSelector"; import { UserMenu } from "./UserMenu"; @@ -17,7 +17,7 @@ function AccountButton() { return ( - diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx index 6fdde69e..bc2a377e 100644 --- a/website/src/components/Header/UserMenu.tsx +++ b/website/src/components/Header/UserMenu.tsx @@ -11,11 +11,11 @@ import { Text, useColorModeValue, } from "@chakra-ui/react"; +import { AlertTriangle, Layout, LogOut, Settings, Shield } from "lucide-react"; import NextLink from "next/link"; import { signOut, useSession } from "next-auth/react"; import { useTranslation } from "next-i18next"; import React, { ElementType, useCallback } from "react"; -import { FiAlertTriangle, FiLayout, FiLogOut, FiSettings, FiShield } from "react-icons/fi"; interface MenuOption { name: string; @@ -41,21 +41,21 @@ export function UserMenu() { name: t("dashboard"), href: "/dashboard", desc: t("dashboard"), - icon: FiLayout, + icon: Layout, isExternal: false, }, { name: t("account_settings"), href: "/account", desc: t("account_settings"), - icon: FiSettings, + icon: Settings, isExternal: false, }, { name: t("report_a_bug"), href: "https://github.com/LAION-AI/Open-Assistant/issues/new/choose", desc: t("report_a_bug"), - icon: FiAlertTriangle, + icon: AlertTriangle, isExternal: true, }, ]; @@ -65,7 +65,7 @@ export function UserMenu() { name: t("admin_dashboard"), href: "/admin", desc: t("admin_dashboard"), - icon: FiShield, + icon: Shield, isExternal: false, }); } @@ -98,7 +98,7 @@ export function UserMenu() { _hover={{ textDecoration: "none" }} > - @@ -106,7 +106,7 @@ export function UserMenu() { - diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx index 55085550..1b5bf430 100644 --- a/website/src/components/Layout.tsx +++ b/website/src/components/Layout.tsx @@ -1,8 +1,8 @@ // https://nextjs.org/docs/basic-features/layouts import { Box, Grid } from "@chakra-ui/react"; +import { Activity, BarChart2, Layout, MessageSquare, Users } from "lucide-react"; import type { NextPage } from "next"; -import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers, FiActivity } from "react-icons/fi"; import { Header } from "src/components/Header"; import { SlimFooter } from "./Dashboard/SlimFooter"; @@ -38,19 +38,19 @@ export const getDashboardLayout = (page: React.ReactElement) => ( label: "Dashboard", pathname: "/dashboard", desc: "Dashboard Home", - icon: FiLayout, + icon: Layout, }, { label: "Messages", pathname: "/messages", desc: "Messages Dashboard", - icon: FiMessageSquare, + icon: MessageSquare, }, { label: "Leaderboard", pathname: "/leaderboard", desc: "User Leaderboard", - icon: FiBarChart2, + icon: BarChart2, }, ]} > @@ -73,13 +73,13 @@ export const getAdminLayout = (page: React.ReactElement) => ( label: "Users", pathname: "/admin", desc: "Users Dashboard", - icon: FiUsers, + icon: Users, }, { label: "Status", pathname: "/admin/status", desc: "Status Dashboard", - icon: FiActivity, + icon: Activity, }, ]} > diff --git a/website/src/components/SideMenu.tsx b/website/src/components/SideMenu.tsx index 3722eaa8..10e83ce4 100644 --- a/website/src/components/SideMenu.tsx +++ b/website/src/components/SideMenu.tsx @@ -1,15 +1,14 @@ import { Box, Button, Text, Tooltip, useColorMode } from "@chakra-ui/react"; +import { LucideIcon, Sun } from "lucide-react"; import Link from "next/link"; import { useRouter } from "next/router"; -import { FiSun } from "react-icons/fi"; -import { IconType } from "react-icons/lib"; import { colors } from "styles/Theme/colors"; export interface MenuButtonOption { label: string; pathname: string; desc: string; - icon: IconType; + icon: LucideIcon; } export interface SideMenuProps { @@ -47,7 +46,7 @@ export function SideMenu(props: SideMenuProps) { bg={router.pathname === item.pathname ? "blue.500" : null} _hover={router.pathname === item.pathname ? { bg: "blue.600" } : null} > - + 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 (