From 9cf84b959d4df7c7d6f29146f44f6ff00469cf32 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Thu, 11 Jul 2024 18:37:24 +0200
Subject: [PATCH] feat: add assignment activity to new activity modal

---
 .../Buttons/NewActivityButton.tsx             |   1 +
 .../Modals/Activities/Create/NewActivity.tsx  | 127 ++++++++----------
 .../Create/NewActivityModal/Assignment.tsx    |   9 ++
 .../assignment-page-activity.png              | Bin 0 -> 941 bytes
 4 files changed, 63 insertions(+), 74 deletions(-)
 create mode 100644 apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx
 create mode 100644 apps/web/public/activities_types/assignment-page-activity.png

diff --git a/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx b/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
index afa30d9a..77d02ff0 100644
--- a/apps/web/components/Dashboard/Course/EditCourseStructure/Buttons/NewActivityButton.tsx
+++ b/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
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx
index 847928cf..797a2c8f 100644
--- a/apps/web/components/Objects/Modals/Activities/Create/NewActivity.tsx
+++ b/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>
-              <Image alt="Dynamic Page" src={DynamicPageActivityImage}></Image>
-            </ActivityTypeImage>
-            <ActivityTypeTitle>Dynamic Page</ActivityTypeTitle>
+            <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="Dynamic Page" src={DynamicPageActivityImage}></Image>
+            </div>
+            <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>
-              <Image alt="Video Page" src={VideoPageActivityImage}></Image>
-            </ActivityTypeImage>
-            <ActivityTypeTitle>Video Page</ActivityTypeTitle>
+            <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="Video Page" src={VideoPageActivityImage}></Image>
+            </div>
+            <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>
-              <Image
-                alt="Document PDF Page"
-                src={DocumentPdfPageActivityImage}
-              ></Image>
-            </ActivityTypeImage>
-            <ActivityTypeTitle>PDF Document Page</ActivityTypeTitle>
+            <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="Document PDF Page" src={DocumentPdfPageActivityImage}></Image>
+            </div>
+            <div className="flex text-sm h-5 font-medium text-gray-500 items-center justify-center text-center">
+              Document
+            </div>
           </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', {
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'start',
-  marginTop: 10,
-})
-
-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',
-})
+const ActivityOption = ({ onClick, children }: any) => (
+  <div
+    onClick={onClick}
+    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"
+  >
+    {children}
+  </div>
+)
 
 export default NewActivityModal
diff --git a/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx b/apps/web/components/Objects/Modals/Activities/Create/NewActivityModal/Assignment.tsx
new file mode 100644
index 00000000..a8eccc51
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/apps/web/public/activities_types/assignment-page-activity.png b/apps/web/public/activities_types/assignment-page-activity.png
new file mode 100644
index 0000000000000000000000000000000000000000..46de7b825d62f20856c91d66c1119fd1116c769d
GIT binary patch
literal 941
zcmeAS@N?(olHy`uVBq!ia0vp^=|F7H!3HG%&bgKhq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{T85o$IJY5_^Dj46+jn2E}Akuc6g;8v~f}Fsk
zrQR83m)4fJ#yVY=O<{j4^s7n0spI!ij)K3@ve{XQ601D^s9Vi%+0c`$`T1vz&Eu8>
zDsRem`#TEMc$?X)uTNiWGwHfT-~P75AJ#v#pDhp6G*Pj8_Wbit)s96ks*_%I2i~aQ
z{`R{zN5o3NR&{Z}q?FC+Q=NNGDY`usSX|T*XnACXOi~D+p;o&Ds_>Mv><<boX57q~
zwokn~WLeninR(l@Po>`6Kkvs^84k(*<10m`2dzx0+B<J$h?bkyqszBaj7}bL=;#%D
zGuv;uo6(}ja)HG*a+h;GBzf3gnki|X<hc1f=<@6rCklfjw?>`aHh<o{O}X0sO7e>o
z8J1r@x#s%ooZFMuyG|0gDWD(~;6GtkO@@iovb%ZR-uaK7IPheh+WV3#>B3%5Ar-x~
zx?<fvJi9ihZH}~fV3D`^=92ejw-h|M7ClL5$c_Ej%d%w4#f&M}<d!&k-krT7k9Y0H
zrE%-4d5!uUOCoDti!dwcEqq#(xk%%ed!IHNb6?5xCN_r47C)22SBuKsF;A3O7I>6r
ztIYjJ{D#w&4xK7&OxUyScJ8m@Grml@QO>;|-kuU*t<>v0nf!F~J?@Kcd|dmjO`9Xr
zZWlhy+#2=rG`n?l@8=tOd@K1fC-B}n;mDoi`08UPOMHRe_NCio6{NRJOzyT{_GkT7
zmg=wZOy3<{z1b|(?TXd?Z!UO$&EUXvhm^#|w_$r5S{4<HyiIp}b7cAZzg_3N>;<my
zmv<gu4Q#EJTG=t}^84@kdd}jy$=(fSFK<;nILEak;n%U}KN)12ll2eI`;?)~-rTjT
zNxRNMW|{WfcS^Tx*KXAo>}5IET^woo{^qj%>RXDe=K4+RTetP}_euFG0t<H-rnZ=^
zeVDc1?0suzKzvu<R`bPcinEo%oZcR8I#4UZ)m)XGaCgP#z$E#FN%7YOxBK)yWxiAM
zkKbeJzTyI&j_jp|J9d1^P5jRI@^tL|iB12iMU%d)=fRW4AW3h6u{oFOgwLlnN>sSJ
z?7!^hv6y+h@K4a8?Y;@hH$P@gac>s-%qIWg6MJmS#>t)9>U)8?i^0>?&t;ucLK6Vv
C#iU{Y

literal 0
HcmV?d00001