feat(frontend): New design for the header and the footer and background

frontend/src/components/utils/Footer.jsx

@@ -1,17 +1,19 @@
 import { Container, Row, Col } from "react-bootstrap";
+import NearLogo from "../../../public/static/images/near_logo.svg";
+import Nearkat from "../../../public/static/images/nearkat_prof.svg";
 
 import NearLogo from "../../../public/static/images/near_logo.svg";
 
 export default () => (
   <Container fluid className="footer-container">
     <Row>
-      <Col className="align-self-center text-center px-0" xs="12" md="3">
+      <Col className="align-self-center text-center px-0" xs="4" md="3">
         <NearLogo className="near-logo" />
       </Col>
       <Col
         className="align-self-center footer-link text-md-left text-center pl-0"
-        xs="12"
-        md="5"
+        xs="8"
+        md="4"
       >
         © {new Date().getFullYear()} NEAR Inc. All Rights Reserved.
         <br />
@@ -25,18 +27,15 @@ export default () => (
       </Col>
       <Col className="text-right d-none d-sm-block ml-auto" md="4" lg="2">
         <a className="footer-help-link" href="http://near.chat" target="_blank">
-          <Row noGutters>
+          <Row>
             <Col md="2">
-              <img
-                className="help-image img-responsive"
-                src="/static/images/footer-nearkat.svg"
-              />
+              <Nearkat className="help-image img-responsive" />
             </Col>
-            <Col className="align-self-center">
-              <div className="footer-help">
-                <span className="need-help-contact">Need Help?</span>
+            <Col className="align-self-center footer-help">
+              <div>
+                <span className="need-help-contact">Questions?</span>
                 <span className="need-help-contact need-help-contact-bottom">
-                  Join Community
+                  Join the Community
                 </span>
               </div>
             </Col>
@@ -51,7 +50,7 @@ export default () => (
         font-size: 12px;
         line-height: 40px;
         color: #999999;
-        height: 120px;
+        height: 100px;
         width: 100%;
       }
 
@@ -80,16 +79,30 @@ export default () => (
       }
 
       .footer-help {
+<<<<<<< HEAD
+        background: #ffffff;
+        box-sizing: border-box;
+        text-align: left;
+        font-weight: 800;
+        font-size: 18px;
+        line-height: 24px;
+        padding: 24px 40px;
+      }
+
+      .help-image {
+        height: 150px;
+=======
         text-align: left;
         line-height: 1px;
         padding: 40px 20%;
       }
 
       .help-image {
         margin-top: -50%;
+>>>>>>> master
         position: relative;
         z-index: 2;
-        left: -35px;
+        top: -20px;
       }
 
       .need-help-contact {
@@ -109,6 +122,14 @@ export default () => (
         color: #0072ce !important;
         display: block;
       }
+<<<<<<< HEAD
+
+      .near-logo {
+        width: 100px;
+        fill: #acacac;
+      }
+=======
+>>>>>>> master
     `}</style>
   </Container>
 );

frontend/src/components/utils/Header.jsx

@@ -1,156 +1,79 @@
 import { Container, Row, Col } from "react-bootstrap";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
-import NearLogoIcon from "../../../public/static/images/near_logo_icon.svg";
+import HeaderNetworkDropdown from "./HeaderNetworkDropdown";
+import HeaderNavDropdown from "./HeaderNavDropdown";
+import Search from "./Search";
 import NearLogo from "../../../public/static/images/near_logo.svg";
 
-import HeaderDropdownNav from "./HeaderDropdownNav";
-import HeaderNavItem from "./HeaderNavItem";
-
-export default () => (
-  <Container fluid className="near-main-container">
-    <Row className="header-container">
-      <Col xs="2" className="px-0 d-md-none align-self-center">
-        <Link href="/">
-          <a>
-            <NearLogoIcon className="near-logo-icon" />
-          </a>
-        </Link>
-      </Col>
-
-      <Col md="auto" xs="6" className="pl-0  d-none d-md-block ">
-        <Link href="/">
-          <a>
-            <NearLogo className="near-logo" />
-          </a>
-        </Link>
-      </Col>
-
-      <HeaderNavItem
-        link="/"
-        imgLink="/static/images/icon-home.svg"
-        text="Dashboard"
-      />
-      <HeaderNavItem
-        link="/accounts"
-        imgLink="/static/images/icon-contract.svg"
-        text="Accounts"
-      />
-      <HeaderNavItem
-        link="/transactions"
-        imgLink="/static/images/icon-transactions.svg"
-        text="Transactions"
-      />
-      <HeaderNavItem
-        link="/blocks"
-        imgLink="/static/images/icon-blocks.svg"
-        text="Blocks"
-      />
-
-      <HeaderNavItem
-        link="http://near.chat/"
-        imgLink="/static/images/icon-help.svg"
-        text="Help"
-        cls="ml-auto"
-      />
-      <HeaderNavItem
-        link="https://github.com/near/near-explorer/issues"
-        imgLink="/static/images/icon-issues.svg"
-        text="Issues"
-      />
-
-      <Col className="align-self-center d-none d-sm-block" md="auto">
-        <span className="header-nav-network-border" />
-      </Col>
-
-      <Col className="align-self-center mb-3 mt-3" md="auto" xs="10">
-        <HeaderDropdownNav />
-      </Col>
-    </Row>
-    <style jsx global>{`
-      .modal-body {
-        font-family: BentonSans;
-        font-weight: 300;
-      }
-
-      .header-container {
-        background-color: #24272a;
-      }
-
-      .header-container .near-logo,
-      .header-container .near-logo-icon {
-        fill: white;
-      }
-
-      .header-container .near-logo {
-        margin: 5px 0 5px 15px;
-        height: 60px;
-      }
-
-      .near-main-container {
-        width: 100%;
-      }
-
-      .header-nav-network-border {
-        border: solid 1px #979797;
-      }
-
-      .header-nav-network {
-        width: 100%;
-        text-align: left;
-      }
-
-      .header-nav-network:after {
-        float: right;
-        margin-top: 0.5em;
-      }
-
-      .header-nav-caret {
-        position: relative;
-      }
-
-      .dropdown.show .header-nav-caret:before,
-      .dropdown.show .header-nav-caret:after {
-        content: "";
-        position: absolute;
-        display: block;
-        width: 0;
-        height: 0;
-        border-width: 7px 8px;
-        border-style: solid;
-        border-color: transparent;
-        z-index: 1001;
-      }
-      .dropdown.show .header-nav-caret:before {
-        bottom: -17px;
-        right: 10px;
-        border-bottom-color: #ccc;
-      }
-      .dropdown.show .header-nav-caret:after {
-        bottom: -17px;
-        right: 10px;
-        border-bottom-color: #fff;
-      }
-
-      .header-nav-item-dropdown-menu {
-        padding: 12px;
-        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
-        border-radius: 5px;
-      }
-
-      .header-nav-item-dropdown {
-        font-family: BentonSans;
-        font-size: 14px;
-        letter-spacing: 1.8px;
-        color: #0072ce;
-        text-transform: uppercase;
-        padding: 6px 40px 6px 6px;
-        border-radius: 3px;
-      }
-
-      .header-nav-item-dropdown:hover {
-        background-color: #e6e6e6;
-      }
-    `}</style>
-  </Container>
-);
+export default () => {
+  const router = useRouter();
+  return (
+    <Container fluid className="header-container">
+      <Row noGutters>
+        <Col xs="6" className="px-0 d-md-none align-self-center">
+          <Link href="/">
+            <a>
+              <NearLogo className="near-main-logo" />
+            </a>
+          </Link>
+        </Col>
+
+        <Col md="1" className="d-none d-md-block">
+          <Link href="/">
+            <a>
+              <NearLogo className="near-main-logo" />
+            </a>
+          </Link>
+        </Col>
+
+        <Col className="align-self-center pl-3" md="2" xs="6">
+          <HeaderNetworkDropdown />
+        </Col>
+
+        <Col className="align-self-center text-center" md="7" xs="12">
+          {router.pathname !== "/" && <Search />}
+        </Col>
+
+        <Col className="align-self-center text-center" md="2">
+          <Row>
+            <Col md="6" xs="6" className="pt-2">
+              <Link href="/">
+                <a className="header-home">Home</a>
+              </Link>
+            </Col>
+            <Col md="6" xs="6" className="pt-1">
+              <HeaderNavDropdown />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+      <style jsx global>{`
+        .header-container {
+          padding: auto 5px;
+          width: 100%;
+          background: #ffffff;
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
+        }
+
+        .near-main-logo {
+          width: 100%;
+          height: 72px;
+          padding: 6px;
+        }
+
+        .header-home {
+          font-weight: 500;
+          color: #000000;
+        }
+
+        @media (max-width: 780px) {
+          .near-main-logo {
+            width: 100%;
+          }
+        }
+      `}</style>
+    </Container>
+  );
+};