Fixed Edit/Delete buttons css

src/Pages/CourseDetails.js

@@ -1,25 +1,19 @@
 import {useState,useEffect} from 'react';
 import {useParams} from "react-router-dom";
 import LoadingSpinner from '../components/Utilities/Loaders/LoadingSpinner.js';
-
 import Buttons from "../components/Utilities/Buttons/buttons";
-
 export default function CourseDetails(){
     const API = 'https://chain-legendary-strawflower.glitch.me/courses/';
     const params = useParams();
     const [course,setCourse]= useState(null);
-    // const navigate = useNavigate();
     const fetchDetails = () =>{
         setTimeout(function() 
         {
-        fetch(`${API}${params.id}`)
-        .then((res)=> res.json())
-        .then((data) => setCourse(data))
-
-        .catch((error) => {
-            console.log("Error in fetching:",error)
-          });
-        }, 1500);
+            fetch(`${API}${params.id}`)
+            .then((res)=> res.json())
+            .then((data) => setCourse(data))
+            .catch((error) => {console.log("Error in fetching:",error)});
+        }, 1000);
     }
     useEffect(()=>{
         fetchDetails()
@@ -37,40 +31,39 @@ export default function CourseDetails(){
                     </div>
                         <div className="w-full md:w-5/12 ml-auto mr-auto flex flex-col">
                         <div className="md:pr-12">
-                        <h3 className="text-3xl font-semibold  text-indigo-500 underline underline-offset-8 hover:text-gray-600 hover:duration-600">{course.title}</h3>
-                        <p className="mt-2 text-lg leading-relaxed text-slate-700 border-b-2 border-gray-500 py-2 antialiased">{course.description}</p>
-                        <ul className="list-none flex-wrap grid grid-cols-2 mb-1">
+                        <h3 className="text-3xl font-bold text-indigo-500 underline underline-offset-8 hover:text-gray-600 hover:duration-600">{course.title}</h3>
+                        <p className="mt-3 mb-3 text-lg leading-relaxed text-slate-700 border-b-2 border-gray-500 py-2 antialiased">{course.description}</p>
+                        <ul className="list-none flex-wrap grid grid-cols-2 mb-3 mt-5">
                             <li className="py-2 flex flex-col">
-                            <div className="flex items-center">
-                                <div><span className="text-normal font-semibold inline-block py-1 px-2 uppercase rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-calendar-minus"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-semibold hover:underline text-normal">Start Date:<span>{course.dates.start_date.split("-").reverse().join("/")}</span></h4></div></div></li>
+                                <div className="flex items-center">
+                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-calendar-minus"></i></span></div>
+                                <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Start Date:<span>{course.dates.start_date.split("-").reverse().join("/")}</span></h4></div></div>
+                            </li>
                         <li className="py-2 flex flex-col">
                             <div className="flex items-center">
-                                <div><span className="text-normal font-semibold inline-block py-1 px-2 uppercase rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-calendar-plus"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-semibold hover:underline text-normal">End Date:<span>{course.dates.end_date.split("-").reverse().join("/")}</span></h4></div></div></li>
+                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-calendar-plus"></i></span></div>
+                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">End Date:<span>{course.dates.end_date.split("-").reverse().join("/")}</span></h4></div></div></li>
                         <li className="py-2 flex flex-col">
                             <div className="flex items-center">
-                                <div><span className="text-normal font-semibold inline-block py-1 px-2 uppercase rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-clock"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-semibold hover:underline text-normal">Duration:<span>{course.duration}</span></h4></div></div></li>
+                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-clock"></i></span></div>
+                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Duration:<span>{course.duration}</span></h4></div></div></li>
                         <li className="py-2 flex flex-col">
                             <div className="flex items-center">
-                                <div><span className="text-normal font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-100 bg-indigo-600 mr-3"><i className="fa-solid fa-globe"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-semibold hover:underline text-normal">Online:<span>{course.online ? "Yes" : " No"}</span></h4></div></div></li>
+                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-gray-100 bg-indigo-600 mr-3"><i className="fa-solid fa-globe"></i></span></div>
+                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Online:<span>{course.online ? "Yes" : " No"}</span></h4></div></div></li>
                         <li className="py-2 flex flex-col">
                             <div className="flex items-center">
-                                <div><span className="text-normal font-semibold inline-block py-1 px-2 uppercase rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-coins"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-semibold hover:underline text-normal">Normal Price:<span>{course.price.normal}</span></h4></div></div></li>
+                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-coins"></i></span></div>
+                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Normal Price:<span>{course.price.normal}</span></h4></div></div></li>
                         <li className="py-2 flex flex-col">
                             <div className="flex items-center">
-                                <div><span className="text-normal font-semibold inline-block py-1 px-2 uppercase rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-gift"></i></span></div>
-                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-semibold hover:underline text-normal">Early-bird Price:<span>{course.price.early_bird}</span></h4></div></div></li>
+                                <div><span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className="fa-solid fa-gift"></i></span></div>
+                        <div><h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">Early-bird Price:<span>{course.price.early_bird}</span></h4></div></div></li>
                         </ul>
                         <Buttons fetchDetails={fetchDetails()} data={course} idNumber={course.id} />
-
                         </div>
                         </div>
                         </div>
-
             </>
         ) ;
     }

src/components/Utilities/Buttons/buttondelete.js

@@ -14,12 +14,10 @@ export default function ButtonDelete(props){
 
     return (
         <>
-        <button onClick={() => openModal()} className="border-4 border-indigo-200 hover:border-b-gray-500 bg-blue-500 hover:bg-cyan-600">
-        <span className="m-8">Delete</span>
+        <button onClick={() => openModal()} className="text-white bg-red-600 hover:bg-gray-900 hover:ease-out hover:duration-300 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">
+        <i class="fa-solid fa-trash-can"></i> Delete
         </button>
-
-            <DelleteMessage idNumber={props.idNumber} closeModal={closeModal}  open={isModalOpen} close={closeModal} />
-
+            <DelleteMessage idNumber={props.idNumber} closeModal={closeModal} open={isModalOpen} close={closeModal} />
         </>
     );
 }

src/components/Utilities/Buttons/buttonedit.js

@@ -3,20 +3,13 @@ import EditPage from "../../editPage";
 
 export default function ButtonEdit(props){
     const [isModalOpen, setIsModalOpen] = useState(false);
-
-    function closeModal() {
-        setIsModalOpen(false);
-    }
-    function openModal() {
-        setIsModalOpen(true);
-    }
+    function closeModal() {setIsModalOpen(false);}
+    function openModal() {setIsModalOpen(true);}
     return (
-
        <div style={{ position: 'relative', zIndex: '1' }}>
-            <button onClick={() => openModal()} className="border-4 border-indigo-200 hover:border-b-gray-500 bg-blue-500 hover:bg-cyan-600">
-            <span className="m-8">Edit</span></button>
-
-            <EditPage fetchDetails={props.fetchDetails}  data = {props.data} idNumber={props.idNumber} open={isModalOpen} close={closeModal} />
+            <button onClick={() => openModal()} className="text-white  bg-indigo-400 border border-gray-300  hover:bg-white hover:ease-out hover:duration-300 hover:text-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">
+            <i class="fa-solid fa-pen-to-square"></i> Edit</button>
+            <EditPage fetchDetails={props.fetchDetails}  data={props.data} idNumber={props.idNumber} open={isModalOpen} close={closeModal} />
         </div>
     );
 }

src/components/Utilities/Buttons/buttons.js

@@ -1,19 +1,11 @@
-
 import ButEdit from "./buttonedit";
 import ButDel from "./buttondelete";
-
-
-
 export default function Buttons(props){
 
     return (
-        <div className="grid grid-cols-5 gap-4 text-lg m-8">
-            <div className="col-span-3"></div>
-            <div><ButEdit  data={props.data} idNumber={props.idNumber}/></div>
-            <div><ButDel idNumber={props.idNumber} /></div>
-            <>
-       </>
-
+        <div className="flex flex-wrap items-center justify-start mt-5 mb-5">
+            <div className="flex flex-col"><ButEdit data={props.data} idNumber={props.idNumber}/></div>
+            <div className="flex flex-col"><ButDel idNumber={props.idNumber} /></div>
         </div>
     );
 }

src/components/Utilities/Cards/CourseDetailsItem.js

@@ -0,0 +1,16 @@
+export default function CourseDetailsItem({IconTitle,heading,content}){
+    // IconTitle is from FontAwesome etc <i class="fa-solid fa-hand-pointer"></i> => IconTitle = {"fa-solid fa-hand-pointer"}
+    return(
+        <>
+        <li className="py-2 flex flex-col">
+            <div className="flex items-center">
+            <div>
+                <span className="text-normal font-normal inline-block py-1 px-2 rounded-full text-slate-100 bg-indigo-600 mr-3"><i className={IconTitle}></i></span></div>
+            <div>
+                <h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">{heading}: <span>{content}</span></h4>
+            </div>
+            </div>
+        </li>
+        </>
+    )
+}

src/components/Utilities/Cards/TeamUserCard.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {faCodeCompare,faAt,faLink} from '@fortawesome/free-solid-svg-icons'
-export default function TeamUserCard({title,fname,lname,bio,github,linkedin,email}){
 
+export default function TeamUserCard({title,fname,lname,bio,github,linkedin,email}){
     return(
         <>
          <div className="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-indigo-600 dark:border-slate-700 dark:hover:border-transparent">