Feature/navbar (#21)

* finalize navbar

* Update Navbar.tsx

* lints

* cleanup

web/src/components/DepositCard/DepositCard.tsx

@@ -1,12 +1,5 @@
 import type React from "react";
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  useRef,
-} from "react";
+import { useContext, useEffect, useMemo, useState, useRef } from "react";
 
 import { Dec, DecUtils } from "@keplr-wallet/unit";
 import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDownArrowSpacer";

web/src/components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import logo from "../../logo.svg";
+import logo from "../../logo-flame-w-text.svg";
 
 function Navbar() {
   const [isMobileMenuActive, setIsMobileMenuActive] = useState(false);
@@ -10,7 +10,9 @@ function Navbar() {
     setIsMobileMenuActive((prev) => !prev);
   };
 
-  const brandLink = "/";
+  const brandLink = "https://www.astria.org/";
+  const swapLink = "https://flame.astria.org/";
+  const poolLink = "https://flame.astria.org/";
 
   return (
     <nav
@@ -37,10 +39,34 @@ function Navbar() {
 
       <div
         id="topNavbar"
-        className={`navbar-menu ${isMobileMenuActive && "is-active"}`}
+        className={`navbar-menu ${
+          isMobileMenuActive && "navbar-menu-dropdown is-active"
+        }`}
       >
-        <div className="navbar-start" />
+        <div className="navbar-middle has-text-weight-medium is-family-monospace">
+          <Link to="/" className="navbar-item">
+            BRIDGE
+          </Link>
+          <a
+            target="_blank"
+            href={swapLink}
+            className="navbar-item"
+            rel="noreferrer"
+          >
+            SWAP
+          </a>
+          <a
+            target="_blank"
+            href={poolLink}
+            className="navbar-item"
+            rel="noreferrer"
+          >
+            POOL
+          </a>
+        </div>
       </div>
+
+      <div className="navbar-placeholder-end" />
     </nav>
   );
 }

web/src/styles/astria-colors.scss

@@ -3,6 +3,7 @@ $astria-white: #f5f5f5;
 $astria-whitest: #fff;
 $astria-grey-dark: #333;
 $astria-grey-light: hsl(0, 0%, 60%);
+$astria-grey-lighter: hsl(0, 0%, 20%);
 $astria-black: hsl(203deg 45% 4%);
 $astria-red: #BB3631;
 $astria-orange: #df5822;

web/src/styles/button-customizations.scss

@@ -1,4 +1,4 @@
-@import './astria-colors';
+@import 'astria-colors';
 
 .button.is-square {
   border-radius: 0;

web/src/styles/button-overrides.scss

@@ -1,5 +1,6 @@
-@import './astria-colors';
+@import 'astria-colors';
 
 $button-color: $astria-text-dark;
+$button-hover-color: $astria-grey-light;
 $label-color: $astria-text-light;
 $control-radius: 12px; // buttons

web/src/styles/card-customizations.scss

@@ -1,5 +1,5 @@
-@import './astria-colors';
-@import './fonts';
+@import 'astria-colors';
+@import 'fonts';
 
 .error-card {
   background-color: $astria-error-lighter;

web/src/styles/dropdown-customizations.scss

@@ -1,4 +1,4 @@
-@import './dropdown-overrides.scss';
+@import 'dropdown-overrides.scss';
 
 .dropdown {
   width: 100%;

web/src/styles/dropdown-overrides.scss

@@ -1,4 +1,4 @@
-@import './astria-colors';
+@import 'astria-colors';
 
 $dropdown-content-background-color: $astria-black;
 

web/src/styles/form-customizations.scss

@@ -1,4 +1,4 @@
-@import './astria-colors';
+@import 'astria-colors';
 
 div.control > input {
   color: $astria-text-light;

web/src/styles/index.scss

@@ -4,7 +4,7 @@ html, body {
 }
 
 // fonts
-@import './fonts';
+@import 'fonts';
 // custom styles
 @import 'icons';
 
@@ -35,6 +35,7 @@ html, body {
 @import 'dropdown-customizations';
 @import 'form-customizations';
 @import 'modal-customizations';
+@import 'navbar-customizations';
 
 
 // body reset
@@ -44,29 +45,6 @@ body {
   background-color: $astria-black;
 }
 
-// navbar customizations
-.navbar {
-  background-color: transparent;
-  padding: 1rem 2rem;
-
-  .navbar-menu.is-active {
-    background: radial-gradient(144.23% 141.13% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
-    box-shadow: 1px 1px 1px -1px hsla(0, 0%, 100%, 0.5) inset;
-  }
-
-  &.is-transparent {
-    .navbar-dropdown {
-      background: radial-gradient(144.23% 141.13% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
-      box-shadow: 1px 1px 1px -1px hsla(0, 0%, 100%, 0.5) inset;
-
-      a.navbar-item:focus, a.navbar-item:hover {
-        color: $astria-text-light;
-      }
-    }
-  }
-
-}
-
 .is-fullheight-with-navbar {
   // viewport height minus navbar height minus footer height minus margins
   min-height: calc(100vh - 72px - 24px)

web/src/styles/modal-overrides.scss

@@ -1,4 +1,4 @@
-@import './astria-colors';
+@import 'astria-colors';
 
 $modal-card-head-background-color: transparent;
 $modal-card-body-background-color: transparent;

web/src/styles/navbar-customizations.scss

@@ -0,0 +1,53 @@
+@import 'astria-colors';
+
+.navbar {
+  background-color: transparent;
+  padding: 1rem 2rem;
+  border-bottom: 1px solid $astria-grey-lighter;
+
+  .navbar-menu {
+    .navbar-middle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 1;
+    }
+    &.navbar-menu-dropdown.is-active {
+      background: none;
+      border: none;
+      box-shadow: none;
+      .navbar-middle {
+        display: block;
+        background: none;
+        .navbar-item {
+          &:focus-within, &:hover, &.is-active {
+            //background: radial-gradient(144.23% 141.13% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
+            background: none;
+            box-shadow: none;
+            border: none;
+          }
+        }
+      }
+    }
+
+    &.is-active {
+      background: radial-gradient(144.23% 141.13% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
+      box-shadow: 1px 1px 1px -1px hsla(0, 0%, 100%, 0.5) inset;
+    }
+  }
+
+  &.is-transparent {
+    .navbar-dropdown {
+      background: radial-gradient(144.23% 141.13% at 50.15% 0%, #221F1F 0%, #050A0D 100%);
+      box-shadow: 1px 1px 1px -1px hsla(0, 0%, 100%, 0.5) inset;
+
+      a.navbar-item:focus, a.navbar-item:hover {
+        color: $astria-text-light;
+      }
+    }
+  }
+
+  .navbar-placeholder-end {
+    width: 185px;
+  }
+}