invert primary and secondary color to be more consistent with usage

Holusion · Feb 23, 2024 · 745cd4b · 745cd4b
1 parent f191e11
commit 745cd4b
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 61 deletions.
diff --git a/source/ui/composants/Modal.ts b/source/ui/composants/Modal.ts
@@ -105,7 +105,7 @@ interface ModalOptions{
       border: 1px solid var(--color-element);
       border-radius: 5px;
       background-color: var(--color-background);
-      color: var(--color-light);
+      color: var(--color-text);
       box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
     }
 

diff --git a/source/ui/composants/SceneCard.ts b/source/ui/composants/SceneCard.ts
@@ -158,7 +158,7 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
         padding: 0 0.5rem;
       }
       .tools a:hover{
-        color: rgb(0, 165, 232);
+        color: var(--color-secondary-light);
       }
 
       .card-title{

diff --git a/source/ui/composants/navbar/styles.scss b/source/ui/composants/navbar/styles.scss
@@ -58,7 +58,7 @@ nav {
       box-sizing: border-box;
       background-color: transparent;
       font-size: 13px;
-      color: var(--color-light);
+      color: var(--color-text);
     }
     ::slotted(.btn){
       padding: 4px 10px !important;
@@ -81,8 +81,8 @@ nav {
   > a {
     color: inherit;
     font-size: inherit;
-    background-color: transparent;
-    transition: background-color 0.2s ease 0s;
+    border-bottom: 3px solid transparent;
+    transition: border 0.2s ease 0s;
     svg { fill: currentColor; }
 
     &:hover, &:focus{
@@ -91,9 +91,9 @@ nav {
     }
 
     &.selected {
-      background-color: var(--color-primary-light);
+      border-bottom: 3px solid var(--color-primary);
       &:hover, &:focus {
-        background-color: var(--color-primary-lighter);
+        border-bottom: 3px solid var(--color-primary-lighter);
       }
     }
 

diff --git a/source/ui/screens/Admin/AdminHome.ts b/source/ui/screens/Admin/AdminHome.ts
@@ -2,13 +2,16 @@
 import { customElement, property, html, TemplateResult, LitElement, css } from "lit-element";
 
 
+
 import "./UsersList";
 import i18n from "../../state/translate";
 import Modal from "../../composants/Modal";
 import "../../composants/Button";
 
+import commonStyles from '!lit-css-loader?{"specifier":"lit-element"}!sass-loader!../../styles/common.scss';
+
 @customElement("send-testmail")
-class TestmailModalBody extends i18n(LitElement){
+export class TestmailModalBody extends i18n(LitElement){
   @property({type: String})
   state = "initial";
 
@@ -30,34 +33,26 @@ class TestmailModalBody extends i18n(LitElement){
 
     if(this.state =="initial"){
       return html`<div style="width:300px;display:flex;justify-content:center">
-      <button class="send" @click=${onsend}>${this.t("ui.send")}</button>
+      <button class="btn btn-primary-outline btn-send" @click=${onsend}>${this.t("ui.send")}</button>
       </div>`
     }else if(this.state === "sending"){
       return html`<div style="flex-grow:1">
         <progress style="width:100%"></progress>
       </div>`
     }else{
       return html`<div style="max-width: max(450px, 60vw);">
-        <button class="send" @click=${onsend}>${this.t("ui.send")}</button>
+        <button class="btn btn-primary-outline btn-send" @click=${onsend}>${this.t("ui.send")}</button>
         <pre class="state-report">${this.state}</pre>
       </div>`;
     }
   }
-  static styles = css`
-    button.send{
-      box-sizing: border-box;
-      padding: 4px 10px;
-      border: none;
-      text-decoration: none;
-      color: white;
-      background-color: var(--color-primary);
-    }
+  static styles = [commonStyles, css`
     .state-report{
       text-wrap: wrap;
       overflow: auto;
       border: 1px solid var(--color-dark);
     }
-  `;
+  `];
 }
 
 /**
@@ -72,7 +67,7 @@ export default class AdminHomeScreen extends i18n(LitElement) {
 
   protected render(): unknown {
     return html`
-      <h2>${this.t("ui.adminSection")}</h2>
+      <h1>${this.t("ui.adminSection")}</h1>
 
       <div class="section">
         <h3>${this.t("ui.tools")}</h3>

diff --git a/source/ui/screens/Admin/AdminStats.ts b/source/ui/screens/Admin/AdminStats.ts
@@ -43,7 +43,7 @@ export default class AdminStatsScreen extends i18n(LitElement) {
       let now = new Date();
       now.setHours(0,0,0,0);
 
-      this.scenes = b.filter(scene=>{
+      this.scenes = b.scenes.filter(scene=>{
         return now.valueOf() < new Date(scene.mtime).valueOf();
       });
     }).catch(e=>{
@@ -70,7 +70,7 @@ export default class AdminStatsScreen extends i18n(LitElement) {
       return html`<div style="margin-top:10vh"><spin-loader visible></spin-loader></div>`
     }
     return html`<div style="max-width:1200px; margin: auto;">
-      <h2>Server Statistics</h2>
+      <h1>Server Statistics</h1>
       <div class="section">
         <h3>Files statistics</h3>
         <ul>

diff --git a/source/ui/screens/Admin/UsersList.ts b/source/ui/screens/Admin/UsersList.ts
@@ -102,7 +102,7 @@ interface User {
             header: "Delete user",
             body: html`<div>${this.t("info.userDeleteConfirm", {username : u.username})}</div>`,
             buttons: html`<div style="display:flex;padding-top:30px;">
-                <ui-button class="btn-primary" text="cancel" @click=${Modal.close}></ui-button>
+                <ui-button class="btn-primary-outline" text="cancel" @click=${Modal.close}></ui-button>
                 <ui-button class="btn-danger" text="delete" @click=${(ev)=>this.onDeleteUser(ev, u)}><ui-button>
             </div>`
         });
@@ -142,13 +142,13 @@ interface User {
 
     protected render() :TemplateResult {
         if(this.error){
-            return html`<h1>Error</h1><div>${this.error.message}</div>`;
+            return html`<h2>Error</h2><div>${this.error.message}</div>`;
         }else if(this.loading){
             return html`<div style="margin-top:10vh"><spin-loader visible></spin-loader></div>`
         }
         return html`<div>
-            <h2>${this.t("info.userManager")}</h2>
-            <ui-button style="max-width: 200px; margin-bottom: 15px" class="btn-primary" icon="plus" text=${this.t("ui.createUser")} @click=${this.createUserOpen}></ui-button>
+            <h1>${this.t("info.userManager")}</h2>
+            <ui-button style="max-width: 200px; margin-bottom: 15px" class="btn-primary-outline" icon="plus" text=${this.t("ui.createUser")} @click=${this.createUserOpen}></ui-button>
             <div class="users-list section" style="position:relative;">
                 <table class="list-table">
                     <thead><tr>
@@ -169,7 +169,7 @@ interface User {
                         <td><input style="width:20px; height:20px" type="checkbox" .checked=${u.isAdministrator} disabled></td>
                         <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=${u.isAdministrator ? "color:var(--color-text);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-dark)" inline transparent icon="key" title="login link" @click=${()=>this.createLoginLink(u)}></ui-button>
                             </div>
                         </td>

diff --git a/source/ui/screens/Home.ts b/source/ui/screens/Home.ts
@@ -163,10 +163,10 @@ interface Upload{
         return html`
         <h2>${this.t("info.homeHeader")}</h2>
         <div class="list-tasks" style="margin-bottom:1rem">
-            <upload-button class="btn btn-primary" .disabled=${uploads.length != 0} @change=${this.onUploadBtnChange}>
+            <upload-button class="btn btn-primary-outline" .disabled=${uploads.length != 0} @change=${this.onUploadBtnChange}>
                 ${this.t("ui.upload")}<spin-loader style="padding-left: 5px" .visible=${uploads.length != 0} inline></spin-loader>
             </upload-button>
-            <a class="btn btn-primary" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+            <a class="btn btn-primary-outline" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
         </div>
 
         ${(this.list.length == 0 && Object.keys(this.uploads).length == 0)?null: html`

diff --git a/source/ui/screens/List.ts b/source/ui/screens/List.ts
@@ -161,16 +161,16 @@ interface Upload{
                     </div>
                     <div class="section">
                         <h4 style="margin-top:0">${this.t("ui.newScene")}</h4>
-                        <upload-button class="btn btn-primary" style="padding:8px" @change=${this.onUploadBtnChange}>
+                        <upload-button class="btn btn-primary-outline" style="padding:8px" @change=${this.onUploadBtnChange}>
                             ${this.t("ui.upload")}
                         </upload-button>
                         
-                        <a class="btn btn-primary" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+                        <a class="btn btn-primary-outline" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
                     </div>
                     ${(this.selection.length)?html`
                     <div class="section">
                         <h4 style="margin-top:0">${this.t("ui.tools")}</h4>
-                        <a class="btn btn-primary btn-icon" download href="/api/v1/scenes?${
+                        <a class="btn btn-primary-outline btn-icon" download href="/api/v1/scenes?${
                             this.selection.map(name=>`name=${encodeURIComponent(name)}`).join("&")
                             }&format=zip">
                             Download Zip

diff --git a/source/ui/screens/SceneHistory.ts b/source/ui/screens/SceneHistory.ts
@@ -200,11 +200,11 @@ class SceneVersion{
               <h3>Total size: <b-size b=${size}></b-size></h3>
               <h3>${articles.size} article${(1 < articles.size?"s":"")}</h3>
               <div style="max-width: 300px">
-                ${this.can("write")?html`<a class="btn btn-primary" href=${`/ui/scenes/${scene}/edit?lang=${this.language.toUpperCase()}`}>
+                ${this.can("write")?html`<a class="btn btn-primary-outline" href=${`/ui/scenes/${scene}/edit?lang=${this.language.toUpperCase()}`}>
                   <ui-icon name="edit"></ui-icon>  ${this.t("ui.editScene")}
                 </a>`:null}
-                <a class="btn btn-primary" style="margin-top:10px" href=${`/ui/scenes/${scene}/view?lang=${this.language.toUpperCase()}`}><ui-icon name="eye"></ui-icon>  ${this.t("ui.viewScene")}</a>
-                <a class="btn btn-primary" style="margin-top:10px" download href="/api/v1/scenes/${scene}?format=zip"><ui-icon name="save"></ui-icon> ${this.t("ui.downloadScene")}</a>
+                <a class="btn btn-primary-outline" style="margin-top:10px" href=${`/ui/scenes/${scene}/view?lang=${this.language.toUpperCase()}`}><ui-icon name="eye"></ui-icon>  ${this.t("ui.viewScene")}</a>
+                <a class="btn btn-primary-outline" style="margin-top:10px" download href="/api/v1/scenes/${scene}?format=zip"><ui-icon name="save"></ui-icon> ${this.t("ui.downloadScene")}</a>
               </div>
             </div>
             <div style="min-width:300px;" class="section">

diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
@@ -52,9 +52,20 @@ a{
       background-color: var(--color-primary-light);
     }
   }
+
+  &.btn-primary-outline{
+    background: transparent;
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
+
+    &:hover:not([disabled]){
+      background: var(--color-primary);
+      color: white;
+    }
+  }
 
   &.btn-secondary {
-    background-color: var(--color-primary-light);
+    background-color: var(--color-secondary);
 
     &:hover:not([disabled]){
       background-color: var(--color-secondary);
@@ -100,7 +111,7 @@ a{
   }
   &[transparent]{
     background: transparent;
-    color: var(--color-light);
+    color: var(--color-text);
     &:hover{
       color: var(--color-highlight2);
     }

diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
@@ -22,7 +22,7 @@
 
   .divider{
     width: 1px;
-    background-color: var(--color-light);
+    background-color: var(--color-text);
   }
   .form-item {
     position: relative;
@@ -36,8 +36,8 @@
       font-size: 1rem;
       font-weight: 400;
       line-height: 1.5;
-      color: var(--color-light);
-      background: var(--color-section);
+      color: var(--color-text);
+      background: var(--color-element);
       background-clip: padding-box;
       border-radius: 0;
       -webkit-appearance: none;
@@ -84,7 +84,7 @@
       }
 
       > input:focus:not(:disabled){
-        color: var(--color-light);
+        color: var(--color-text);
         background: none;
         border-width: 1px 1px 3px 1px;
         outline: 0;

diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
@@ -2,15 +2,15 @@
 :root{
   --nav-height: 44px;
   --col-width: 1320px;
-  --color-primary: #00517d;
-  --color-secondary: #E6B900;
-
-  --color-primary-light: #0089bf;
-  --color-primary-lighter: #00acf0;
+  --color-primary: #E6B900;
+  --color-primary-light: #edce4c;
+  --color-primary-lighter: #ffda41;
+  --color-primary-dark: #e08f1e;
 
-  --color-primary-dark: #00324d;
+  --color-secondary: #00517d;
+  --color-secondary-light: #00a5e8;
 
-  --color-light: #eee;
+  --color-text: #eee;
   --color-dark: #071922;
 
   --color-medium: var(--color-primary);

diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
@@ -10,13 +10,9 @@ main{
   max-width: var(--col-width);
   margin: auto;
 
-  color: var(--color-light);
+  color: var(--color-text);
   min-height: calc(100vh - var(--nav-height) * 2);
   padding-top: .67em;
-
-  h1{
-    color: var(--color-primary-light);
-  }
 }
 
 
@@ -158,7 +154,7 @@ scene-card{
 }
 
 footer{
-  color: var(--color-light);
+  color: var(--color-text);
   height: 44px;
   background-color: var(--color-section);
   display:flex;
@@ -169,7 +165,7 @@ footer{
   left: 0;
   margin: 8px;
   background: var(--color-highlight);
-  color: var(--color-light);
+  color: var(--color-text);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
   display: flex;
   justify-content: stretch;

diff --git a/source/ui/styles/tables.scss b/source/ui/styles/tables.scss
@@ -5,7 +5,7 @@ table.list-table {
   width: 100%;
   display: table;
   background-color:#000a;
-  color: var(--color-light);
+  color: var(--color-text);
   tr:last-child {
     border-bottom: 0;
   }
@@ -21,7 +21,7 @@ table.list-table {
   }
 
   th {
-    color: var(--color-light);
+    color: var(--color-text);
     font-weight: bold;
     background-color: var(--color-dark);
     position: sticky;

diff --git a/source/ui/styles/titles.scss b/source/ui/styles/titles.scss
@@ -5,9 +5,16 @@ h1, h2, h3{
 }
 
 h1{
-  color: var(--color-primary);
+  display: inline-block;
+  color: var(--color-text);
+  padding: 1.5rem 0.2rem 0 1.5rem;
+  margin: 20px 0 0.4rem 0;
+  border-bottom: 0.6rem solid var(--color-primary);
 }
 
 h2{
-  color: var(--color-secondary);
-}
+  border-left: 0.7rem solid var(--color-primary);
+  padding: 0.5rem 0 0 0.8rem;
+  display: flex;
+  justify-content: start;
+}