WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added color to modal and made the labels same font

Browse Source
This commit was merged in pull request #652.
This commit is contained in:
victorAnumudu
2024-03-19 22:42:52 +01:00
parent f779529cc6
commit 4e741f587c
11 changed files with 74 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/jobPopout/DeleteJobPopout.jsx
+5 -5
View File
@@ -64,13 +64,13 @@ function DeleteJobPopout({ details, onClose, situation }) {
return (
<ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
<div className="modal-header-con">
<h1 className="modal-title">
Delete Job
</h1>
<button
type="button"
className="text-[#374557] dark:text-red-500"
className="modal-close-btn"
onClick={onClose}
>
<svg
@@ -119,10 +119,10 @@ function DeleteJobPopout({ details, onClose, situation }) {
{details.title}
</p>
<p className="text-lg tracking-wide text-dark-gray dark:text-white flex items-start gap-1">
Price: {details.thePrice}
<span className="job-label">Price: </span>{details.thePrice}
</p>
<p className="text-lg tracking-wide text-dark-gray dark:text-white">
Duration: {details.timeline_days} day(s)
<span className="job-label">Duration: </span>{details.timeline_days} day(s)
</p>
</div>
<div className="flex space-x-2.5">
src/components/jobPopout/EditJobPopout.jsx
+7 -7
View File
@@ -212,13 +212,13 @@ const EditJobPopOut = ({
return (
<ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper w-11/12 lg:w-[600px] bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
<div className="modal-header-con">
<h1 className="modal-title">
Edit Job
</h1>
<button
type="button"
className="text-[#374557] dark:text-red-500"
className="modal-close-btn"
onClick={onClose}
>
<svg
@@ -328,8 +328,8 @@ const EditJobPopOut = ({
<div className="field flex flex-col sm:flex-row w-full mb-[5px] gap-2">
<div className="sm:w-[60%] w-full">
<label
htmlFor="Job Delivery Details"
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
htmlFor="job-label"
className='job-label'
>
Job Delivery Details
</label>
@@ -352,7 +352,7 @@ const EditJobPopOut = ({
<div className="sm:w-[35%] w-full">
<div
htmlFor="Job Categories"
className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
className='job-label'
id="checked-group"
>
Categories
@@ -422,7 +422,7 @@ const EditJobPopOut = ({
<div className="field w-1/2">
<div className={`flex items-center justify-between`}>
<label
className="w-full input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex flex-col"
className="job-label flex flex-col"
htmlFor="timeline_days"
>
Timeline -
src/components/jobPopout/JobListPopout.jsx
+3 -3
View File
@@ -303,13 +303,13 @@ function JobListPopout({
return (
<ModalCom action={onClose} situation={situation} className="">
<div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-base md:text-lg font-bold text-dark-gray dark:text-white tracking-wide">
<div className="modal-header-con">
<h1 className="modal-title">
{details.title}
</h1>
<button
type="button"
className="text-[#374557] dark:text-red-500"
className="modal-close-btn"
onClick={onClose}
>
<svg
src/components/jobPopout/PendingJobsPopout.jsx
+5 -5
View File
@@ -135,13 +135,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
return (
<ModalCom action={onClose} situation={situation}>
<div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
<div className="modal-header-con">
<h1 className="modal-title">
Manage Pending Item
</h1>
<button
type="button"
className="text-[#374557] dark:text-red-500"
className="modal-close-btn"
onClick={onClose}
>
<svg
@@ -170,7 +170,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
<p className="text-base font-semibold text-slate-900 dark:text-white tracking-wide">
{details.title}
</p>
<div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
<div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300 rounded-2xl">
<span className="w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100">
!
</span>
@@ -236,7 +236,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
{/* ACTION SECTION */}
<div className="p-4 w-full md:w-1/4 h-full">
<p className="mb-6 text-sm dark:text-white">Actions</p>
<p className="job-label mb-6 dark:text-white">Actions</p>
<div className="mb-3">
<p className="px-2 py-1 text-sm bg-slate-100">