navbar, login refinements

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/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/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">
+<body>
-    <header class="Header">
+    <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="Panel u-maxWidthXs u-padLg u-spaceSidesAuto">
-    <div class="Grid-cell u-size5of12">
+    <h1 class="u-textCenter">Sign in</h1>
-        <div class="Panel u-padLg u-spaceSidesAuto">
+    <p class="u-spaceEndsMd">Sign into BenchCoach using your TeamSnap account</p>
-            <h1 class="u-spaceSidesAuto u-spaceBottomLg">Sign in</h1>
+    <a class="Button Button--large Button--orange u-spaceSidesAuto btn--Full" href="/login/federated/teamsnap">
-            <div>
+      {{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}
-              <a class="Button Button--large Button--orange u-spaceSidesAuto" href="/login/federated/teamsnap">
+      <span>TeamSnap</span>
-                {{{embeddedSvgFromPath "/media/teamsnap_star.svg"}}}
+    </a>
-                <span>TeamSnap</span>
+</div>
-              </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,40 +1,39 @@
-<div class="Header-container Grid u-flexAlignItemsCenter">
+<div class="Header-banner">
-  <div class="Grid-cell u-sizeFill">
+  <a href="/" class="">
-    <div class="Header-banner Grid u-flexAlignItemsCenter">
+    <div class="Header-bannerLogo">
-      <a href="/" class="Grid-cell u-sizeFit u-flexInline u-flexAlignItemsCenter u-textDecorationNone">
+      <img class="logo" src="/media/benchcoach.svg" alt="BenchCoach Logo">
-        <div class="Header-bannerLogo">
+    </div>
-          <img class="logo" src="/media/benchcoach.svg" alt="BenchCoach Logo">
+    <div class="Header-bannerTitle">
-        </div>
+      BenchCoach
-      </a>
+    </div>
-      <div class="Grid-cell u-flexInline u-flexJustifyEnd u-sizeFill u-padSidesSm">
+  </a>
-        {{#if user}}
+  {{#if user}}
-        <div class="Popup">
+  <div class="filler"></div>
-          <div class="Button Button--small Popup-toggle" onclick="this.closest('.Popup').querySelector('.Popup-container').classList.toggle('is-open')">
+  <div class="u-padSidesSm u-spaceAuto">
-            Account
+    <div class="Popup">
-          </div>
+      <div class="Button Button--small Popup-toggle" onclick="this.closest('.Popup').querySelector('.Popup-container').classList.toggle('is-open')">
-          <div class="Popup-container Popup-container--down Popup-container--right u-sizeFit">
+        Account
-            <div class="Popup-content u-padXs u-sizeFit u-fontSizeSm">
+      </div>
-              <h6 class="h6 title u-textNoWrap u-fontSizeSm u-textSemiBold">{{user.first_name}} {{user.last_name}}</h6>
+      <div class="Popup-container Popup-container--down Popup-container--right u-sizeFit">
-              <div class="u-textNoWrap u-fontSizeSm">{{user.email}}</div>
+        <div class="Popup-content u-padXs u-sizeFit u-fontSizeSm">
-              <hr class="Divider u-spaceEndsNone">
+          <h6 class="h6 title u-textNoWrap u-fontSizeSm u-textSemiBold">{{user.first_name}} {{user.last_name}}</h6>
-              <div class="u-padBottomSm u-padTopSm">
+          <div class="u-textNoWrap u-fontSizeSm">{{user.email}}</div>
-                <a href="/user/{{user.id}}/teams" class="u-spaceBottomSm Button Button--small">
+          <hr class="Divider u-spaceEndsNone">
-                  <span>{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/team.svg"}}}</span>
+          <div class="u-padBottomSm u-padTopSm">
-                  Teams
+            <a href="/user/{{user.id}}/teams" class="u-spaceBottomSm Button Button--small">
-                </a>
+              <span>{{{embeddedSvgFromPath "/teamsnap-ui/assets/icons/team.svg"}}}</span>
-                <form method="post" action="/logout">
+              Teams
-                  <button type="submit" name="logout" class="u-spaceBottomSm Button Button--small">
+            </a>
-                    Logout
+            <form method="post" action="/logout">
-                  </button>
+              <button type="submit" name="logout" class="u-spaceBottomSm Button Button--small">
-                </form>
+                Logout
-              </div>
+              </button>
-            </div>
+            </form>
-          </div>
+          </div>
-        </div>
+        </div>
-
-        {{/if}}
       </div>
-                
     </div>
   </div>
-</div>
+  {{/if}}
+            
+</div>