feat: refactors + various UI changes

front/app/editor/course/[courseid]/activity/[activityid]/edit/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     // Or a custom loading skeleton component

front/app/editor/course/[courseid]/activity/[activityid]/edit/page.tsx

@@ -1,7 +1,7 @@
 import { default as React, } from "react";
 import { useRouter } from "next/navigation";
 import AuthProvider from "@components/Security/AuthProvider";
-import EditorWrapper from "@components/Editor/EditorWrapper";
+import EditorWrapper from "@components/Objects/Editor/EditorWrapper";
 import { getAPIUrl } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";

front/app/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import "../styles/globals.css";
-import StyledComponentsRegistry from "../components/UI/libs/styled-registry";
+import StyledComponentsRegistry from "../components/Utils/libs/styled-registry";
 import { motion } from "framer-motion";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

front/app/organizations/new/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import { Title } from "../../../components/UI/Elements/Styles/Title";
 import { createNewOrganization } from "../../../services/organizations/orgs";
 
 const Organizations = () => {
@@ -35,7 +34,7 @@ const Organizations = () => {
 
   return (
     <div>
-      <Title>New Organization</Title>
+     <div className="font-bold text-lg">New Organization</div>
       Name: <input onChange={handleNameChange} type="text" />
       <br />
       Description: <input onChange={handleDescriptionChange} type="text" />

front/app/organizations/page.tsx

@@ -1,7 +1,6 @@
 "use client"; //todo: use server components
 import Link from "next/link";
 import React from "react";
-import { Title } from "../../components/UI/Elements/Styles/Title";
 import { deleteOrganizationFromBackend } from "@services/organizations/orgs";
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/ts/requests";
@@ -19,14 +18,14 @@ const Organizations = () => {
   return (
     <>
       <AuthProvider />
-      <Title>
+      <div className="font-bold text-lg">
         Your Organizations{" "}
         <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>
+      </div>
       <hr />
 
       {error && <p className="text-red-500">Failed to load</p>}

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/error.tsx

@@ -1,6 +1,6 @@
 'use client'; // Error components must be Client Components
 
-import ErrorUI from '@components/UI/Error/Error';
+import ErrorUI from '@components/StyledElements/Error/Error';
 import { useEffect } from 'react';
  
 export default function Error({

front/app/orgs/[orgslug]/(withmenu)/collection/[collectionid]/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     return (

front/app/orgs/[orgslug]/(withmenu)/collections/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     // Or a custom loading skeleton component

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

@@ -1,7 +1,6 @@
 "use client";
 import { useRouter } from "next/navigation";
 import React from "react";
-import { Title } from "@components/UI/Elements/Styles/Title";
 import { createCollection } from "@services/courses/collections";
 import useSWR from "swr";
 import { getAPIUrl, getUriWithOrg } from "@services/config/config";
@@ -54,7 +53,7 @@ function NewCollection(params: any) {
   return (
     <>
       <div className="w-64 m-auto py-20">
-      <Title className="mb-4">Add new</Title>
+      <div className="font-bold text-lg mb-4">Add new</div>
 
 <input
   type="text"

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

@@ -1,3 +1,5 @@
+import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
+import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 import { getBackendUrl, getUriWithOrg } from "@services/config/config";
 import { deleteCollection, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
 import { getCourseMetadataWithAuthHeader } from "@services/courses/courses";
@@ -7,7 +9,6 @@ import { Metadata } from "next";
 import { revalidateTag } from "next/cache";
 import { cookies } from "next/headers";
 import Link from "next/link";
-import { Title } from "../courses/courses";
 import CollectionAdminEditsArea from "./admin";
 
 type MetadataProps = {
@@ -42,16 +43,16 @@ const CollectionsPage = async (params: any) => {
     const collections = await getOrgCollectionsWithAuthHeader(org_id, access_token_cookie ? access_token_cookie.value : null);
 
     return (
-        <div className="max-w-7xl mx-auto px-4 py-10" >
+        <GeneralWrapperStyled>
             <div className="flex justify-between" >
-                <Title title="Collections" type="col" />
+                <TypeOfContentTitle title="Collections" type="col" />
                 <Link className="flex justify-center" href={getUriWithOrg(orgslug, "/collections/new")}>
                     <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-sm font-bold text-white drop-shadow-lg">Add Collection + </button>
                 </Link>
             </div>
             <div className="home_collections flex flex-wrap">
                 {collections.map((collection: any) => (
-                    <div className="pr-8 flex flex-col" key={collection.collection_id}>
+                    <div className="flex flex-col py-3 px-3" key={collection.collection_id}>
                         <CollectionAdminEditsArea org_id={org_id} collection_id={collection.collection_id} collection={collection} />
                         <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}>
                             <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
@@ -68,7 +69,7 @@ const CollectionsPage = async (params: any) => {
                     </div>
                 ))}
             </div>
-        </div>
+        </GeneralWrapperStyled>
     );
 }
 

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

@@ -8,7 +8,7 @@ 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/UI/Tooltip/Tooltip";
+import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
 import DocumentPdfActivity from "@components/Pages/Activities/DocumentPdf/DocumentPdf";
 import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators";
 

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

@@ -1,6 +1,6 @@
 'use client'; // Error components must be Client Components
 
-import ErrorUI from '@components/UI/Error/Error';
+import ErrorUI from '@components/StyledElements/Error/Error';
 import { useEffect } from 'react';
  
 export default function Error({

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

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     // Or a custom loading skeleton component

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

@@ -6,11 +6,12 @@ import React, { use } from "react";
 import styled from "styled-components";
 import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config";
 import useSWR, { mutate } from "swr";
-import ToolTip from "@components/UI/Tooltip/Tooltip";
-import PageLoading from "@components/Pages/PageLoading";
+import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 import { revalidateTags } from "@services/utils/ts/requests";
 import ActivityIndicators from "@components/Pages/Courses/ActivityIndicators";
 import { useRouter } from "next/navigation";
+import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 
 const CourseClient = (props: any) => {
   const courseid = props.courseid;
@@ -40,7 +41,7 @@ const CourseClient = (props: any) => {
       {!course ? (
         <PageLoading></PageLoading>
       ) : (
-        <div className="max-w-7xl mx-auto px-4 py-10 tracking-tight">
+        <GeneralWrapperStyled>
           <div className="pb-3">
             <p className="text-md font-bold text-gray-400 pb-2">Course</p>
             <h1 className="text-3xl -mt-3 font-bold">
@@ -107,7 +108,7 @@ const CourseClient = (props: any) => {
               )}
             </div>
           </div>
-        </div>
+        </GeneralWrapperStyled>
       )}
     </>
   );

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

@@ -3,17 +3,16 @@ import React from "react";
 
 import { useState, useEffect } from "react";
 import styled from "styled-components";
-import { Title } from "@components/UI/Elements/Styles/Title";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { initialData, initialData2 } from "@components/Pages/CourseEdit/Draggables/data";
 import Chapter from "@components/Pages/CourseEdit/Draggables/Chapter";
 import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "@services/courses/chapters";
 import { useRouter } from "next/navigation";
-import NewChapterModal from "@components/Modals/Chapters/NewChapter";
-import NewActivityModal from "@components/Modals/Activities/Create/NewActivity";
+import NewChapterModal from "@components/Objects/Modals/Chapters/NewChapter";
+import NewActivityModal from "@components/Objects/Modals/Activities/Create/NewActivity";
 import { createActivity, createFileActivity, createExternalVideoActivity } from "@services/courses/activities";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
-import Modal from "@components/UI/Modal/Modal";
+import Modal from "@components/StyledElements/Modal/Modal";
 import { denyAccessToUser } from "@services/utils/react/middlewares/views";
 import { Folders, Package2 } from "lucide-react";
 
@@ -242,7 +241,7 @@ function CourseEdit(params: any) {
   return (
     <>
       <Page>
-        <Title>
+      <div className="font-bold text-lg">
           Edit Course {" "}
 
 
@@ -253,7 +252,7 @@ function CourseEdit(params: any) {
           >
             Save
           </button>
-        </Title>
+        </div>
 
         <Modal
           isDialogOpen={newActivityModal}

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

@@ -1,6 +1,6 @@
 'use client'; // Error components must be Client Components
 
-import ErrorUI from '@components/UI/Error/Error';
+import ErrorUI from '@components/StyledElements/Error/Error';
 import { useEffect } from 'react';
  
 export default function Error({

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

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     // Or a custom loading skeleton component

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

@@ -1,8 +1,8 @@
 'use client';
-import CreateCourseModal from '@components/Modals/Course/Create/CreateCourse';
-import Modal from '@components/UI/Modal/Modal';
+import CreateCourseModal from '@components/Objects/Modals/Course/Create/CreateCourse';
+import Modal from '@components/StyledElements/Modal/Modal';
 import { Edit2, Trash } from "lucide-react";
-import { getAPIUrl, getBackendUrl, getUriWithOrg } from '@services/config/config';
+import { getBackendUrl, getUriWithOrg } from '@services/config/config';
 import CoursesLogo from "public/svg/courses.svg";
 import CollectionsLogo from "public/svg/collections.svg";
 import { deleteCourseFromBackend } from '@services/courses/courses';
@@ -12,6 +12,8 @@ import Image from 'next/image';
 import { AuthContext } from '@components/Security/AuthProvider';
 import { revalidateTags } from '@services/utils/ts/requests';
 import { useRouter } from 'next/navigation';
+import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
+import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
 
 interface CourseProps {
     orgslug: string;
@@ -32,7 +34,7 @@ function Courses(props: CourseProps) {
     async function deleteCourses(course_id: any) {
         await deleteCourseFromBackend(course_id);
         revalidateTags(['courses']);
-        
+
         router.refresh();
     }
 
@@ -40,13 +42,11 @@ function Courses(props: CourseProps) {
         setNewCourseModal(false);
     }
 
-
-
     return (
         <div>
-            <div className='max-w-7xl mx-auto px-4'>
+            <GeneralWrapperStyled>
                 <div className='flex flex-wrap justify-between'>
-                    <Title title="Courses" type="cou" />
+                    <TypeOfContentTitle title="Courses" type="cou" />
                     <Modal
                         isDialogOpen={newCourseModal}
                         onOpenChange={setNewCourseModal}
@@ -79,24 +79,13 @@ function Courses(props: CourseProps) {
                     ))}
                 </div>
 
-            </div>
+            </GeneralWrapperStyled>
 
 
         </div>
     )
 }
 
-export const Title = (props: any) => {
-    return (
-        <div className="home_category_title flex my-5">
-            <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4">
-                <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" />
-            </div>
-            <h1 className="font-bold text-lg">{props.title}</h1>
-        </div>
-    )
-}
-
 const AdminEditsArea = (props: any) => {
     const org_roles_values = ["admin", "owner"];
     const user_roles_values = ["role_admin"];

front/app/orgs/[orgslug]/(withmenu)/courses/error.tsx

@@ -1,6 +1,6 @@
 'use client'; // Error components must be Client Components
 
-import ErrorUI from '@components/UI/Error/Error';
+import ErrorUI from '@components/StyledElements/Error/Error';
 import { useEffect } from 'react';
  
 export default function Error({

front/app/orgs/[orgslug]/(withmenu)/courses/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     // Or a custom loading skeleton component

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

@@ -1,6 +1,6 @@
 'use client'; // Error components must be Client Components
 
-import ErrorUI from '@components/UI/Error/Error';
+import ErrorUI from '@components/StyledElements/Error/Error';
 import { useEffect } from 'react';
  
 export default function Error({

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

@@ -1,5 +1,5 @@
 import "@styles/globals.css";
-import { Menu } from "@components/UI/Elements/Menu/Menu";
+import { Menu } from "@components/Objects/Menu/Menu";
 import AuthProvider from "@components/Security/AuthProvider";
 
 export default async function RootLayout({ children, params }: { children: React.ReactNode , params:any}) {

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

@@ -1,4 +1,4 @@
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
 
 export default function Loading() {
     return (

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

@@ -2,14 +2,15 @@ export const dynamic = 'force-dynamic';
 import { Metadata, ResolvingMetadata } from 'next';
 import { getBackendUrl, getUriWithOrg } from "@services/config/config";
 import { getCourse, getOrgCourses, getOrgCoursesWithAuthHeader } from "@services/courses/courses";
-import CoursesLogo from "public/svg/courses.svg";
-import CollectionsLogo from "public/svg/collections.svg";
+
 import Link from "next/link";
 import Image from "next/image";
 import { getOrgCollections, getOrgCollectionsWithAuthHeader } from "@services/courses/collections";
 import { getOrganizationContextInfo } from '@services/organizations/orgs';
 
 import { cookies } from 'next/headers';
+import GeneralWrapperStyled from '@components/StyledElements/Wrappers/GeneralWrapper';
+import TypeOfContentTitle from '@components/StyledElements/Titles/TypeOfContentTitle';
 
 type MetadataProps = {
   params: { orgslug: string };
@@ -50,12 +51,12 @@ const OrgHomePage = async (params: any) => {
 
   return (
     <div>
-      <div className="max-w-7xl mx-auto px-4 py-10">
+      <GeneralWrapperStyled>
         {/* Collections */}
-        <Title title="Collections" type="col" />
+        <TypeOfContentTitle title="Collections" type="col" />
         <div className="home_collections flex flex-wrap">
           {collections.map((collection: any) => (
-            <div className="pr-8 flex flex-col" key={collection.collection_id}>
+            <div className="flex flex-col py-3 px-3" key={collection.collection_id}>
               <Link href={getUriWithOrg(orgslug, "/collection/" + removeCollectionPrefix(collection.collection_id))}>
                 <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[180px] bg-cover flex flex-col items-center justify-center bg-indigo-600 font-bold text-zinc-50" >
                   <h1 className="font-bold text-lg py-2 justify-center mb-2">{collection.name}</h1>
@@ -74,35 +75,23 @@ const OrgHomePage = async (params: any) => {
 
         {/* Courses */}
         <div className='h-5'></div>
-        <Title title="Courses" type="cou" />
+        <TypeOfContentTitle title="Courses" type="cou" />
         <div className="home_courses flex flex-wrap">
           {courses.map((course: any) => (
-            <div className="pr-8" key={course.course_id}>
+            <div className="py-3 px-3" key={course.course_id}>
               <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
-                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}>
+                <div className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover transition-all hover:scale-102" style={{ backgroundImage: `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})` }}>
                 </div>
               </Link>
               <h2 className="font-bold text-lg w-[250px] py-2">{course.name}</h2>
             </div>
           ))}
         </div>
-      </div>
+      </GeneralWrapperStyled>
     </div>
 
   );
 };
 
 
- const Title = (props: any) => {
-  return (
-    <div className="home_category_title flex my-5 items-center">
-      <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4">
-        <Image className="" src={props.type == "col" ? CollectionsLogo : CoursesLogo} alt="Courses logo" />
-      </div>
-      <h1 className="font-bold text-2xl">{props.title}</h1>
-    </div>
-  )
-}
-
-
 export default OrgHomePage;

front/app/orgs/[orgslug]/(withmenu)/trail/page.tsx

@@ -1,5 +1,7 @@
 "use client";
-import PageLoading from "@components/Pages/PageLoading";
+import PageLoading from "@components/Objects/Loaders/PageLoading";
+import TypeOfContentTitle from "@components/StyledElements/Titles/TypeOfContentTitle";
+import GeneralWrapperStyled from "@components/StyledElements/Wrappers/GeneralWrapper";
 import { getAPIUrl, getBackendUrl } from "@services/config/config";
 import { swrFetcher } from "@services/utils/ts/requests";
 import React from "react";
@@ -12,10 +14,8 @@ function Trail(params: any) {
   
   
   return (
-    <TrailLayout>
-      <h1>Trail</h1>
-      <br />
-      {error && <p>Failed to load</p>}
+    <GeneralWrapperStyled>
+      <TypeOfContentTitle title="Trail" type="tra" />
       {!trail ? (
         <PageLoading></PageLoading>
       ) : (
@@ -36,19 +36,13 @@ function Trail(params: any) {
           ))}
         </div>
       )}
-    </TrailLayout>
+    </GeneralWrapperStyled>
   );
 }
 
 export default Trail;
 
-const TrailLayout = styled.div`
-  display: flex;
-  margin: 0 auto;
-  width: 1300px;
-  height: 100%;
-  flex-direction: column;
-`;
+
 
 const TrailMetadata = styled.div`
   display: flex;

front/app/orgs/[orgslug]/login/page.tsx

@@ -4,10 +4,10 @@ import React, { useState } from "react";
 import { styled } from '@stitches/react';
 import { Title } from "../../../../components/UI/Elements/Styles/Title";
 import { loginAndGetToken } from "../../../../services/auth/auth";
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from '@components/UI/Form/Form';
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from '@components/StyledElements/Form/Form';
 import * as Form from '@radix-ui/react-form';
 import { BarLoader } from 'react-spinners';
-import Toast from '@components/UI/Toast/Toast';
+import Toast from '@components/StyledElements/Toast/Toast';
 import { toast } from 'react-hot-toast';
 
 const Login = () => {

front/app/orgs/[orgslug]/signup/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import React from "react";
-import { Title } from "../../../../components/UI/Elements/Styles/Title";
 import { signup } from "../../../../services/auth/auth";
 import { useRouter } from "next/navigation";
 
@@ -39,9 +38,8 @@ const SignUp = (params: any) => {
   return (
     <div>
       <div title="Sign up">
-        <Title>Sign up </Title>
+        <div className="font-bold text-lg">Sign up </div>
 
-        {/* Create a login ui with tailwindcss */}
         <div className="flex justify-center items-center h-screen">
           <div className="w-full max-w-md">
             <form onSubmit={handleSubmit}>

front/components/Objects/Editor/Editor.tsx

@@ -4,7 +4,7 @@ import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Collaboration from "@tiptap/extension-collaboration";
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
-import { AuthContext } from "../Security/AuthProvider";
+import { AuthContext } from "../../Security/AuthProvider";
 import learnhouseIcon from "public/learnhouse_icon.png";
 import { ToolbarButtons } from "./Toolbar/ToolbarButtons";
 import { motion, AnimatePresence } from "framer-motion";
@@ -23,7 +23,7 @@ import { Eye, Save } from "lucide-react";
 import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
 import PDFBlock from "./Extensions/PDF/PDFBlock";
 import QuizBlock from "./Extensions/Quiz/QuizBlock";
-import ToolTip from "@components/UI/Tooltip/Tooltip";
+import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
 import Link from "next/link";
 
 interface Editor {

front/components/Objects/Editor/EditorWrapper.tsx

@@ -5,7 +5,7 @@ import { WebrtcProvider } from "y-webrtc";
 import Editor from "./Editor";
 import { updateActivity } from "@services/courses/activities";
 import { toast } from "react-hot-toast";
-import Toast from "@components/UI/Toast/Toast";
+import Toast from "@components/StyledElements/Toast/Toast";
 
 interface EditorWrapperProps {
   content: string;

front/components/Objects/Editor/Extensions/Image/ImageBlockComponent.tsx

@@ -5,8 +5,8 @@ import { Resizable } from 're-resizable';
 
 import * as AspectRatio from '@radix-ui/react-aspect-ratio';
 import { AlertCircle, AlertTriangle, Image, ImagePlus, Info } from "lucide-react";
-import { getImageFile, uploadNewImageFile } from "../../../../services/blocks/Image/images";
-import { getBackendUrl } from "../../../../services/config/config";
+import { getImageFile, uploadNewImageFile } from "../../../../../services/blocks/Image/images";
+import { getBackendUrl } from "../../../../../services/config/config";
 
 function ImageBlockComponent(props: any) {
   const [image, setImage] = React.useState(null);

front/components/Objects/Editor/Extensions/PDF/PDFBlockComponent.tsx

@@ -2,8 +2,8 @@ import { NodeViewWrapper } from "@tiptap/react";
 import React from "react";
 import styled from "styled-components";
 import { AlertCircle, AlertTriangle, FileText, Image, ImagePlus, Info } from "lucide-react";
-import { getPDFFile, uploadNewPDFFile } from "../../../../services/blocks/Pdf/pdf";
-import { getBackendUrl } from "../../../../services/config/config";
+import { getPDFFile, uploadNewPDFFile } from "../../../../../services/blocks/Pdf/pdf";
+import { getBackendUrl } from "../../../../../services/config/config";
 
 function PDFBlockComponent(props: any) {
   const [pdf, setPDF] = React.useState(null);

front/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx

@@ -2,8 +2,8 @@ import { NodeViewWrapper } from "@tiptap/react";
 import { AlertTriangle, Image, Video } from "lucide-react";
 import React from "react";
 import styled from "styled-components";
-import { getBackendUrl } from "../../../../services/config/config";
-import { uploadNewVideoFile } from "../../../../services/blocks/Video/video";
+import { getBackendUrl } from "../../../../../services/config/config";
+import { uploadNewVideoFile } from "../../../../../services/blocks/Video/video";
 
 function VideoBlockComponents(props: any) {
   const [video, setVideo] = React.useState(null);

front/components/Objects/Editor/Toolbar/ToolbarButtons.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon, DividerVerticalIcon } from "@radix-ui/react-icons";
 import { AlertCircle, AlertTriangle, FileText, GraduationCap, ImagePlus, Info, Sigma, Video, Youtube } from "lucide-react";
-import ToolTip from "@components/UI/Tooltip/Tooltip";
+import ToolTip from "@components/StyledElements/Tooltip/Tooltip";
 
 export const ToolbarButtons = ({ editor, props }: any) => {
   if (!editor) {

front/components/Objects/Menu/Menu.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import Link from "next/link";
 import { getBackendUrl, getUriWithOrg } from "@services/config/config";
 import { getOrganizationContextInfo } from "@services/organizations/orgs";
-import ClientComponentSkeleton from "@components/UI/Utils/ClientComp";
+import ClientComponentSkeleton from "@components/Utils/ClientComp";
 import { HeaderProfileBox } from "@components/Security/HeaderProfileBox";
 
 export const Menu = async (props: any) => {

front/components/Objects/Modals/Activities/Create/NewActivityModal/DocumentPdf.tsx

@@ -1,4 +1,4 @@
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form";
 import React, { useState } from "react";
 import * as Form from '@radix-ui/react-form';
 import BarLoader from "react-spinners/BarLoader";

front/components/Objects/Modals/Activities/Create/NewActivityModal/DynamicCanva.tsx

@@ -1,4 +1,4 @@
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form";
 import React, { useState } from "react";
 import * as Form from '@radix-ui/react-form';
 import BarLoader from "react-spinners/BarLoader";

front/components/Objects/Modals/Activities/Create/NewActivityModal/Video.tsx

@@ -1,4 +1,4 @@
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/UI/Form/Form";
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input, Textarea } from "@components/StyledElements/Form/Form";
 import React, { useState } from "react";
 import * as Form from '@radix-ui/react-form';
 import BarLoader from "react-spinners/BarLoader";

front/components/Objects/Modals/Chapters/NewChapter.tsx

@@ -1,4 +1,4 @@
-import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/UI/Form/Form";
+import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/StyledElements/Form/Form";
 import { FormMessage } from "@radix-ui/react-form";
 import * as Form from '@radix-ui/react-form';
 import React, { useState } from "react";

front/components/Objects/Modals/Course/Create/CreateCourse.tsx

@@ -1,4 +1,4 @@
-import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/UI/Form/Form'
+import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, Input, Textarea } from '@components/StyledElements/Form/Form'
 import * as Form from '@radix-ui/react-form'
 import { getAPIUrl, getUriWithOrg } from '@services/config/config';
 import { FormMessage } from "@radix-ui/react-form";

front/components/Pages/Activities/DynamicCanva/DynamicCanva.tsx

@@ -4,12 +4,12 @@ import StarterKit from "@tiptap/starter-kit";
 import { styled } from "styled-components";
 import Youtube from "@tiptap/extension-youtube";
 // Custom Extensions
-import InfoCallout from "@editor/Extensions/Callout/Info/InfoCallout";
-import WarningCallout from "@editor/Extensions/Callout/Warning/WarningCallout";
-import ImageBlock from "@editor/Extensions/Image/ImageBlock";
-import VideoBlock from "@editor/Extensions/Video/VideoBlock";
-import MathEquationBlock from "@components/Editor/Extensions/MathEquation/MathEquationBlock";
-import PDFBlock from "@components/Editor/Extensions/PDF/PDFBlock";
+import InfoCallout from "@components/Objects/Editor/Extensions/Callout/Info/InfoCallout";
+import WarningCallout from "@components/Objects/Editor/Extensions/Callout/Warning/WarningCallout";
+import ImageBlock from "@components/Objects/Editor/Extensions/Image/ImageBlock";
+import VideoBlock from "@components/Objects/Editor/Extensions/Video/VideoBlock";
+import MathEquationBlock from "@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock";
+import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock";
 
 interface Editor {
   content: string;

front/components/Pages/Courses/ActivityIndicators.tsx

@@ -1,4 +1,4 @@
-import ToolTip from '@components/UI/Tooltip/Tooltip'
+import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
 import { getUriWithOrg } from '@services/config/config'
 import Link from 'next/link'
 import React from 'react'

front/components/StyledElements/Titles/TypeOfContentTitle.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image'
+import CoursesLogo from "public/svg/courses.svg";
+import CollectionsLogo from "public/svg/collections.svg";
+import TrailLogo from "public/svg/trail.svg";
+
+function TypeOfContentTitle(props: { title: string, type: string }) {
+
+    function getLogo() {
+        if (props.type == "col") {
+            return CollectionsLogo;
+        } 
+        
+        else if (props.type == "cou") {
+            return CoursesLogo;
+        }
+
+        else if (props.type == "tra") {
+            return TrailLogo;
+        }
+    }
+
+    return (
+        <div className="home_category_title flex my-5 items-center">
+            <div className="rounded-full ring-1 ring-slate-900/5 shadow-sm p-2 my-auto mr-4">
+                <Image className="" src={getLogo()} alt="Courses logo" />
+            </div>
+            <h1 className="font-bold text-2xl">{props.title}</h1>
+        </div>
+    )
+}
+
+export default TypeOfContentTitle

front/components/StyledElements/Wrappers/GeneralWrapper.tsx

@@ -0,0 +1,10 @@
+
+function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
+    return (
+        <div
+            className='max-w-screen-2xl mx-auto px-16 py-5 tracking-tight'
+        >{children}</div>
+    )
+}
+
+export default GeneralWrapperStyled

front/components/UI/Elements/Styles/Title.tsx

@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-export const Title = styled.h1`
-  font-size: 1.5em;
-  padding-left: 20px;
-  font-weight: 500;
-`;

front/public/svg/collections.svg

@@ -1,3 +1,3 @@
-<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.4997 5.22045C14.4997 5.22045 14.4997 5.22045 14.4997 5.16378L14.4572 5.05753C14.4424 5.03499 14.4259 5.01367 14.4076 4.99379C14.3887 4.9638 14.3674 4.93537 14.3439 4.90878L14.2801 4.8592L14.1668 4.80254L8.85431 1.52295C8.74173 1.45259 8.61165 1.41528 8.47889 1.41528C8.34614 1.41528 8.21605 1.45259 8.10348 1.52295L2.83348 4.80254L2.76973 4.8592L2.70598 4.90878C2.6825 4.93537 2.66118 4.9638 2.64223 4.99379C2.62402 5.01367 2.60744 5.03499 2.59264 5.05753L2.55014 5.16378C2.55014 5.16378 2.55014 5.16378 2.55014 5.22045C2.54318 5.28164 2.54318 5.34343 2.55014 5.40462V11.5955C2.5499 11.7158 2.58034 11.8343 2.63859 11.9396C2.69684 12.045 2.78098 12.1337 2.88306 12.1975L8.19556 15.4771C8.22826 15.4973 8.26421 15.5117 8.30181 15.5196C8.30181 15.5196 8.33723 15.5196 8.35848 15.5196C8.47831 15.5576 8.60697 15.5576 8.72681 15.5196C8.72681 15.5196 8.76223 15.5196 8.78348 15.5196C8.82108 15.5117 8.85703 15.4973 8.88973 15.4771V15.4771L14.1668 12.1975C14.2689 12.1337 14.353 12.045 14.4113 11.9396C14.4695 11.8343 14.5 11.7158 14.4997 11.5955V5.40462C14.5067 5.34343 14.5067 5.28164 14.4997 5.22045V5.22045ZM7.79181 13.6071L3.89598 11.1988V6.67962L7.79181 9.08087V13.6071ZM8.50014 7.85545L4.53348 5.40462L8.50014 2.96087L12.4668 5.40462L8.50014 7.85545ZM13.1043 11.1988L9.20848 13.6071V9.08087L13.1043 6.67962V11.1988Z" fill="#0F0F0F"/>
 </svg>

front/public/svg/courses.svg

@@ -1,3 +1,3 @@
-<svg width="13" height="15" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="18" viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.7507 0.416626H3.66732C2.91587 0.416626 2.1952 0.715137 1.66385 1.24649C1.1325 1.77784 0.833984 2.49851 0.833984 3.24996V11.75C0.833984 12.5014 1.1325 13.2221 1.66385 13.7534C2.1952 14.2848 2.91587 14.5833 3.66732 14.5833H10.7507C11.1264 14.5833 11.4867 14.434 11.7524 14.1684C12.0181 13.9027 12.1673 13.5423 12.1673 13.1666V1.83329C12.1673 1.45757 12.0181 1.09723 11.7524 0.831558C11.4867 0.565881 11.1264 0.416626 10.7507 0.416626ZM2.25065 3.24996C2.25065 2.87424 2.39991 2.5139 2.66558 2.24822C2.93126 1.98255 3.29159 1.83329 3.66732 1.83329H10.7507V8.91663H3.66732C3.16797 8.91872 2.67848 9.05578 2.25065 9.31329V3.24996ZM3.66732 13.1666C3.29159 13.1666 2.93126 13.0174 2.66558 12.7517C2.39991 12.486 2.25065 12.1257 2.25065 11.75C2.25065 11.3742 2.39991 11.0139 2.66558 10.7482C2.93126 10.4825 3.29159 10.3333 3.66732 10.3333H10.7507V13.1666H3.66732ZM5.08398 4.66663H7.91732C8.10518 4.66663 8.28535 4.592 8.41819 4.45916C8.55102 4.32632 8.62565 4.14615 8.62565 3.95829C8.62565 3.77043 8.55102 3.59026 8.41819 3.45743C8.28535 3.32459 8.10518 3.24996 7.91732 3.24996H5.08398C4.89612 3.24996 4.71596 3.32459 4.58312 3.45743C4.45028 3.59026 4.37565 3.77043 4.37565 3.95829C4.37565 4.14615 4.45028 4.32632 4.58312 4.45916C4.71596 4.592 4.89612 4.66663 5.08398 4.66663V4.66663Z" fill="black"/>
 </svg>

front/public/svg/trail.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M16.5751 7.95841C16.5059 7.82098 16.3999 7.70541 16.269 7.62451C16.1381 7.54361 15.9874 7.50054 15.8335 7.50008H11.6668V2.50008C11.6757 2.31731 11.6243 2.13669 11.5204 1.98608C11.4164 1.83547 11.2658 1.72325 11.0918 1.66674C10.9245 1.6117 10.744 1.61108 10.5763 1.66498C10.4087 1.71888 10.2624 1.82452 10.1585 1.96674L3.4918 11.1334C3.40827 11.2541 3.35811 11.3948 3.3464 11.5411C3.3347 11.6874 3.36186 11.8343 3.42513 11.9667C3.4834 12.1182 3.58462 12.2493 3.71637 12.3441C3.84812 12.4388 4.00467 12.493 4.1668 12.5001H8.33346V17.5001C8.33359 17.6758 8.38927 17.847 8.49254 17.9892C8.59581 18.1314 8.74139 18.2373 8.90846 18.2917C8.99219 18.3177 9.07915 18.3317 9.1668 18.3334C9.29828 18.3338 9.42799 18.303 9.5453 18.2436C9.66262 18.1842 9.76422 18.0979 9.8418 17.9917L16.5085 8.82508C16.5982 8.70074 16.652 8.55404 16.6637 8.40112C16.6755 8.24821 16.6448 8.09502 16.5751 7.95841ZM10.0001 14.9334V11.6667C10.0001 11.4457 9.91233 11.2338 9.75605 11.0775C9.59977 10.9212 9.38781 10.8334 9.1668 10.8334H5.83346L10.0001 5.06674V8.33341C10.0001 8.55442 10.0879 8.76638 10.2442 8.92267C10.4005 9.07895 10.6124 9.16674 10.8335 9.16674H14.1668L10.0001 14.9334Z"
+        fill="black" />
+</svg>

front/tsconfig.json

@@ -26,7 +26,7 @@
       "@images/*": ["public/img/*"],
       "@styles/*": ["styles/*"],
       "@services/*": ["services/*"],
-      "@editor/*": ["components/Editor/*"]
+      "@editor/*": ["components/Objects/Editor/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx","**/**/*.tsx", ".next/types/**/*.ts"],