feat: improve activities UI

front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/activity.tsx

@@ -1,16 +1,15 @@
 "use client";
 import Link from "next/link";
-import React, { useMemo } from "react";
+import React from "react";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
 import Canva from "@components/Pages/Activities/DynamicCanva/DynamicCanva";
-import styled from "styled-components";
 import VideoActivity from "@components/Pages/Activities/Video/Video";
-import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { markActivityAsComplete } from "@services/courses/activity";
-import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
 import DocumentPdfActivity from "@components/Pages/Activities/DocumentPdf/DocumentPdf";
 import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators";
+import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
+import { useRouter } from "next/navigation";
 
 interface ActivityClientProps {
   activityid: string;
@@ -20,6 +19,8 @@ interface ActivityClientProps {
   course: any;
 }
 
+
+
 function ActivityClient(props: ActivityClientProps) {
   const activityid = props.activityid;
   const courseid = props.courseid;
@@ -27,149 +28,104 @@ function ActivityClient(props: ActivityClientProps) {
   const activity = props.activity;
   const course = props.course;
 
-
+  function getChapterName(chapterId: string) {
-  async function markActivityAsCompleteFront() {
+    let chapterName = "";
-    const trail = await markActivityAsComplete(orgslug, courseid, activityid);
+    course.chapters.forEach((chapter: any) => {
-    mutate(`${getAPIUrl()}activities/activity_${activityid}`);
+      if (chapter.chapter_id === chapterId) {
-    mutate(`${getAPIUrl()}courses/meta/course_${courseid}`);
+        chapterName = chapter.name;
       }
+    });
+    return chapterName;
+  }
+
+
+
+
 
   return (
     <>
-      <div className="max-w-7xl mx-auto px-4  space-y-5 pt-0">
+      <GeneralWrapperStyled>
-        <pre style={{ display: "none" }}>{JSON.stringify(activity, null, 2)}</pre>
+        <div className="space-y-4 pt-4">
-        <ActivityTopWrapper>
+          <div className="flex space-x-6">
-          <ActivityThumbnail>
+            <div className="flex">
               <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
-              <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
+                <img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
               </Link>
-          </ActivityThumbnail>
+            </div>
-          <ActivityInfo>
+            <div className="flex flex-col -space-y-1">
-            <p>Course</p>
+              <p className="font-bold text-gray-700 text-md">Course </p>
-            <h1>{course.course.name}</h1>
+              <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{course.course.name}</h1>
-          </ActivityInfo>
+            </div>
-        </ActivityTopWrapper>
+          </div>
           <ActivityIndicators current_activity={activityid} orgslug={orgslug} course={course} />
 
+          <div className="flex justify-between items-center">
+            <div className="flex flex-col -space-y-1">
+              <p className="font-bold text-gray-700 text-md">Chapter : {getChapterName(activity.chapter_id)}</p>
+              <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase" >{activity.name}</h1>
+            </div>
+            <div className="flex space-x-2">
+              <MarkStatus activityid={activityid} course={course} orgslug={orgslug} courseid={courseid} />
+
+            </div>
+          </div>
+
           {activity ? (
-          <div className="p-7 pt-2 drop-shadow-sm rounded-lg bg-white">
+            <div className={`p-7 pt-2 drop-shadow-sm rounded-lg ${activity.type == 'dynamic' ? 'bg-white' : 'bg-zinc-950'}`}>
-            <CourseContent>
+              <div>
                 {activity.type == "dynamic" && <Canva content={activity.content} activity={activity} />}
                 {/* todo : use apis & streams instead of this */}
                 {activity.type == "video" && <VideoActivity course={course} activity={activity} />}
 
                 {activity.type == "documentpdf" && <DocumentPdfActivity course={course} activity={activity} />}
 
-            <ActivityMarkerWrapper className="py-10">
+                <div className="py-10">
 
-              {course.trail.activities_marked_complete &&
+
-                course.trail.activities_marked_complete.includes("activity_" + activityid) &&
+                </div>
-                course.trail.status == "ongoing" ? (
+              </div>
-                <button style={{ backgroundColor: "green" }}>
-                  <i>
-                    <Check size={20}></Check>
-                  </i>{" "}
-                  Already completed
-                </button>
-              ) : (
-                <button onClick={markActivityAsCompleteFront}>
-                  {" "}
-                  <i>
-                    <Check size={20}></Check>
-                  </i>{" "}
-                  Mark as complete
-                </button>
-              )}
-            </ActivityMarkerWrapper>
-          </CourseContent>
             </div>
           ) : (<div></div>)}
           {<div style={{ height: "100px" }}></div>}
         </div>
+      </GeneralWrapperStyled>
     </>
   );
 }
 
 
-const ActivityThumbnail = styled.div`
+
-  padding-right: 30px;
+export function MarkStatus(props: { activityid: string, course: any, orgslug: string, courseid: string }) {
-  justify-self: center;
+  const router = useRouter();
-  img {
+
-    box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
+
-    border-radius: 7px;
+  async function markActivityAsCompleteFront() {
-    width: 100px;
+    const trail = await markActivityAsComplete(props.orgslug, props.courseid, props.activityid);
-    height: 57px;
+    router.refresh();
-  }
-`;
-const ActivityInfo = styled.div`
-  h1 {
-    margin-top: 0px;
   }
 
-  p {
+  return (
-    margin-top: 0;
+    <>{props.course.trail.activities_marked_complete &&
-    margin-bottom: 0;
+      props.course.trail.activities_marked_complete.includes("activity_" + props.activityid) &&
-    font-weight: 700;
+      props.course.trail.status == "ongoing" ? (
-  }
+      <div className="bg-teal-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" >
-`;
+        <i>
+          <Check size={15}></Check>
+        </i>{" "}
+        Already completed
+      </div>
+    ) : (
+      <div className="bg-zinc-600 rounded-md drop-shadow-md flex flex-col p-3 text-sm text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out" onClick={markActivityAsCompleteFront}>
+        {" "}
+        <i>
+          <Check size={15}></Check>
+        </i>{" "}
+        Mark as complete
+      </div>
+    )}</>
+  )
+}
 
 
 
