From 312b2d859943900a8784d0fbdc1cc03db0ab2be4 Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <contact@cipherbliss.com>
Date: Thu, 2 Apr 2020 16:46:30 +0200
Subject: [PATCH] :art: better disposal for theme selector

---
 src/app/app.component.html                    | 112 ++++++++++--------
 src/app/app.component.scss                    |  10 +-
 src/app/config/PollConfig.ts                  |   2 +-
 .../theme-selector.component.html             |   8 +-
 .../theme-selector.component.scss             |   4 +
 src/assets/scss/themes/_all.scss              |   3 +
 src/assets/scss/themes/_dark.scss             |  44 +++++++
 src/assets/scss/themes/_light.scss            |  57 ---------
 src/assets/scss/themes/_red.scss              |  14 +++
 src/styles.scss                               |   2 +-
 10 files changed, 135 insertions(+), 121 deletions(-)
 create mode 100644 src/assets/scss/themes/_all.scss
 create mode 100644 src/assets/scss/themes/_dark.scss
 create mode 100644 src/assets/scss/themes/_red.scss

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 38558bb5..90e7c6cd 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,61 +2,73 @@
     id='big_container'
     class={{this.config.themeClass}} >
 
-    <header style="text-align:center" >
-        <a
-            [routerLink]="'home'"
-            class="home_link"
-            aria-roledescription="home"
-        >
-            <h1 >
-                <span class="logo_first" >Frama</span >
-                <span class="logo_second" >date</span > (démo)
-            </h1 >
-            <div class="legend" >proposé par
-                <span class="legend_first" >Frama</span >
-                <span class="legend_second" >soft</span >
-            </div >
-        </a >
-        <div id="translate_example" >
-            <div class="wrapper" >
-                <img
-                    src="assets/img/icone-langue.svg"
-                    alt="location icon"
-                    (click)="changeLanguage()"
-                    class="lang_icon clickable"
-                >
-                <img
-                    (click)="toggleMenu()"
-                    alt="menu icon"
-                    class="menu_icon  clickable"
-                    src="assets/img/icone-menu.svg"
-                >
-                <select
-                    name="language"
-                    class="language-selector"
-                    (change)="switchLanguage(currentLang)"
-                    [(ngModel)]="currentLang"
-                >
-                    <option
-                        value="d"
-                        default
-                        class="select_language"
-                    >{{"Language" | translate}}</option >
-                    <option value="en" >English</option >
-                    <option value="fr" >Français</option >
-                </select >
-                <span
-                    (click)="toggleMenu()"
-                    class="menu_label" >Menu</span >
-            </div >
+    <header class='big-header'>
+        <div class='container'>
+            <div class='columns' >
+                <div class='column' >
+                    <a
+                        [routerLink]="'home'"
+                        class="home_link"
+                        aria-roledescription="home"
+                    >
+                        <h1 >
+                            <span class="logo_first" >Frama</span >
+                            <span class="logo_second" >date</span > (démo)
+                        </h1 >
+                        <div class="legend" >proposé par
+                            <span class="legend_first" >Frama</span >
+                            <span class="legend_second" >soft</span >
+                        </div >
+                    </a >
+
+                </div >
+                <div class='column' >
+                    <div id="translate_example" >
+                        <div class="wrapper" >
+                            <img
+                                src="assets/img/icone-langue.svg"
+                                alt="location icon"
+                                (click)="changeLanguage()"
+                                class="lang_icon clickable"
+                            >
+                            <img
+                                (click)="toggleMenu()"
+                                alt="menu icon"
+                                class="menu_icon  clickable"
+                                src="assets/img/icone-menu.svg"
+                            >
+                            <select
+                                name="language"
+                                class="language-selector"
+                                (change)="switchLanguage(currentLang)"
+                                [(ngModel)]="currentLang"
+                            >
+                                <option
+                                    value="d"
+                                    default
+                                    class="select_language"
+                                >{{"Language" | translate}}</option >
+                                <option value="en" >English</option >
+                                <option value="fr" >Français</option >
+                            </select >
+                            <span
+                                (click)="toggleMenu()"
+                                class="menu_label" >Menu</span >
+                        </div >
+
+                    </div >
+                </div >
+                <div class='column' >
+                    <framadate-theme-selector ></framadate-theme-selector >
+                </div >
+            </div >
+        </div>
 
-        </div >
 
     </header >
 
-    <framadate-theme-selector ></framadate-theme-selector >
-
     <main >
+
         <router-outlet ></router-outlet >
     </main >
     <framadate-debugger ></framadate-debugger >
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index bfbfe33c..558e632f 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,13 +1,7 @@
 @charset "UTF-8";
 
