Merge pull request #3 from adedolapoadegboye/buttons-and-styles

Buttons and styles
adedolapoadegboye · Jul 15, 2024 · d959f86 · d959f86
2 parents e0cf70c + 58242a5
commit d959f86
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 154 deletions.
diff --git a/src/Dev/Components/Constants/Footer.jsx b/src/Dev/Components/Constants/Footer.jsx
@@ -3,7 +3,7 @@ import packageJson from "../../../../package.json";
 
 const Footer = () => {
   return (
-    <footer className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-evenly items-center font-normal">
+    <footer className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-evenly items-center font-normal h-full px-4">
       <div>
         <p className="text-xs sm:text-sm md:text-md">
           &#169; Copyright 2024 GNSSMetrics.com v{packageJson.version}

diff --git a/src/Dev/Components/Constants/Header.jsx b/src/Dev/Components/Constants/Header.jsx
@@ -13,43 +13,41 @@ const Header = () => {
   };
 
   return (
-    <div className="relative">
-      <div className="flex items-center justify-between px-4 sm:px-8 md:px-12">
-        <button className="sm:hidden" onClick={toggleMenu}>
-          <IoIosMenu size={30} />
+    <div className="flex justify-between items-center px-4 sm:px-8 md:px-12 h-full">
+      <button className="sm:hidden" onClick={toggleMenu}>
+        <IoIosMenu size={30} />
+      </button>
+      <div className="flex justify-center w-full sm:w-auto sm:justify-start items-center gap-2">
+        <button>
+          <RiGpsFill size={35} className="md:hidden" />
+          <RiGpsFill size={45} className="hidden md:block" />
         </button>
-        <div className="flex justify-center w-full sm:w-auto sm:justify-start items-center gap-2">
-          <button>
-            <RiGpsFill size={35} className="md:hidden" />
-            <RiGpsFill size={45} className="hidden md:block" />
-          </button>
-          <div className="flex items-center">
-            <Name />
-          </div>
-        </div>
-        <div className="hidden sm:flex gap-4">
-          <Navbar />
-        </div>
-        <div className="hidden sm:flex gap-4">
-          <a
-            href="https://github.com/adedolapoadegboye/gnss-metrics"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <FaSquareGithub size={25} />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/adegboyeadedolapo"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <FaLinkedin size={25} />
-          </a>
-          <a href="https://adedolapo.dev" target="_blank" rel="noreferrer">
-            <FaBoxArchive size={25} />
-          </a>
+        <div className="flex items-center">
+          <Name />
         </div>
       </div>
+      <div className="hidden sm:flex gap-4">
+        <Navbar />
+      </div>
+      <div className="hidden sm:flex gap-4">
+        <a
+          href="https://github.com/adedolapoadegboye/gnss-metrics"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FaSquareGithub size={25} />
+        </a>
+        <a
+          href="https://www.linkedin.com/in/adegboyeadedolapo"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <FaLinkedin size={25} />
+        </a>
+        <a href="https://adedolapo.dev" target="_blank" rel="noreferrer">
+          <FaBoxArchive size={25} />
+        </a>
+      </div>
       {isMenuOpen && (
         <div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
           <div className="bg-white w-11/12 sm:w-3/4 p-4 rounded-lg flex flex-col gap-6 relative">

diff --git a/src/Dev/Components/Nav/Navbar.jsx b/src/Dev/Components/Nav/Navbar.jsx
@@ -8,21 +8,21 @@ const Navbar = () => {
         to="/"
         className={({ isActive }) =>
           isActive
-            ? "h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500"
-            : "font-normal"
+            ? "h-fit w-fit px-6 py-3 border bg-gray-700 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-gray-600"
+            : "font-normal text-gray-700 hover:text-gray-900 transition duration-300 ease-in-out"
         }
       >
-        Load Data from File
+        Load Data...
       </NavLink>
       <NavLink
         to="/live"
         className={({ isActive }) =>
           isActive
-            ? "h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500"
-            : "font-normal"
+            ? "h-fit w-fit px-6 py-3 border bg-gray-700 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-gray-600"
+            : "font-normal text-gray-700 hover:text-gray-900 transition duration-300 ease-in-out"
         }
       >
-        Analyze Live Data
+        Live Data...
       </NavLink>
     </nav>
   );

diff --git a/src/Dev/Functions/HandleInputValues.jsx b/src/Dev/Functions/HandleInputValues.jsx
@@ -1,64 +1,52 @@
 import React from "react";
 
-const HandleInputValues = ({ setRefLat, setRefLong, setRefAlt }) => {
-  const handleLatValue = (event) => {
-    try {
-      setRefLat(event.target.value);
-    } catch (error) {
-      console.error("Error occurred while setting latitude value:", error);
-    }
-  };
-
-  const handleLongValue = (event) => {
-    try {
-      setRefLong(event.target.value);
-    } catch (error) {
-      console.error("Error occurred while setting longitude value:", error);
-    }
-  };
-
-  const handleAltValue = (event) => {
-    try {
-      setRefAlt(event.target.value);
-    } catch (error) {
-      console.error("Error occurred while setting altitude value:", error);
-    }
-  };
-
+const HandleInputValues = ({
+  refLat,
+  setRefLat,
+  refLong,
+  setRefLong,
+  refAlt,
+  setRefAlt,
+}) => {
   return (
-    <div className="flex flex-col sm:flex-row items-center justify-center sm:gap-6">
-      <div>
-        <label className="pe-4 sm:pe-0 text-start mb-2 text-sm sm:text-md text-gray-600">
-          Latitude:
-        </label>
-        <input
-          type="number"
-          placeholder="-90°<latitude<90°"
-          className="border px-2 py-2 rounded-xl text-green-800 mb-4"
-          onChange={handleLatValue}
-        />
-      </div>
-      <div>
-        <label className="text-start mb-2 text-sm sm:text-md text-gray-600 pe-1 sm:pe-0">
-          Longitude:
-        </label>
-        <input
-          type="number"
-          placeholder="-180°<longitude<180°"
-          className="border px-2 py-2 rounded-xl text-green-800 mb-4"
-          onChange={handleLongValue}
-        />
-      </div>
-      <div>
-        <label className="text-start text-sm sm:text-md text-gray-600 pe-4 sm:pe-0">
-          Altitude:
-        </label>
-        <input
-          type="number"
-          placeholder="-500m<alt<10000m"
-          className="border px-2 py-2 rounded-xl text-green-800 mb-4"
-          onChange={handleAltValue}
-        />
+    <div className="flex flex-col sm:flex-row gap-4 items-center justify-center py-3">
+      <div className="flex flex-col sm:flex-row items-center justify-center sm:gap-6">
+        <div>
+          <label className="pe-4 sm:pe-0 text-start mb-2 text-sm sm:text-md text-gray-600">
+            Latitude:{" "}
+          </label>
+          <input
+            type="number"
+            value={refLat}
+            placeholder="-90°<latitude<90°"
+            className="border px-2 py-2 rounded-xl text-green-800 mb-4"
+            onChange={(e) => setRefLat(e.target.value)}
+          />
+        </div>
+        <div>
+          <label className="text-start mb-2 text-sm sm:text-md text-gray-600 pe-1 sm:pe-0">
+            Longitude:{" "}
+          </label>
+          <input
+            type="number"
+            value={refLong}
+            placeholder="-180°<longitude<180°"
+            className="border px-2 py-2 rounded-xl text-green-800 mb-4"
+            onChange={(e) => setRefLong(e.target.value)}
+          />
+        </div>
+        <div className="">
+          <label className="text-start text-sm sm:text-md text-gray-600 pe-4 sm:pe-0">
+            Altitude:{" "}
+          </label>{" "}
+          <input
+            type="number"
+            value={refAlt}
+            placeholder="-500m<alt<10000m"
+            className="border px-2 py-2 rounded-xl text-green-800 mb-4"
+            onChange={(e) => setRefAlt(e.target.value)}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/Dev/Homepage.jsx b/src/Dev/Homepage.jsx
@@ -16,14 +16,14 @@ const Homepage = () => {
         </div>
       }
     >
-      <div className="max-w-screen h-full flex flex-col bg-gray-100 overflow-y-auto relative">
-        <div className="h-1/8 w-full border-b-2 border-gray-200 fixed top-0 z-10 bg-white bg-opacity-100 pt-2 md:pt-4 pb-2 md:pb-4">
+      <div className="w-full h-full flex flex-col bg-gray-100 overflow-y-auto relative">
+        <div className="h-[8vh] sm:h-[8vh] md:h-[10vh] w-full border-b-2 border-gray-200 fixed top-0 z-10 bg-white bg-opacity-100">
           <Header />
         </div>
-        <div className="h-full w-full px-[5vw] sm:px-[10vw] py-[2vw] pt-[12vh] sm:pt-[15vh]">
+        <div className="flex-grow w-full px-[5vw] sm:px-[10vw] py-[calc(12vh)] sm:py-[calc(12vh)] md:py-[calc(14vh)]">
           <FromFile />
         </div>
-        <div className="h-1/8 w-full border-t-2 pt-4 md:pt-8 pb-4 md:pb-8 bg-white">
+        <div className="h-[10vh] sm:h-[8vh] md:h-[7vh] lg:h-[6vh] xl:h-[5vh] w-full border-gray-200 bg-white bg-opacity-100">
           <Footer />
         </div>
       </div>

diff --git a/src/Dev/Livepage.jsx b/src/Dev/Livepage.jsx
@@ -18,7 +18,7 @@ const LivePage = () => {
       </p>
       <a
         href="/"
-        className="h-fit w-fit px-6 py-3 w-32 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500"
+        className="h-fit w-fit px-6 py-3 border bg-blue-600 rounded-2xl text-white transition duration-300 ease-in-out hover:bg-blue-500"
       >
         Go Back Home
       </a>