From 8a81763280b734555a484231f7375aa9c5752d70 Mon Sep 17 00:00:00 2001
From: Sebastien DUMETZ <s.dumetz@holusion.com>
Date: Tue, 20 Feb 2024 16:08:12 +0100
Subject: [PATCH] update ui styles to better match ecorpus.eu

---
 source/server/templates/layouts/main.hbs |   4 +-
 source/ui/composants/ListItem.ts         |   4 +-
 source/ui/composants/Modal.ts            |   8 +-
 source/ui/composants/SceneCard.ts        |   8 +-
 source/ui/composants/navbar/Navbar.ts    |   9 +-
 source/ui/composants/navbar/styles.scss  |  12 +-
 source/ui/screens/Admin/UsersList.ts     |   2 +-
 source/ui/screens/LandingPage.ts         |  13 +-
 source/ui/screens/List.ts                |   2 +-
 source/ui/styles/buttons.scss            |   4 +-
 source/ui/styles/common.scss             |   2 +
 source/ui/styles/forms.scss              | 148 +++++++++++++----------
 source/ui/styles/globals.scss            |  21 +++-
 source/ui/styles/layout.scss             |  31 +++--
 source/ui/styles/titles.scss             |  13 ++
 source/ui/styles/variables.scss          |  16 +--
 16 files changed, 179 insertions(+), 118 deletions(-)
 create mode 100644 source/ui/styles/titles.scss

diff --git a/source/server/templates/layouts/main.hbs b/source/server/templates/layouts/main.hbs
index 187fb708..40741e16 100644
--- a/source/server/templates/layouts/main.hbs
+++ b/source/server/templates/layouts/main.hbs
@@ -12,7 +12,7 @@
     <link rel="apple-touch-icon" href="{{thumb}}">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
+    
 
     <title>{{title}}</title>
 
