[#3929] Fix minor issues

akvo · Oct 4, 2022 · 426de01 · 426de01
1 parent 70f82fd
commit 426de01
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 21 deletions.
diff --git a/landing/src/App.js b/landing/src/App.js
@@ -35,7 +35,7 @@ function App() {
           <#Tab />
         </Route>
         <Route exact path="/#">
-          <# />
+          <# setSelected={setSelected}/>
         </Route>
       </Switch>
       <Footer setSelected={setSelected} />

diff --git a/landing/src/components/footer/index.js b/landing/src/components/footer/index.js
@@ -23,7 +23,9 @@ const Footer = ({ setSelected }) => {
       <div>
         <div className="wrapper">
           <h1 className="flow-logo">
-            <Link to="/">Akvoflow</Link>
+            <Link onClick={() => setSelected("/")} to="/">
+              Akvoflow
+            </Link>
           </h1>
 
           <div className="navigation-container">

diff --git a/landing/src/components/header/index.js b/landing/src/components/header/index.js
@@ -8,7 +8,7 @@ import Dropdown from "../reusable/dropdown";
 
 const DISABLE_SCROLLING_CLASS = "disabled-scroll";
 
-const Header = ({ selected, setSelected, history }) => {
+const Header = ({ selected, setSelected }) => {
   const [isShownMenu, setIsShownMenu] = useState(false);
   const { innerWidth } = window;
   const body = document.querySelector("body");
@@ -30,7 +30,9 @@ const Header = ({ selected, setSelected, history }) => {
     <div className="header-wrapper">
       <header className="header">
         <h1 className="flow-logo">
-          <Link to="/">Akvoflow</Link>
+          <Link onClick={() => setSelected("/")} to="/">
+            Akvoflow
+          </Link>
         </h1>
         <nav className="navigation">
           <ul className="navigation-list">
@@ -111,7 +113,9 @@ const Header = ({ selected, setSelected, history }) => {
           </ul>
           <div className="menu-extra-navigation">
             <Button
-              action={() => setIsShownMenu(false)}
+              action={() => {
+                setIsShownMenu(false);
+              }}
               type="outlined"
               text="Free trial"
               linkTo="/#"

diff --git a/landing/src/components/header/index.scss b/landing/src/components/header/index.scss
@@ -72,7 +72,6 @@
         width: 99.75px;
         height: 20px;
       }
-      margin-right: 50px;
     }
     a:not(.flow-logo a) {
       display: flex;
@@ -131,9 +130,6 @@
       .extra-navigation {
         display: flex;
         align-items: center;
-        .list-item:not(:last-of-type) {
-          margin-right: 25px;
-        }
       }
 
       .extra-navigation {
@@ -186,15 +182,31 @@
         font-size: 12px;
         line-height: 16px;
       }
+
+      .flow-logo {
+        margin-right: 30px;
+      }
+
       .navigation {
-        .extra-navigation,
+        &,
+        .navigation-list,
+        .extra-navigation {
+          .list-item:not(:last-of-type) {
+            margin-right: 20px;
+          }
+        }
+
+        .extra-navigation .login,
         .extra-navigation button,
         .navigation-list {
           display: flex;
         }
         .extra-navigation {
           .nav-item:not(:last-child) {
-            margin-right: 30px;
+            margin-right: 12px;
+          }
+          .custom-select-container{
+            margin-left: 8px;
           }
           .custom-select {
             & * {
@@ -217,6 +229,26 @@
         font-size: 16px;
         line-height: 24px;
       }
+
+      .flow-logo {
+        margin-right: 50px;
+      }
+
+      .navigation {
+        &,
+        .navigation-list,
+        .extra-navigation {
+          .list-item:not(:last-of-type) {
+            margin-right: 25px;
+          }
+        }
+
+        .extra-navigation {
+          .nav-item:not(:last-child) {
+            margin-right: 30px;
+          }
+        }
+      }
     }
   }
 }
diff --git a/landing/src/components/overview/index.js b/landing/src/components/overview/index.js
@@ -43,7 +43,7 @@ const Overview = () => {
             Akvo Flow can easily adapt to your data needs. Our partners collect
             and use data to drive change all over the world.
           </p>
-          <Button type="filled" text="Start for free now" />
+          <Button type="filled" text="Start for free now" linkTo="/#" />
           <img src={planetInfographic} alt="3d model planet infographic" />
         </div>
       </section>

diff --git a/landing/src/components/#/#-table/index.js b/landing/src/components/#/#-table/index.js
@@ -55,7 +55,7 @@ const #Table = () => {
               <Button type="filled" text="Get started" linkTo="/#" />
             </td>
             <td>
-              <Button type="filled" text="Contact sales" />
+              <Button type="filled" text="Contact sales" linkTo="/#" />
             </td>
           </tr>
           <tr className="languages">

diff --git a/landing/src/components/reusable/checkbox/index.scss b/landing/src/components/reusable/checkbox/index.scss
@@ -18,17 +18,18 @@
       background-color: #f1f2f4;
       border: 2px solid $grey;
     }
+    &:hover {
+      background-color: #fafafa;
+      border: 1px solid #f1f2f4;
+    }
     &:checked {
       appearance: inherit;
       background-color: $orange;
       position: relative;
       background-image: url("../../../images/check.svg");
       background-position: center;
       background-size: 11px 9px;
-    }
-    &:hover {
-      background-color: #fafafa;
-      border: 1px solid #f1f2f4;
+      border: 1px solid $orange;
     }
   }
 

diff --git a/landing/src/components/reusable/dropdown/index.js b/landing/src/components/reusable/dropdown/index.js
@@ -28,8 +28,8 @@ const Dropdown = ({ selectData, className, Icon, textToDisplay = "En" }) => {
 
   useEffect(() => {
     document.addEventListener("mousedown", onCloseDropdown);
-  }, [toggleRef.current]);
-
+  }, [toggleDropdown]);
+console.log('toggleDropdown::::::', toggleDropdown);
   return (
     <div className={`custom-select-container ${className}`}>
       <div className={selectedOptionClass} ref={toggleRef}>

diff --git a/landing/src/index.scss b/landing/src/index.scss
@@ -30,6 +30,10 @@ body {
     background-repeat: no-repeat;
   }
 
+  #root {
+    overflow-x: hidden;
+  }
+
   a {
     transition: all ease-out 0.3s;
     text-decoration: none;

diff --git a/landing/src/page/#/index.js b/landing/src/page/#/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./index.scss";
 
 import { ReactComponent as DownArrow } from "../../images/large-arrow.svg";
@@ -9,7 +9,7 @@ import Dropdown from "../../components/reusable/dropdown/index";
 import Button from "../../components/reusable/button/index";
 import Checkbox from "../../components/reusable/checkbox/index";
 
-const # = () => {
+const # = ({ setSelected }) => {
   const [step, setStep] = useState(1);
   const { innerWidth } = window;
   const countries = [
@@ -42,6 +42,10 @@ const # = () => {
     { id: 6, name: "Other", value: "other" },
   ];
 
+  useEffect(() => {
+    setSelected("/#");
+  }, []);
+
   return (
     <div className="#">
       <div className="container">