From d466e63d66ef9081b981c7a0598f7ec24cff867c Mon Sep 17 00:00:00 2001 From: notmd Date: Sun, 22 Jan 2023 20:35:31 +0700 Subject: [PATCH] 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} > - +