Modify the header for showing the testnet

Author: Gilyoung Kim

src/client/components/header/Header/Header.scss

@@ -6,6 +6,30 @@
   top: 0;
   width: 100%;
   z-index: 10000;
+  .header-title {
+    font-weight: 600;
+  }
+  .header-title-container {
+    margin-right: calc(50% - 800px);
+  }
+  @media (max-width: 1600px) {
+    .header-title-container {
+      margin-right: 0;
+    }
+  }
+
+  .select-nework-btn {
+    background-color: $primary-color;
+    border: 1px solid white;
+    color: white !important;
+
+    &:hover {
+      background-color: #7376b9;
+    }
+  }
+  .menu-container {
+    max-width: 1140px;
+  }
   .logo {
     height: 35px;
     width: auto;
@@ -29,6 +53,17 @@
       background-color: white;
     }
   }
+  .header-small {
+    display: none !important;
+  }
+  @include respond-below(sm) {
+    .header-big {
+      display: none !important;
+    }
+    .header-small {
+      display: inline-block !important;
+    }
+  }
   @include respond-below(md) {
     .dropdown-menu {
       background-color: $primary-color;
@@ -63,3 +98,7 @@
     }
   }
 }
+
+.network-description-popover {
+  z-index: 10001;
+}

src/client/components/header/Header/Header.tsx

@@ -15,6 +15,7 @@ import {
     NavLink,
     UncontrolledDropdown
 } from "reactstrap";
+import { Popover, PopoverBody, PopoverHeader } from "reactstrap";
 import HealthChecker from "../../util/HealthChecker/HealthChecker";
 import Search from "../Search/Search";
 
@@ -24,27 +25,38 @@ import "./Header.scss";
 
 interface State {
     isOpen: boolean;
+    popoverOpen: boolean;
 }
 
 class Header extends React.Component<{}, State> {
     constructor(props: {}) {
         super(props);
         this.toggle = this.toggle.bind(this);
+        this.togglePopover = this.togglePopover.bind(this);
         this.state = {
-            isOpen: false
+            isOpen: false,
+            popoverOpen: false
         };
     }
 
     public render() {
         return (
             <div className="header">
-                <Navbar className="header-container" dark={true} expand="lg">
-                    <Container>
-                        <IndexLinkContainer to="/">
-                            <NavbarBrand>
-                                <img src={logo} className="logo" /> CodeChain Explorer - Husky
-                            </NavbarBrand>
-                        </IndexLinkContainer>
+                <Navbar className="header-container" dark={true} expand="xl">
+                    <Container fluid={true}>
+                        <div className="header-title-container">
+                            <IndexLinkContainer to="/">
+                                <NavbarBrand>
+                                    <img src={logo} className="logo" />{" "}
+                                    <div className="d-inline-block header-big">
+                                        <span className="header-title">CodeChain Explorer</span>
+                                    </div>
+                                    <div className="d-inline-block header-small">
+                                        <span className="header-title">Explorer - Husky</span>
+                                    </div>
+                                </NavbarBrand>
+                            </IndexLinkContainer>
+                        </div>
                         <NavbarToggler onClick={this.toggle} />
                         <Collapse isOpen={this.state.isOpen} navbar={true}>
                             <Nav navbar={true} className="mr-auto">
@@ -80,18 +92,41 @@ class Header extends React.Component<{}, State> {
                                     </IndexLinkContainer>
                                 </NavItem>
                             </Nav>
-                            <Nav>
+                            <Nav className="mr-3">
                                 <NavItem className="search-for-large-screen">
                                     <Search idString="large" />
                                 </NavItem>
                             </Nav>
+                            <Nav>
+                                <NavItem>
+                                    <button
+                                        id="network-description"
+                                        type="button"
+                                        className="btn btn-primary select-nework-btn"
+                                        onClick={this.togglePopover}
+                                    >
+                                        Husky Testnet
+                                    </button>
+                                </NavItem>
+                            </Nav>
                         </Collapse>
                     </Container>
                 </Navbar>
                 <Container className="searchbar-container search-for-small-screen">
                     <Search className="ml-auto" idString="small" />
                 </Container>
                 <LoadingBar className="loading-bar" />
+
+                <Popover
+                    className="network-description-popover"
+                    placement="bottom"
+                    isOpen={this.state.popoverOpen}
+                    target="network-description"
+                    toggle={this.togglePopover}
+                >
+                    <PopoverHeader>Husky Testnet</PopoverHeader>
+                    <PopoverBody>This testnet uses the cuckoo hashing for the PoW mining.</PopoverBody>
+                </Popover>
             </div>
         );
     }
@@ -101,6 +136,12 @@ class Header extends React.Component<{}, State> {
             isOpen: !this.state.isOpen
         });
     }
+
+    private togglePopover() {
+        this.setState({
+            popoverOpen: !this.state.popoverOpen
+        });
+    }
 }
 
 export default Header;