fix:fix ui issue in all pages

koders-in · Dec 7, 2022 · 09abf8f · 09abf8f
1 parent dae46b6
commit 09abf8f
Show file tree

Hide file tree

Showing 68 changed files with 2,689 additions and 717 deletions.
diff --git a/assets/index.ts b/assets/index.ts
@@ -66,6 +66,16 @@ import tealWorkers from "../public/images/teal-workers.svg";
 import tealAwards from "../public/images/teal-awards.svg";
 import tealWorkspace from "../public/images/teal-workspace.svg";
 import okay from "../public/images/okay.svg";
+import duration from "../public/images/duration.svg";
+import linkedInTeal from "../public/images/linkedinTeal.svg";
+import githubTeal from "../public/images/githubTeal.svg";
+import twitterTeal from "../public/images/twitterTeal.svg";
+import discordTeal from "../public/images/discordTeal.svg";
+import crossTeal from "../public/images/crossTeal.svg";
+import locationTealCont from "../public/images/locationTealCont.svg";
+import tealMobileCont from "../public/images/tealMobileCont.svg";
+import mailTealCont from "../public/images/mailTealCont.svg";
+import mail from "../public/images/mail.svg";
 
 // Assets for technologies components
 
@@ -237,4 +247,14 @@ export {
   tealAwards,
   tealWorkspace,
   okay,
+  duration,
+  linkedInTeal,
+  githubTeal,
+  twitterTeal,
+  discordTeal,
+  crossTeal,
+  locationTealCont,
+  tealMobileCont,
+  mailTealCont,
+  mail,
 };
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -5,11 +5,16 @@ import { useRouter } from "next/router";
 
 import { location, logo, phone } from "../assets";
 import AnimatedBorder from "./AnimatedBorder";
