🎨 better disposal for theme selector

src/app/app.component.html

@@ -2,7 +2,10 @@
     id='big_container'
     class={{this.config.themeClass}} >
 
-    <header style="text-align:center" >
+    <header class='big-header'>
+        <div class='container'>
+            <div class='columns' >
+                <div class='column' >
                     <a
                         [routerLink]="'home'"
                         class="home_link"
@@ -17,6 +20,9 @@
                             <span class="legend_second" >soft</span >
                         </div >
                     </a >
+
+                </div >
+                <div class='column' >
                     <div id="translate_example" >
                         <div class="wrapper" >
                             <img
@@ -51,12 +57,18 @@
                         </div >
 
                     </div >
+                </div >
+                <div class='column' >
+                    <framadate-theme-selector ></framadate-theme-selector >
+                </div >
+            </div >
+        </div>
+
 
     </header >
 
-    <framadate-theme-selector ></framadate-theme-selector >
-
     <main >
+
         <router-outlet ></router-outlet >
     </main >
     <framadate-debugger ></framadate-debugger >

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 {

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';

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')" >
 

src/app/ui/theme-selector/theme-selector.component.scss

@@ -0,0 +1,4 @@
+:host {
+    text-align: center;
+    padding: 0.5em;
+}

src/assets/scss/themes/_all.scss

@@ -0,0 +1,3 @@
+@import "light";
+@import "dark";
+@import "red";

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;
+        }
+
+    }
+}

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;
-        }
-    }
-
 }

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;
+        }
+    }
+}

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";