This commit is contained in:
notmd
2023-01-22 20:35:31 +07:00
parent c0391a6df9
commit d466e63d66
14 changed files with 62 additions and 44 deletions
+15
View File
@@ -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",
+1
View File
@@ -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",
+3 -2
View File
@@ -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"
>
<FaGithub size={25} />
<Github size={25} />
<Text as="span" className="text-lg ml-3">
{t("github")}
</Text>
+3 -4
View File
@@ -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 <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
return <EmptyState text="Looks like no tasks were found." icon={AlertTriangle} />;
};
+2 -2
View File
@@ -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 (
<Link href="/auth/signin" aria-label="Home">
<Flex alignItems="center">
<Button variant="outline" leftIcon={<FaUser />}>
<Button variant="outline" leftIcon={<User size={"20"} />}>
Sign in
</Button>
</Flex>
+7 -7
View File
@@ -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" }}
>
<MenuItem gap="3" borderRadius="md" p="4">
<item.icon className="text-blue-500" aria-hidden="true" />
<item.icon size="1em" className="text-blue-500" aria-hidden="true" />
<Text>{item.name}</Text>
</MenuItem>
</Link>
@@ -106,7 +106,7 @@ export function UserMenu() {
</MenuGroup>
<MenuDivider />
<MenuItem gap="3" borderRadius="md" p="4" onClick={handleSignOut}>
<FiLogOut className="text-blue-500" aria-hidden="true" />
<LogOut size="1em" className="text-blue-500" aria-hidden="true" />
<Text>{t("sign_out")}</Text>
</MenuItem>
</MenuList>
+6 -6
View File
@@ -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,
},
]}
>
+4 -5
View File
@@ -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}
>
<item.icon className={router.pathname === item.pathname ? "text-blue-200" : null} />
<item.icon size={"1em"} className={router.pathname === item.pathname ? "text-blue-200" : null} />
<Text
fontWeight="normal"
color={router.pathname === item.pathname ? "white" : null}
@@ -63,7 +62,7 @@ export function SideMenu(props: SideMenuProps) {
<div>
<Tooltip fontFamily="inter" label="Toggle Dark Mode" placement="right" className="hidden lg:hidden sm:block">
<Button size="lg" width="full" justifyContent="center" onClick={toggleColorMode} gap="2">
<FiSun />
<Sun size={"1em"} />
<Text fontWeight="normal" className="hidden lg:block">
{colorMode === "light" ? "Dark Mode" : "Light Mode"}
</Text>
@@ -1,8 +1,8 @@
import { Box, useColorModeValue } from "@chakra-ui/react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { GripVertical } from "lucide-react";
import { PropsWithChildren, useState } from "react";
import { RxDragHandleDots2 } from "react-icons/rx";
export const SortableItem = ({
children,
@@ -45,7 +45,7 @@ export const SortableItem = ({
style={style}
shadow="base"
>
<Box pr="4">{isEditable ? <RxDragHandleDots2 size="20px" /> : `${index + 1}.`}</Box>
<Box pr="4">{isEditable ? <GripVertical size="20px" /> : `${index + 1}.`}</Box>
{children}
</Box>
);
@@ -1,5 +1,5 @@
import { Box, Flex, IconButton, Tooltip, useColorModeValue } from "@chakra-ui/react";
import { FiEdit2 } from "react-icons/fi";
import { Edit2 } from "lucide-react";
import { SkipButton } from "src/components/Buttons/Skip";
import { SubmitButton } from "src/components/Buttons/Submit";
import { TaskInfo } from "src/components/TaskInfo/TaskInfo";
@@ -36,7 +36,13 @@ export const TaskControls = (props: TaskControlsProps) => {
{props.taskStatus === "REVIEW" || props.taskStatus === "SUBMITTED" ? (
<>
<Tooltip label="Edit">
<IconButton size="lg" data-cy="edit" aria-label="edit" onClick={props.onEdit} icon={<FiEdit2 />} />
<IconButton
size="lg"
data-cy="edit"
aria-label="edit"
onClick={props.onEdit}
icon={<Edit2 size="1em" />}
/>
</Tooltip>
<SubmitButton
colorScheme="green"
@@ -1,5 +1,5 @@
import { HStack, IconButton, Link, Stack, Text, useColorModeValue } from "@chakra-ui/react";
import { FiHelpCircle } from "react-icons/fi";
import { HelpCircle } from "lucide-react";
import type { TaskInfo } from "src/components/Tasks/TaskTypes";
interface TaskHeaderProps {
@@ -22,7 +22,7 @@ const TaskHeader = ({ taskType }: TaskHeaderProps) => {
{taskType.label}
</Text>
<Link href={taskType.help_link} isExternal>
<IconButton variant="ghost" aria-label="More Information" icon={<FiHelpCircle />} />
<IconButton variant="ghost" aria-label="More Information" icon={<HelpCircle size="1em" />} />
</Link>
</HStack>
<Text fontSize="md" color={labelColor}>
+3 -3
View File
@@ -1,6 +1,6 @@
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import { AlertTriangle } from "lucide-react";
import Head from "next/head";
import { FiAlertTriangle } from "react-icons/fi";
import { EmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
@@ -13,12 +13,12 @@ function Error() {
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />
<EmptyState text="Sorry, the page you are looking for does not exist." icon={AlertTriangle} />
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
width="fit-content"
leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
leftIcon={<AlertTriangle size={"1em"} className="text-blue-500" aria-hidden="true" />}
variant="solid"
size="xs"
>
+3 -6
View File
@@ -1,6 +1,6 @@
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import { AlertTriangle } from "lucide-react";
import Head from "next/head";
import { FiAlertTriangle } from "react-icons/fi";
import { EmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
@@ -13,15 +13,12 @@ function ServerError() {
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<EmptyState
text="Sorry, we encountered a server error. We're not sure what went wrong."
icon={FiAlertTriangle}
/>
<EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={AlertTriangle} />
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
width="fit-content"
leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
leftIcon={<AlertTriangle size="1em" className="text-blue-500" aria-hidden="true" />}
variant="solid"
size="xs"
>
+3 -3
View File
@@ -1,10 +1,10 @@
import { Button, Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
import { Divider, Flex, Grid, Icon, Text } from "@chakra-ui/react";
import Head from "next/head";
import Link from "next/link";
import { useSession } from "next-auth/react";
import React from "react";
export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props";
import { MdOutlineEdit } from "react-icons/md";
import { Pencil } from "lucide-react";
import { SurveyCard } from "src/components/Survey/SurveyCard";
export default function Account() {
@@ -34,7 +34,7 @@ export default function Account() {
<Flex gap={2}>
{session.user.name ?? "(No username)"}
<Link href="/account/edit">
<Icon boxSize={5} as={MdOutlineEdit} />
<Icon boxSize={5} as={Pencil} size="1em" />
</Link>
</Flex>
<Text as="b">Email</Text>