-import { footerButtons, socialMediaHandles } from "../helper/constant";
+import {
+  footerButtons,
+  socialMediaHandles,
+  socialMediaTealIcons,
+} from "../helper/constant";
 
 const Footer = () => {
   const [onHover, setOnHover] = useState(false);
   const [hoverOnMob, setHoverOnMob] = useState(false);
+  const [hoverOnSocialMedia, setHoverOnSocialMedia] = useState<any>(false);
 
   const router = useRouter();
   const handleNavigate = (href: string) => {
@@ -44,17 +49,21 @@ const Footer = () => {
           <div className="flex items-center my-3 gap-2">
             {socialMediaHandles.map((item, i) => (
               <Image
-                src={item.src}
+                src={
+                  hoverOnSocialMedia === i ? socialMediaTealIcons[i] : item.src
+                }
                 alt={item.src}
                 key={i}
                 className="h-7 cursor-pointer brightness-50 hover:brightness-100"
                 onClick={() => {
                   window.open(item.url, "_blank");
                 }}
+                onMouseEnter={() => setHoverOnSocialMedia(i)}
+                onMouseLeave={() => setHoverOnSocialMedia(false)}
               />
             ))}
           </div>
-          <div className="flex justify-start items-center  mt-4 text-[0.9rem] sm:text-[1rem] ml-2">
+          <div className="flex justify-start items-start  mt-4 text-[0.9rem] sm:text-[1rem] ml-2">
             <Image
               src={location}
               alt="location"
@@ -139,7 +148,7 @@ const Footer = () => {
           })}
         </div>
       </div>
-      <p className="py-5 px-2 text-main-light_white text-[0.85rem] sm:text-[1.2rem] text-center font-miligramMedium">
+      <p className="py-5 px-2 text-main-light_white text-[0.85rem] sm:text-[1.2rem] text-center font-miligramText400">
         Copyright ©2022 | Koders. All rights reserved.
       </p>
     </>

diff --git a/components/InputBox.tsx b/components/InputBox.tsx
@@ -9,6 +9,7 @@ interface Props {
   styling?: string;
   errorText?: any;
   onBlur?: (props: any) => void;
+  id?: string;
 }
 
 const InputBox = ({
@@ -20,24 +21,26 @@ const InputBox = ({
   type,
   errorText,
   onBlur,
+  id,
 }: Props) => {
   return (
     <div className="w-full relative">
       <span
-        className={`absolute text-red-600 text-xs top-0 left-0 ${
+        className={`absolute text-red-600 text-xs -top-3 sm:top-0 left-0 ${
           errorText ? "opacity-100" : "opacity-0"
         } `}
       >
         {errorText}
       </span>
       <input
+        id={id}
         type={type}
         value={value}
         onBlur={onBlur}
         name={name}
         onChange={handleChange}
         placeholder={placeholder}
-        className={`px-1 text-[0.9rem] md:text-[1.2rem] text-main-light_white sm:mt-5 pb-1 sm:pb-3 bg-transparent tracking-[1px] sm:tracking-[2px] border-b-2 outline-none border-main-light_white placeholder:text-main-light_white w-full ${styling}`}
+        className={`font-miligramLight px-1 text-[0.9rem] md:text-[1rem] lg:text-[1.2rem] text-main-light_white sm:mt-5 pb-1 sm:pb-3 bg-transparent tracking-[1px] sm:tracking-[2px] border-b-2 outline-none border-main-light_white placeholder:text-main-light_white w-full ${styling}`}
       />
     </div>
   );

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -33,7 +33,7 @@ const Navbar = () => {
           </button>
           <Button
             OnClick={() => {
-              handleNavigate("/Blogs");
+              handleNavigate("/blogs");
             }}
             text="Blogs"
             isBorder={true}
@@ -62,7 +62,7 @@ const Navbar = () => {
         />
         <Button
           OnClick={() => {
-            handleNavigate("/StartProject");
+            handleNavigate("/start-project");
           }}
           text="Get Started"
           className="font-miligramMedium text-[0.8rem] xxl:text-[1rem] bg-main-greenOpt-200 border-[1px] border-main-lightTeal text-main-lightTeal px-4 py-[0.4rem] sm:py-[0.55rem] sm:px-8 rounded-lg hover:bg-main-lightTeal hover:text-white"

diff --git a/components/SelectBox.tsx b/components/SelectBox.tsx
@@ -51,7 +51,9 @@ const SelectBox = ({
       className={`select relative ${
         mainStyle
           ? mainStyle
-          : " flex gap-2 cursor-pointer items-center border-b-2 border-main-light_white w-full pb-1 sm:pb-3 text-[0.9rem] md:text-[1.2rem] sm:mt-5 relative"
+          : `flex gap-2 cursor-pointer items-center border-b-2 w-full pb-1 sm:pb-3 text-[0.9rem] md:text-[1.2rem] sm:mt-5 relative ${
+              show ? "border-main-teal" : "border-main-light_white"
+            }`
       } `}
     >
       <span
@@ -62,7 +64,7 @@ const SelectBox = ({
         {errorText}
       </span>
       <div
-        className={`relative select-label px-1 text-main-light_white bg-transparent border-none outline-none tracking-[1px] sm:tracking-[2px] placeholder:text-main-light_white w-full ${innelStyle}`}
+        className={`font-miligramLight relative select-label px-1 text-main-light_white bg-transparent border-none outline-none tracking-[1px] sm:tracking-[2px] placeholder:text-main-light_white w-full ${innelStyle}`}
       >
         {value ? value : placeholder}
       </div>

diff --git a/components/ThankModal.tsx b/components/ThankModal.tsx
@@ -70,7 +70,7 @@ const ThankModal = ({ isShow, toogleThankModal }: Props) => {
 
         <GradientText
           className="w-[90%] sm:w-fit mx-auto text-[1.6rem] sm:text-[2.6rem] text-center bg-gradient-to-r from-white to-main-teal font-miligrambold"
-          text="What we Offer"
+          text="Thank You!"
         />
         <div>
           <p className="text-white font-miligramLight text-center m-0 p-0">
@@ -82,7 +82,7 @@ const ThankModal = ({ isShow, toogleThankModal }: Props) => {
         </div>
         <div className="flex items-center justify-center gap-3">
           <Button
-            OnClick={toogleThankModal}
+            OnClick={closeModal}
             text="Back to Jobs"
             className="font-miligramMedium text-[0.8rem] xxl:text-[1rem] bg-main-greenOpt-200 border-[1px] border-main-lightTeal text-main-lightTeal px-4 py-[0.4rem] sm:py-[0.55rem] sm:px-8 rounded-lg hover:bg-main-lightTeal hover:text-white"
           />

diff --git a/components/index.ts b/components/index.ts
@@ -12,7 +12,7 @@ export { default as SelectBox } from "./SelectBox";
 export { default as ReviewBox } from "./ReviewBox";
 export { default as GradientText } from "./GradientText";
 export { default as TestmonialCard } from "./TestmonialCard";
-export { default as AnimatedBorder } from "./TestmonialCard";
+export { default as AnimatedBorder } from "./AnimatedBorder";
 export { default as Loader } from "./Loader";
 
 // ********** ---| PAGES COMPONENTS |--- *********