Change navbar

src/views/Brand.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const StyledBrand = styled.div`
+  position: relative;
+  display: inline-block;
+  flex: 1;
+  & h1 {
+    font-weight: 700;
+    font-size: 24px;
+    & a {
+      color: var(--font-color);
+      padding: 0;
+      display: inline;
+    }
+  }
+  & span {
+    color: var(--font-color);
+    position: absolute;
+    top: 5px;
+    left: 175px;
+    text-transform: uppercase;
+    font-weight: 300;
+    font-size: 1.5rem;
+  }
+`;
+
+const Brand = () => (
+  <StyledBrand>
+    <h1>
+      <Link to="/">Air Board Game</Link>
+    </h1>
+    <span>Beta</span>
+  </StyledBrand>
+);
+
+export default Brand;

src/views/GameListView.js

@@ -13,6 +13,7 @@ import useLocalStorage from "../hooks/useLocalStorage";
 import GameListItem from "./GameListItem";
 
 import AboutModal from "./AboutModal";
+import Brand from "./Brand";
 
 const GameView = styled.div`
   min-height: 100vh;
@@ -26,26 +27,6 @@ const GameView = styled.div`
   }
 `;
 
-const Brand = styled.div`
-  position: relative;
-  display: inline-block;
-  & h1 {
-    font-weight: 700;
-    font-size: 24px;
-    & a {
-      color: var(--font-color);
-    }
-  }
-  & .beta {
-    position: absolute;
-    top: 5px;
-    left: 175px;
-    text-transform: uppercase;
-    font-weight: 300;
-    font-size: 0.9em;
-  }
-`;
-
 const Nav = styled.nav`
   background-color: var(--bg-color);
   position: relative;
@@ -53,10 +34,6 @@ const Nav = styled.nav`
   display: flex;
   align-items: center;
 
-  & .brand {
-    flex: 1;
-  }
-
   & button,
   & .button {
     background: none;
@@ -231,12 +208,7 @@ const GameListView = () => {
     <>
       <GameView>
         <Nav>
-          <Brand className="brand">
-            <h1>
-              <Link to="/">Air Board Game</Link>
-            </h1>
-            <span className="beta">Beta</span>
-          </Brand>
+          <Brand />
           {isAuthenticated && (
             <Link to={`/game/`} className="button new-game">
               {t("Create new game")}

src/views/NavBar.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { Link } from "react-router-dom";
 
 import styled from "styled-components";
 
@@ -12,28 +11,38 @@ import { getBestTranslationFromConfig } from "../utils/api";
 
 import useBoardConfig from "../components/useBoardConfig";
 
-import logo from "../images/logo.png";
 import { useTranslation } from "react-i18next";
 
+import Brand from "./Brand";
+
 const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: rgba(26, 26, 26, 0.7);
   z-index: 10;
-  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
-  & .brand {
-    margin: 0;
-    padding: 7px;
-    width: 54px;
-    height: 54px;
-  }
+  background-color: #19202c;
+  box-shadow: 0px 3px 6px #00000029;
+
+  color: var(--font-color);
 
   & .nav-center {
-    display: flex;
+    display: relative;
     & h3 {
+      position: absolute;
+      top: 0;
       margin: 0;
+      padding: 0 2em;
+
+      background-color: #19202c;
+      box-shadow: 0px 3px 6px #00000029;
+
+      line-height: 90px;
+      letter-spacing: 0px;
+      font-size: 24px;
+      text-transform: uppercase;
+
+      transform: perspective(280px) rotateX(-20deg);
     }
   }
 
@@ -43,6 +52,13 @@ const StyledNavBar = styled.div.attrs(() => ({ className: "nav" }))`
     align-items: center;
   }
 
+  & .nav-left {
+    & > div {
+      flex: 1;
+    }
+    padding-left: 40px;
+  }
+
   & .nav-right {
     justify-content: flex-end;
     padding-right: 5px;
@@ -93,9 +109,15 @@ const NavBar = ({ editMode }) => {
     <>
       <StyledNavBar>
         <div className="nav-left">
-          <Link to="/games/" className="brand">
-            <img src={logo} alt="Air Board Game" title={t("Go to home")} />
-          </Link>
+          <Brand />
+        </div>
+
+        <div className="nav-center">
+          <h3>{translation.name ? translation.name : "Air Board Game"}</h3>
+        </div>
+
+        <div className="nav-right">
+          {!editMode && <UserList />}
           <button
             className="button clear icon-only save"
             onClick={() => setShowLoadGameModal((prev) => !prev)}
@@ -106,10 +128,6 @@ const NavBar = ({ editMode }) => {
               title={t("Save")}
             />
           </button>
-        </div>
-
-        <div className="nav-center">
-          <h3>{translation.name ? translation.name : "Air Board Game"}</h3>
           <button
             className="button clear icon-only info"
             onClick={() => setShowInfoModal((prev) => !prev)}
@@ -129,10 +147,6 @@ const NavBar = ({ editMode }) => {
               />
             )}
           </button>
-        </div>
-
-        <div className="nav-right">
-          {!editMode && <UserList />}
           <button
             className="button clear icon-only help"
             onClick={() => setShowHelpModal((prev) => !prev)}