Merge pull request #85 from learnhouse/swve/eng-51-fix-input-styling-issues

Fix input styling issues

front/app/_orgs/[orgslug]/(withmenu)/collections/new/page.tsx

@@ -8,7 +8,7 @@ import { getAPIUrl, getUriWithOrg } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
 
-function NewCollection(params : any) {
+function NewCollection(params: any) {
   const orgslug = params.params.orgslug;
   const [name, setName] = React.useState("");
   const [org, setOrg] = React.useState({}) as any;
@@ -50,38 +50,64 @@ function NewCollection(params : any) {
 
   return (
     <>
-      <Title>Add new</Title>
-      <br />
-      <input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
-      {!courses ? (
-        <p>Loading...</p>
-      ) : (
-        <div>
-          {courses.map((course: any) => (
-            <div key={course.course_id}>
-              <input
-                type="checkbox"
-                id={course.course_id}
-                name={course.course_id}
-                value={course.course_id}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedCourses([...selectedCourses, e.target.value]);
-                  } else {
-                    setSelectedCourses(selectedCourses.filter((item: any) => item !== e.target.value));
-                  }
-                }}
-              />
-              <label htmlFor={course.course_id}>{course.name}</label>
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="w-64 m-auto py-20">
+      <Title className="mb-4">Add new</Title>
+
+<input
+  type="text"
+  placeholder="Name"
+  value={name}
+  onChange={handleNameChange}
+  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+/>
+
+{!courses ? (
+  <p className="text-gray-500">Loading...</p>
+) : (
+  <div>
+    {courses.map((course: any) => (
+      <div key={course.course_id} className="flex items-center mb-2">
+        <input
+          type="checkbox"
+          id={course.course_id}
+          name={course.course_id}
+          value={course.course_id}
+          checked={selectedCourses.includes(course.course_id)}
+          onChange={(e) => {
+            const courseId = e.target.value;
+            setSelectedCourses((prevSelectedCourses: string[]) => {
+              if (e.target.checked) {
+                return [...prevSelectedCourses, courseId];
+              } else {
+                return prevSelectedCourses.filter((selectedCourse) => selectedCourse !== courseId);
+              }
+            });
+          }}
+          className="mr-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <label htmlFor={course.course_id} className="text-sm">{course.name}</label>
+      </div>
+    ))}
+
+  </div>
+)}
+
+<input
+  type="text"
+  placeholder="Description"
+  value={description}
+  onChange={handleDescriptionChange}
+  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+/>
+
+<button
+  onClick={handleSubmit}
+  className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+>
+  Submit
+</button>
+      </div>
 
-      <br />
-      <input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
-      <br />
-      <button onClick={handleSubmit}>Submit</button>
     </>
   );
 }

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);
   };
@@ -266,7 +266,7 @@ function CourseEdit(params: any) {
           >
             Save
           </button>
-        </Title>-
+        </Title>
 
         <Modal
           isDialogOpen={newActivityModal}

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,9 +61,9 @@ 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>

front/app/_orgs/[orgslug]/settings/account/passwords/page.tsx

@@ -21,7 +21,7 @@ function SettingsProfilePasswordsPage() {
 
             {auth.isAuthenticated && (
                 <div>
-                    <h1>Account Password</h1>
+                    <h1 className='text-3xl font-bold'>Account Password</h1>
                     <br /><br />
 
                     <Formik
@@ -35,13 +35,34 @@ function SettingsProfilePasswordsPage() {
                         }}
                     >
                         {({ isSubmitting }) => (
-                            <Form>
-                                Old Password  <Field type="password" name="old_password" /><br />
-                                New password  <Field type="password" name="new_password" /><br />
-                                <button type="submit" disabled={isSubmitting}>
-                                    Submit
-                                </button>
-                            </Form>
+                            <Form className="max-w-md">
+                            <label className="block mb-2 font-bold" htmlFor="old_password">
+                              Old Password
+                            </label>
+                            <Field
+                              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                              type="password"
+                              name="old_password"
+                            />
+                          
+                            <label className="block mb-2 font-bold" htmlFor="new_password">
+                              New Password
+                            </label>
+                            <Field
+                              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                              type="password"
+                              name="new_password"
+                            />
+                          
+                            <button
+                              type="submit"
+                              disabled={isSubmitting}
+                              className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            >
+                              Submit
+                            </button>
+                          </Form>
+                          
                         )}
                     </Formik>
                 </div>

front/app/_orgs/[orgslug]/settings/account/profile/page.tsx

@@ -12,7 +12,7 @@ function SettingsProfilePage() {
 
             {auth.isAuthenticated && (
                 <div>
-                    <h1>Profile Settings</h1>
+                    <h1 className='text-3xl font-bold'>Profile Settings</h1>
                     <br /><br />
 
                     <Formik
@@ -27,14 +27,44 @@ function SettingsProfilePage() {
                         }}
                     >
                         {({ isSubmitting }) => (
-                            <Form>
-                                Full name  <Field type="textarea" name="full_name" /><br />
-                                Email  <Field type="email" name="email" /><br />
-                                Bio  <Field as="textarea" type="textarea" name="bio" /><br />
-                                <button type="submit" disabled={isSubmitting}>
+                            <Form className="max-w-md">
+                                <label className="block mb-2 font-bold" htmlFor="full_name">
+                                    Full Name
+                                </label>
+                                <Field
+                                    className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    type="textarea"
+                                    name="full_name"
+                                />
+
+                                <label className="block mb-2 font-bold" htmlFor="email">
+                                    Email
+                                </label>
+                                <Field
+                                    className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    type="email"
+                                    name="email"
+                                />
+
+                                <label className="block mb-2 font-bold" htmlFor="bio">
+                                    Bio
+                                </label>
+                                <Field
+                                    as="textarea"
+                                    className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    type="textarea"
+                                    name="bio"
+                                />
+
+                                <button
+                                    type="submit"
+                                    disabled={isSubmitting}
+                                    className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                >
                                     Submit
                                 </button>
                             </Form>
+
                         )}
                     </Formik>
                 </div>

front/app/_orgs/[orgslug]/settings/organization/general/page.tsx

@@ -37,7 +37,7 @@ function SettingsOrganizationGeneral(params: any) {
 
     return (
       <div>
-        <h1>Oganization Settings</h1>
+        <h1 className='text-3xl font-bold'>Oganization Settings</h1>
         <br /><br />
         {error && <p>Failed to load</p>}
         {!org ? (
@@ -55,15 +55,53 @@ function SettingsOrganizationGeneral(params: any) {
             }}
           >
             {({ isSubmitting }) => (
-              <Form>
-                Name  <Field type="text" name="name" /><br />
-                Description  <Field type="text" name="description" /><br />
-                Slug  <Field disabled type="text" name="slug" /> <br /> 
-                Email  <Field type="email" name="email" /><br />
-                <button type="submit" disabled={isSubmitting}>
-                  Submit
-                </button>
-              </Form>
+             <Form>
+             <label className="block mb-2 font-bold" htmlFor="name">
+               Name
+             </label>
+             <Field
+               className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+               type="text"
+               name="name"
+             />
+           
+             <label className="block mb-2 font-bold" htmlFor="description">
+               Description
+             </label>
+             <Field
+               className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+               type="text"
+               name="description"
+             />
+           
+             <label className="block mb-2 font-bold" htmlFor="slug">
+               Slug
+             </label>
+             <Field
+               className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
+               disabled
+               type="text"
+               name="slug"
+             />
+           
+             <label className="block mb-2 font-bold" htmlFor="email">
+               Email
+             </label>
+             <Field
+               className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+               type="email"
+               name="email"
+             />
+           
+             <button
+               type="submit"
+               disabled={isSubmitting}
+               className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
+             >
+               Submit
+             </button>
+           </Form>
+           
             )}
           </Formik>
         )}

front/app/organizations/page.tsx

@@ -9,7 +9,7 @@ import { getAPIUrl, getUriWithOrg } from "@services/config/config";
 import AuthProvider from "@components/Security/AuthProvider";
 
 const Organizations = () => {
-  const { data : organizations , error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
+  const { data: organizations, error } = useSWR(`${getAPIUrl()}orgs/user/page/1/limit/10`, swrFetcher)
 
   async function deleteOrganization(org_id: any) {
     const response = await deleteOrganizationFromBackend(org_id);
@@ -18,29 +18,38 @@ const Organizations = () => {
 
   return (
     <>
-    <AuthProvider/>
+      <AuthProvider />
       <Title>
         Your Organizations{" "}
-        <Link href={"/organizations/new"}>
-          <button>+</button>
+        <Link href="/organizations/new">
+          <button className="bg-blue-500 text-white px-2 py-1 rounded-md hover:bg-blue-600 focus:outline-none">
+            +
+          </button>
         </Link>
       </Title>
       <hr />
-      {error && <p>Failed to load</p>}
+
+      {error && <p className="text-red-500">Failed to load</p>}
       {!organizations ? (
-        <p>Loading...</p>
+        <p className="text-gray-500">Loading...</p>
       ) : (
         <div>
           {organizations.map((org: any) => (
-            <div key={org.org_id}>
-              <Link href={getUriWithOrg(org.slug,"/")}>
-                <h3>{org.name}</h3>
+            <div key={org.org_id} className="flex items-center justify-between mb-4">
+              <Link href={getUriWithOrg(org.slug, "/")}>
+                <h3 className="text-blue-500 cursor-pointer hover:underline">{org.name}</h3>
               </Link>
-              <button onClick={() => deleteOrganization(org.org_id)}>Delete</button>
+              <button
+                onClick={() => deleteOrganization(org.org_id)}
+                className="px-3 py-1 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none"
+              >
+                Delete
+              </button>
             </div>
           ))}
         </div>
       )}
+
     </>
   );
 };

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_", "")}`}
+            href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
 
-            rel="noopener noreferrer">
-            &nbsp; <EyeOpenIcon/>
+            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;

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);

front/next.config.js

@@ -9,8 +9,9 @@ const nextConfig = {
   reactStrictMode: false,
   experimental: {
     appDir : true,
+    swcFileReading: false,
   },
-  swcMinify: true,
+  swcMinify: false,
   compiler: {
     styledComponents: true,
   },