made TopNavbar display username when logged in, styling improvements #147

Author: Phrancis

src/assets/style.css

@@ -25,10 +25,14 @@ button, input, select, textarea {
 
 .csh-top-link {
     font-family: Georgia, Times, "Times New Roman", serif;
-    color: #FFFFFF;
+    color: #AAAAAA;
     font-size: 2em;
 }
 
+.csh-top-link:hover, .csh-top-link:active {
+    color: #EEEEEE;
+}
+
 a.csh-dropdown-link,
 a.csh-dropdown-link:visited {
     color: #DDDDDD;

src/components/DeckBuilder.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <TopNavbar></TopNavbar>
+      <TopNavbar  :username="currentUser.username"></TopNavbar>
     <div v-if="!doneLoading">
         <h1 class="deckbuilder-deck-name">Loading Deck Builder...</h1>
     </div>

src/components/GameBoard.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <TopNavbar></TopNavbar>
+        <TopNavbar :username="currentUser.username"></TopNavbar>
           <div class="game" :class="'game-' + modName">
               <!-- Player display -->
               <div>

src/components/Lobby.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <TopNavbar></TopNavbar>
+        <TopNavbar :username="currentUser.username"></TopNavbar>
         <table id="lobby" class="lobby">
             <tr id="lobby-headers" class="lobby-headers">
               <td id="lobby-title" class="lobby-title">Lobby</td>

src/components/TopNavbar.vue

@@ -1,9 +1,10 @@
 <template>
-    <nav class="navbar navbar-dark bg-dark top-navbar-container">
+    <nav class="navbar navbar-dark top-navbar">
         <div class="container-fluid">
             <div class="navbar-header">
-                <div class="navbar-brand csh-top-link">
-                    Cardshifter
+                <div class="csh-top-link">
+                    <span>Cardshifter</span>
+                    <span class="top-navbar-username" v-if="username"> | {{ username }}</span>
                 </div>
             </div>
         </div>
@@ -16,14 +17,21 @@ export default {
     data() {
         return {}
     },
+    props: ['username'],
     methods: {}
 };
 </script>
 
 <style>
 @import "../assets/style.css";
 
-.top-navbar-container {
-    /* background-color: black; */
+.top-navbar {
+    background-color: #222222;
+    font-size: 0.8em;
+    color: #EEEEEE;
+}
+
+.top-navbar-username {
+    font-size: 1.0em;
 }
 </style>