From 0893e0785277caa2a633d27a75f9d77e428218ac Mon Sep 17 00:00:00 2001
From: dbroqua <contact@darkou.fr>
Date: Wed, 23 Feb 2022 19:26:52 +0100
Subject: [PATCH] =?UTF-8?q?{WIP}=20Mise=20en=20place=20des=20th=C3=A8mes?=
 =?UTF-8?q?=20clair=20et=20sombre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/button.scss                 |  6 ++--
 sass/connexion.scss              | 14 ++-------
 sass/forms.scss                  | 31 ++++++++++---------
 sass/global.scss                 | 52 +++++++++++++++++++++++---------
 sass/navbar.scss                 |  6 ++--
 sass/pagination.scss             | 10 +++---
 views/index.ejs                  | 40 ++++++++++++------------
 views/pages/ajouter-un-album.ejs |  6 ++--
 views/pages/connexion.ejs        |  6 ++--
 views/pages/inscription.ejs      |  8 ++---
 10 files changed, 96 insertions(+), 83 deletions(-)

diff --git a/sass/button.scss b/sass/button.scss
index 8d0d311..367277f 100644
--- a/sass/button.scss
+++ b/sass/button.scss
@@ -38,12 +38,12 @@
     }
 
     &.is-primary {
-        background-color: var(--primary-color);
+        background-color: var(--primary-bg-color);
         border-color: transparent;
-        color: var(--default-color);
+        color: var(--primary-font-color);
 
         &:hover {
-            background-color: var(--primary-hl-color);
+            background-color: var(--primary-bg-hl-color);
         }
     }
 }
\ No newline at end of file
diff --git a/sass/connexion.scss b/sass/connexion.scss
index c5b3a91..01cc027 100644
--- a/sass/connexion.scss
+++ b/sass/connexion.scss
@@ -1,11 +1,11 @@
 .connexion,
 .inscription {
-    background-color: var(--default-color);
+    background-color: var(--navbar-color);
     border-radius: 6px;
     box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
     color: var(--font-color);
     display: block;
-    padding: 1.25rem; 
+    padding: 1.25rem;
     width: calc(100% - 2rem);
     margin: auto;
 
@@ -15,14 +15,4 @@
     @include respond-to("medium-up") {
        width: 35%;
     }
-
-    button {
-        background-color: var(--secondary-color);
-        border-color: transparent;
-        color: var(--default-color);
-
-        &:hover {
-            background-color: var(--secondary-hl-color);
-        }
-    }
 }
\ No newline at end of file
diff --git a/sass/forms.scss b/sass/forms.scss
index ef0366b..989ce29 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -26,17 +26,18 @@
     input,
     textarea,
     select {
-        border-radius: 0.375rem;
+        border-radius: 4px;
         box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
         max-width: 100%;
         width: 100%;
         background-color: var(--default-color);
-        border: 1px solid var(--default-hl-color) !important;
-        color: var(--font-color);
+        border: 1px solid transparent !important;
+        color: var(--input-color);
 
         &:focus-visible {
-            border: 1px solid var(--font-color) !important;
+            // border: 1px solid var(--font-color) !important;
             outline: unset;
+            border-color: var(--input-active-color) !important;
         }
     }
 
@@ -53,24 +54,24 @@
 .theme-switch-wrapper {
     display: flex;
     align-items: center;
-  
+
     em {
         margin-left: 10px;
         font-size: 1rem;
     }
 }
-  
+
 .theme-switch {
     display: inline-block;
     height: 34px;
     position: relative;
     width: 60px;
 }
-  
+
 .theme-switch input {
     display:none;
 }
-  
+
 .slider {
     background-color: #ccc;
     bottom: 0;
@@ -81,7 +82,7 @@
     top: 0;
     transition: .4s;
 }
-  
+
 .slider:before {
     background-color: #fff;
     bottom: 4px;
@@ -102,21 +103,21 @@
     font-variant: normal;
     text-transform: none;
 }
-  
+
 input:checked + .slider {
-    background-color: #485fc7;
+    background-color: var(--primary-bg-color);
 }
