From 3cca78d6e12ebf5fa64702b91d3a8a0d3407cf3e Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 28 Jul 2023 02:12:34 +0200
Subject: [PATCH] feat: ui changes

---
 .../(withmenu)/course/[courseid]/course.tsx   |  4 +-
 .../course/[courseid]/edit/page.tsx           |  3 +-
 front/components/Objects/Menu/Menu.tsx        | 13 +++--
 front/components/Objects/Menu/MenuLinks.tsx   |  2 +-
 .../Pages/CourseEdit/Draggables/Activity.tsx  | 27 +++++-----
 .../Pages/CourseEdit/Draggables/Chapter.tsx   | 12 ++---
 .../components/Security/HeaderProfileBox.tsx  | 54 +++++--------------
 .../Titles/TypeOfContentTitle.tsx             |  6 +--
 .../Wrappers/GeneralWrapper.tsx               |  2 +-
 9 files changed, 50 insertions(+), 73 deletions(-)

diff --git a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
index 41c999b1..95d1149c 100644
--- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
+++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/course.tsx
@@ -104,7 +104,7 @@ const CourseClient = (props: any) => {
               </StyledBox>
 
             </div>
-            <div className="course_metadata_right w-64 flex items-center ml-10 h-28 p-3 bg-white rounded-md justify-center drop-shadow-[0_33px_13px_rgba(0,0,0,0.042)] transition-all">
+            <div className="course_metadata_right w-64 flex items-center ml-10 h-28 p-3 bg-white shadow-sm justify-center ring-1 ring-inset ring-gray-400/10 rounded-lg transition-all">
               {course.trail.status == "ongoing" ? (
                 <button className="py-2 px-5 rounded-xl text-white font-bold h-12 w-[200px] drop-shadow-md bg-red-600 hover:bg-red-700 hover:cursor-pointer" onClick={quitCourse}>
                   Quit Course
@@ -122,7 +122,7 @@ const CourseClient = (props: any) => {
 
 
 const StyledBox = (props: any) => (
-  <div className="p-3 pl-10 bg-white rounded-md w-[100%] h-auto drop-shadow-[0_33px_13px_rgba(0,0,0,0.042)]">
+  <div className="p-3 pl-10 bg-white w-[100%] h-auto ring-1 ring-inset ring-gray-400/10 rounded-lg shadow-sm">
     {props.children}
   </div>
 
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 5bf52f01..a46da824 100644
--- a/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
+++ b/front/app/orgs/[orgslug]/(withmenu)/course/[courseid]/edit/page.tsx
@@ -255,7 +255,6 @@ function CourseEdit(params: any) {
   return (
     <>
       <div
-        className="bg-gradient-radial bg-fixed bg-repeat bg-[0 0],[25px 25px] bg-[50px 50px] bg-[#4744446b 1px]"
       >
         <GeneralWrapperStyled>
           <div className="font-bold text-lg flex space-x-2 items-center">
@@ -263,7 +262,7 @@ function CourseEdit(params: any) {
 
 
             <div
-              className="bg-black hover:bg-gray-950 text-white font-bold p-1 px-2 text-sm rounded flex items-center cursor-pointer space-x-2"
+              className="bg-black z-20 hover:bg-gray-950 text-white font-bold p-1 px-2 text-sm rounded flex items-center cursor-pointer space-x-2 hover:cursor-pointer"
               onClick={() => {
                 updateChapters();
               }}
diff --git a/front/components/Objects/Menu/Menu.tsx b/front/components/Objects/Menu/Menu.tsx
index 503049d5..8a54f404 100644
--- a/front/components/Objects/Menu/Menu.tsx
+++ b/front/components/Objects/Menu/Menu.tsx
@@ -16,11 +16,17 @@ export const Menu = async (props: any) => {
 
     return (
         <>
-            <div className="h-[60px]"></div>
-            <div className="backdrop-blur-lg bg-white/90 fixed flex top-0 left-0 right-0 h-[60px] items-center pl-5 pr-5 space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.02)] z-50">
+            <div className="h-[60px] blur-3xl z-10" style={{
+            }}>
+                <div className="h-[150px] blur-3xl z-0" style={{
+                    background: "radial-gradient(1397.20% 56.18% at 75.99% 53.73%, rgba(253, 182, 207, 0.08) 0%, rgba(3, 110, 146, 0.08) 100%)"
+                }}></div>
+
+            </div>
+            <div className="backdrop-blur-lg bg-white/90  fixed flex top-0 left-0 right-0 h-[60px] ring-1 ring-inset ring-gray-500/10 items-center px-16 space-x-5 shadow-[0px_4px_16px_rgba(0,0,0,0.03)] z-50">
                 <div className="logo flex ">
                     <Link href={getUriWithOrg(orgslug, "/")}>
-                        <div className="flex w-auto h-9 rounded-md items-center m-auto justify-center" >
+                        <div className="flex w-auto h-9 rounded-md items-center m-auto py-1 justify-center" >
                             {org?.logo ? (
                                 <img
                                     src={`${getOrgLogoMediaDirectory(org.org_id, org?.logo)}`}
@@ -46,6 +52,7 @@ export const Menu = async (props: any) => {
                     </ClientComponentSkeleton>
                 </div>
             </div>
+
         </>
     );
 };
diff --git a/front/components/Objects/Menu/MenuLinks.tsx b/front/components/Objects/Menu/MenuLinks.tsx
index c5576d96..4a9b6670 100644
--- a/front/components/Objects/Menu/MenuLinks.tsx
+++ b/front/components/Objects/Menu/MenuLinks.tsx
@@ -21,7 +21,7 @@ const LinkItem = (props: any) => {
     const orgslug = props.orgslug;
     return (
         <Link href={getUriWithOrg(orgslug, link)}>
-            <li className="flex space-x-2 items-center text-[#909192] font-medium">
+            <li className="flex space-x-3 items-center text-[#909192] font-medium">
                 {props.type == 'courses' &&
                     <>
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/front/components/Pages/CourseEdit/Draggables/Activity.tsx b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
index 36f28795..9ffb110e 100644
--- a/front/components/Pages/CourseEdit/Draggables/Activity.tsx
+++ b/front/components/Pages/CourseEdit/Draggables/Activity.tsx
@@ -12,26 +12,27 @@ function Activity(props: any) {
     <Draggable key={props.activity.id} draggableId={props.activity.id} index={props.index}>
       {(provided) => (
         <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 w-auto" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
-          <div >
+          className="flex flex-row py-2 my-2 rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-105 hover:shadow space-x-2 w-auto items-center ring-1 ring-inset ring-gray-400/10 shadow-sm transition-all delay-100 duration-75 ease-linear" key={props.activity.id} {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
+          <div className="px-3 text-gray-300 space-x-1" >
             {props.activity.type === "video" && <Video size={16} />}
             {props.activity.type === "documentpdf" && <FileText size={16} />}
             {props.activity.type === "dynamic" && <Sparkles size={16} />}
-
           </div>
-          <p className="first-letter:uppercase">{props.activity.name} </p>
-          <Link
+          <div className="grow justify-end text-center items-center">
+            <p className="first-letter:uppercase">{props.activity.name} </p>
+          </div>
+          <div className="flex flex-row space-x-1 px-3"><Link
             href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}`}
-            className=" hover:cursor-pointer p-1 rounded-md bg-slate-200"
-            rel="noopener noreferrer"> 
-            <EyeOpenIcon className="text-slate-700"/>
-          </Link>
-          <Link
-            href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
-            className=" hover:cursor-pointer p-1 rounded-md bg-slate-200"
+            className=" hover:cursor-pointer p-1 rounded-md "
             rel="noopener noreferrer">
-            <Pencil2Icon className="text-slate-700" />
+            <EyeOpenIcon className="text-gray-500" />
           </Link>
+            <Link
+              href={getUriWithOrg(props.orgslug, "") + `/course/${props.courseid}/activity/${props.activity.id.replace("activity_", "")}/edit`}
+              className=" hover:cursor-pointer p-1 rounded-md "
+              rel="noopener noreferrer">
+              <Pencil2Icon className="text-gray-500" />
+            </Link></div>
         </div>
       )}
     </Draggable>
diff --git a/front/components/Pages/CourseEdit/Draggables/Chapter.tsx b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
index 833b7a80..8232f4ac 100644
--- a/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
+++ b/front/components/Pages/CourseEdit/Draggables/Chapter.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import Activity from "./Activity";
-import { PlusSquare, Trash, Trash2 } from "lucide-react";
+import { PlusSquare, Sparkle, Sparkles, Trash, Trash2 } from "lucide-react";
 import ConfirmationModal from "@components/StyledElements/ConfirmationModal/ConfirmationModal";
 
 function Chapter(props: any) {
@@ -14,7 +14,7 @@ function Chapter(props: any) {
           {...provided.draggableProps}
           ref={provided.innerRef}
           //  isDragging={snapshot.isDragging}
-          className="backdrop-blur-md"
+          className=""
           key={props.info.list.chapter.id}
         >
           <h3 className="flex space-x-2 pt-3 font-bold text-md items-center">
@@ -36,7 +36,7 @@ function Chapter(props: any) {
           <Droppable key={props.info.list.chapter.id} droppableId={props.info.list.chapter.id} type="activity">
             {(provided) => (
               <ActivitiesList {...provided.droppableProps} ref={provided.innerRef}>
-                <div className="flex flex-col ">
+                <div className="flex flex-col">
                   {props.info.list.activities.map((activity: any, index: any) => (
                     <Activity orgslug={props.orgslug} courseid={props.courseid} key={activity.id} activity={activity} index={index}></Activity>
                   ))}
@@ -44,9 +44,9 @@ function Chapter(props: any) {
 
                   <div onClick={() => {
                     props.openNewActivityModal(props.info.list.chapter.id);
-                  }} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-slate-500 outline-slate-200 bg-slate-50  hover:cursor-pointer">
-                    <PlusSquare className="" size={17} />
-                    <div className="text-sm mx-auto my-auto  items-center font-bold">Add Activity</div>
+                  }} className="flex space-x-2 items-center py-2 my-3 rounded-md justify-center text-white  bg-black  hover:cursor-pointer">
+                    <Sparkles className="" size={17} />
+                    <div className="text-sm mx-auto my-auto  items-center font-bold">Add Activity + </div>
                   </div>
                 </div>
               </ActivitiesList>
diff --git a/front/components/Security/HeaderProfileBox.tsx b/front/components/Security/HeaderProfileBox.tsx
index 43015d9e..bb7eea94 100644
--- a/front/components/Security/HeaderProfileBox.tsx
+++ b/front/components/Security/HeaderProfileBox.tsx
@@ -12,14 +12,14 @@ export const HeaderProfileBox = () => {
   return (
     <ProfileArea>
       {!auth.isAuthenticated && (
-        <UnidentifiedArea>
-          <ul>
+        <UnidentifiedArea className="flex text-sm text-gray-700 font-bold p-1.5 px-2 rounded-lg">
+          <ul className="flex space-x-3 items-center">
             <li>
               <Link href="/login">
                 Login
               </Link>
             </li>
-            <li>
+            <li className="bg-black rounded-lg shadow-md p-2 px-3 text-white">
               <Link href="/signup">
                 Sign up
               </Link>
@@ -28,12 +28,14 @@ export const HeaderProfileBox = () => {
         </UnidentifiedArea>
       )}
       {auth.isAuthenticated && (
-        <AccountArea>
-          <div>{auth.userInfo.user_object.username}</div>
-          <div>
-            <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
+        <AccountArea className="space-x-3">
+          <div className="text-sm text-gray-600 p-1.5 px-2 rounded-lg">{auth.userInfo.user_object.full_name}</div>
+          <div className="flex -space-x-2 items-center">
+            <div className="py-4">
+              <Avvvatars size={26} value={auth.userInfo.user_object.user_id} style="shape" />
+            </div>
+            <Link className="bg-slate-50 p-1.5 rounded-full" href={"/settings"}><GearIcon fontSize={26} /></Link>
           </div>
-          <Link href={"/settings"}><GearIcon/></Link>
         </AccountArea>
       )}
     </ProfileArea>
@@ -44,27 +46,7 @@ const AccountArea = styled.div`
   padding-right: 20px;
   display: flex;
   place-items: center;
-
-  a{
-    // center the gear icon
-    display: flex;
-    place-items: center;
-    place-content: center;
-    width: 29px;
-    height: 29px;
-    border-radius: 19px;
-    background: #F5F5F5;
-
-    // hover effect
-    &:hover{
-      background: #E5E5E5;
-
-    }
-  }
-
-  div {
-    margin-right: 10px;
-  }
+  
   img {
     width: 29px;
     border-radius: 19px;
@@ -82,17 +64,5 @@ const UnidentifiedArea = styled.div`
   place-items: stretch;
   flex-grow: 1;
 
-  ul {
-    display: flex;
-    place-items: center;
-    list-style: none;
-    padding-left: 20px;
-
-    li {
-      padding-right: 20px;
-      font-size: 16px;
-      font-weight: 500;
-      color: #171717;
-    }
-  }
+  
 `;
diff --git a/front/components/StyledElements/Titles/TypeOfContentTitle.tsx b/front/components/StyledElements/Titles/TypeOfContentTitle.tsx
index a06da92b..5030b168 100644
--- a/front/components/StyledElements/Titles/TypeOfContentTitle.tsx
+++ b/front/components/StyledElements/Titles/TypeOfContentTitle.tsx
@@ -8,8 +8,8 @@ function TypeOfContentTitle(props: { title: string, type: string }) {
     function getLogo() {
         if (props.type == "col") {
             return CollectionsLogo;
-        } 
-        
+        }
+
         else if (props.type == "cou") {
             return CoursesLogo;
         }
@@ -21,7 +21,7 @@ function TypeOfContentTitle(props: { title: string, type: string }) {
 
     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">
+            <div className="ml-2 rounded-full ring-1 ring-slate-900/5 shadow-inner p-2 my-auto mr-4">
                 <Image className="" src={getLogo()} alt="Courses logo" />
             </div>
             <h1 className="font-bold text-2xl">{props.title}</h1>
diff --git a/front/components/StyledElements/Wrappers/GeneralWrapper.tsx b/front/components/StyledElements/Wrappers/GeneralWrapper.tsx
index 5b42ad8e..9f22d866 100644
--- a/front/components/StyledElements/Wrappers/GeneralWrapper.tsx
+++ b/front/components/StyledElements/Wrappers/GeneralWrapper.tsx
@@ -2,7 +2,7 @@
 function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
     return (
         <div
-            className='max-w-screen-2xl mx-auto px-16 py-5 tracking-tight'
+            className='max-w-screen-2xl mx-auto px-16 py-5 tracking-tight z-50'
             
         >{children}</div>
     )