[WIP] new styles updates

Holusion · Feb 26, 2024 · b67e379 · b67e379
1 parent 745cd4b
commit b67e379
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -17,4 +17,3 @@ It means some commands will need to be run with the `--recurse-submodules` flag,
 eg: `git clone --recurse-submodules [email protected]:Holusion/eCorpus`
 
 Day-to-day operations can be simplified by configuring git (globally or for thsi repository) to always recurse by default : `git config submodule.recurse true`.
-
diff --git a/source/ui/composants/SceneCard.ts b/source/ui/composants/SceneCard.ts
@@ -99,13 +99,12 @@ import { AccessType, AccessTypes, Scene } from "../state/withScenes";
         width: 100%;
         height: 100%;
         border-radius: 4px;
-        border: 1px solid #181818;
+        border: 1px solid var(--color-highlight);
         transition: background 0.2s, border 0.2s;
       }
 
       .scene-card-inner:hover{
-        background-color: var(--color-background);
-        border-color: var(--color-highlight);
+        background-color: var(--color-highlight);
       }
 
       @media (min-width: 664px){

diff --git a/source/ui/screens/Admin/AdminHome.ts b/source/ui/screens/Admin/AdminHome.ts
@@ -33,15 +33,15 @@ export class TestmailModalBody extends i18n(LitElement){
 
     if(this.state =="initial"){
       return html`<div style="width:300px;display:flex;justify-content:center">
-      <button class="btn btn-primary-outline btn-send" @click=${onsend}>${this.t("ui.send")}</button>
+      <button class="btn btn-main 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="btn btn-primary-outline btn-send" @click=${onsend}>${this.t("ui.send")}</button>
+        <button class="btn btn-main btn-send" @click=${onsend}>${this.t("ui.send")}</button>
         <pre class="state-report">${this.state}</pre>
       </div>`;
     }

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-outline" text="cancel" @click=${Modal.close}></ui-button>
+                <ui-button class="btn-main" text="cancel" @click=${Modal.close}></ui-button>
                 <ui-button class="btn-danger" text="delete" @click=${(ev)=>this.onDeleteUser(ev, u)}><ui-button>
             </div>`
         });
@@ -148,7 +148,7 @@ interface User {
         }
         return html`<div>
             <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>
+            <ui-button style="max-width: 200px; margin-bottom: 15px" class="btn-main" 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>

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-outline" .disabled=${uploads.length != 0} @change=${this.onUploadBtnChange}>
+            <upload-button class="btn btn-main" .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-outline" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+            <a class="btn btn-main" 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
@@ -157,20 +157,20 @@ 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-addon btn-primary" style="margin-top:0" type="submit"><ui-icon name="search"></ui-icon></button>
+                        <button class="btn btn-addon btn-main" 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>
-                        <upload-button class="btn btn-primary-outline" style="padding:8px" @change=${this.onUploadBtnChange}>
+                        <upload-button class="btn btn-main" style="padding:8px" @change=${this.onUploadBtnChange}>
                             ${this.t("ui.upload")}
                         </upload-button>
                         
-                        <a class="btn btn-primary-outline" href="/ui/standalone/?lang=${this.language.toUpperCase()}">${this.t("info.useStandalone")}</a>
+                        <a class="btn btn-main" 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-outline btn-icon" download href="/api/v1/scenes?${
+                        <a class="btn btn-main 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-outline" href=${`/ui/scenes/${scene}/edit?lang=${this.language.toUpperCase()}`}>
+                ${this.can("write")?html`<a class="btn btn-main" 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-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>
+                <a class="btn btn-main" 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-main" 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">
@@ -216,7 +216,7 @@ class SceneVersion{
           ${this.renderHistory()}
         </div>
         ${this.can("admin")? html`<div style="padding: 10px 0;display:flex;color:red;justify-content:end;gap:10px">
-        <div><ui-button class="btn-primary" icon="edit" text=${this.t("ui.rename")} @click=${this.onRename}></ui-button></div>
+        <div><ui-button class="btn-main" icon="edit" text=${this.t("ui.rename")} @click=${this.onRename}></ui-button></div>
         <div><ui-button class="btn-danger" icon="trash" text=${this.t("ui.delete")} @click=${this.onDelete}></ui-button></div>
         </div>`:null}
       </div>`;
@@ -251,7 +251,7 @@ class SceneVersion{
                         <input style="border:none;" type="text" name="username" id="username" placeholder="${this.t("ui.username")}" required>
                       </div>
                       <div class="form-item">
-                        <input class="btn btn-primary" style="border:none; margin:0" type="submit" value="${this.t("ui.add")}" >
+                        <input class="btn btn-main" style="border:none; margin:0" type="submit" value="${this.t("ui.add")}" >
                       </div>
                     </div>
                   </form>
@@ -283,7 +283,7 @@ class SceneVersion{
                   <div style=""><b>${authors}</b> <span style="opacity:0.6; font-size: smaller">${new Date(v.start).toLocaleString()}</span></div>
                 </div>
 
-                ${index==0?html`<ui-button disabled transparent text="active">active</ui-button>`:html`<ui-button class="btn-primary" style="flex:initial; height:fit-content;" title="restore" @click=${()=>this.onRestore(v.entries.slice(-1)[0])} text="restore" icon="restore"></ui-button>`}
+                ${index==0?html`<ui-button disabled transparent text="active">active</ui-button>`:html`<ui-button class="btn-main" style="flex:initial; height:fit-content;" title="restore" @click=${()=>this.onRestore(v.entries.slice(-1)[0])} text="restore" icon="restore"></ui-button>`}
               </div>
             `
           })}
@@ -402,7 +402,7 @@ class SceneVersion{
             <input type="text" required minlength=3 autocomplete="off" style="padding:.25rem;margin-bottom:.75rem;width:100%;" class="form-control" id="sceneRenameInput" placeholder="${this.name}">
           </div>
         </form>`,
-        buttons: html`<ui-button class="btn-primary" @click=${onRenameSubmit} text=${this.t("ui.rename")}></ui-button>`,
+        buttons: html`<ui-button class="btn-main" @click=${onRenameSubmit} text=${this.t("ui.rename")}></ui-button>`,
       });
 
     }

diff --git a/source/ui/screens/UserSettings.ts b/source/ui/screens/UserSettings.ts
@@ -47,7 +47,7 @@ export default class UserSettings extends i18n(withUser(LitElement)) {
           </div>
         </div>
         <div class="form-group">
-            <input class="btn btn-primary" style="padding:8px; width:100%" type="submit" value=${this.t("ui.saveChanges")}>
+            <input class="btn btn-main" style="padding:8px; width:100%" type="submit" value=${this.t("ui.saveChanges")}>
         </div>
       </form>
 
@@ -69,7 +69,7 @@ export default class UserSettings extends i18n(withUser(LitElement)) {
         <div class="form-group">
         </div>
           <div>
-            <input class="btn btn-primary" style="padding:8px; width:100%" type="submit" name="password-submit" value="${this.t("ui.changePassword")}">
+            <input class="btn btn-main" style="padding:8px; width:100%" type="submit" name="password-submit" value="${this.t("ui.changePassword")}">
           </div>
         </div>
       </form>

diff --git a/source/ui/styles/buttons.scss b/source/ui/styles/buttons.scss
@@ -45,15 +45,15 @@ a{
     }
   }
 
-  &.btn-primary {
-    background-color: var(--color-primary);
+  &.btn-main {
+    background-color: var(--color-secondary);
 
     &:hover:not([disabled]){
-      background-color: var(--color-primary-light);
+      background-color: var(--color-secondary-light);
     }
   }
 
-  &.btn-primary-outline{
+  &.btn-outline{
     background: transparent;
     border: 1px solid var(--color-primary);
     color: var(--color-primary);

diff --git a/source/ui/styles/forms.scss b/source/ui/styles/forms.scss
@@ -124,11 +124,12 @@
   }
 
   input[type="submit"] {
-    background: var(--color-highlight);
+    background: var(--color-highlight2);
     color: white;
     cursor: pointer;
     &:hover:not(:disabled){
-      background: var(--color-primary-light);
+      background: var(--color-highlight);
+      box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
     }
   }
 

diff --git a/source/ui/styles/globals.scss b/source/ui/styles/globals.scss
@@ -7,11 +7,11 @@
   --color-primary-lighter: #ffda41;
   --color-primary-dark: #e08f1e;
 
-  --color-secondary: #00517d;
-  --color-secondary-light: #00a5e8;
+  --color-secondary: #4735df;
+  --color-secondary-light: #7a70db;
 
   --color-text: #eee;
-  --color-dark: #071922;
+  --color-dark: #2b2938;
 
   --color-medium: var(--color-primary);
   --color-hover: var(--color-primary-dark);
@@ -37,7 +37,7 @@
   --color-element: #1b1b1b;
 
   /* Main Color for elements designed to stand out in a section, like action buttons */
-  --color-highlight: #4e4e4e;
+  --color-highlight: #1f1d29;
 
   /* Additional highlight color, primarily for hover effects */
   --color-highlight2: #5e5e5e;

diff --git a/source/ui/styles/layout.scss b/source/ui/styles/layout.scss
@@ -19,11 +19,13 @@ main{
 .section{
   background: var(--color-section);
   border-radius: 4px;
-  border: var(--color-section) 1px solid;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
+
   padding: 1rem;
   margin-bottom: 1rem;
   h3{
     margin-top: 0;
+    color: var(--color-primary);
   }
 }
 
@@ -129,7 +131,8 @@ scene-card{
     font-size: 1.2rem;
     font-weight: bold;
     padding: 1.2rem 1rem 0.8rem 1rem;
-    border-bottom: 2px solid var(--color-dark);
+    color: var(--color-primary);
+    border-bottom: 2px solid var(--color-primary);
   }
 
   .list-item{