feat: add assignment activity to new activity modal

apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx

@@ -87,6 +87,7 @@ function NewActivityButton(props: NewActivityButtonProps) {
         isDialogOpen={newActivityModal}
         onOpenChange={setNewActivityModal}
         minHeight="no-min"
+        minWidth='md'
         addDefCloseButton={false}
         dialogContent={
           <NewActivityModal

apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx

@@ -2,11 +2,13 @@ import React, { useState } from 'react'
 import DynamicPageActivityImage from 'public/activities_types/dynamic-page-activity.png'
 import VideoPageActivityImage from 'public//activities_types/video-page-activity.png'
 import DocumentPdfPageActivityImage from 'public//activities_types/documentpdf-page-activity.png'
-import { styled } from '@stitches/react'
+import AssignmentActivityImage from 'public//activities_types/assignment-page-activity.png'
+
 import DynamicCanvaModal from './NewActivityModal/DynamicCanva'
 import VideoModal from './NewActivityModal/Video'
 import Image from 'next/image'
 import DocumentPdfModal from './NewActivityModal/DocumentPdf'
+import Assignment from './NewActivityModal/Assignment'
 
 function NewActivityModal({
   closeModal,
@@ -19,43 +21,58 @@ function NewActivityModal({
   const [selectedView, setSelectedView] = useState('home')
 
   return (
-    <div>
+    <>
       {selectedView === 'home' && (
-        <ActivityChooserWrapper>
+        <div className="flex flex-row space-x-2 justify-start mt-2.5 w-full">
           <ActivityOption
             onClick={() => {
               setSelectedView('dynamic')
             }}
           >
-            <ActivityTypeImage>
+            <div className="h-20 rounded-lg m-0.5 flex flex-col items-center justify-end text-center bg-white hover:cursor-pointer">
-              <Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
+              <Image quality={100} alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
-            </ActivityTypeImage>
+            </div>
-            <ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
+            <div className="flex text-sm h-5 font-medium text-gray-500 items-center justify-center text-center">
+              Dynamic Page
+            </div>
           </ActivityOption>
           <ActivityOption
             onClick={() => {
               setSelectedView('video')
             }}
           >
-            <ActivityTypeImage>
+            <div className="h-20 rounded-lg m-0.5 flex flex-col items-center justify-end text-center bg-white hover:cursor-pointer">
-              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
+              <Image quality={100} alt="Video Page" src={VideoPageActivityImage}></Image>
-            </ActivityTypeImage>
+            </div>
-            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
+            <div className="flex text-sm h-5 font-medium text-gray-500 items-center justify-center text-center">
+              Video
+            </div>
           </ActivityOption>
           <ActivityOption
             onClick={() => {
               setSelectedView('documentpdf')
             }}
           >
-            <ActivityTypeImage>
+            <div className="h-20 rounded-lg m-0.5 flex flex-col items-center justify-end text-center bg-white hover:cursor-pointer">
-              <Image
+              <Image quality={100} alt="Document PDF Page" src={DocumentPdfPageActivityImage}></Image>
-                alt="Document PDF Page"
+            </div>
-                src={DocumentPdfPageActivityImage}
+            <div className="flex text-sm h-5 font-medium text-gray-500 items-center justify-center text-center">
-              ></Image>
+              Document
-            </ActivityTypeImage>
+            </div>
-            <ActivityTypeTitle>PDF Document Page</ActivityTypeTitle>
           </ActivityOption>
-        </ActivityChooserWrapper>
+          <ActivityOption
+            onClick={() => {
+              setSelectedView('assignments')
+            }}
+          >
+            <div className="h-20 rounded-lg m-0.5 flex flex-col items-center justify-end text-center bg-white hover:cursor-pointer">
+              <Image quality={100} alt="Assignment Page" src={AssignmentActivityImage}></Image>
+            </div>
+            <div className="flex text-sm h-5 font-medium text-gray-500 items-center justify-center text-center">
+              Assignments
+            </div>
+          </ActivityOption>
+        </div>
       )}
 
       {selectedView === 'dynamic' && (
@@ -82,63 +99,25 @@ function NewActivityModal({
           course={course}
         />
       )}
-    </div>
+
+      {selectedView === 'assignments' && (
+        <Assignment
+          submitFileActivity={submitFileActivity}
+          chapterId={chapterId}
+          course={course}
+        />)
+      }
+    </>
   )
 }
 
-const ActivityChooserWrapper = styled('div', {
+const ActivityOption = ({ onClick, children }: any) => (
-  display: 'flex',
+  <div
-  flexDirection: 'row',
+    onClick={onClick}
-  justifyContent: 'start',
+    className="w-full text-center rounded-xl bg-gray-100 border-4 border-gray-100 mx-auto hover:bg-gray-200 hover:border-gray-200 transition duration-200 ease-in-out cursor-pointer"
-  marginTop: 10,
+  >
-})
+    {children}
-
+  </div>
-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

apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Assignment() {
+  return (
+    <div>Assignment</div>
+  )
+}
+
+export default Assignment