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

changed the background

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2024-02-28 11:05:58 +01:00
parent 264511dfb2
commit fc2a78dde7
3 changed files with 87 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/AuthLayout2.jsx
+38 -33
View File
@@ -1,19 +1,22 @@
import React, { lazy, useContext } from "react"; import React, { useContext } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { localImgLoad } from "../../lib"; import { localImgLoad } from "../../lib";
import DarkModeContext from "../Contexts/DarkModeContext"; import DarkModeContext from "../Contexts/DarkModeContext";
export default function LoginLayout({ slogan, children }) { export default function LoginLayout({ slogan, children }) {
const bgImg = localImgLoad('images/left-wrenchboard.jpg') const bgImg = localImgLoad("images/left-wrenchboard.jpg");
const bgImgNig = localImgLoad('images/wrench-home-back-nigeria.jpg') const bgImgNig = localImgLoad("images/wrench-home-back-nigeria.jpg");
const bgImgCom = localImgLoad('images/wrench-home-back-common.jpg') const bgImgCom = localImgLoad("images/wrench-home-back-common.jpg");
const {countryMode} = useContext(DarkModeContext); const { countryMode } = useContext(DarkModeContext);
return ( return (
<div className={`h-screen overflow-y-auto bg-cover bg-center`} <div
style={{backgroundImage: `url(${ countryMode == 'NG' ? bgImgNig : bgImgCom})`}} className={`h-screen overflow-y-auto bg-cover bg-center`}
style={{
backgroundImage: `url(${countryMode == "NG" ? bgImgNig : bgImgCom})`,
}}
> >
<div className={`w-full grid grid-cols-1 lg:grid-cols-2`}> <div className={`w-full grid grid-cols-1 lg:grid-cols-2`}>
{/* <div {/* <div
@@ -22,41 +25,43 @@ export default function LoginLayout({ slogan, children }) {
> >
</div> */} </div> */}
<div className="p-5 sm:p-7 flex place-content-center lg:col-start-2"> <div className="p-5 sm:p-7 flex place-content-center lg:col-start-2">
<div className="py-5 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 dark:bg-dark-white rounded-[0.475rem]"> <div className="py-5 w-full sm:w-11/12 max-w-2xl shadow-md bg-slate-50 rounded-[0.475rem]">
<div className="w-full flex justify-center items-center"> <div className="w-full flex justify-center items-center">
{children && children} {children && children}
</div> </div>
<div className="w-full flex flex-col justify-center items-center px-10"> <div className="w-full flex flex-col justify-center items-center px-10">
<div className="w-full flex justify-center items-center pt-5"> <div className="w-full flex justify-center items-center pt-5">
<div className="flex items-center"> <div className="flex items-center">
<a <a
href="https://www.wrenchboard.com/about-us" href="https://www.wrenchboard.com/about-us"
className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
About About
</a> </a>
<a <a
href="https://www.wrenchboard.com/service" href="https://www.wrenchboard.com/service"
className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Services Services
</a> </a>
<a <a
href="https://www.wrenchboard.com/contact" href="https://www.wrenchboard.com/contact"
className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
Contact Us Contact Us
</a> </a>
</div> </div>
</div> </div>
<p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1"> <p className="py-1 text-black text-[15px] px-2 font-medium flex items-center gap-1">
<span className="dark:text-white">&copy; {new Date().getFullYear()} -</span> <span className="dark:text-white">
&copy; {new Date().getFullYear()} -
</span>
<Link to="/" className="text-[#009ef7] ml-1"> <Link to="/" className="text-[#009ef7] ml-1">
WrenchBoard WrenchBoard
</Link>{" "} </Link>{" "}
src/components/AuthPages/Login/index2.jsx
+47 -32
View File
@@ -24,7 +24,9 @@ export default function Login() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { state } = useLocation(); const { state } = useLocation();
const [sessionExpired, setSessionExpired] = useState(queryParams.get("sessionExpired")) const [sessionExpired, setSessionExpired] = useState(
queryParams.get("sessionExpired")
);
const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA const [validCaptcha, setValidCaptcha] = useState({ show: false, valid: "" }); // FOR CAPTCHA
@@ -97,7 +99,7 @@ export default function Login() {
username: email, username: email,
password: password, password: password,
sessionid: "STARTING", sessionid: "STARTING",
login_mode: 1100 login_mode: 1100,
}; };
} else if (name == "family") { } else if (name == "family") {
// Post Data Info for family Login // Post Data Info for family Login
@@ -105,7 +107,7 @@ export default function Login() {
username: email, username: email,
pin: password, pin: password,
sessionid: "20067A92714", sessionid: "20067A92714",
login_mode: 1105 login_mode: 1105,
}; };
} else { } else {
setLoginLoading(false); setLoginLoading(false);
@@ -235,19 +237,18 @@ export default function Login() {
setPassword(""); setPassword("");
}, [loginType]); }, [loginType]);
// EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS // EFFECT TO CLEAR SESSION EXPIRY IF IT EXISTS AFTER SOME SECONDS
useEffect(()=>{ useEffect(() => {
let timer; let timer;
if(sessionExpired == "true"){ if (sessionExpired == "true") {
timer = setTimeout(()=>{ timer = setTimeout(() => {
setSessionExpired(false) setSessionExpired(false);
},5000) }, 5000);
} }
return () => { return () => {
clearTimeout(timer) clearTimeout(timer);
} };
}, []) }, []);
return ( return (
<> <>
@@ -523,25 +524,39 @@ export default function Login() {
{/* APP DOWNLOAD STORE */} {/* APP DOWNLOAD STORE */}
<div className="w-full mt-4"> <div className="w-full mt-4">
<div className="w-full flex justify-center items-center gap-4"> <div className="w-full flex justify-center items-center gap-4">
<div className='w-28 lg:w-32'> <div className="w-28 lg:w-32">
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_APPLE_APP}> <a
<i className="fa-brands fa-apple text-3xl"></i> className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
<div className="flex flex-col"> target="_blank"
<span className="text-[11px]">Available on the</span> rel="noreferrer"
<span className="text-[12px] lg:text-base">App Store</span> href={process.env.REACT_APP_APPLE_APP}
</div> >
</a> <i className="fa-brands fa-apple text-3xl"></i>
</div> <div className="flex flex-col">
<div className='w-28 lg:w-32'> <span className="text-[11px]">Available on the</span>
<a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}> <span className="text-[12px] lg:text-base">
<i className="fa-brands fa-google-play text-2xl"></i> App Store
<div className="flex flex-col"> </span>
<span className="text-[11px]">Available on the</span> </div>
<span className="text-[12px] lg:text-base">Google Play</span> </a>
</div>
</a>
</div>
</div> </div>
<div className="w-28 lg:w-32">
<a
className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
target="_blank"
rel="noreferrer"
href={process.env.REACT_APP_ANDROID_APP}
>
<i className="fa-brands fa-google-play text-2xl"></i>
<div className="flex flex-col">
<span className="text-[11px]">Available on the</span>
<span className="text-[12px] lg:text-base">
Google Play
</span>
</div>
</a>
</div>
</div>
</div> </div>
{loginType == "full" && ( {loginType == "full" && (
<> <>
@@ -590,7 +605,7 @@ const BrandBtn = ({
{isAnchor ? ( {isAnchor ? (
<a <a
href={link} href={link}
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer" className="w-full border border-light-purple rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 items-center font-medium cursor-pointer"
> >
<img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" /> <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
<span className="text-lg text-thin-light-gray font-normal text-[15px]"> <span className="text-lg text-thin-light-gray font-normal text-[15px]">
@@ -601,7 +616,7 @@ const BrandBtn = ({
<button <button
onClick={onClick} onClick={onClick}
// href="#dd" // href="#dd"
className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer" className="w-full border border-light-purple rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 items-center font-medium cursor-pointer"
> >
<img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" /> <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
<span className="text-lg text-thin-light-gray font-normal text-[15px]"> <span className="text-lg text-thin-light-gray font-normal text-[15px]">
src/components/Helpers/Inputs/InputCom/index.jsx
+2 -2
View File
@@ -53,7 +53,7 @@ export default function InputCom({
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}> <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
{label && ( {label && (
<label <label
className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1" className="input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
htmlFor={name} htmlFor={name}
> >
{label} {label}
@@ -86,7 +86,7 @@ export default function InputCom({
className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${ className={`input-wrapper w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-base ${
inputClass inputClass
? inputClass ? inputClass
: "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] border" : "text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] border"
}`} }`}
> >
<input <input