convert modal into widget

copy still needs tweaking

website/src/components/Dashboard/WelcomeCard.tsx

@@ -0,0 +1,52 @@
+import { Box, Button, Divider, Text, useColorMode } from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+import { useState } from "react";
+import { FiX } from "react-icons/fi";
+
+export function WelcomeCard() {
+  const { colorMode } = useColorMode();
+  const backgroundColor = colorMode === "light" ? "white" : "gray.700";
+  const titleColor = colorMode === "light" ? "blue.500" : "blue.300";
+
+  const { data: session } = useSession();
+
+  const [showCard, setShowCard] = useState("true");
+
+  if (!session) {
+    return <></>;
+  }
+  if (session && session.user && session.user.isNew)
+    return (
+      <>
+        <Box
+          bgGradient="linear(to-r, blue.300, purple.500)"
+          borderRadius="xl"
+          display={showCard}
+          p="1px"
+          shadow="base"
+          position="relative"
+        >
+          <Box bg={backgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
+            <Box pb="2">
+              <Text as="h1" fontWeight="extrabold" fontSize="3xl" color={titleColor}>
+                Welcome, {session.user.name || "Contributor"}!
+              </Text>
+            </Box>
+
+            <Box>
+              <Text>
+                Open Assistant is an open-source AI assistant that uses and trains advanced language models to
+                understand and respond to humans.
+              </Text>
+              <Divider my="4" />
+              <Text>Complete tasks to help train the model and earn points.</Text>
+            </Box>
+
+            <Button position="absolute" top="2" right="2" p="0" size="sm" onClick={() => setShowCard("none")}>
+              <FiX />
+            </Button>
+          </Box>
+        </Box>
+      </>
+    );
+}

website/src/components/Dashboard/WelcomeModal.tsx

@@ -1,64 +0,0 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-} from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
-import { useState } from "react";
-
-export function WelcomeModal() {
-  const { data: session } = useSession();
-
-  const [showModal, setShowModal] = useState(true);
-
-  if (!session) {
-    return <></>;
-  }
-  if (session && session.user && session.user.isNew)
-    return (
-      <>
-        <Modal isOpen={showModal} onClose={() => setShowModal(false)} isCentered>
-          <ModalOverlay backdropFilter="auto" backdropBlur="2px" />
-          <ModalContent borderRadius="xl">
-            <Box p="6" pb="0">
-              <ModalHeader>
-                <Text
-                  as="h1"
-                  fontWeight="extrabold"
-                  fontSize="3xl"
-                  bgGradient="linear(320deg, #7162D4, #3182CE)"
-                  bgClip="text"
-                >
-                  Welcome, {session.user.name || "Contributor"}!
-                </Text>
-              </ModalHeader>
-              <ModalCloseButton mt="1" />
-              <ModalBody mb="8">
-                <Box>
-                  <Text>
-                    Open Assistant is an open-source AI assistant that uses and trains advanced language models to
-                    understand and respond to humans.
-                  </Text>
-                  <Divider my="4" />
-                  <Text>Complete tasks to help train the model and earn points.</Text>
-                </Box>
-              </ModalBody>
-            </Box>
-            <ModalFooter p="8">
-              <Button colorScheme="blue" onClick={() => setShowModal(false)}>
-                Got it!
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      </>
-    );
-}

website/src/components/Dashboard/index.ts

@@ -1,3 +1,3 @@
 export { LeaderboardTable } from "./LeaderboardTable";
 export { TaskOption } from "./TaskOption";
-export { WelcomeModal } from "./WelcomeModal";
+export { WelcomeCard } from "./WelcomeCard";

website/src/pages/dashboard.tsx

@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import Head from "next/head";
-import { LeaderboardTable, TaskOption, WelcomeModal } from "src/components/Dashboard";
+import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
 import { getDashboardLayout } from "src/components/Layout";
 import { TaskCategory } from "src/components/Tasks/TaskTypes";
 
@@ -12,7 +12,7 @@ const Dashboard = () => {
         <meta name="description" content="Chat with Open Assistant and provide feedback." />
       </Head>
       <Flex direction="column" gap="10">
-        <WelcomeModal />
+        <WelcomeCard />
         <TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
         <LeaderboardTable />
       </Flex>