From a5751b0a363b362144ab0854f29d0dcb8ebabdd4 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sun, 14 May 2023 17:18:44 +0000
Subject: [PATCH] fix: css input issues

---
 .../course/[courseid]/edit/page.tsx           |  4 +-
 .../(withmenu)/course/[courseid]/page.tsx     | 40 ++++++++++---------
 .../Pages/CourseEdit/Draggables/Activity.tsx  | 34 +++++-----------
 .../Pages/CourseEdit/Draggables/Chapter.tsx   |  6 +--
 4 files changed, 37 insertions(+), 47 deletions(-)

diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
index f77317c9..0422e5d0 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -96,10 +96,10 @@ function CourseEdit(params: any) {
   };
 
   // Submit YouTube Video Upload
-  const submitExternalVideo = async (external_video_data : any, activity: any, chapterId: string) => {
+  const submitExternalVideo = async (external_video_data: any, activity: any, chapterId: string) => {
     console.log("submitExternalVideo", external_video_data);
     await updateChaptersMetadata(courseid, data);
-    await createExternalVideoActivity(external_video_data , activity, chapterId);
+    await createExternalVideoActivity(external_video_data, activity, chapterId);
     await getCourseChapters();
     setNewActivityModal(false);
   };
diff --git a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
index 37f0ce0e..a533d424 100644
--- a/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx
@@ -45,8 +45,8 @@ const CourseIdPage = (params: any) => {
       ) : (
         <CoursePageLayout>
           <br></br>
-          <p>Course</p>
-          <h1>
+          <p className="text-lg font-bold">Course</p>
+          <h1 className="text-3xl font-bold flex items-center space-x-5">
             {course.course.name}{" "}
             <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/edit`} rel="noopener noreferrer">
               <Pencil2Icon />
@@ -61,12 +61,12 @@ const CourseIdPage = (params: any) => {
                       <>
                         <ToolTip sideOffset={-18} slateBlack content={activity.name}>
                           <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                          <CourseIndicator
+                            <CourseIndicator
                               done={course.trail.activities_marked_complete && course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
-                             />
+                            />
                           </Link>
                         </ToolTip>
-                        
+
                       </>
                     );
                   })}
@@ -81,38 +81,42 @@ const CourseIdPage = (params: any) => {
 
           <CourseMetaWrapper>
             <CourseMetaLeft>
-              <h2>Description</h2>
+              <h2 className="py-3 font-bold">Description</h2>
 
               <BoxWrapper>
-                <p>{course.course.description}</p>
+                <p className="py-3">{course.course.description}</p>
               </BoxWrapper>
 
-              <h2>What you will learn</h2>
+              <h2 className="py-3 font-bold">What you will learn</h2>
               <BoxWrapper>
-                <p>{course.course.learnings == ![] ? "no data" : course.course.learnings}</p>
+                <p className="py-3">{course.course.learnings == ![] ? "no data" : course.course.learnings}</p>
               </BoxWrapper>
 
-              <h2>Course Lessons</h2>
+              <h2 className="py-3 font-bold">Course Lessons</h2>
 
               <BoxWrapper>
                 {course.chapters.map((chapter: any) => {
                   return (
-                    <>
-                      <h3>{chapter.name}</h3>
-                      {chapter.activities.map((activity: any) => {
+                    <div
+                      key={chapter}
+                      className="py-3"
+                    >
+                      <h3 className="text-lg">{chapter.name}</h3>
+                      <div
+                        className="py-3"
+                      >{chapter.activities.map((activity: any) => {
                         return (
                           <>
-                            <p>
+                            <p className="flex text-md">
                               {activity.name}
-                              <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
+                              <Link className="pl-3" href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
                                 <EyeOpenIcon />
                               </Link>{" "}
                             </p>
                           </>
                         );
-                      })}
-                      &nbsp;&nbsp;&nbsp;&nbsp;
-                    </>
+                      })}</div>
+                    </div>
                   );
                 })}
               </BoxWrapper>
diff --git a/front/components/Pages/CourseEdit/Draggables/Activity.tsx b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
index 3202099b..c3afd69d 100644
--- a/front/components/Pages/CourseEdit/Draggables/Activity.tsx
+++ b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import React from "react";
-import {  Draggable } from "react-beautiful-dnd";
+import { Draggable } from "react-beautiful-dnd";
 import { EyeOpenIcon, Pencil2Icon } from '@radix-ui/react-icons'
 import styled from "styled-components";
 import { getUriWithOrg } from "@services/config/config";
@@ -10,38 +10,24 @@ function Activity(props: any) {
   return (
     <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
       {(provided) => (
-        <ActivityWrapper key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+        <div
+          className="flex flex-row items-center py-2 my-3 rounded-md justify-center bg-gray-50 hover:bg-gray-100 space-x-2" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
           <p>{props.activity.name} </p>
           <Link
-            href={getUriWithOrg(props.orgslug,"")+`/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
-            
-            rel="noopener noreferrer">
-            &nbsp; <EyeOpenIcon/>
+            href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
+
+            rel="noopener noreferrer"> <EyeOpenIcon />
           </Link>
           <Link
-            href={getUriWithOrg(props.orgslug,"") +`/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
+            href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
             rel="noopener noreferrer">
-            &nbsp; <Pencil2Icon/>
+            <Pencil2Icon />
           </Link>
-        </ActivityWrapper>
+        </div>
       )}
     </Draggable>
   );
 }
 
-export const ActivityWrapper = styled.div`
-  padding: 2px;
-  padding-left: 17px;
-  list-style: none;
-  /* padding-left: 2px; */
-  background-color: #f4f4f4c5;
-  border-radius: 7px;
-  margin: 15px;
-  display: flex;
-  align-items: center;
-  &:hover {
-    background-color: #8c949c7b;
-  }
-  
-`;
+
 export default Activity;
diff --git a/front/components/Pages/CourseEdit/Draggables/Chapter.tsx b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
index 850e189a..a26b1c86 100644
--- a/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
+++ b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import Activity, { ActivityWrapper } from "./Activity";
+import Activity from "./Activity";
 
 function Chapter(props: any) {
   return (
@@ -14,8 +14,8 @@ function Chapter(props: any) {
           //  isDragging={snapshot.isDragging}
           key={props.info.list.chapter.id}
         >
-          <h3>
-            {props.info.list.chapter.name}{" "}
+          <h3 className="pt-3 font-bold text-md">
+            {props.info.list.chapter.name}
             <button
               onClick={() => {
                 props.openNewActivityModal(props.info.list.chapter.id);