-header {
-    h1,
-    a {
-        &::before,
-        &::after {
-            display: none;
-        }
-    }
+.big-header {
+    padding: 0.5rem;
 }
 
 i {
diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts
index 2bc809bf..4299c25a 100644
--- a/src/app/config/PollConfig.ts
+++ b/src/app/config/PollConfig.ts
@@ -31,7 +31,7 @@ export class PollConfig {
     // front end choices
     themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid'];
     themeSelected: number = 0;
-    themeClass: string = 'light-watermelon';
+    themeClass: string = 'theme-light-watermelon';
     title: string = 'titre';
     description: string = 'ma description';
     myName: string = 'mon pseudo';
diff --git a/src/app/ui/theme-selector/theme-selector.component.html b/src/app/ui/theme-selector/theme-selector.component.html
index 6c5e6cdd..a72bd49a 100644
--- a/src/app/ui/theme-selector/theme-selector.component.html
+++ b/src/app/ui/theme-selector/theme-selector.component.html
@@ -1,22 +1,22 @@
 <div class='theme-selector' >
-    <h1 >Thème ( {{config.themeClass}})</h1 >
+    <h1 class='title' >Thème</h1 >
     <span
         class='choice btn'
-        [ngClass]="{ 'btn-primary' : config.themeClass ==='light-watermelon' }"
+        [ngClass]="{ 'btn--primary' : config.themeClass ==='theme-light-watermelon' }"
         (click)="selectTheme('light-watermelon')" >
 
         <i class='fa fa-sun-o' ></i > light
     </span >
     <span
         class='choice btn'
-        [ngClass]="{ 'btn-primary' : config.themeClass ==='dark-crystal' }"
+        [ngClass]="{ 'btn--primary' : config.themeClass ==='theme-dark-crystal' }"
         (click)="selectTheme('dark-crystal')" >
 
         <i class='fa fa-moon-o' ></i > dark
     </span >
     <span
         class='choice btn'
-        [ngClass]="{ 'btn-primary' : config.themeClass ==='hot-covid' }"
+        [ngClass]="{ 'btn--primary' : config.themeClass ==='theme-hot-covid' }"
 
         (click)="selectTheme('hot-covid')" >
 
diff --git a/src/app/ui/theme-selector/theme-selector.component.scss b/src/app/ui/theme-selector/theme-selector.component.scss
index e69de29b..11a14ba2 100644
--- a/src/app/ui/theme-selector/theme-selector.component.scss
+++ b/src/app/ui/theme-selector/theme-selector.component.scss
@@ -0,0 +1,4 @@
+:host {
+    text-align: center;
+    padding: 0.5em;
+}
diff --git a/src/assets/scss/themes/_all.scss b/src/assets/scss/themes/_all.scss
new file mode 100644
index 00000000..8dd2cea3
--- /dev/null
+++ b/src/assets/scss/themes/_all.scss
@@ -0,0 +1,3 @@
+@import "light";
+@import "dark";
+@import "red";
diff --git a/src/assets/scss/themes/_dark.scss b/src/assets/scss/themes/_dark.scss
new file mode 100644
index 00000000..34c6e185
--- /dev/null
+++ b/src/assets/scss/themes/_dark.scss
@@ -0,0 +1,44 @@
+#big_container {
+
+    &.theme-dark-crystal {
+        background: #222;
+        color: #ddd;
+
+        main {
+            background: #444;
+        }
+
+        h1::after {
+            background-color: #1b6d85;
+        }
+
+        .btn--primary:focus, .btn--primary:hover, .btn--primary:active,
+        .btn--primary {
+            background-color: #1b6d85;
+        }
+
+        .btn--warning:focus, .btn--warning:hover, .btn--warning:active,
+        .btn--warning {
+            background-color: #554685;
+        }
+
+        select {
+            background: #1b6d85;
+            border-color: #1b6d85;
+
+            &:hover {
+                color: #ccc;
+            }
+        }
+
+        .title {
+            color: #ccc;
+        }
+
+        .lang_icon, .menu_icon {
+            fill: #1b6d85 !important;
+            color: #1b6d85 !important;
+        }
+
+    }
+}
diff --git a/src/assets/scss/themes/_light.scss b/src/assets/scss/themes/_light.scss
index 5e638f7a..fd612607 100644
--- a/src/assets/scss/themes/_light.scss
+++ b/src/assets/scss/themes/_light.scss
@@ -3,61 +3,4 @@
         background: #fff;
     }
 
-    &.theme-dark-crystal {
-        background: #222;
-        color: #ddd;
-
-        main {
-            background: #444;
-            padding-top: 4em;
-            padding-bottom: 6em;
-        }
-
-        h1::after {
-            background-color: #1b6d85;
-        }
-
-        .btn--primary:focus, .btn--primary:hover, .btn--primary:active,
-        .btn--primary {
-            background-color: #1b6d85;
-        }
-
-        .btn--warning:focus, .btn--warning:hover, .btn--warning:active,
-        .btn--warning {
-            background-color: #554685;
-        }
-
-        select {
-            background: #1b6d85;
-            border-color: #1b6d85;
-
-            &:hover {
-                color: #ccc;
-            }
-        }
-
-        .title {
-            color: #ccc;
-        }
-
-        .lang_icon, .menu_icon {
-            fill: #1b6d85 !important;
-            color: #1b6d85 !important;
-        }
-
-    }
-
-    &.theme-hot-covid {
-        background: #ffbca4;
-        color: #501016;
-
-        h1::after {
-            background-color: #850003;
-        }
-
-        .btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary {
-            background-color: #850003 !important;
-        }
-    }
-
 }
diff --git a/src/assets/scss/themes/_red.scss b/src/assets/scss/themes/_red.scss
new file mode 100644
index 00000000..154e2e7c
--- /dev/null
+++ b/src/assets/scss/themes/_red.scss
@@ -0,0 +1,14 @@
+#big_container {
+    &.theme-hot-covid {
+        background: #ffbca4;
+        color: #501016;
+
+        h1::after {
+            background-color: #850003;
+        }
+
+        .btn--primary:focus, .btn--primary:hover, .btn--primary:active, .btn--primary {
+            background-color: #850003 !important;
+        }
+    }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 01c88de0..5d489038 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,7 +2,7 @@
 @import "~bulma/bulma";
 @import "assets/scss/variables";
 @import "assets/scss/default";
-@import "assets/scss/themes/light";
+@import "assets/scss/themes/all";
 @import "assets/scss/useful_classes";
 
 @import "assets/scss/atoms/main";