From 426de0165c628ab7f252c436a2ebc320756b7f47 Mon Sep 17 00:00:00 2001
From: Developer <daniel.her@onja.org>
Date: Tue, 4 Oct 2022 10:06:08 +0300
Subject: [PATCH] [#3929] Fix minor issues

---
 landing/src/App.js                            |  2 +-
 landing/src/components/footer/index.js        |  4 +-
 landing/src/components/header/index.js        | 10 +++--
 landing/src/components/header/index.scss      | 44 ++++++++++++++++---
 landing/src/components/overview/index.js      |  2 +-
 .../components/pricing/pricing-table/index.js |  2 +-
 .../components/reusable/checkbox/index.scss   |  9 ++--
 .../src/components/reusable/dropdown/index.js |  4 +-
 landing/src/index.scss                        |  4 ++
 landing/src/page/signup/index.js              |  8 +++-
 10 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/landing/src/App.js b/landing/src/App.js
index 9f55a4c36c..f7aedd810c 100644
--- a/landing/src/App.js
+++ b/landing/src/App.js
@@ -35,7 +35,7 @@ function App() {
           <PricingTab />
         </Route>
         <Route exact path="/signup">
-          <Signup />
+          <Signup setSelected={setSelected}/>
         </Route>
       </Switch>
       <Footer setSelected={setSelected} />
diff --git a/landing/src/components/footer/index.js b/landing/src/components/footer/index.js
index ed5c1d4edc..fdbbdb2224 100644
--- 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
index 12b68febaf..afebd0c4d6 100644
--- 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="/signup"
diff --git a/landing/src/components/header/index.scss b/landing/src/components/header/index.scss
index f60983f4c7..c8c26c7ab7 100644
--- 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
index 922fc562c9..fc8795f23a 100644
--- 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="/signup" />
           <img src={planetInfographic} alt="3d model planet infographic" />
         </div>
       </section>
diff --git a/landing/src/components/pricing/pricing-table/index.js b/landing/src/components/pricing/pricing-table/index.js
index 92c30d4fda..9a2591f500 100644
--- a/landing/src/components/pricing/pricing-table/index.js
+++ b/landing/src/components/pricing/pricing-table/index.js
@@ -55,7 +55,7 @@ const PricingTable = () => {
               <Button type="filled" text="Get started" linkTo="/signup" />
             </td>
             <td>
-              <Button type="filled" text="Contact sales" />
+              <Button type="filled" text="Contact sales" linkTo="/signup" />
             </td>
           </tr>
           <tr className="languages">
diff --git a/landing/src/components/reusable/checkbox/index.scss b/landing/src/components/reusable/checkbox/index.scss
index ac75b75111..c98e816e15 100644
--- a/landing/src/components/reusable/checkbox/index.scss
+++ b/landing/src/components/reusable/checkbox/index.scss
@@ -18,6 +18,10 @@
       background-color: #f1f2f4;
       border: 2px solid $grey;
     }
+    &:hover {
+      background-color: #fafafa;
+      border: 1px solid #f1f2f4;
+    }
     &:checked {
       appearance: inherit;
       background-color: $orange;
@@ -25,10 +29,7 @@
       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
index 2b82bf8316..19471424cc 100644
--- 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
index eddeaaf6e5..591ca0cb37 100644
--- 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/signup/index.js b/landing/src/page/signup/index.js
index 7709c5ef43..c3ad15c480 100644
--- a/landing/src/page/signup/index.js
+++ b/landing/src/page/signup/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 Signup = () => {
+const Signup = ({ setSelected }) => {
   const [step, setStep] = useState(1);
   const { innerWidth } = window;
   const countries = [
@@ -42,6 +42,10 @@ const Signup = () => {
     { id: 6, name: "Other", value: "other" },
   ];
 
+  useEffect(() => {
+    setSelected("/signup");
+  }, []);
+
   return (
     <div className="signup">
       <div className="container">