fix: the navbar font size and positions

EnAccess · Mar 20, 2024 · 5025f7f · 5025f7f
1 parent eb10b75
commit 5025f7f
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 51 deletions.
diff --git a/src/components/cards/ResourceTypeCard.tsx b/src/components/cards/ResourceTypeCard.tsx
@@ -8,7 +8,7 @@ const ResourceTypeCard = ({ text, link }: { text: string; link: string }) => {
   return (
     <Link
       href={link}
-      className={`flex items-center h-9 justify-center rounded-lg border-2 border-black bg-[#b3b3b3] font-semibold text-xs place-contetext-center cursor-pointer ${
+      className={`flex items-center h-9 py-2 justify-center rounded-lg border-2 border-black bg-[#b3b3b3] font-semibold text-xs place-contetext-center cursor-pointer ${
         pathname === link ? "bg-black text-white" : ""
       }`}
     >

diff --git a/src/components/cards/StepCard.tsx b/src/components/cards/StepCard.tsx
@@ -3,7 +3,7 @@ import React from "react";
 const StepCard = ({ text }: { text: string }) => {
   return (
     <button className="h-28 w-32 bg-[#f8cecc] border rounded-md border-[#b85450] hover:border-purple-500 cursor-pointer flex justify-center items-center">
-      <p className="text-xs text-center">{text}</p>
+      <p className="text-md text-center font-bold  leading-tight">{text}</p>
     </button>
   );
 };

diff --git a/src/components/header/JourneySection.tsx b/src/components/header/JourneySection.tsx
@@ -4,28 +4,32 @@ import ForwardArrow from "../icons/ForwardArrow";
 
 const JourneySection = () => {
   return (
-    <div className="min-h-80">
+    <div className="">
       <p className="text-center text-gray-500 text-xl font-bold mb-3 ">
         Select Step in The Co-design Journey
       </p>
-      <div className="flex justify-center items-center">
-        <Card text="Design" />
-        <ForwardArrow />
-        <Card text="Stakeholder Mapping" />
-        <ForwardArrow />
-        <Card text="Needs Assessment" />
-        <ForwardArrow />
-        <Card text="Implementation" />
-        <ForwardArrow />
-        <Card text="M&E" />
-      </div>
+      <div className="h-full flex items-center -my-8">
+        <div className="">
+          <div className="flex justify-center items-center">
+            <Card text="Design" />
+            <ForwardArrow />
+            <Card text="Stakeholder Mapping" />
+            <ForwardArrow />
+            <Card text="Needs Assessment" />
+            <ForwardArrow />
+            <Card text="Implementation" />
+            <ForwardArrow />
+            <Card text="M&E" />
+          </div>
 
-      <div className="mt-6 bg-gray-400 text-white flex justify-around  items-center min-h-10">
-        <p className="text-sm">Early Concept</p>
-        <p className="text-sm">{"->"}</p>
-        <p className="text-sm">Software Development</p>
-        <p className="text-sm">{"->"}</p>
-        <p className="text-sm">Action and testing</p>
+          <div className="mt-6 bg-gray-400 text-white flex rounded-lg justify-around  items-center min-h-10">
+            <p className="text-md font-semibold">Early Concept</p>
+            <p className="text-md font-semibold">{"->"}</p>
+            <p className="text-md font-semibold">Software Development</p>
+            <p className="text-md font-semibold">{"->"}</p>
+            <p className="text-md font-semibold">Action and testing</p>
+          </div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/header/ResourceSection.tsx b/src/components/header/ResourceSection.tsx
@@ -6,14 +6,20 @@ interface Props {
 }
 const ResourceSection = ({ navData }: Props) => {
   return (
-    <div className="py-8 md:py-32">
+    <div className="">
       <p className="text-center text-gray-500 text-xl font-bold mb-3">
         Select Type of Resources in The Co-Design Journey
       </p>
-      <div className="bg-[#e6e6e6] border-2 border-black grid grid-cols-2 gap-8 rounded-2xl shadow-2xl p-4 mx-auto">
-        {navData.map((item) => (
-          <ResourceTypeCard key={item.text} text={item.text} link={item.link} />
-        ))}
+      <div className="h-full flex -mt-8">
+        <div className="bg-[#e6e6e6] border-2 border-black grid grid-cols-2 gap-8 rounded-2xl shadow-2xl p-10 m-auto">
+          {navData.map((item) => (
+            <ResourceTypeCard
+              key={item.text}
+              text={item.text}
+              link={item.link}
+            />
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -27,7 +27,7 @@ export const Header = () => {
 
   if (pathname === "/basic-resources")
     return (
-      <div className="flex flex-wrap justify-between items-center gap-y-24 border-b-8 border-dashed px-8 mx-auto">
+      <div className="flex h-[32rem] flex-wrap items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
         <ResourceSection navData={navData} />
         <HorzontalArrow />
         <JourneySection />
@@ -36,7 +36,7 @@ export const Header = () => {
 
   if (pathname === "/case-studies-and-core-tools" || pathname === "/")
     return (
-      <div className="flex flex-wrap justify-between items-center gap-y-24 border-b-8 border-dashed px-8 mx-auto">
+      <div className="flex  h-[32rem] flex-wrap items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
         <ResourceSection navData={navData} />
 
         <SmallArrow />
@@ -47,7 +47,7 @@ export const Header = () => {
     );
 
   return (
-    <div className="flex flex-wrap justify-between items-center gap-y-24 border-b-8 border-dashed px-8 mx-auto">
+    <div className="flex  h-[32rem] flex-wrap items-stretch justify-between gap-y-24 border-b-8 border-dashed px-8 py-10 mx-auto">
       <ResourceSection navData={navData} />
     </div>
   );

diff --git a/src/components/icons/HorzontalArrow.tsx b/src/components/icons/HorzontalArrow.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const HorzontalArrow = () => {
   return (
-    <div>
+    <div className="flex m-auto">
       <svg
         width="574"
         height="110"

diff --git a/src/components/icons/SmallArrow.tsx b/src/components/icons/SmallArrow.tsx
@@ -2,28 +2,30 @@ import React from "react";
 
 const SmallArrow = () => {
   return (
-    <svg
-      width="79"
-      height="75"
-      viewBox="0 0 79 75"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="0.5"
-        y="23.5"
-        width="45.1802"
-        height="27.6133"
-        fill="#FFFF33"
-        stroke="black"
-      />
-      <path
-        d="M45.4785 6.77498L77.3261 36.6431L46.1256 67.8554L45.4785 6.77498Z"
-        fill="#FFFF33"
-        stroke="black"
-      />
-      <rect x="11" y="24" width="45.1977" height="26.64" fill="#FFFF33" />
-    </svg>
+    <div className="m-auto">
+      <svg
+        width="79"
+        height="75"
+        viewBox="0 0 79 75"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect
+          x="0.5"
+          y="23.5"
+          width="45.1802"
+          height="27.6133"
+          fill="#FFFF33"
+          stroke="black"
+        />
+        <path
+          d="M45.4785 6.77498L77.3261 36.6431L46.1256 67.8554L45.4785 6.77498Z"
+          fill="#FFFF33"
+          stroke="black"
+        />
+        <rect x="11" y="24" width="45.1977" height="26.64" fill="#FFFF33" />
+      </svg>
+    </div>
   );
 };