-  
+
 input:checked + .slider:before {
     transform: translateX(26px);
     content: '\f186';
+    background-color: var(--input-active-color);
 }
-  
+
 .slider.round {
     border-radius: 34px;
 }
-  
+
 .slider.round:before {
     border-radius: 50%;
 }
-  
\ No newline at end of file
diff --git a/sass/global.scss b/sass/global.scss
index 28e3f04..f9ffa5b 100644
--- a/sass/global.scss
+++ b/sass/global.scss
@@ -9,6 +9,7 @@ html {
         font-family: 'open_sansregular';
         font-weight: 400;
         min-height: 100vh;
+        color: var(--font-color);
 
         &.is-accessible {
             font-family: 'lucioleregular';
@@ -21,8 +22,21 @@ html {
         }
 
         a {
-            color: var(--secondary-color);
+            color: var(--link-color);
             cursor: pointer;
+
+            &:hover {
+                color: var(--link-hover-color);
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            color: var(--font-color);
         }
 
         h1 {
@@ -42,36 +56,44 @@ html {
 }
 
 :root {
+    --default-color: rgb(255, 255, 255);
     --bg-color: rgb(242, 244, 248);
     --font-color: rgb(76, 86, 106);
+    --footer-color: rgb(251, 251, 252);
+    --link-color: rgb(123, 136, 161);
+    --link-hover-color: rgb(76, 86, 106);
+    --input-color: rgb(76, 86, 106);
+    --input-active-color: rgb(229, 233, 240);
+    --navbar-color: rgb(242, 244, 248);
+
+    --primary-bg-color: rgb(136, 192, 208);
+    --primary-bg-hl-color: rgb(121, 184, 202);
+    --primary-font-color: rgb(59, 66, 82);
 
-    --default-color: #fff;
     --default-hl-color: #dbdbdb;
-    --primary-color: #2d7c58;
-    --primary-hl-color: #267953;
     --secondary-color: #485fc7;
     --secondary-hl-color: #3e56c4;
     --danger-color: #d73455;
     --danger-hl-color: #d70933;
-    --footer-color: #fafafa;
     --bg-light-color: #fafafa;
     --disabled-color: #7a7a7a;
 
-    
+
     --heading-color: #292922;
 }
 
 [data-theme="dark"] {
+    --default-color: rgb(76, 86, 106);
     --bg-color: rgb(36, 41, 51);
     --font-color: rgb(236, 239, 244);
+    --footer-color: rgb(59, 66, 82);
+    --link-color: rgb(171, 185, 207);
+    --link-hover-color: rgb(236, 239, 244);
+    --input-color: rgb(236, 239, 244);
+    --input-active-color: rgb(36, 41, 51);
+    --navbar-color: rgb(59, 66, 82);
 
-
-    --default-color: #fff;
-    --default-hl-color: #dbdbdb;
-    --primary-color: #2d7c58;
-    --primary-hl-color: #267953;
-    --secondary-color: #485fc7;
-    --secondary-hl-color: #3e56c4;
-    --danger-color: #692230;
-    --danger-hl-color: #4e0f1b;
+    --primary-bg-color: rgb(136, 192, 208);
+    --primary-bg-hl-color: rgb(121, 184, 202);
+    --primary-font-color: rgb(59, 66, 82);
 }
\ No newline at end of file
diff --git a/sass/navbar.scss b/sass/navbar.scss
index 9fbdc85..306e09f 100644
--- a/sass/navbar.scss
+++ b/sass/navbar.scss
@@ -1,6 +1,6 @@
 .navbar {
     min-height: 3.25rem;
-    background-color: var(--bg-color);
+    background-color: var(--navbar-color);
     box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
     color: rgba(0,0,0,.7);
     position: fixed;
@@ -25,8 +25,8 @@
         .navbar-item {
             align-items: center;
             display: flex;
-            
-            img { 
+
+            img {
                 max-height: 1.75rem;
             }
 
diff --git a/sass/pagination.scss b/sass/pagination.scss
index 640b60e..5b4d719 100644
--- a/sass/pagination.scss
+++ b/sass/pagination.scss
@@ -48,8 +48,8 @@
         font-size: 1em;
         justify-content: center;
         margin: .25rem;
-        border-color: var(--default-hl-color);
-        color: var(--font-color);
+        border-color: var(--primary-bg-color);
+        color: var(--primary-font-color);
         min-width: 2.5em;
         padding-left: .75em;
         padding-right: .75em;
@@ -66,9 +66,9 @@
 
     .pagination-link {
         &.is-current {
-            background-color: var(--secondary-color);
-            border-color: var(--secondary-color);
-            color: var(--default-color);
+            background-color: var(--primary-bg-color);
+            border-color: var(--primary-bg-color);
+            color: var(--primary-font-color);
         }
     }
 
diff --git a/views/index.ejs b/views/index.ejs
index b943022..ab3ffce 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-    
+
         <title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - My Music Library <% } %></title>
 
         <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -13,12 +13,12 @@
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
         <meta name="msapplication-TileColor" content="#da532c">
         <meta name="theme-color" content="#ffffff">
-        
+
         <link href="/css/main.css" rel="stylesheet" />
-    
+
         <script src="/libs/axios/axios.min.js"></script>
         <script src="/libs/vue/vue.global.prod.js"></script>
-    
+
         <script>
             /**
              * Fonction permettant d'afficher un message dans un toastr
@@ -29,7 +29,7 @@
                 if ( message ) {
                     x.getElementsByTagName("SPAN")[0].innerHTML = message;
                 }
-                
+
                 x.className = `${x.className} show`;
                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
             };
@@ -39,7 +39,7 @@
              */
             function hideToastr() {
                 let x = document.getElementById("toastr");
-                
+
                 x.className = x.className.replace("show", "");
                 x.getElementsByTagName("SPAN")[0].innerHTML = "";
             }
@@ -48,7 +48,7 @@
              * Fonction permettant de récupérer la valeur d'un cookie
              * @param {String} cname
              * @param {String} defaultValue
-             * 
+             *
              * @return {String}
              */
             function getCookie(cname, defaultValue = 'false') {
@@ -101,12 +101,12 @@
              */
             function switchAriaTheme() {
                 let body = document.body;
-                
+
                 body.classList.toggle("is-accessible");
 
                 setCookie('ariatheme', body.classList.contains("is-accessible"));
             }
-    
+
             /**
              * Fonction permettant de switcher de thème clair/sombre
              * @param {Object} e
@@ -128,7 +128,7 @@
                         el.addEventListener('click', () => {
                             const target = el.dataset.target;
                             const $target = document.getElementById(target);
-    
+
                             el.classList.toggle('is-active');
                             $target.classList.toggle('is-active');
                         });
@@ -163,20 +163,20 @@
                     <img src="/img/logo.png" alt="Logo My Music Library">
                     <span>My Music Library</span>
                 </a>
-          
+
                 <a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
                     <span aria-hidden="true"></span>
                     <span aria-hidden="true"></span>
                     <span aria-hidden="true"></span>
                 </a>
             </div>
-          
+
             <div id="navbar" class="navbar-menu">
                 <% if ( user ) { %>
                 <div class="navbar-start">
                     <div class="navbar-item">
                         <div class="buttons">
-                            <a class="button is-link" href="/ajouter-un-album">
+                            <a class="button is-primary" href="/ajouter-un-album">
                                 <i class="icon-plus"></i>
                                 <span>
                                     Ajouter un album
@@ -186,7 +186,7 @@
                     </div>
                 </div>
                 <% } %>
-          
+
                 <div class="navbar-end">
                     <a class="navbar-item" href="/nous-contacter">
                         Nous contacter
@@ -199,7 +199,7 @@
                                 <%= user.username %>
                             </span>
                         </a>
-          
+
                         <div class="navbar-dropdown">
                             <a class="navbar-item" href="/ma-collection">
                                 Ma collection
@@ -217,11 +217,11 @@
                     </div>
                     <div class="navbar-item">
                         <div class="buttons">
-                            <button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
+                            <button type="button" class="button is-primary" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
                                 <i class="icon-eye"></i>
                             </button>
                             <% if ( !user ) { %>
-                            <a class="button is-link" href="/connexion">
+                            <a class="button is-primary" href="/connexion">
                                 <strong>Connexion</strong>
                             </a>
                             <% } else { %>
@@ -249,7 +249,7 @@
                     <div class="body">
                         <%= page.failureFlash %>
                     </div>
-                <% } %>    
+                <% } %>
                 <%
                     if (error && error.length > 0) {
                         for( let i = 0 ; i < error.length ; i += 1 ) {
@@ -262,11 +262,11 @@
                 </div>
                 <%
                         }
-                    } 
+                    }
                 %>
             </div>
         <% } %>
-        
+
         <%- include(viewname) %>
 
         <footer class="footer layout-hero">
diff --git a/views/pages/ajouter-un-album.ejs b/views/pages/ajouter-un-album.ejs
index f826cf0..14e07f3 100644
--- a/views/pages/ajouter-un-album.ejs
+++ b/views/pages/ajouter-un-album.ejs
@@ -6,7 +6,7 @@
                 <label for="q">Nom de l'album ou code barre</label>
                 <div class="field has-addons">
                     <input type="text" name="q" id="q" v-model="q" placeholder="ex : Hybrid Theory" autofocus>
-                    <button class="button is-link" :disabled="loading" aria-label="Chercher">
+                    <button class="button is-primary" :disabled="loading" aria-label="Chercher">
                         <i class="icon-search" v-if="!loading"></i>
                         <i class="icon-spin animate-spin" v-if="loading"></i>
                     </button>
@@ -14,7 +14,7 @@
             </form>
         </div>
     </div>
-    
+
     <div class="grid grid-cols-1 lg:grid-cols-2 list">
         <div class="item" v-if="!loading" v-for="item in items">
             <a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
@@ -35,7 +35,7 @@
                     </span>
                     <br />
                     <span>
-                        <strong>Genre : </strong> 
+                        <strong>Genre : </strong>
                         <template v-for="(genre, index) in item.genre">
                             {{ genre }}<template v-if="index < item.genre.length - 1">, </template>
                         </template>
diff --git a/views/pages/connexion.ejs b/views/pages/connexion.ejs
index 7c0b1da..75aa112 100644
--- a/views/pages/connexion.ejs
+++ b/views/pages/connexion.ejs
@@ -6,7 +6,7 @@
         <div class="field">
             <label for="email">Adresse e-mail</label>
             <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
-        </div>              
+        </div>
         <div class="field">
             <label for="password">Mot de passe</label>
             <input type="password" name="password" id="password" placeholder="********">
@@ -15,7 +15,7 @@
         <div class="text-right mt-10">
             <p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
         </div>
-      
-        <button type="submit" class="button">Connexion</button>
+
+        <button type="submit" class="button is-primary">Connexion</button>
     </form>
 </div>
\ No newline at end of file
diff --git a/views/pages/inscription.ejs b/views/pages/inscription.ejs
index ba71d3d..7590ff9 100644
--- a/views/pages/inscription.ejs
+++ b/views/pages/inscription.ejs
@@ -6,11 +6,11 @@
         <div class="field">
             <label for="username">Nom d'utilisateur</label>
             <input type="text" name="username" id="username" placeholder="ex : darkou">
-        </div>  
+        </div>
         <div class="field">
             <label for="email">Adresse e-mail</label>
             <input type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
-        </div>              
+        </div>
         <div class="field">
             <label for="password">Mot de passe</label>
             <input type="password" name="password" id="password" placeholder="********">
@@ -19,7 +19,7 @@
         <div class="text-right mt-10">
             <p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
         </div>
-      
-        <button type="submit" class="button">Inscription</button>
+
+        <button type="submit" class="button is-primary">Inscription</button>
     </form>
 </div>
\ No newline at end of file