feat: refactors + various UI changes

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