@@ -21,6 +21,8 @@
     <style>
       body { background: #303030; }
     </style>
+
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/dist/css/corpus.css">
 
   </head>
diff --git a/source/ui/composants/ListItem.ts b/source/ui/composants/ListItem.ts
index e5e661a7..d2e74de2 100644
--- a/source/ui/composants/ListItem.ts
+++ b/source/ui/composants/ListItem.ts
@@ -51,9 +51,9 @@ export default class ListItem extends LitElement{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: #000a;
+      background: var(--color-background-darker);
       padding: 1rem;
-      border-bottom: 1px solid #103040;
+      border-bottom: 1px solid var(--color-dark);
     }
     .list-item:hover{
       background: #071922
diff --git a/source/ui/composants/Modal.ts b/source/ui/composants/Modal.ts
index 024a132a..bd2db292 100644
--- a/source/ui/composants/Modal.ts
+++ b/source/ui/composants/Modal.ts
@@ -102,15 +102,17 @@ interface ModalOptions{
       top: max(100px, 15vh);
       min-width: 30vw;
       max-width: calc(100vw - 20px);
-      border: none;
-      background-color: var(--color-dark);
+      border: 1px solid var(--color-background-darker);
+      border-radius: 5px;
+      background-color: var(--color-background);
       color: var(--color-light);
       box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
     }
 
     .btn{
       color: white;
-      background: var(--color-tertiary);
+      background: var(--color-background-darker);
+      transition: background 0.2s;
     }
     .btn:hover{
       background: var(--color-secondary);
diff --git a/source/ui/composants/SceneCard.ts b/source/ui/composants/SceneCard.ts
index 46231e0b..a18a4b25 100644
--- a/source/ui/composants/SceneCard.ts
+++ b/source/ui/composants/SceneCard.ts
@@ -93,17 +93,19 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
       }
 
       .scene-card-inner{
-        background-color: #000a;
+        background-color: var(--color-background-darker);
         box-sizing: border-box;
         padding: 1rem;
         width: 100%;
         height: 100%;
         border-radius: 4px;
-        border: 1px solid #103040;
+        border: 1px solid #181818;
+        transition: background 0.2s, border 0.2s;
       }
 
       .scene-card-inner:hover{
-        background-color: #071922;
+        background-color: var(--color-background);
+        border-color: var(--color-background-light);
       }
 
       @media (min-width: 664px){
diff --git a/source/ui/composants/navbar/Navbar.ts b/source/ui/composants/navbar/Navbar.ts
index 77fb9c32..1d1dbe27 100644
--- a/source/ui/composants/navbar/Navbar.ts
+++ b/source/ui/composants/navbar/Navbar.ts
@@ -19,12 +19,9 @@ import favicon from "../../assets/favicon.png";
 
   protected render() :TemplateResult {
   return html`<nav>
-    <div class="brand">
-      <a style="display:flex; align-items:center; color:#c8c8c8;text-decoration:none;font-weight:bold" href="/">
-        <img style="height:32px; padding: 0px 10px;" src="${favicon}" alt="logo eCorpus">
-        <span>eCorpus</span>
-      </a>
-    </div>
+    <a class="brand" href="/">
+      eCorpus
+    </a>
     <div class="spacer"></div>
     <div class="navbar"><slot>no-content</slot></div>
   </nav>`;
diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss
index 00ab72d7..8cd6b930 100644
--- a/source/ui/composants/navbar/styles.scss
+++ b/source/ui/composants/navbar/styles.scss
@@ -29,8 +29,14 @@ nav {
     background-color: var(--color-dark);
   }
   .brand {
-    display:flex;
+    display: flex;
+    height: 100%;
     align-items: center;
+    font-size: 1.1em;
+    color: $color-secondary;
+    font-family: $font-heading;
+    font-weight: 400;
+    text-decoration: none;
   }
   .brand:hover {
     filter: brightness(1.2)
@@ -79,9 +85,9 @@ nav {
     }
   
     &.selected {
-      background-color: $color-primary;
+      background-color: $color-primary-light;
       &:hover, &:focus {
-        background-color: $color-primary-light;
+        background-color: lighten($color-primary-light, 10%);
       }
     }
 
diff --git a/source/ui/screens/Admin/UsersList.ts b/source/ui/screens/Admin/UsersList.ts
index f40712ff..024bbed8 100644
--- a/source/ui/screens/Admin/UsersList.ts
+++ b/source/ui/screens/Admin/UsersList.ts
@@ -170,7 +170,7 @@ interface User {
                         <td>
                             <div style="display:flex; justify-content:end;gap:.6rem;">
                             <ui-button style=${u.isAdministrator ? "color:var(--color-light);opacity:0.2":"color:var(--color-danger)"} inline transparent icon="trash" title=${this.t("ui.delete")} @click=${()=>this.deleteUserOpen(u)} ?disabled=${u.isAdministrator}></ui-button>
-                            <ui-button style="color:var(--color-text-dark)" inline transparent icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
+                            <ui-button style="color:var(--color-dark)" inline transparent icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
                             </div>
                         </td>
                     </tr>`)}
diff --git a/source/ui/screens/LandingPage.ts b/source/ui/screens/LandingPage.ts
index 77a396fe..0403526f 100644
--- a/source/ui/screens/LandingPage.ts
+++ b/source/ui/screens/LandingPage.ts
@@ -21,9 +21,11 @@ import "../composants/UserLogin"
         return html`
             <div class="landing-page">
                 <div class="illustration">
-                    <img src="${sketch}" alt="sketch représentant l'application voyager et son utilisation dans une borne holographique">
-                    <p>${this.t("info.lead")}</p>
-                    <p style="text-align:right"> <a href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a></p>
+                    <img src="${sketch}" alt="dessin représentant l'application voyager et son utilisation dans une borne holographique">
+                    <p>${this.t("info.lead")}.</p>
+                    <p style="text-align:right">
+                        <a href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+                    </p>
                 </div>
                 
                 <div class="user-login">
@@ -48,12 +50,15 @@ import "../composants/UserLogin"
         flex: 1 1 auto;
     }
     .user-login {
-        background-color: var(--color-dark);
+        border: 1px solid var(--color-background-darker);
+        box-shadow: 0 0 5px 0 #00000088;
+        border-radius: 5px;
         width: 33%;
         padding: 1rem;
         min-width:300px;
         flex: 1 1 auto;
     }
+    
     img{
         display: block;
         max-width: 100%;
diff --git a/source/ui/screens/List.ts b/source/ui/screens/List.ts
index 5e861094..7ddb308b 100644
--- a/source/ui/screens/List.ts
+++ b/source/ui/screens/List.ts
@@ -157,7 +157,7 @@ interface Upload{
                 <div class="list-tasks form-control">
                     <div class="form-item" style="display:flex; margin-bottom:10px">
                         <input type="search" id="model-search" placeholder=${this.t("ui.searchScene")} @change=${this.onSearchChange}>
-                        <button class="btn btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
+                        <button class="btn btn-addon btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
                     </div>
                     <div class="section">
                         <h4 style="margin-top:0">${this.t("ui.newScene")}</h4>
diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
index 74c3b5b3..15499414 100644
--- a/source/ui/styles/buttons.scss
+++ b/source/ui/styles/buttons.scss
@@ -62,11 +62,11 @@ a{
   }
 
   &.btn-danger {
-    background-color: $color-danger;
+    background-color: $color-error;
     color: white;
 
     &:hover{
-      background-color: lighten($color-danger, 7%);
+      background-color: lighten($color-error, 7%);
     }    
   }
 
diff --git a/source/ui/styles/common.scss b/source/ui/styles/common.scss
index d76c5c34..0496e5e9 100644
--- a/source/ui/styles/common.scss
+++ b/source/ui/styles/common.scss
@@ -5,6 +5,8 @@
 @import "./buttons.scss";
 @import "./forms.scss";
 
+@import "./titles.scss";
+
 .tooltip{
   div{
     display: none;
diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
index 7a132ca7..78713d78 100644
--- a/source/ui/styles/forms.scss
+++ b/source/ui/styles/forms.scss
@@ -28,92 +28,108 @@
   .form-item {
     position: relative;
     box-sizing: border-box;
-  }
 
-  .form-item > input{
-    box-sizing: border-box;
-    padding: 0.35rem .75rem;
-    display: block;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: $color-light;
-    background: $color-dark;
-    background-clip: padding-box;
-    border-radius: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    &:invalid:not(:placeholder-shown):not(:focus){
-      outline: $color-danger solid 1px;
+    > input{
+      box-sizing: border-box;
+      padding: 0.35rem .75rem;
+      display: block;
+      width: 100%;
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5;
+      color: $color-light;
+      background: $color-background-dark;
+      background-clip: padding-box;
+      border-radius: 0;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      &:invalid:not(:placeholder-shown):not(:focus){
+        outline: $color-error solid 1px;
+      }
+      &:has( + .btn-addon){
+        //To have proper outline alignment
+        padding-right: 2.5rem;
+        margin-right: -2.5rem;
+      }
+    }
+    > input + .btn-addon{
+      width: 2.5rem;
+    }
+
+    > label{
+      opacity: 0.7;
     }
-  }
-  .form-item > label{
-    opacity: 0.7;
   }
 
+
   &.form-modal{
-    .form-item > input:not([type="submit"]){
-      background: $color-primary;
-      height: calc(3.5rem + 2px);
-    }
-    &[disabled] .form-item > input, .form-item > input:disabled {
-      background: $color-primary-dark;
-      pointer-events: none;
-    }
+    .form-item {
 
-    .form-item > input::placeholder{
-      display:none;
-      color: transparent;
-    }
-    .form-item > input:focus, .form-item > input:not(:placeholder-shown){
-      &[type="text"], &[type="password"]{
-        padding-top: 1.625rem;
-        padding-bottom: .625rem;
+      > input:not([type="submit"]){
+        border: 0px solid $color-background-darker;
+        border-bottom-width: 3px;
+        height: calc(3.5rem + 2px);
       }
+
+      > input::placeholder{
+        display:none;
+        color: transparent;
+      }
+
+      > input:focus, .form-item > input:not(:placeholder-shown){
+        &[type="text"], &[type="password"]{
+          padding-top: 1.625rem;
+          padding-bottom: .625rem;
+        }
+      }
+
+      > input:focus:not(:disabled){
+        color: $color-light;
+        background: none;
+        border-width: 1px 1px 3px 1px;
+        outline: 0;
+      }
+
+      > label {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 5px;
+        overflow: hidden;
+        text-align: start;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: none;
+        border: 1px solid transparent;
+        transform-origin: 0 0;
+        transition: opacity .1s ease-in-out,transform .1s ease-in-out;
+      }
+      input:focus ~ label, input:not(:placeholder-shown) ~label{
+        opacity: .65;
+        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
+      } 
     }
-    .form-item > input:focus:not(:disabled){
-      color: $color-light;
-      background-color: var(--color-hover);
-      outline: 0;
-    }
-    
-    .form-item > label {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      padding: 5px;
-      overflow: hidden;
-      text-align: start;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+
+    &[disabled] .form-item > input, .form-item > input:disabled {
+      background: $color-background-darker;
       pointer-events: none;
-      border: 1px solid transparent;
-      transform-origin: 0 0;
-      transition: opacity .1s ease-in-out,transform .1s ease-in-out;
     }
 
     input:focus ~ label, input:not(:placeholder-shown) ~label{
       opacity: .65;
-    } 
-    .form-item{
-      input:focus ~ label, input:not(:placeholder-shown) ~label{
-        opacity: .65;
-        transform: scale(.85) translateY(-.5rem) translateX(.15rem);
-      } 
     }
 
   }
   
   input[type="submit"] {
-    background-color: $color-primary-light;
+    background: $color-background-light;
     color: white;
     cursor: pointer;
     &:hover:not(:disabled){
-      background: $color-secondary;
+      background: $color-primary-light;
     }
   }
 
@@ -133,7 +149,7 @@
     background: none;
     border: none;
     color: inherit;
-    background: #071922;
+    background: $color-background-dark;
     cursor: pointer;
     option{
       -webkit-appearance: none;
diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
index a1178631..b3912651 100644
--- a/source/ui/styles/globals.scss
+++ b/source/ui/styles/globals.scss
@@ -5,15 +5,26 @@
   --col-width: 1320px;
   --color-primary: #{$color-primary};
   --color-secondary: #{$color-secondary};
-  --color-tertiary: #{$color-tertiary};
 
-  --color-dark: #{$color-tertiary};
+  --color-dark: #{$color-dark};
   --color-medium: #{$color-primary};
   --color-hover: #{$color-primary-dark};
   --color-light: #{$color-text};
 
-  --color-danger: #{$color-danger};
-  --color-text-dark: #{$color-text-dark};
+  --color-info: #{$color-info};
+  --color-success: #{$color-success};
+  --color-warning: #{$color-warning};
+  --color-error: #{$color-error};
+
+  --font-body: #{$font-body};
+  --font-heading: #{$font-heading};
+
+  --color-background: #{$color-background};
+  --color-background-dark: #{$color-background-dark};
+  --color-background-darker: #{$color-background-darker};
+  --color-background-light: #{$color-background-light};
+  --color-background-lighter: #{$color-background-lighter};
+  --color-background-hover: #{$color-background-hover};
 }
 
 
@@ -24,7 +35,7 @@
 }
 
 body{
-  background: #071922;
+  background: $color-background;
   position: relative;
   min-height: 100vh;
   width: 100%;
diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
index 069e3167..792980e1 100644
--- a/source/ui/styles/layout.scss
+++ b/source/ui/styles/layout.scss
@@ -22,9 +22,9 @@ main{
 
 
 .section{
-  background: rgba(0, 0, 0, 0.5);
+  background: $color-background-dark;
   border-radius: 4px;
-  border: $color-dark 1px solid;
+  border: $color-background-dark 1px solid;
   padding: 1rem;
   margin-bottom: 1rem;
   h3{
@@ -72,6 +72,11 @@ corpus-list{
   .list-tasks{
     padding: 0.5rem;
     width: 300px;
+    .section{
+      display: flex;
+      flex-direction: column;
+      gap: .5rem;
+    }
   }
   .toolbar, .list-items{
     height: fit-content;
@@ -119,13 +124,10 @@ scene-card{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      background: #000;
+      background: $color-background-darker;
       padding: 1rem;
-      border-bottom: 1px solid $color-dark;
-      text-decoration: none;
-      &:hover{
-        background: #071922
-      }
+      border-color: transparent;
+      border-width: 1px 0 1px 0;
   }
 
   .list-header{
@@ -135,10 +137,13 @@ scene-card{
     border-bottom: 2px solid $color-dark;
   }
 
-  .list-item:nth-child(2n){
-    background: #000;
+  .list-item{
+    &:nth-child(2n){
+      background: $color-background-dark;
+    }
     &:hover{
-      background: #071922
+      background: transparentize($color-dark, 0.5);
+      border-color: $color-dark;
     }
   }
 }
@@ -155,7 +160,7 @@ scene-card{
 footer{
   color: $color-light;
   height: 44px;
-  background-color: $color-dark;
+  background-color: $color-background-dark;
   display:flex;
 }
 
@@ -201,7 +206,7 @@ footer{
     flex: 0;
     padding: 4px 6px 6px 6px;
     font-weight: bolder;
-    color: $color-text-dark;
+    color: $color-dark;
     line-height: 1;
     font-size: 1.5em;
     cursor: pointer;
diff --git a/source/ui/styles/titles.scss b/source/ui/styles/titles.scss
new file mode 100644
index 00000000..88777257
--- /dev/null
+++ b/source/ui/styles/titles.scss
@@ -0,0 +1,13 @@
+
+
+h1, h2, h3{
+  font-family: $font-heading;
+}
+
+h1{
+  color: $color-primary;
+}
+
+h2{
+  color: $color-secondary;
+}
\ No newline at end of file
diff --git a/source/ui/styles/variables.scss b/source/ui/styles/variables.scss
index e461c0a0..41c26496 100644
--- a/source/ui/styles/variables.scss
+++ b/source/ui/styles/variables.scss
@@ -1,13 +1,12 @@
 
 $color-primary: #00517d; // blue
-$color-primary-light: #00a5e8;
+$color-primary-light: #0089bf;
 $color-primary-dark: darken($color-primary, 8%);
 
-$color-secondary: #f96; // orange
+$color-secondary: #E6B900; // orange
 $color-secondary-light: lighten($color-secondary, 15%);
 $color-secondary-dark: darken($color-secondary, 15%);
 
-$color-tertiary: #103040; // Holusion dark blue
 
 $color-info: #73adff;
 $color-success: #8ae65c;
@@ -16,7 +15,6 @@ $color-error: #e64545;
 
 $color-text: #eee;
 $color-text-light: #eee;
-$color-text-dark: #a0a0a0;
 $color-text-disabled: #808080;
 $color-icon: #eee b4 0a0;
 $color-icon-disabled: #808080;
@@ -26,12 +24,14 @@ $color-focus: $color-secondary-light;
 $section-border: 1px solid transparentize($color-primary, 0.5);
 
 $color-light: #eee;
-$color-dark: #103040;
-$color-danger: #dc3545;
+$color-dark: #071922;
 
-$color-background: #071922;
+$color-background: #343434;
 $color-background-dark: darken($color-background, 5%);
 $color-background-darker: darken($color-background, 10%);
 $color-background-light: lighten($color-background, 10%);
 $color-background-lighter: lighten($color-background, 20%);
-$color-background-hover: $color-background-lighter;
\ No newline at end of file
+$color-background-hover: $color-background-lighter;
+
+$font-body: 'Open Sans', 'Liberation', 'Roboto', 'sans-serif';
+$font-heading: 'Noto Serif', 'serif';