Animate AddQuestion modal

Author: tingkai-mai

frontend/package-lock.json

@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "framer-motion": "^11.9.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.445.0",
     "next": "14.2.11",

frontend/package.json

@@ -88,7 +88,7 @@ const AddQuestionDialog = ({ setClose }: AddQuestionDialogProp) => {
   }
 
   return (
-    <div className="bg-primary-700 p-10 w-[40vw] h-[80vh] rounded-lg">
+    <div className="bg-primary-700 p-10 w-[60vw] h-[80vh] rounded-lg">
       <div className="text-[32px] font-semibold text-yellow-500">
         Add Question
       </div>
@@ -172,7 +172,8 @@ const AddQuestionDialog = ({ setClose }: AddQuestionDialogProp) => {
                   <Textarea
                     placeholder="Type your description here."
                     className="text-white bg-primary-800"
-                    {...field} // Bind the Textarea to form control
+                    rows={6}
+                    {...field}
                   />
                 </FormControl>
                 <FormMessage />

frontend/src/app/(auth)/leetcode-dashboard/AddQuestionDialog.tsx

@@ -7,6 +7,7 @@ import Container from "@/components/ui/Container";
 import { PlusIcon } from "lucide-react";
 import { useState } from "react";
 import Modal from "react-modal";
+import { motion } from "framer-motion";
 
 const LeetcodeDashboardHeader = () => {
   return (
@@ -34,6 +35,13 @@ const LeetcodeDashboard = () => {
     setIsOpen(false);
   }
 
+  // Define modal animation
+  const modalAnimation = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.9 },
+  };
+
   return (
     <Container>
       <LeetcodeDashboardHeader />
@@ -48,14 +56,24 @@ const LeetcodeDashboard = () => {
         <Modal
           isOpen={modalIsOpen}
           onRequestClose={closeModal}
-          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          ariaHideApp={false}
+          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-none"
           style={{
             overlay: {
               backgroundColor: "rgba(29, 36, 51, 0.8)",
             },
           }}
         >
-          <AddQuestionDialog setClose={closeModal} />
+          {/* Animated modal content */}
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            variants={modalAnimation}
+            transition={{ duration: 0.3 }}
+          >
+            <AddQuestionDialog setClose={closeModal} />
+          </motion.div>
         </Modal>
       </div>
       <LeetcodeDashboardTable />

frontend/src/app/(auth)/leetcode-dashboard/page.tsx

@@ -1,15 +1,16 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-yellow-500 text-black hover:bg-yellow-300 hover:text-primary-700",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
@@ -31,26 +32,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };