diff --git a/website/src/components/Dashboard/LeaderboardTable.tsx b/website/src/components/Dashboard/LeaderboardTable.tsx index b958d4b7..cb8de07f 100644 --- a/website/src/components/Dashboard/LeaderboardTable.tsx +++ b/website/src/components/Dashboard/LeaderboardTable.tsx @@ -54,7 +54,7 @@ export function LeaderboardTable() {
Top 5 Contributors - + View All -> diff --git a/website/src/components/Dashboard/TaskOption.tsx b/website/src/components/Dashboard/TaskOption.tsx index 43bcabea..1b421126 100644 --- a/website/src/components/Dashboard/TaskOption.tsx +++ b/website/src/components/Dashboard/TaskOption.tsx @@ -7,11 +7,11 @@ export const TaskOption = ({ displayTaskCategories }) => { const backgroundColor = useColorModeValue("white", "gray.700"); return ( - + {displayTaskCategories.map((category, categoryIndex) => (
{category} - + {TaskTypes.filter((task) => task.category === category).map((item, itemIndex) => ( { _hover={{ backgroundColor: "blue.600" }} > - Go + Go -> diff --git a/website/src/components/Header/UserMenu.tsx b/website/src/components/Header/UserMenu.tsx index 2f59efb1..b0cce291 100644 --- a/website/src/components/Header/UserMenu.tsx +++ b/website/src/components/Header/UserMenu.tsx @@ -68,9 +68,8 @@ export function UserMenu() { > @@ -88,7 +87,7 @@ export function UserMenu() {
- {item.name} + {item.name}
))} @@ -101,7 +100,7 @@ export function UserMenu() {
- Sign Out + Sign Out
diff --git a/website/src/components/Layout.tsx b/website/src/components/Layout.tsx index c4450f58..b8e196cd 100644 --- a/website/src/components/Layout.tsx +++ b/website/src/components/Layout.tsx @@ -1,7 +1,7 @@ // https://nextjs.org/docs/basic-features/layouts import type { NextPage } from "next"; -import { FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi"; +import { FiBarChart2, FiLayout, FiMessageSquare, FiUsers } from "react-icons/fi"; import { Header } from "src/components/Header"; import { Footer } from "./Footer"; @@ -44,6 +44,12 @@ export const getDashboardLayout = (page: React.ReactElement) => ( desc: "Messages Dashboard", icon: FiMessageSquare, }, + { + label: "Leaderboard", + pathname: "/leaderboard", + desc: "User Leaderboard", + icon: FiBarChart2, + }, ]} > {page} diff --git a/website/src/components/Loading/MessageLoading.jsx b/website/src/components/Loading/MessageLoading.jsx new file mode 100644 index 00000000..3db8c68b --- /dev/null +++ b/website/src/components/Loading/MessageLoading.jsx @@ -0,0 +1,19 @@ +import { Box, Progress, useColorModeValue } from "@chakra-ui/react"; + +export const MessageLoading = () => { + const loadingColor = useColorModeValue("gray.200", "gray.600"); + + return ( + + + + + + + + + + + + ); +}; diff --git a/website/src/components/Messages.tsx b/website/src/components/Messages.tsx index cf83010c..769f0342 100644 --- a/website/src/components/Messages.tsx +++ b/website/src/components/Messages.tsx @@ -1,5 +1,4 @@ -import { Grid } from "@chakra-ui/react"; -import { forwardRef, useColorMode } from "@chakra-ui/react"; +import { Box, forwardRef, Grid, useColorMode } from "@chakra-ui/react"; import { useMemo } from "react"; import { Message } from "src/types/Conversation"; @@ -23,16 +22,16 @@ export const MessageView = forwardRef(({ is_assistant, text }: M const bgColor = useMemo(() => { if (colorMode === "light") { - return is_assistant ? "bg-slate-800" : "bg-sky-900"; + return is_assistant ? "gray.800" : "blue.600"; } else { - return is_assistant ? "bg-black" : "bg-sky-900"; + return is_assistant ? "black" : "blue.600"; } }, [colorMode, is_assistant]); return ( -
+ {text} -
+ ); }); diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx index 6d1ce41c..e2d78e30 100644 --- a/website/src/components/Messages/MessageTableEntry.tsx +++ b/website/src/components/Messages/MessageTableEntry.tsx @@ -1,6 +1,6 @@ import { Avatar, HStack, LinkBox, LinkOverlay, useColorModeValue } from "@chakra-ui/react"; -import Link from "next/link"; import { boolean } from "boolean"; +import Link from "next/link"; import { FlaggableElement } from "src/components/FlaggableElement"; interface Message { @@ -27,7 +27,7 @@ export function MessageTableEntry(props: MessageTableEntryProps) { /> - + {item.text} diff --git a/website/src/components/RankItem.tsx b/website/src/components/RankItem.tsx index f424fa26..daed0576 100644 --- a/website/src/components/RankItem.tsx +++ b/website/src/components/RankItem.tsx @@ -1,11 +1,57 @@ -const RankItem = ({ username, score }) => { +import { Avatar, Box, GridItem, Text } from "@chakra-ui/react"; + +const RankItem = () => { + const leaderInfo = [ + { + username: "fozziethebeat", + rank: 1, + score: 530, + medal: "\uD83E\uDD47", + }, + { + username: "k_nearest", + rank: 2, + score: 420, + medal: "\uD83E\uDD48", + }, + { + username: "zu", + rank: 3, + score: 160, + medal: "\uD83E\uDD49", + }, + { + username: "Abd", + rank: 4, + score: 140, + medal: "", + }, + ]; + return ( -
-
1
-
{username}
-
{score}
-
gold
-
+ <> + {leaderInfo.map((item, index) => ( + + + + + {item.username} + + + + + {item.rank} + + + + {item.score} + + + {item.medal} + + + ))} + ); }; diff --git a/website/src/components/SideMenuLayout.tsx b/website/src/components/SideMenuLayout.tsx index d69b64d4..d2220f36 100644 --- a/website/src/components/SideMenuLayout.tsx +++ b/website/src/components/SideMenuLayout.tsx @@ -16,7 +16,7 @@ export const SideMenuLayout = (props: SideMenuLayoutProps) => { - {props.children} + {props.children} ); diff --git a/website/src/components/Sortable/SortableItem.tsx b/website/src/components/Sortable/SortableItem.tsx index da691de3..d626b3a9 100644 --- a/website/src/components/Sortable/SortableItem.tsx +++ b/website/src/components/Sortable/SortableItem.tsx @@ -1,35 +1,44 @@ -import { Button } from "@chakra-ui/react"; -import { useColorMode } from "@chakra-ui/react"; +import { Box, useColorModeValue } from "@chakra-ui/react"; import { useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; -import { PropsWithChildren } from "react"; +import { PropsWithChildren, useState } from "react"; import { RxDragHandleDots2 } from "react-icons/rx"; export const SortableItem = ({ children, id }: PropsWithChildren<{ id: number }>) => { + const backgroundColor = useColorModeValue("gray.700", "gray.500"); + const textColor = useColorModeValue("white", "white"); + const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }); const style = { - transform: CSS.Transform.toString(transform), + transform: CSS.Translate.toString(transform), transition, touchAction: "none", }; - const { colorMode } = useColorMode(); - const themedClasses = - colorMode === "light" - ? "bg-slate-600 hover:bg-slate-500 text-white" - : "bg-black hover:bg-slate-900 text-white ring-1 ring-white/30 ring-inset hover:ring-slate-200/50"; + const [grabbing, setGrabbing] = useState(false); return ( -
  • setGrabbing(true)} + onMouseUp={() => setGrabbing(false)} + {...attributes} + {...listeners} ref={setNodeRef} style={style} + shadow="base" > - + + + {children} -
    • + ); }; diff --git a/website/src/components/Survey/SurveyCard.tsx b/website/src/components/Survey/SurveyCard.tsx index 25699c3f..1126fa0b 100644 --- a/website/src/components/Survey/SurveyCard.tsx +++ b/website/src/components/Survey/SurveyCard.tsx @@ -1,4 +1,4 @@ -import { useColorMode } from "@chakra-ui/react"; +import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react"; interface SurveyCardProps { className?: string; @@ -6,15 +6,18 @@ interface SurveyCardProps { } export const SurveyCard = (props: SurveyCardProps) => { - const extraClases = props.className || ""; - const { colorMode } = useColorMode(); + const backgroundColor = useColorModeValue("white", "gray.800"); - const baseCardClasses = "rounded-lg h-full block p-6"; - const cardClases = - colorMode === "light" - ? `${baseCardClasses} bg-slate-50 text-gray-800 shadow-lg ${extraClases}` - : // `${baseCardClasses} bg-slate-800 text-white shadow-xl${extraClases}`; - `${baseCardClasses} bg-slate-800 text-slate-400 shadow-xl ring-1 ring-white/10 ring-inset ${extraClases}`; + const BoxClasses: BoxProps = { + p: "6", + gap: "2", + borderRadius: "xl", + shadow: "base", + }; - return
    {props.children}
    ; + return ( + + {props.children} + + ); }; diff --git a/website/src/components/Survey/TaskControls.tsx b/website/src/components/Survey/TaskControls.tsx index f451d871..91d6ffda 100644 --- a/website/src/components/Survey/TaskControls.tsx +++ b/website/src/components/Survey/TaskControls.tsx @@ -1,6 +1,4 @@ -import { useColorMode } from "@chakra-ui/react"; -import { Flex } from "@chakra-ui/react"; -import clsx from "clsx"; +import { Box, Flex, useColorModeValue } from "@chakra-ui/react"; import { SkipButton } from "src/components/Buttons/Skip"; import { SubmitButton } from "src/components/Buttons/Submit"; import { TaskInfo } from "src/components/TaskInfo/TaskInfo"; @@ -18,21 +16,21 @@ export interface TaskControlsProps { } export const TaskControls = (props: TaskControlsProps) => { - const { colorMode } = useColorMode(); - const isLightMode = colorMode === "light"; + const backgroundColor = useColorModeValue("white", "gray.800"); + return ( -
    - + {props.taskStatus !== "SUBMITTED" ? ( { )} -
    + ); }; diff --git a/website/src/components/Survey/TrackedTextarea.tsx b/website/src/components/Survey/TrackedTextarea.tsx index d20107ac..f408e168 100644 --- a/website/src/components/Survey/TrackedTextarea.tsx +++ b/website/src/components/Survey/TrackedTextarea.tsx @@ -1,4 +1,4 @@ -import { Progress, Stack, Textarea, TextareaProps } from "@chakra-ui/react"; +import { Progress, Stack, Textarea, TextareaProps, useColorModeValue } from "@chakra-ui/react"; interface TrackedTextboxProps { text: string; @@ -12,6 +12,8 @@ interface TrackedTextboxProps { } export const TrackedTextarea = (props: TrackedTextboxProps) => { + const backgroundColor = useColorModeValue("gray.100", "gray.900"); + const wordCount = (props.text.match(/\w+/g) || []).length; let progressColor: string; @@ -28,8 +30,23 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => { return ( -