Fixed navbar and footer issues caused by span elements. Fixed text co…

…lor issues with widget in dark mode by adding text color.
NayanthaNethsara · Apr 24, 2023 · e60443b · e60443b
1 parent 6650d6d
commit e60443b
Show file tree

Hide file tree

Showing 10 changed files with 293 additions and 571 deletions.
diff --git a/components/cta.js b/components/cta.js
@@ -10,7 +10,7 @@ const Cta = () => {
  Ready to try-out this template?
  </h2>
  <p className="mt-2 font-medium text-white text-opacity-90 lg:text-xl">
- Don't let your visitors see a poor landing.
+ Don&apos;t let your visitors see a poor landing.
  </p>
  </div>
  <div className="flex-shrink-0 w-full text-center lg:w-auto">

diff --git a/components/footer.js b/components/footer.js
@@ -19,16 +19,14 @@ export default function Footer() {
  <div className="lg:col-span-2">
  <div>
  {" "}
- <Link href="/">
- <span className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100">
- <img
+ <Link href="/" className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100">
+ <Image
  src="/img/logo.svg"
  alt="N"
  width="32"
  height="32"
  className="w-8"
  />
- </span>
  <span>Nextly</span>
  </Link>
  </div>
@@ -58,21 +56,17 @@ export default function Footer() {
  <div>
  <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0">
  {navigation.map((item, index) => (
- <Link key={index} href="/">
- <span className="w-full px-4 py-2 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700">
+ <Link key={index} href="/" className="w-full px-4 py-2 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> 
  {item}
- </span>
  </Link>
  ))}
  </div>
  </div>
  <div>
  <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0">
  {legal.map((item, index) => (
- <Link key={index} href="/">
- <span className="w-full px-4 py-2 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700">
+ <Link key={index} href="/" className="w-full px-4 py-2 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> 
  {item}
- </span>
  </Link>
  ))}
  </div>

diff --git a/components/navbar.js b/components/navbar.js
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import ThemeChanger from "./DarkSwitch";
+import Image from "next/image"
 import { Disclosure } from "@headlessui/react";
 
 const Navbar = () => {
@@ -22,7 +23,7 @@ const Navbar = () => {
  <Link href="/">
  <span className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100">
  <span>
- <img
+ <Image
  src="/img/logo.svg"
  alt="N"
  width="32"
@@ -60,16 +61,12 @@ const Navbar = () => {
  <Disclosure.Panel className="flex flex-wrap w-full my-5 lg:hidden">
  <>
  {navigation.map((item, index) => (
- <Link key={index} href="/">
- <span className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none dark:focus:bg-trueGray-700">
+ <Link key={index} href="/" className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none">
  {item}
- </span>
  </Link>
  ))}
- <Link href="/">
- <span className="w-full px-6 py-2 mt-3 text-center text-white bg-indigo-600 rounded-md lg:ml-5">
+ <Link href="/" className="w-full px-6 py-2 mt-3 text-center text-white bg-indigo-600 rounded-md lg:ml-5"> 
  Get Started
- </span>
  </Link>
  </>
  </Disclosure.Panel>
@@ -83,21 +80,17 @@ const Navbar = () => {
  <ul className="items-center justify-end flex-1 pt-6 list-none lg:pt-0 lg:flex">
  {navigation.map((menu, index) => (
  <li className="mr-3 nav__item" key={index}>
- <Link href="/">
- <span className="inline-block px-4 py-2 text-lg font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800">
+ <Link href="/" className="inline-block px-4 py-2 text-lg font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800">
  {menu}
- </span>
  </Link>
  </li>
  ))}
  </ul>
  </div>
 
  <div className="hidden mr-3 space-x-4 lg:flex nav__item">
- <Link href="/">
- <span className="px-6 py-2 text-white bg-indigo-600 rounded-md md:ml-5">
+ <Link href="/" className="px-6 py-2 text-white bg-indigo-600 rounded-md md:ml-5">
  Get Started
- </span>
  </Link>
 
  <ThemeChanger />

diff --git a/components/popupWidget.js b/components/popupWidget.js
@@ -149,7 +149,7 @@ const PopupWidget = () => {
  required: "Full name is required",
  maxLength: 80,
  })}
- className={`w-full px-3 py-2 placeholder-gray-300 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring ${
+ className={`w-full px-3 py-2 text-gray-600 placeholder-gray-300 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring ${
  errors.name
  ? "border-red-600 focus:border-red-600 ring-red-100"
  : "border-gray-300 focus:border-indigo-600 ring-indigo-100"
@@ -179,7 +179,7 @@ const PopupWidget = () => {
  },
  })}
  placeholder="[email protected]"
- className={`w-full px-3 py-2 placeholder-gray-300 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring ${
+ className={`w-full px-3 py-2 text-gray-600 placeholder-gray-300 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring ${
  errors.email
  ? "border-red-600 focus:border-red-600 ring-red-100"
  : "border-gray-300 focus:border-indigo-600 ring-indigo-100"
@@ -207,7 +207,7 @@ const PopupWidget = () => {
  required: "Enter your Message",
  })}
  placeholder="Your Message"
- className={`w-full px-3 py-2 placeholder-gray-300 bg-white border border-gray-300 rounded-md h-28 focus:outline-none focus:ring ${
+ className={`w-full px-3 py-2 text-gray-600 placeholder-gray-300 bg-white border border-gray-300 rounded-md h-28 focus:outline-none focus:ring ${
  errors.message
  ? "border-red-600 focus:border-red-600 ring-red-100"
  : "border-gray-300 focus:border-indigo-600 ring-indigo-100"

diff --git a/components/testimonials.js b/components/testimonials.js
@@ -41,7 +41,7 @@ const Testimonials = () => {
  <div className="">
  <div className="flex flex-col justify-between w-full h-full bg-gray-100 px-14 rounded-2xl py-14 dark:bg-trueGray-800">
  <p className="text-2xl leading-normal ">
- This is an <Mark>awesome</Mark> landing page template I've seen. I
+ This is an <Mark>awesome</Mark> landing page template I&apos;ve seen. I
  would use this for anything.
  </p>
 

diff --git a/components/video.js b/components/video.js
@@ -29,7 +29,7 @@ const Video = () => {
  <iframe
  src="https://www.youtube-nocookie.com/embed/aOq49euWnIo?controls=0&autoplay=1"
  title="YouTube video player"
- frameborder="0"
+ frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>
  )}