feat: improve activity type chooser UI

front/components/Pages/CourseEdit/NewActivity.tsx

@@ -1,25 +1,38 @@
 import React, { useState } from "react";
 import { ArrowLeftIcon, Cross1Icon } from "@radix-ui/react-icons";
-import styled from "styled-components";
+import DynamicPageActivityImage from "public/activities_types/dynamic-page-activity.png";
+import VideoPageActivityImage from "public//activities_types/video-page-activity.png";
+import { styled, keyframes } from '@stitches/react';
 import DynamicCanvaModal from "./NewActivityModal/DynamicCanva";
 import VideoModal from "./NewActivityModal/Video";
+import Image from "next/image";
 
 function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chapterId }: any) {
   const [selectedView, setSelectedView] = useState("home");
 
+  
   return (
     <div>
-      <button onClick={() => { setSelectedView("home") }}>
-        <ArrowLeftIcon />
-      </button>
-      <button onClick={closeModal}>
-        <Cross1Icon />
-      </button>
-
       {selectedView === "home" && (
         <ActivityChooserWrapper>
-          <ActivityButton onClick={() => { setSelectedView("dynamic") }}>✨📄</ActivityButton>
-          <ActivityButton onClick={() => { setSelectedView("video") }}>📹</ActivityButton>
+          <ActivityOption onClick={() => { setSelectedView("dynamic") }}>
+            <ActivityTypeImage>
+              <Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
+            </ActivityTypeImage>
+            <ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
+          </ActivityOption>
+          <ActivityOption onClick={() => { setSelectedView("video") }}>
+            <ActivityTypeImage>
+              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
+            </ActivityTypeImage>
+            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
+          </ActivityOption>
+          <ActivityOption onClick={() => { setSelectedView("video") }}>
+            <ActivityTypeImage>
+              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
+            </ActivityTypeImage>
+            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
+          </ActivityOption>
         </ActivityChooserWrapper>
       )}
 
@@ -30,30 +43,64 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
       {selectedView === "video" && (
         <VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
       )}
-
     </div>
   );
 }
 
-const ActivityChooserWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-`;
+const ActivityChooserWrapper = styled("div", {
+  display: "flex",
+  flexDirection: "row",
+  justifyContent: "start",
+  marginTop: 10,
+});
 
-const ActivityButton = styled.button`
-  padding: 40px;
-  border-radius: 10px !important;
-  border: none;
-  font-size: 80px !important;
-  margin: 40px;
-  background-color: #8c949c33 !important;
-  cursor: pointer;
-  &:hover {
-    background-color: #8c949c7b;
-  }
-`;
+const ActivityOption = styled("div", {
+  width: "180px",
+  textAlign: "center",
+  borderRadius: 10,
+  background: "#F6F6F6",
+  border: "4px solid #F5F5F5",
+  margin: "auto",
+
+  // hover 
+  "&:hover": {
+    cursor: "pointer",
+    background: "#ededed",
+    border: "4px solid #ededed",
+
+    transition: "background 0.2s ease-in-out, border 0.2s ease-in-out",
+  },
+});
+
+const ActivityTypeImage = styled("div", {
+  height: 80,
+  borderRadius: 8,
+  margin: 2,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "end",
+  textAlign: "center",
+  background: "#ffffff",
+
+  // hover 
+  "&:hover": {
+    cursor: "pointer",
+  },
+});
+
+const ActivityTypeTitle = styled("div", {
+  display: "flex",
+  fontSize: 12,
+  height: "20px",
+  fontWeight: 500,
+  color: "rgba(0, 0, 0, 0.38);",
+
+  // center text vertically
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+
+});
 
 export default NewActivityModal;

front/components/Pages/CourseEdit/NewActivityModal/DynamicCanva.tsx

@@ -1,4 +1,6 @@
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
 import React, { useState } from "react";
+import * as Form from '@radix-ui/react-form';
 
 function DynamicCanvaModal({ submitActivity, chapterId }: any) {
   const [activityName, setActivityName] = useState("");
@@ -22,14 +24,32 @@ function DynamicCanvaModal({ submitActivity, chapterId }: any) {
     });
   };
   return (
-    <div>
-      <div>
-        <input type="text" onChange={handleActivityNameChange} placeholder="Activity Name" /> <br />
-        <input type="text" onChange={handleActivityDescriptionChange} placeholder="Activity Description" />
-        <br />
-        <button onClick={handleSubmit}>Add Activity</button>
-      </div>
-    </div>
+    <FormLayout onSubmit={handleSubmit}>
+      <FormField name="dynamic-activity-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Activity name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a name for your activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleActivityNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="dynamic-activity-desc">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Activity description</FormLabel>
+          <FormMessage match="valueMissing">Please provide a description for your activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Textarea onChange={handleActivityDescriptionChange} required />
+        </Form.Control>
+      </FormField>
+
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 

front/components/Pages/CourseEdit/NewActivityModal/Video.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
+import React, { useState } from "react";
+import * as Form from '@radix-ui/react-form';
 
 function VideoModal({ submitFileActivity, chapterId }: any) {
   const [video, setVideo] = React.useState(null) as any;
@@ -21,16 +23,32 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
    and the actual upload isn't happening here anyway, it's in the submitFileActivity function */
 
   return (
-    <div>
-      <input type="text" placeholder="video title" onChange={handleNameChange} />
-      <br />
-      <br />
-      <input type="file" onChange={handleVideoChange} name="video" id="" />
-      <br />
+      <FormLayout onSubmit={handleSubmit}>
+      <FormField name="video-activity-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Video name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a name for your video activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="video-activity-file">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Video file</FormLabel>
+          <FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <input type="file" onChange={handleVideoChange} required />
+        </Form.Control>
+      </FormField>
 
-      <br />
-      <button onClick={handleSubmit}>Send</button>
-    </div>
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create Activity</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 

front/components/UI/Modal/Modal.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { styled, keyframes } from '@stitches/react';
 import { violet, blackA, mauve, green } from '@radix-ui/colors';
+import { ButtonBlack } from '../Form/Form';
 
 type ModalParams = {
     dialogTitle: string;
@@ -9,9 +10,10 @@ type ModalParams = {
     dialogContent: React.ReactNode;
     dialogClose?: React.ReactNode | null;
     dialogTrigger?: React.ReactNode;
+    addDefCloseButton?: boolean;
     onOpenChange: any;
     isDialogOpen?: boolean;
-    minHeight?: "sm" | "md" | "lg" | "xl"
+    minHeight?: "sm" | "md" | "lg" | "xl" | "no-min";
 };
 
 const Modal = (params: ModalParams) => (
@@ -39,6 +41,14 @@ const Modal = (params: ModalParams) => (
                         </Dialog.Close>
                     </Flex>
                 ) : null}
+                {params.addDefCloseButton ? (
+                    <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                        <Dialog.Close asChild>
+                        <ButtonBlack type="submit" css={{ marginTop: 10 }}>Close</ButtonBlack>
+                        </Dialog.Close>
+                    </Flex>
+                ) : null}
+
             </DialogContent>
 
         </Dialog.Portal>
@@ -80,6 +90,9 @@ const DialogContent = styled(Dialog.Content, {
 
     variants: {
         minHeight: {
+            'no-min': {
+                minHeight: '0px',
+            },
             'sm': {
                 minHeight: '300px',
             },