feat: ITK logo and login screen restyle

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* [PR-22](https://github.com/itk-dev/itk-project-database/pull/22)
+  Use the ITK logo in the nav and login, tidy the dashboard header, and refresh
+  the login screen.
 * [PR-18](https://github.com/itk-dev/itk-project-database/pull/18)
   Rework the dashboard with an outstanding-work panel and a redesigned activity
   feed, add help text to every graph, and fix the mascot's finish nudges.

assets/styles/app.css

@@ -129,12 +129,12 @@ h3 {
 }
 
 .top-nav__brand {
-    font-size: var(--itk-text-base);
-    font-weight: 700;
-    color: var(--itk-ink);
     display: inline-flex;
     align-items: center;
     gap: var(--itk-space-2);
+    font-size: var(--itk-text-base);
+    font-weight: 700;
+    color: var(--itk-ink);
     letter-spacing: -0.01em;
 }
 
@@ -143,19 +143,25 @@ h3 {
     text-decoration: none;
 }
 
-.top-nav__brand-mark {
-    width: 28px;
-    height: 28px;
-    border-radius: var(--itk-radius-2);
-    background: linear-gradient(135deg, var(--itk-blue), var(--itk-cyan));
-    display: inline-block;
+.top-nav__brand-logo {
+    height: 26px;
+    width: auto;
+    display: block;
 }
 
 .top-nav__menu {
     display: flex;
     align-items: center;
     gap: var(--itk-space-1);
-    margin-left: var(--itk-space-4);
+}
+
+@media (min-width: 1520px) {
+    .top-nav__menu {
+        position: absolute;
+        top: 0;
+        left: calc((100vw - var(--itk-container)) / 2 + var(--itk-space-5));
+        height: 64px;
+    }
 }
 
 .top-nav__link {
@@ -1550,15 +1556,25 @@ textarea {
 .auth__brand {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: var(--itk-space-2);
-    font-weight: 700;
     font-size: var(--itk-text-md);
-    margin-bottom: var(--itk-space-2);
+    font-weight: 700;
+    color: var(--itk-ink);
+    margin-bottom: var(--itk-space-6);
+}
+
+.auth__logo {
+    height: 40px;
+    width: auto;
+    display: block;
 }
 
 .auth__title {
-    font-size: var(--itk-text-xl);
-    margin-bottom: var(--itk-space-6);
+    font-size: var(--itk-text-base);
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: var(--itk-space-3);
 }
 
 .auth .form-row {

templates/base.html.twig

@@ -19,7 +19,7 @@
             {% set route = app.request.attributes.get('_route') %}
             <nav class="top-nav">
                 <a href="{{ path('app_dashboard') }}" class="top-nav__brand">
-                    <span class="top-nav__brand-mark"></span>
+                    <img class="top-nav__brand-logo" src="{{ asset('images/itk-logo.png') }}" alt="ITK">
                     <span>{{ 'app.name'|trans }}</span>
                 </a>
                 <div class="top-nav__menu">

templates/dashboard/index.html.twig

@@ -7,11 +7,9 @@
         <div class="page__header">
             <div>
                 <h1 class="page__title">{{ 'dashboard.title'|trans }}</h1>
-                <p class="page__subtitle">{{ 'dashboard.subtitle'|trans }}</p>
             </div>
             <div class="page__actions">
-                <a href="{{ path('app_initiative_index') }}" class="btn btn--ghost">{{ 'nav.initiatives'|trans }}</a>
-                <a href="{{ path('app_initiative_new') }}" class="btn btn--primary">{{ 'action.new'|trans }}</a>
+                <a href="{{ path('app_initiative_new') }}" class="btn btn--primary">{{ 'action.new_initiative'|trans }}</a>
             </div>
         </div>
 

templates/security/login.html.twig

@@ -6,7 +6,7 @@
     <div class="auth">
         <div class="auth__card">
             <div class="auth__brand">
-                <span class="top-nav__brand-mark"></span>
+                <img class="auth__logo" src="{{ asset('images/itk-logo.png') }}" alt="ITK">
                 <span>{{ 'app.name'|trans }}</span>
             </div>
             <h1 class="auth__title">{{ 'login.title'|trans }}</h1>

translations/messages.da.yaml

@@ -1,5 +1,5 @@
 app:
-    name: Projektdatabase
+    name: Projects
 
 mascot:
     label: Din kreative makker
@@ -83,6 +83,7 @@ nav:
 
 action:
     new: Opret
+    new_initiative: Opret nyt initiativ
     edit: Rediger
     delete: Slet
     save: Gem
@@ -125,7 +126,6 @@ filter:
 
 dashboard:
     title: Overblik
-    subtitle: Status på alle initiativer
     total: Initiativer i alt
     total_hint: registrerede i alt
     in_progress: Igangværende

translations/messages.en.yaml

@@ -1,5 +1,5 @@
 app:
-    name: Project database
+    name: Projects
 
 mascot:
     label: Your creative buddy
@@ -83,6 +83,7 @@ nav:
 
 action:
     new: New
+    new_initiative: Create a new initiative
     edit: Edit
     delete: Delete
     save: Save
@@ -125,7 +126,6 @@ filter:
 
 dashboard:
     title: Overview
-    subtitle: The status of every initiative
     total: Total initiatives
     total_hint: registered in total
     in_progress: In progress