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

dark mode style changed for pagination btn and manage active job #174

Merged
ameye merged 1 commits from pagination-dark-mode into master 2023-06-15 10:34:23 +00:00
Conversation 0 Commits 1 Files Changed 8
+31 -31
8 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobs.jsx
+16 -16
View File
@@ -250,7 +250,7 @@ function ActiveJobs(props) {
return (
<Layout>
<div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
<div className="py-[20px] bg-white dark:bg-black dark:text-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-16">
{/* job title */}
<div className="w-full md:w-8/12">
<div className="w-full flex justify-start space-x-3 items-start">
@@ -280,8 +280,8 @@ function ActiveJobs(props) {
<p className="w-full text-base text-right text-sky-blue">
{props.details.job_to && props.details.job_to}
</p>
<div className="text-base text-slate-700 dark:text-black tracking-wide">
<p className="font-semibold text-black">Description: </p>
<div className="text-base text-slate-700 dark:text-white tracking-wide">
<p className="font-semibold text-black dark:text-white">Description: </p>
<p className="p-2 border border-sky-blue">
{props.details?.description && props.details.description}
</p>
@@ -295,12 +295,12 @@ function ActiveJobs(props) {
<p className="text-base text-sky-blue">Delivery Detail</p>
{passDue ? (
<div className="my-1">
<p className="text-base text-slate-700 dark:text-black">
<p className="text-base text-slate-700">
<span className="font-semibold">Due: </span>
{props.details?.delivery_date &&
props.details.delivery_date.split(" ")[0]}
</p>
<p className="py-2 text-base text-slate-700 dark:text-black">
<p className="py-2 text-base text-slate-700">
{props.details?.delivery_date &&
props.details.delivery_date.split(" ")[1]}
</p>
@@ -309,10 +309,10 @@ function ActiveJobs(props) {
<div className="my-1 flex items-start gap-3">
<p className="font-semibold">Due: </p>
<div className="flex flex-col justify-between">
<p className="text-base text-slate-700 dark:text-black tracking-wide">
<p className="text-base text-slate-700 tracking-wide">
<CountDown lastDate={props.details.delivery_date} />
</p>
<div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
<div className="text-base text-slate-700 tracking-wide flex gap-[5px]">
<span>Hrs</span>
<span>Min</span>
<span>Sec</span>
@@ -321,15 +321,15 @@ function ActiveJobs(props) {
</div>
)}
<div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
<span className="font-semibold text-black">Duration: </span>
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
<span className="font-semibold text-black dark:text-white">Duration: </span>
<span className="">
{props.details?.timeline_days && props.details.timeline_days}{" "}
day(s)
</span>
</div>
<div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
<span className="font-semibold text-black">No: </span>
<div className="my-1 text-base text-slate-700 tracking-wide flex items-center gap-3">
<span className="font-semibold text-black dark:text-white">No: </span>
<span className="">
{props.details?.contract && props.details.contract}
</span>
@@ -338,7 +338,7 @@ function ActiveJobs(props) {
{/* end of job details */}
</div>
<div className="my-4 py-[20px] bg-white px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
<div className="my-4 py-[20px] bg-white dark:bg-black px-4 rounded-2xl shadow-md lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
<div className="w-full lg:w-1/2">
<div className="">
<h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
@@ -358,7 +358,7 @@ function ActiveJobs(props) {
<button
name="message"
onClick={(e) => setTab(e.target.name)}
className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
tab == "message" ? "border-sky-blue" : "border-slate-300"
} tracking-wide transition duration-200`}
>
@@ -367,7 +367,7 @@ function ActiveJobs(props) {
<button
name="files"
onClick={(e) => setTab(e.target.name)}
className={`p-2 text-lg font-bold text-slate-600 dark:text-black border ${
className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
tab == "files" ? "border-sky-blue" : "border-slate-300"
} tracking-wide transition duration-200`}
>
@@ -376,7 +376,7 @@ function ActiveJobs(props) {
</div>
{tab == "message" ? (
<textarea
className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300 outline-none"
className="p-4 w-full h-[300px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
// rows="10"
style={{ resize: "none" }}
name="message"
@@ -498,7 +498,7 @@ function ActiveJobs(props) {
{/* MESSAGE SECTION */}
<div className="w-full lg:w-1/2">
<div className="flex justify-between items-center gap-5">
<p className="text-lg font-bold text-dark-gray dark:text-black tracking-wide">
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
Message
</p>
<button
src/components/MyActiveJobs/JobActions/CurrentJobAction.jsx
+2 -2
View File
@@ -2,9 +2,9 @@ import React from 'react'
function CurrentJobAction() {
return (
<div className='job-action'>
<div className='job-action bg-white dark:bg-black'>
<p className="my-3 py-1 text-base active-owner">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<table className="w-full text-sm text-left text-gray-500">
<tbody>
<tr>
<td>
src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
+2 -2
View File
@@ -60,9 +60,9 @@ function CurrentTaskAction({jobDetails}) {
}
return (
<div className='job-action'>
<div className='job-action bg-white dark:bg-black'>
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 active-worker">
<table className="w-full text-sm text-left text-gray-500 active-worker">
<tbody>
<tr>
<td>
src/components/MyActiveJobs/JobActions/PastDueJobAction.jsx
+2 -2
View File
@@ -101,9 +101,9 @@ function PastDueJobAction({jobDetails}) {
}
return (
<div className='job-action'>
<div className='job-action bg-white dark:bg-black'>
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 owner-pastdue">
<table className="w-full text-sm text-left text-gray-500 owner-pastdue">
<tbody>
<tr>
<td>
src/components/MyActiveJobs/JobActions/PastDueTaskAction.jsx
+2 -2
View File
@@ -2,9 +2,9 @@ import React from 'react'
function PastDueTaskAction() {
return (
<div className='job-action'>
<div className='job-action bg-white dark:bg-black'>
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 worker-pastdue">
<table className="w-full text-sm text-left text-gray-500 worker-pastdue">
<tbody>
<tr>
<td>
src/components/MyActiveJobs/JobActions/ReviewJobAction.jsx
+2 -2
View File
@@ -90,9 +90,9 @@ function ReviewJobAction({jobDetails}) {
})
}
return (
<div className='job-action'>
<div className='job-action bg-white dark:bg-black'>
<div className="my-3 py-1 text-base">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 review-owner">
<table className="w-full text-sm text-left text-gray-500 review-owner">
<tbody>
<tr>
<td>
src/components/MyActiveJobs/JobActions/ReviewTaskAction.jsx
+2 -2
View File
@@ -2,8 +2,8 @@ import React from 'react'
function ReviewTaskAction() {
return (
<div className='job-action'>
<p className="my-3 py-1 text-base">
<div className='job-action bg-white dark:bg-black'>
<p className="my-3 py-1 text-base text-dark-gray dark:text-white">
Waiting for the completion message from the client before you can approve. Worker True & Review Job
</p>
</div>
src/components/Pagination/PaginatedList.jsx
+3 -3
View File
@@ -6,7 +6,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
{!prev && (
<button
className={`p-2 border ${
prev ? "border-black" : "border-transparent"
prev ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white"
} btn-shine rounded-full h-11 w-11`}
name="prev"
onClick={onClick}
@@ -26,7 +26,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
key={index}
value={index}
className={`p-2 border ${
index === start ? "border-black" : "border-transparent"
index === start ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white"
} btn-shine rounded-full h-11 w-11`}
onClick={onClick}
name="page_num"
@@ -43,7 +43,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
{!next && (
<button
className={`p-2 border ${
next ? "border-black" : "border-transparent"
next ? "border-black dark:border-white dark:text-white" : "border-transparent dark:text-white"
} btn-shine rounded-full h-11 w-11`}
name="next"
onClick={onClick}