🎨 better disposal for theme selector

src/app/app.component.html

@@ -2,61 +2,73 @@
     id='big_container'
     class={{this.config.themeClass}} >
 
-    <header style="text-align:center" >
+    <header class='big-header'>
-        <a
+        <div class='container'>
-            [routerLink]="'home'"
+            <div class='columns' >
-            class="home_link"
+                <div class='column' >
-            aria-roledescription="home"
+                    <a
-        >
+                        [routerLink]="'home'"
-            <h1 >
+                        class="home_link"
-                <span class="logo_first" >Frama</span >
+                        aria-roledescription="home"
-                <span class="logo_second" >date</span > (démo)
+                    >
-            </h1 >
+                        <h1 >
-            <div class="legend" >proposé par
+                            <span class="logo_first" >Frama</span >
-                <span class="legend_first" >Frama</span >
+                            <span class="logo_second" >date</span > (démo)
-                <span class="legend_second" >soft</span >
+                        </h1 >
-            </div >
+                        <div class="legend" >proposé par
-        </a >
+                            <span class="legend_first" >Frama</span >
-        <div id="translate_example" >
+                            <span class="legend_second" >soft</span >
-            <div class="wrapper" >
+                        </div >
-                <img
+                    </a >
-                    src="assets/img/icone-langue.svg"
+
-                    alt="location icon"
+                </div >
-                    (click)="changeLanguage()"
+                <div class='column' >
-                    class="lang_icon clickable"
+                    <div id="translate_example" >
-                >
+                        <div class="wrapper" >
-                <img
+                            <img
-                    (click)="toggleMenu()"
+                                src="assets/img/icone-langue.svg"
-                    alt="menu icon"
+                                alt="location icon"
-                    class="menu_icon  clickable"
+                                (click)="changeLanguage()"
-                    src="assets/img/icone-menu.svg"
+                                class="lang_icon clickable"
-                >
+                            >
-                <select
+                            <img
-                    name="language"
+                                (click)="toggleMenu()"
-                    class="language-selector"
+                                alt="menu icon"
-                    (change)="switchLanguage(currentLang)"
+                                class="menu_icon  clickable"
-                    [(ngModel)]="currentLang"
+                                src="assets/img/icone-menu.svg"
-                >
+                            >
-                    <option
+                            <select
-                        value="d"
+                                name="language"
-                        default
+                                class="language-selector"
-                        class="select_language"
+                                (change)="switchLanguage(currentLang)"
-                    >{{"Language" | translate}}</option >
+                                [(ngModel)]="currentLang"
-                    <option value="en" >English</option >
+                            >
-                    <option value="fr" >Français</option >
+                                <option
-                </select >
+                                    value="d"
-                <span
+                                    default
-                    (click)="toggleMenu()"
+                                    class="select_language"
-                    class="menu_label" >Menu</span >
+                                >{{"Language" | translate}}</option >
-            </div >
+                                <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 >

src/app/app.component.scss

@@ -1,13 +1,7 @@
 @charset "UTF-8";
 
-header {
+.big-header {
-    h1,
+    padding: 0.5rem;
-    a {
-        &::before,
-        &::after {
-            display: none;
-        }
-    }
 }
 
 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";