Merge branch 'main' into docker

src/controllers/eventlineup.js

@@ -15,9 +15,11 @@ const statusCodeIcons = {
 }
 
 exports.helpers = {
-  flagsString: (flags) => flags?.join(","),
+  flagsString: (flags) => {
+    return flags != null ? Array.from(flags).join(",") : ''
+  },
   plus1: (i) => Number(i)+1,
-  positions: () => ["P", "C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "EH", "DH"],
+  positions: () => ["P", "C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "EH", "DH", "DR"],
   defense_positions: () => ["C", "1B", "2B", "3B", "SS", "LF", "CF", "RF", "P"],
   avail_status_code_icon: (status_code) => {
     const icon_classes = {
@@ -39,7 +41,21 @@ exports.helpers = {
     return `<button class="Button Button--smallSquare ${button_classes[status_code]}" type="button"><span class="">${statusCodeIcons[status_code]}</span></button>`
   },
   positionLabelWithoutFlags: (label) => {
-    return label.replace(/(.*?)\s\[(.*?)\]/, "$1");
+    const {positionLabelWithoutFlags} = parsePositionLabel(label);
+    return positionLabelWithoutFlags
+  },
+  positionLabelWithoutPOFlag: (label) => {
+    const {positionLabelWithoutFlags, positionFlags} = parsePositionLabel(label);
+    positionFlags.delete('PO')
+    return compilePositionLabel(positionLabelWithoutFlags, positionFlags)
+  },
+  positionFlags: (label)=> {
+    const {positionFlags} = parsePositionLabel(label);
+    return `[${Array.from(positionFlags).join(",")}]`
+  },
+  hasPositionFlags: (label) => {
+    const {positionLabelWithoutFlags, positionFlags} = parsePositionLabel(label);
+    return positionFlags.size > 0;
   },
   comparePositionWithFlags: (labelWithoutFlags, eventLineupEntry, options) => {
     labelWithFlags = eventLineupEntry?.label
@@ -52,12 +68,12 @@ exports.helpers = {
   isInStartingLineup: (member) => {
     if (member.benchcoach.eventLineupEntry == null || member.benchcoach.eventLineupEntry.label == '') return false;
     const {positionFlags} = parsePositionLabel(member.benchcoach.eventLineupEntry?.label);
-    return (positionFlags != "PO")
+    return (!positionFlags.has("PO"))
   },
   isInPositionOnly: (member) => {
     if (!member.benchcoach || member.benchcoach.eventLineupEntry == null) return false;
     const {positionFlags} = parsePositionLabel(member.benchcoach.eventLineupEntry?.label);
-    return (member.benchcoach.eventLineupEntry != null && positionFlags == "PO")
+    return (member.benchcoach.eventLineupEntry != null && positionFlags.has("PO"))
   },
   isInBench: (member) => {
     if ((member.benchcoach.eventLineupEntry != null && member.benchcoach.eventLineupEntry.label != '') || member.isNonPlayer) return false;
@@ -143,29 +159,39 @@ exports.postEventLineup = async (req,res) => {
   if (body.memberId == null) {res.status(400).end();return}
   await Promise.all(req.promises);
   const eventLineupEntries = req.event_lineup.eventLineupEntries
-  const {newEventLineupEntries} = processPostedEventLineupEntries(body, eventLineupEntries, req.event_lineup)
+  const {newEventLineupEntries, deleteEventLineupEntries} = processPostedEventLineupEntries(body, eventLineupEntries, req.event_lineup)
   newEventLineupEntries.forEach(e=>{
     teamsnap.saveEventLineupEntry(e)
   })
+  deleteEventLineupEntries.forEach(e=>{
+    teamsnap.deleteEventLineupEntry(e)
+  })
+
   eventLineup = await teamsnap.loadEventLineups(req.params.event_id)
   res.status(201).end()
 }
 
 const processPostedEventLineupEntries = (body, eventLineupEntries, eventLineup) => {
   const newEventLineupEntries = []
+  const deleteEventLineupEntries = []
 
   body.memberId.forEach((memberId, i)=>{
     const lineupEntryId = body.eventLineupEntryId[i]
     const lineupEntryLabel = body.label[i]
     const lineupEntrySequence = body.sequence[i]
     const lineupEntryFlags = body.flags[i]
-    if (lineupEntryId != '') {
+    if (lineupEntryId != '' && lineupEntryLabel != '') {
       // Update lineup entry
       const eventLineupEntry = eventLineupEntries.find((e)=>e.id==Number(lineupEntryId))
       eventLineupEntry.sequence = lineupEntrySequence
       eventLineupEntry.label = compilePositionLabel(lineupEntryLabel, lineupEntryFlags)
       newEventLineupEntries.push(eventLineupEntry)
     }
+    else if (lineupEntryId != '') {
+      // Delete lineup entry
+      const eventLineupEntry = eventLineupEntries.find((e)=>e.id==Number(lineupEntryId))
+      deleteEventLineupEntries.push(eventLineupEntry)
+    }
     else if (lineupEntryLabel != '') {
       // Create lineup entry
       const eventLineupEntry = teamsnap.createEventLineupEntry()
@@ -179,5 +205,5 @@ const processPostedEventLineupEntries = (body, eventLineupEntries, eventLineup)
       // Skip lineup entry
     }
   })
-  return {newEventLineupEntries, eventLineupEntries}
+  return {newEventLineupEntries, eventLineupEntries, deleteEventLineupEntries}
 }

src/lib/utils.js

@@ -157,12 +157,13 @@ exports.parsePositionLabel = (label) => {
     const pattern = /(?<pos>[A-Z0-9]+)(?:\s\[(?<flags>.[A-z,]+)\])?/g
     const {pos, flags} = pattern.exec(label)?.groups || {}
     const positionLabelWithoutFlags= pos
-    const positionFlags = flags?.split(',').map(f=>f.trim()) || []
+    const positionFlags = new Set(flags?.split(',').map(f=>f.trim()) || [])
+
     return {positionLabelWithoutFlags, positionFlags}
   }
 
 exports.compilePositionLabel = (label, flags) => {
-  if (flags == null || flags == '' || flags.lengh == 0) {
+  if (flags == null || flags == '' || flags.size == 0) {
     return label
   }
   else {

src/public/css/application.css

@@ -14,6 +14,7 @@
  *= require_tree .
  *= require_self
  */
+@import url("/font/helvetica-now/stylesheet.css");
 @font-face {
   font-family: "MuseoSansRounded100Regular";
   src: url("https://teamsnap-ui.teamsnap.com/assets/fonts/museo/MuseoSansRounded-100-webfont.eot");
@@ -6908,12 +6909,46 @@ input:-webkit-autofill:focus {
   background-color: #d6d6d6;
 }
 
-header.Header {
+header {
   background: #323669;
   padding: 8px 0;
   box-shadow: 0 4px 0 rgba(0, 0, 25, 0.1);
   border-bottom: 1px solid #d6d6d6;
   color: white;
+  text-decoration: none;
+}
+header .Header-banner {
+  display: flex;
+  justify-content: center;
+}
+header .filler {
+  flex-grow: 1;
+}
+header :has(> .Header-bannerLogo):has(> .Header-bannerTitle) {
+  display: inline-flex;
+}
+header .Header-bannerLogo, header .Header-bannerTitle {
+  margin: 0;
+  padding: 0;
+  margin-left: 0.5em;
+}
+header .Header-bannerLogo img {
+  height: 36px;
+  width: auto;
+}
+header .Header-bannerTitle {
+  font-family: "Helvetica", sans-serif;
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: left;
+  color: white;
+  font-size: 28px;
+}
+
+.btn--Full {
+  display: block;
+  width: 100%;
+  text-align: center;
 }
 
 body {
@@ -6970,44 +7005,10 @@ body {
   text-align: center;
 }
 
-.Header-bannerLogo, .Header-bannerTitle {
-  margin: 0;
-  padding: 0;
-  margin-left: 0.5em;
-}
-
-.Header-bannerLogo img {
-  height: 36px;
-  width: auto;
-}
-
-.Header-bannerTitle {
-  font-family: "Helvetica", sans-serif;
-  text-transform: uppercase;
-  font-weight: bold;
-  text-align: left;
-  color: white;
-  font-size: 28px;
-}
-
-.benchcoach-nav {
-  background-color: #323669;
-  margin-bottom: 2em;
-  padding: 0.5em;
-  color: white;
-}
-
 a.Panel-row {
   color: inherit;
 }
 
-.benchcoach-nav h3 {
-  font-family: "Helvetica", sans-serif;
-  font-weight: bolder;
-  color: white;
-  text-transform: uppercase;
-}
-
 .lineup-slot .Panel-cell {
   display: inline-flex;
   align-items: center;

src/public/js/eventlineup.js

@@ -39,6 +39,28 @@ function colorPositions() {
   }
 }
 
+function initFlagsCheckboxes(){
+  Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
+    Array.from(
+      bcLineup.querySelectorAll(
+        ".starting .lineup-slot, \
+        .position-only .lineup-slot, \
+        .bench .lineup-slot"
+      )
+    ).forEach((slot, i) => {
+      const flags = new Set(slot.querySelector("input[name*=flags]")?.value?.split(',')?.map(s=>s.trim())) || new Set()
+      console.log(slot, flags)
+      if (flags.has('DHd')) {
+        slot.querySelector('[name=flag-dhd]').checked = true;
+      } 
+
+      if (flags.has('DRd') ) {
+        slot.querySelector('[name=flag-drd]').checked = true;
+      }
+    })}
+    )
+}
+
 function refreshLineup() {
   Array.from(document.querySelectorAll("[id^=event-lineup]")).forEach((bcLineup) => {
     Array.from(
@@ -50,25 +72,36 @@ function refreshLineup() {
     ).forEach((slot, i) => {
       slot.querySelector("input[name*=sequence]").value = i;
       selected_position = slot.querySelector(".position-select-box option:checked");
+      const flags = new Set(slot.querySelector("input[name*=flags]")?.value?.split(',')?.map(s=>s.trim())) || new Set()
+
+      if (slot.querySelector('[name=flag-dhd]').checked) {
+        flags.add('DHd')
+      } else {
+        flags.delete('DHd')
+      }
+
+      if (slot.querySelector('[name=flag-drd]').checked) {
+        flags.add('DRd') 
+      } else {
+        flags.delete('DRd')
+      }
+
       if (selected_position && selected_position.text != "--") {
         slot.querySelector("input[name*=label]").value = selected_position.text;
       } else {
         slot.querySelector("input[name*=label]").value = null;
       }
       if (slot.closest('.position-only')){
-        const flags = new Set(slot.querySelector("input[name*=flags]").value.split(',').map(s=>s.trim()))
         flags.add('PO');flags.delete('')
-        slot.querySelector("input[name*=flags]").value = Array.from(flags).join(",");
       }
       else {
-        const flags = new Set(slot.querySelector("input[name*=flags]").value.split(',').map(s=>s.trim()))
         flags.delete('PO');flags.delete('')
-        slot.querySelector("input[name*=flags]").value = Array.from(flags).join(",");
       }
       if (slot.closest('.bench')){
         slot.querySelector("input[name*=sequence]").value = '';
         slot.querySelector("input[name*=label]").value = '';
       }
+      slot.querySelector("input[name*=flags]").value = Array.from(flags).join(",");
     });
   });
 }
@@ -105,7 +138,7 @@ for (bcLineup of document.querySelectorAll("[id^=event-lineup]")) {
 }
 
 for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
-  const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box) ')
+  const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), div.position-label-flags')
   Array.from(cells).forEach(cell=>{
     cell.classList.add('u-hidden')
   })
@@ -503,7 +536,7 @@ function toggleChildSlots (element) {
   console.log(element.closest(".slot-set"))
   for (lineup_slot of document.querySelectorAll("[id^=lineup-out] .lineup-slot")) {
     console.log(lineup_slot)
-    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box) ')
+    const cells = lineup_slot.querySelectorAll('.Panel-cell:has(.sequence), .Panel-cell:has(.drag-handle), .Panel-cell:has(.position-select-box), div.position-label-flags ')
     Array.from(cells).forEach(cell=>{
       cell.classList.toggle('u-hidden')
     })

src/public/manifest.json

@@ -0,0 +1,23 @@
+{
+  "short_name": "BenchCoach",
+  "name": "BenchCoach: An assitant for TeamSnap",
+  "icons": [
+    {
+      "src": "/media/benchcoach.svg",
+      "type": "image/svg+xml",
+      "sizes": "800x800"
+    },
+    {
+      "src": "/media/apple-touch-icon.png",
+      "type": "image/png",
+      "sizes": "120x120 180x180 167x167 152x152 80x80 120x120 58x58 87x87 76x76 114x114"
+    }
+  ],
+  "id": "/",
+  "start_url": "/",
+  "background_color": "#323669",
+  "display": "standalone",
+  "scope": "/",
+  "theme_color": "#323669",
+  "description": "An assitant for TeamSnap"
+}

src/scss/application.scss

@@ -15,6 +15,7 @@
  */
  
  @import "../../node_modules/@teamsnap/teamsnap-ui/src/css/teamsnap-ui.scss";
+ @import url('/font/helvetica-now/stylesheet.css');
  
 
 $color-success: #b7e1cd;
@@ -62,12 +63,54 @@ $monospace-font: "Inconsolata", monospace;
   }
 }
 
-header.Header {
+header {
   background: #323669;
   padding: 8px 0;
+  // margin: 0 0 16px 0;
   box-shadow: 0 4px 0 rgba(0, 0, 25, 0.1);
   border-bottom: 1px solid #d6d6d6;
   color: white;
+  text-decoration: none;
+
+  .Header-banner {
+    display: flex;
+    justify-content: center;
+  }
+
+  .filler {
+    flex-grow:1,
+  }
+
+  :has(>.Header-bannerLogo):has(>.Header-bannerTitle) {
+    display: inline-flex
+  }
+
+  .Header-bannerLogo, .Header-bannerTitle {
+    margin: 0;
+    padding: 0;
+    margin-left: 0.5em;
+  }
+  
+  .Header-bannerLogo img {
+    height: 36px;
+    width: auto;
+  }
+  
+  .Header-bannerTitle {
+    font-family: "Helvetica", sans-serif;
+    text-transform: uppercase;
+    font-weight: bold;
+    text-align: left;
+    color: white;
+    font-size: 28px;
+  }
+
+}
+
+.btn--Full {
+  display: block;
+  width: 100%;
+  text-align: center;
 }
 
 body {
@@ -137,44 +180,10 @@ body {
   text-align: center;
 }
 
-.Header-bannerLogo, .Header-bannerTitle {
-  margin: 0;
-  padding: 0;
-  margin-left: 0.5em;
-}
-
-.Header-bannerLogo img {
-  height: 36px;
-  width: auto;
-}
-
-.Header-bannerTitle {
-  font-family: "Helvetica", sans-serif;
-  text-transform: uppercase;
-  font-weight: bold;
-  text-align: left;
-  color: white;
-  font-size: 28px;
-}
-
-.benchcoach-nav {
-  background-color: #323669;
-  margin-bottom: 2em;
-  padding: 0.5em;
-  color: white;
-}
-
 a.Panel-row {
   color: inherit;
 }
 
-.benchcoach-nav h3 {
-  font-family: "Helvetica", sans-serif;
-  font-weight: bolder;
-  color: white;
-  text-transform: uppercase;
-}
-
 .lineup-slot .Panel-cell {
   display: inline-flex;
   align-items: center;

src/views/eventlineup/edit.hbs

@@ -1,5 +1,5 @@
 {{>emailmodal}}
-<div id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
+<div class="u-spaceAuto" id="event-lineup-{{event.id}}" data-event-lineup-id="{{event_lineup.id}}" data-event-id="{{event.id}}">
 <form onsubmit="onSubmit(this,event)" action="#">
   <input type="hidden" name="event_lineup_id" value="{{event_lineup.id}}">
   {{!-- <input type="hidden" name="_csrf" value="{{csrfToken}}"> --}}
@@ -92,11 +92,12 @@
     </div>
   </div>
   <div id="lineup-out-{{event.id}}" class="Panel u-maxWidthSm out Panel--full">
-    <div class="Panel-row Panel-title u-padXs">
-        <span style="flex: 1 1 0%;">{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-x.svg"}}}Out</span>
+    <div class="Panel-row Panel-title u-padXs u-flex">
+        <div><span style="flex: 1 1 0%;">{{{embeddedSvgFromPath "/bootstrap-icons/clipboard-x.svg"}}}Out</span></div>
+        <div class="u-flexGrow1"></div>
         <div class="Toggle">
           <input class="Toggle-input" type="checkbox" id="enable-slots" onclick="toggleChildSlots(this);">
-          <label class="Toggle-label" for="availability-tab"></label>
+          <label class="Toggle-label" for="enable-slots"></label>
         </div>
       </div>
     <div class="slot-set">
@@ -115,6 +116,7 @@
 <script>
   document.addEventListener('DOMContentLoaded', function() {
   colorPositions();
+  initFlagsCheckboxes();
 	refreshLineup();
   tinymce.init({
     selector:"#email-editor", 

src/views/eventlineup/partials/email_table.hbs

@@ -11,10 +11,10 @@
 					{{#if (isInStartingLineup this)}}
 						<tr>
 							<td class="sequence-cell">
-							{{plus1 this.benchcoach.eventLineupEntry.sequence}}
+							{{plus1 this.benchcoach.eventLineupEntry.sequence}}{{#if (hasPositionFlags this.benchcoach.eventLineupEntry.label)}} {{positionFlags this.benchcoach.eventLineupEntry.label}}{{/if}}
 						</td>
 							<td class="name-cell">{{this.lastName}}, {{this.firstName}} – #{{this.jerseyNumber}}</td>
-							<td class="position-label-cell">{{this.benchcoach.eventLineupEntry.label}}</td>
+							<td class="position-label-cell">{{positionLabelWithoutFlags this.benchcoach.eventLineupEntry.label}}</td>
 					</tr>
 					{{/if}}
 				{{/each}}
@@ -26,7 +26,7 @@
 						<tr>
 							<td class="sequence-cell"></td>
 							<td class="name-cell">{{this.lastName}}, {{this.firstName}} – #{{this.jerseyNumber}}</td>
-							<td class="position-label-cell">{{this.benchcoach.eventLineupEntry.label}}</td>
+							<td class="position-label-cell">{{positionLabelWithoutPOFlag this.benchcoach.eventLineupEntry.label}}</td>
 					</tr>
 					{{/if}}
 				{{/each}}

src/views/eventlineup/partials/slot.hbs

@@ -15,14 +15,15 @@
       class="Panel-cell Panel-cell--header">
         <div class="sequence u-textNoWrap u-fontSizeLg"></div>
     </div>
-    <div class="Panel-cell u-padXs u-sizeFill">
+    <div class="Panel-cell u-padXs u-sizeFill u-flex">
       <div
-        class="d-flex availability-status-code-{{
+        class="availability-status-code-{{
           member.benchcoach.availability?.statusCode
         }}"
       >
-        <div class="u-flexInline u-fontSizeLg u-textNoWrap">
         {{#if member.benchcoach.availability}}{{{avail_status_code_icon member.benchcoach.availability.statusCode}}}{{/if}}
+      </div>
+      <div class="u-fontSizeLg u-textNoWrap">
           <span class="lastname">
             {{member.lastName}}
           </span>
@@ -33,6 +34,16 @@
             #{{member.jerseyNumber}}
           </span>
       </div>
+      <div class="u-flexGrow1"></div>
+      <div class="position-label-flags">
+        <div class="Checkbox Checkbox--inline">
+          <input class="Checkbox-input" type="checkbox" name="flag-drd" id="flag-drd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}" onclick="refreshLineup()">
+          <label class="Checkbox-label" for="flag-drd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}">DR<small>d</small></label>
+        </div>
+        <div class="Checkbox Checkbox--inline">
+          <input class="Checkbox-input" type="checkbox" name="flag-dhd" id="flag-dhd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}" onclick="refreshLineup()">
+          <label class="Checkbox-label" for="flag-dhd-{{member.id}}-{{member.benchcoach.eventLineupEntry.id}}">DH<small>d</small></label>
+        </div>
       </div>
     </div>
     <div class="Panel-cell u-padXs u-sizeFit">

src/views/eventsheet/sheet.hbs

@@ -174,7 +174,7 @@
                 <th>{{event.opponentName}}</th>
               </tr>
               <tr>
-                <td style="height:5em;"></td>
+                <td style="height:5em;width: 50%;"></td>
                 <td></td>
               </tr>
             </tbody>

src/views/layouts/main.hbs

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="manifest" href="/manifest.json">
     <link rel="stylesheet" href="/css/application.css">
     {{#if style}}<link rel="stylesheet" href="/css/{{style}}">{{/if}}
     <title>{{#if title}}{{title}}{{else}}BenchCoach{{/if}}</title>
@@ -19,13 +20,13 @@
     </script>
 </head>
 
-<body class="bg-light">
-    <header class="Header">
+<body>
+    <header>
         {{> navbar }}
         {{{_sections.header}}}
     </header>
     <div class="u-padSidesMd u-xs-padSidesLg">
-        <div class="u-max1200 u-flexExpandSides u-xs-size5of6 u-sm-size2of3 u-md-sizeFull u-padBottomMd u-xs-padEndsLg u-sm-padEndsXl">
+        <div class="u-max1200 u-flexExpandSides u-xs-size5of6 u-sm-size2of3 u-md-sizeFull u-padEndsLg u-sm-padEndsXl">
         {{{ body }}}
         </div>
     </div>

src/views/login.hbs

@@ -1,27 +1,10 @@
-<div class="Grid Grid--fit Grid--withGutter u-max1200 u-flexExpandSides u-xs-size5of6 u-sm-size2of3 u-md-sizeFull u-padBottomMd u-xs-padEndsLg u-sm-padEndsXl">
-    <div class="Grid-cell u-size5of12">
-        <div class="Panel u-padLg u-spaceSidesAuto">
-            <h1 class="u-spaceSidesAuto u-spaceBottomLg">Sign in</h1>
-            <div>
-              <a class="Button Button--large Button--orange u-spaceSidesAuto" href="/login/federated/teamsnap">
+<div class="Panel u-maxWidthXs u-padLg u-spaceSidesAuto">
+    <h1 class="u-textCenter">Sign in</h1>
+    <p class="u-spaceEndsMd">Sign into BenchCoach using your TeamSnap account</p>
+    <a class="Button Button--large Button--orange u-spaceSidesAuto btn--Full" href="/login/federated/teamsnap">
       {{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}
       <span>TeamSnap</span>
     </a>
-            </div>
-        </div>
-    </div>
-    <div class="Grid-cell u-size7of12 u-textCenter">
-          <h1>
-            <img src="/media/benchcoach.svg" style="width: 2.5em;">
-            </h1>
-          <h1>
-            <strong>
-                Welcome to
-                <span class="text-nowrap">BenchCoach</span>
-            </strong>
-          </h1>
-        <div class="lead fst-italic fw-light">
-          An assistant coach for TeamSnap
-        </div>
-    </div>
 </div>
+
+    

src/views/partials/navbar.hbs

@@ -1,13 +1,15 @@
-<div class="Header-container Grid u-flexAlignItemsCenter">
-  <div class="Grid-cell u-sizeFill">
-    <div class="Header-banner Grid u-flexAlignItemsCenter">
-      <a href="/" class="Grid-cell u-sizeFit u-flexInline u-flexAlignItemsCenter u-textDecorationNone">
+<div class="Header-banner">
+  <a href="/" class="">
     <div class="Header-bannerLogo">
       <img class="logo" src="/media/benchcoach.svg" alt="BenchCoach Logo">
     </div>
+    <div class="Header-bannerTitle">
+      BenchCoach
+    </div>
   </a>
-      <div class="Grid-cell u-flexInline u-flexJustifyEnd u-sizeFill u-padSidesSm">
   {{#if user}}
+  <div class="filler"></div>
+  <div class="u-padSidesSm u-spaceAuto">
     <div class="Popup">
       <div class="Button Button--small Popup-toggle" onclick="this.closest('.Popup').querySelector('.Popup-container').classList.toggle('is-open')">
         Account
@@ -31,10 +33,7 @@
         </div>
       </div>
     </div>
-
+  </div>
   {{/if}}
-      </div>
             
-    </div>
-  </div>
 </div>