-
-const ActivityTopWrapper = styled.div`
-  width: 1300px;
-  padding-top: 50px;
-  margin: 0 auto;
-  display: flex;
-`;
-
-const CourseContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-`;
-
-const ActivityMarkerWrapper = styled.div`
-  display: block;
-  width: 1300px;
-  justify-content: flex-end;
-  margin: 0 auto;
-  align-items: center;
-
-  button {
-    background-color: #151515;
-    border: none;
-    padding: 18px;
-    border-radius: 15px;
-    margin: 15px;
-    margin-left: 20px;
-    margin-top: 20px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    color: white;
-    font-weight: 700;
-    font-family: "DM Sans";
-    font-size: 16px;
-    letter-spacing: -0.05em;
-    box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
-
-    i {
-      margin-right: 5px;
-
-      // center the icon
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &:hover {
-      background-color: #000000;
-    }
-  }
-`;
-
 export default ActivityClient;

front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx

@@ -56,7 +56,7 @@ const CourseClient = (props: any) => {
 
           <ActivityIndicators orgslug={orgslug} course={course} />
 
-          <div className="flex flex-row pt-10">
+          <div className="flex flex-row pt-10 flex-wrap">
             <div className="course_metadata_left grow space-y-2">
               <h2 className="py-3 text-2xl font-bold">Description</h2>
               <StyledBox>

front/components/Pages/Activities/DocumentPdf/DocumentPdf.tsx

@@ -1,75 +1,18 @@
 import { getBackendUrl } from "@services/config/config";
 import React from "react";
-import styled from "styled-components";
 
 function DocumentPdfActivity({ activity, course }: { activity: any; course: any }) {
-  function getChapterName() {
-    let chapterName = "";
-    let chapterId = activity.chapter_id;
-    course.chapters.forEach((chapter: any) => {
-      if (chapter.chapter_id === chapterId) {
-        chapterName = chapter.name;
-      }
-    });
-    return chapterName;
-  }
   
   return (
-    <DocumentPdfActivityLayout>
+    <div className="m-8 bg-zinc-900 rounded-md mt-14">
-      <DocumentPdfTitle>
-        <p>Chapter : {getChapterName()}</p>
-        {activity.name}
-      </DocumentPdfTitle>
-      <DocumentPdfPlayerWrapper>
       <iframe
+        className="rounded-lg w-full h-[900px]"
         src={`${getBackendUrl()}content/uploads/documents/documentpdf/${activity.content.documentpdf.activity_id}/${activity.content.documentpdf.filename}`}
       />
-      </DocumentPdfPlayerWrapper>
+    </div>
-    </DocumentPdfActivityLayout>
   );
 }
 
 export default DocumentPdfActivity;
 
-const DocumentPdfActivityLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-  background: #141414;
-  min-width: 100%;
-  min-height: 1200px;
-`;
 
-const DocumentPdfTitle = styled.div`
-  display: flex;
-  width: 1300px;
-  margin: 0 auto;
-  padding-top: 20px;
-  font-size: 24px;
-  font-weight: 700;
-  color: #fff;
-  flex-direction: column;
-
-  p {
-    font-size: 14px;
-    padding: 0;
-    margin: 0;
-    color: #ffffffaa;
-  }
-`;
-
-const DocumentPdfPlayerWrapper = styled.div`
-  display: flex;
-  width: 1300px;
-  margin: 0 auto;
-  justify-content: center;
-  padding-top: 20px;
-
-  iframe {
-    width: 1300px;
-    height: 500px;
-    border-radius: 7px;
-    background-color: black;
-    border: none;
-  }
-`;

front/components/Pages/Activities/Video/Video.tsx

@@ -7,9 +7,10 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
   const [videoId, setVideoId] = React.useState('');
   const [videoType, setVideoType] = React.useState('');
 
-  function getChapterName() {
-    let chapterName = "";
   let chapterId = activity.chapter_id;
+
+  function getChapterName(chapterId: string) {
+    let chapterName = "";
     course.chapters.forEach((chapter: any) => {
       if (chapter.chapter_id === chapterId) {
         chapterName = chapter.name;
@@ -45,18 +46,14 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
   }, [activity]);
 
   return (
-    <VideoActivityLayout>
+    <div>
-      <VideoTitle>
-        <p>{getChapterName()}</p>
-        <p>{activity.name}</p>
-      </VideoTitle>
       {videoType === 'video' && (
-        <VideoPlayerWrapper>
+        <div className="m-8 bg-zinc-900 rounded-md mt-14">
-          <video controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
+          <video className="rounded-lg w-full h-[500px]" controls src={`${getBackendUrl()}content/uploads/video/${activity.content.video.activity_id}/${activity.content.video.filename}`}></video>
-        </VideoPlayerWrapper>
+        </div>
       )}
       {videoType === 'external_video' && (
-        <VideoPlayerWrapper>
+        <div>
           <YouTube 
           className="rounded-md overflow-hidden"
             opts={
@@ -70,10 +67,10 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
               }
             }
             videoId={videoId} />
-        </VideoPlayerWrapper>
+        </div>
       )}
 
-    </VideoActivityLayout>
+    </div>
   );
 }
 
@@ -82,44 +79,4 @@ function VideoActivity({ activity, course }: { activity: any; course: any }) {
 
 export default VideoActivity;
 
-const VideoActivityLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-  background: #141414;
-  min-width: 100%;
-  min-height: 1200px;
-`;
 
-const VideoTitle = styled.div`
-  display: flex;
-  width: 1300px;
-  margin: 0 auto;
-  padding-top: 20px;
-  font-size: 24px;
-  font-weight: 700;
-  color: #fff;
-  flex-direction: column;
-
-  p {
-    font-size: 14px;
-    padding: 0;
-    margin: 0;
-    color: #ffffffaa;
-  }
-`;
-
-const VideoPlayerWrapper = styled.div`
-  display: flex;
-  width: 1300px;
-  margin: 0 auto;
-  justify-content: center;
-  padding-top: 20px;
-
-  video {
-    width: 1300px;
-    height: 500px;
-    border-radius: 7px;
-    background-color: black;
-  }
-`;

front/components/Pages/Courses/ActivityIndicators.tsx

@@ -54,7 +54,7 @@ function ActivityIndicators(props: Props) {
                         <div className='grid grid-flow-col justify-stretch space-x-2'>
                             {chapter.activities.map((activity: any) => {
                                 return (
-                                    <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
+                                    <ToolTip sideOffset={8} slateBlack content={activity.name} key={activity.id}>
                                         <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
                                             <div className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg shadow-md`}></div>
 

front/components/StyledElements/Tooltip/Tooltip.tsx

@@ -2,8 +2,6 @@
 import React from 'react';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { styled, keyframes } from '@stitches/react';
-import { violet, blackA } from '@radix-ui/colors';
-import { PlusIcon } from '@radix-ui/react-icons';
 
 
 type TooltipProps = {
@@ -24,7 +22,6 @@ const ToolTip = (props: TooltipProps) => {
         <Tooltip.Portal>
           <TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
             {props.content}
-            <TooltipArrow />
           </TooltipContent>
         </Tooltip.Portal>
       </Tooltip.Root>
@@ -62,7 +59,7 @@ const TooltipContent = styled(Tooltip.Content, {
   variants: {
     slateBlack: {
       true: {
-        backgroundColor: " #5a5a5a",
+        backgroundColor: " #0d0d0d",
         color: 'white',
       },
     },
@@ -96,25 +93,6 @@ const TooltipContent = styled(Tooltip.Content, {
   },
 });
 
-const TooltipArrow = styled(Tooltip.Arrow, {
-  fill: 'white',
 
-});
-
-const IconButton = styled('button', {
-  all: 'unset',
-  fontFamily: 'inherit',
-  borderRadius: '100%',
-  height: 35,
-  width: 35,
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: violet.violet11,
-  backgroundColor: 'white',
-  boxShadow: `0 2px 10px ${blackA.blackA7}`,
-  '&:hover': { backgroundColor: violet.violet3 },
-  '&:focus': { boxShadow: `0 0 0 2px black` },
-});
 
 export default ToolTip;