Skip to content

Commit c2e089c

Browse files
ssoc2dzafeirisssoc2dzafeiris
authored
Merge pull request #6 from zafeirisdimi/main
Fixed Edit/Delete buttons css
2 parents 74d177d + 98fe68b commit c2e089c

File tree

6 files changed

+50
-58
lines changed

6 files changed

+50
-58
lines changed

‎src/Pages/CourseDetails.js‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
import {useState,useEffect} from 'react';
22
import {useParams} from "react-router-dom";
33
import LoadingSpinner from '../components/Utilities/Loaders/LoadingSpinner.js';
4-
54
import Buttons from "../components/Utilities/Buttons/buttons";
6-
75
export default function CourseDetails(){
86
const API = 'https://chain-legendary-strawflower.glitch.me/courses/';
97
const params = useParams();
108
const [course,setCourse]= useState(null);
11-
// const navigate = useNavigate();
129
const fetchDetails = () =>{
1310
setTimeout(function()
1411
{
15-
fetch(`${API}${params.id}`)
16-
.then((res)=> res.json())
17-
.then((data) => setCourse(data))
18-
19-
.catch((error) => {
20-
console.log("Error in fetching:",error)
21-
});
22-
}, 1500);
12+
fetch(`${API}${params.id}`)
13+
.then((res)=> res.json())
14+
.then((data) => setCourse(data))
15+
.catch((error) => {console.log("Error in fetching:",error)});
16+
}, 1000);
2317
}
2418
useEffect(()=>{
2519
fetchDetails()
@@ -37,40 +31,39 @@ export default function CourseDetails(){
3731
</div>
3832
<div className="w-full md:w-5/12 ml-auto mr-auto flex flex-col">
3933
<div className="md:pr-12">
40-
<h3 className="text-3xl font-semibold text-indigo-500 underline underline-offset-8 hover:text-gray-600 hover:duration-600">{course.title}</h3>
41-
<p className="mt-2 text-lg leading-relaxed text-slate-700 border-b-2 border-gray-500 py-2 antialiased">{course.description}</p>
42-
<ul className="list-none flex-wrap grid grid-cols-2 mb-1">
34+
<h3 className="text-3xl font-bold text-indigo-500 underline underline-offset-8 hover:text-gray-600 hover:duration-600">{course.title}</h3>
35+
<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>
36+
<ul className="list-none flex-wrap grid grid-cols-2 mb-3 mt-5">
4337
<li className="py-2 flex flex-col">
44-
<div className="flex items-center">
45-
<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>
46-
<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>
38+
<div className="flex items-center">
39+
<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>
40+
<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>
41+
</li>
4742
<li className="py-2 flex flex-col">
4843
<div className="flex items-center">
49-
<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>
50-
<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>
44+
<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>
45+
<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>
5146
<li className="py-2 flex flex-col">
5247
<div className="flex items-center">
53-
<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>
54-
<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>
48+
<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>
49+
<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>
5550
<li className="py-2 flex flex-col">
5651
<div className="flex items-center">
57-
<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>
58-
<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>
52+
<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>
53+
<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>
5954
<li className="py-2 flex flex-col">
6055
<div className="flex items-center">
61-
<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>
62-
<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>
56+
<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>
57+
<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>
6358
<li className="py-2 flex flex-col">
6459
<div className="flex items-center">
65-
<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>
66-
<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>
60+
<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>
61+
<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>
6762
</ul>
6863
<Buttons fetchDetails={fetchDetails()} data={course} idNumber={course.id} />
69-
7064
</div>
7165
</div>
7266
</div>
73-
7467
</>
7568
) ;
7669
}

‎src/components/Utilities/Buttons/buttondelete.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,10 @@ export default function ButtonDelete(props){
1414

1515
return (
1616
<>
17-
<button onClick={() => openModal()} className="border-4 border-indigo-200 hover:border-b-gray-500 bg-blue-500 hover:bg-cyan-600">
18-
<span className="m-8">Delete</span>
17+
<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">
18+
<i class="fa-solid fa-trash-can"></i> Delete
1919
</button>
20-
21-
<DelleteMessage idNumber={props.idNumber} closeModal={closeModal} open={isModalOpen} close={closeModal} />
22-
20+
<DelleteMessage idNumber={props.idNumber} closeModal={closeModal} open={isModalOpen} close={closeModal} />
2321
</>
2422
);
2523
}

‎src/components/Utilities/Buttons/buttonedit.js‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,13 @@ import EditPage from "../../editPage";
33

44
export default function ButtonEdit(props){
55
const [isModalOpen, setIsModalOpen] = useState(false);
6-
7-
function closeModal() {
8-
setIsModalOpen(false);
9-
}
10-
function openModal() {
11-
setIsModalOpen(true);
12-
}
6+
function closeModal() {setIsModalOpen(false);}
7+
function openModal() {setIsModalOpen(true);}
138
return (
14-
159
<div style={{ position: 'relative', zIndex: '1' }}>
16-
<button onClick={() => openModal()} className="border-4 border-indigo-200 hover:border-b-gray-500 bg-blue-500 hover:bg-cyan-600">
17-
<span className="m-8">Edit</span></button>
18-
19-
<EditPage fetchDetails={props.fetchDetails} data = {props.data} idNumber={props.idNumber} open={isModalOpen} close={closeModal} />
10+
<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">
11+
<i class="fa-solid fa-pen-to-square"></i> Edit</button>
12+
<EditPage fetchDetails={props.fetchDetails} data={props.data} idNumber={props.idNumber} open={isModalOpen} close={closeModal} />
2013
</div>
2114
);
2215
}

‎src/components/Utilities/Buttons/buttons.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
1-
21
import ButEdit from "./buttonedit";
32
import ButDel from "./buttondelete";
4-
5-
6-
73
export default function Buttons(props){
84

95
return (
10-
<div className="grid grid-cols-5 gap-4 text-lg m-8">
11-
<div className="col-span-3"></div>
12-
<div><ButEdit data={props.data} idNumber={props.idNumber}/></div>
13-
<div><ButDel idNumber={props.idNumber} /></div>
14-
<>
15-
</>
16-
6+
<div className="flex flex-wrap items-center justify-start mt-5 mb-5">
7+
<div className="flex flex-col"><ButEdit data={props.data} idNumber={props.idNumber}/></div>
8+
<div className="flex flex-col"><ButDel idNumber={props.idNumber} /></div>
179
</div>
1810
);
1911
}

‎src/components/Utilities/Cards/CourseDetailsItem.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default function CourseDetailsItem({IconTitle,heading,content}){
2+
// IconTitle is from FontAwesome etc <i class="fa-solid fa-hand-pointer"></i> => IconTitle = {"fa-solid fa-hand-pointer"}
3+
return(
4+
<>
5+
<li className="py-2 flex flex-col">
6+
<div className="flex items-center">
7+
<div>
8+
<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>
9+
<div>
10+
<h4 className="text-slate-600 hover:text-indigo-500 font-normal hover:underline text-normal">{heading}: <span>{content}</span></h4>
11+
</div>
12+
</div>
13+
</li>
14+
</>
15+
)
16+
}

‎src/components/Utilities/Cards/TeamUserCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import {faCodeCompare,faAt,faLink} from '@fortawesome/free-solid-svg-icons'
4-
export default function TeamUserCard({title,fname,lname,bio,github,linkedin,email}){
54

5+
export default function TeamUserCard({title,fname,lname,bio,github,linkedin,email}){
66
return(
77
<>
88
<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">

0 commit comments

Comments
 (0)