angular.json

@@ -24,7 +24,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
             ],
             "scripts": []
           },
@@ -88,7 +89,7 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.css"
             ],
             "scripts": []
           }
@@ -121,10 +122,5 @@
       }
     }
   },
-  "schematics": {
-    "@schematics/angular:component": {
-      "styleext": "scss"
-    }
-  },
   "defaultProject": "EPAClient"
 }

src/app/app.component.ts

@@ -8,7 +8,7 @@ import { cles } from "@shared/utils/cles"
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.css']
 })
 
 export class AppComponent implements OnInit {

src/app/app.theme.scss

@@ -1,125 +0,0 @@
-// -----------------------------------------------------------------------------------------------------
-// @ Custom color maps
-// -----------------------------------------------------------------------------------------------------
-$navy-app-theme: (
-    50: #ECECEE,
-    100: #C5C6CB,
-    200: #9EA1A9,
-    300: #7D818C,
-    400: #5C616F,
-    500: #E89759,
-    600: #353A48,
-    700: #2D323E,
-    800: #262933,
-    900: #1E2129,
-    A100: #C5C6CB,
-    A200: #9EA1A9,
-    A400: #5C616F,
-    A700: #2D323E,
-    contrast: (
-        50: $dark-primary-text,
-        100: $dark-primary-text,
-        200: $dark-primary-text,
-        300: $light-primary-text,
-        400: $light-primary-text,
-        500: $light-primary-text,
-        600: $light-primary-text,
-        700: $light-primary-text,
-        800: $light-primary-text,
-        900: $light-primary-text,
-        A100: $dark-primary-text,
-        A200: $light-primary-text,
-        A400: $light-primary-text,
-        A700: $light-primary-text,
-    )
-);
-
-$apside-primary-app-theme: (
-    50: #ECECEE,
-    100: #C5C6CB,
-    200: #9EA1A9,
-    300: #7D818C,
-    400: #5C616F,
-    500: #E89759,
-    600: #353A48,
-    700: #2D323E,
-    800: #262933,
-    900: #1E2129,
-    A100: #C5C6CB,
-    A200: #9EA1A9,
-    A400: #5C616F,
-    A700: #2D323E,
-    contrast: (
-        50: $dark-primary-text,
-        100: $dark-primary-text,
-        200: $dark-primary-text,
-        300: $light-primary-text,
-        400: $light-primary-text,
-        500: $light-primary-text,
-        600: $light-primary-text,
-        700: $light-primary-text,
-        800: $light-primary-text,
-        900: $light-primary-text,
-        A100: $dark-primary-text,
-        A200: $light-primary-text,
-        A400: $light-primary-text,
-        A700: $light-primary-text,
-    )
-);
- 
-// -----------------------------------------------------------------------------------------------------
-// @ Define the default theme
-// -----------------------------------------------------------------------------------------------------
-
-// Define the primary, accent and warn palettes
-$default-primary-palette: mat-palette($navy-app-theme);
-$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
-$default-warn-palette: mat-palette($mat-red);
-
-// Create the Material theme object
-$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
-
-// Add ".theme-default" class to the body to activate this theme.
-// Class name must start with "theme-" !!!
-.theme-default {
-
-    // Create an Angular Material theme from the $theme map
-    @include angular-material-theme($theme);
-}
-
-// -----------------------------------------------------------------------------------------------------
-// @ Define a blue-gray dark theme
-// -----------------------------------------------------------------------------------------------------
-
-// Define the primary, accent and warn palettes
-$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme);
-$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
-$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
-
-// Create the Material theme object
-$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
-
-// Add ".theme-blue-gray-dark" class to the body to activate this theme.
-// Class name must start with "theme-" !!!
-.theme-blue-gray-dark {
-
-    // Generate the Angular Material theme
-    @include angular-material-theme($blue-gray-dark-theme);
-}
-
-
-// -----------------------------------------------------------------------------------------------------
-// @ Typography
-// -----------------------------------------------------------------------------------------------------
-
-// Angular Material typography
-$typography: mat-typography-config(
-    $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
-    $title: mat-typography-level(20px, 32px, 600),
-    $body-2: mat-typography-level(14px, 24px, 600),
-    $button: mat-typography-level(14px, 14px, 600),
-    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
-);
-
-// Setup the typography
-@include angular-material-typography($typography);

src/app/demandes-formation/new-demande-formation/new-demande-formation.component.ts

@@ -13,7 +13,7 @@ import { DemandesFormationService } from "@shared/api-swagger/api/api";
 @Component({
   selector: 'app-new-demande-formation',
   templateUrl: './new-demande-formation.component.html',
-  styleUrls: ['./new-demande-formation.component.scss']
+  styleUrls: ['./new-demande-formation.component.css']
 })
 export class NewDemandeFormationComponent implements OnInit {
 

src/app/ep/details-ep/details-ep.component.ts

@@ -12,7 +12,7 @@ import { Subscription } from "rxjs";
 @Component({
     selector : "details-ep",
     templateUrl: "./details-ep.component.html",
-    styleUrls: ["./details-ep.component.scss"]
+    styleUrls: ["./details-ep.component.css"]
 })
 export class DetailsEPComponent implements OnInit {
 

src/app/ep/details-ep/ep-choix-date/ep-choix-date.component.ts

@@ -7,7 +7,7 @@ import { RDVEntretienDTO } from '@shared/api-swagger';
 @Component({
   selector: 'ep-choix-date',
   templateUrl: './ep-choix-date.component.html',
-  styleUrls: ["ep-choix-date.component.scss"]
+  styleUrls: ["ep-choix-date.component.css"]
 })
 export class EpChoixDateComponent  {
   @Input() rdvsEntretien : Array<RDVEntretienDTO>;

src/app/ep/details-ep/ep-objectifs/ep-objectifs.component.ts

@@ -5,7 +5,7 @@ import { afficherStatutObjectif, EpDTO, StatutObjectif } from "@shared/api-swagg
 @Component({
     selector : "ep-objectifs",
     templateUrl: "ep-objectifs.component.html",
-    styleUrls: ["ep-objectifs.component.scss"]
+    styleUrls: ["ep-objectifs.component.css"]
 })
 export class EpObjectifsComponent {
     

src/app/formations/edit-formation/edit-formation.component.ts

@@ -19,7 +19,7 @@ import { FormationsService } from '@shared/api-swagger/api/api';
 @Component({
   selector: 'app-edit-formation',
   templateUrl: './edit-formation.component.html',
-  styleUrls: ["edit-formation.component.scss"]
+  styleUrls: ["edit-formation.component.css"]
 })
 export class EditFormationComponent implements OnInit {
   /**

src/app/formations/new-formation/new-formation.component.ts

@@ -13,7 +13,7 @@ import { FormationsService } from "@shared/api-swagger/api/api";
 @Component({
   selector: 'app-new-formation',
   templateUrl: './new-formation.component.html',
-  styleUrls: ['./new-formation.component.scss']
+  styleUrls: ['./new-formation.component.css']
 })
 export class NewFormationComponent implements OnInit {
   /**

src/app/home/home-assistante/home-assistante.component.ts

@@ -14,7 +14,7 @@ import { epTypeRecherche } from '@shared/utils/cles';
 @Component({
   selector : 'home-assistante',
   templateUrl : 'home-assistante.component.html',
-  styleUrls : [ "./home-assistante.component.scss"]
+  styleUrls : [ "./home-assistante.component.css"]
 })
 export class HomeAssistanteComponent {
   displayedColumns: string[] = ["agence", "collaborateur", "referent", "datearrivee", "statutep", "typeep", "dateentretien", "datedisponibilite", "consultation"];

src/app/shared/filter/checkbox-filter/checkbox-filter.ts

@@ -8,7 +8,7 @@ import { SelectedElement } from "@shared/filter/selected-element";
 @Component({
     selector: "checkbox-filter",
     templateUrl: "./checkbox-filter.html",
-    styleUrls: ["./checkbox-filter.scss"]
+    styleUrls: ["./checkbox-filter.css"]
 })
 export class CheckboxFilterComponent<T> implements OnInit, OnChanges  {
    

src/app/shared/filter/select-filter/select-filter.ts

@@ -4,7 +4,7 @@ import { SelectedElement } from "@shared/filter/selected-element";
 @Component({
     selector: "select-filter",
     templateUrl: "./select-filter.html",
-    styleUrls: ["./select-filter.scss"]
+    styleUrls: ["./select-filter.css"]
 })
 export class SelectFilterComponent<T> implements OnInit, OnChanges   {
    

src/app/shared/mat-tables/collaborateurs-table/collaborateurs.table.ts

@@ -12,7 +12,7 @@ import { cles, collaborateurTypeRecherche } from "@shared/utils/cles";
 @Component({
     selector: "collaborateurs-table",
     templateUrl: "./collaborateurs.table.html",
-    styleUrls: ["./collaborateurs.table.scss"]
+    styleUrls: ["./collaborateurs.table.css"]
 })
 export class CollaborateursTableComponent implements OnInit {
 

src/app/shared/mat-tables/formations-table/formations.table.ts

@@ -12,7 +12,7 @@ import { cles } from "@shared/utils/cles";
 @Component({
     selector: "formations-table",
     templateUrl: "./formations.table.html",
-    styleUrls: ["./formations.table.scss"]
+    styleUrls: ["./formations.table.css"]
 })
 export class FormationsTableComponent implements OnInit {
 

src/app/shared/mat-tables/participations-formation-table/participations-formation.table.ts

@@ -11,7 +11,7 @@ import { DatePipe } from "@angular/common";
 @Component({
     selector: "participations-formation-table",
     templateUrl: "./participations-formation.table.html",
-    styleUrls: ["./participations-formation.table.scss"]
+    styleUrls: ["./participations-formation.table.css"]
 })
 export class ParticipationsFormationTableComponent implements OnInit, OnChanges, AfterViewInit  {
 

src/app/shared/nav-menu/nav-menu.component.html

@@ -1,5 +1,5 @@
 <header>
-  <mat-card class="bg-apside-secondary">
+  <mat-card>
     <!--Mettre l'icon APSIDE-->
     <img routerLink="/home" src="../../assets/img/logo.png">
     <!--LIEN VERS HOME-->
@@ -20,7 +20,6 @@
     <mat-menu #menuMore="matMenu">
       <button mat-menu-item>A propos</button>
       <button mat-menu-item>Manuel utilisation</button>
-      <button mat-menu-item (click)="toggleTheme()">{{ isDarkTheme ? 'Thème clair' : 'Thème sombre' }}</button>
       <button mat-menu-item on-click="logout()">Déconnexion</button>
     </mat-menu>
   </mat-card>

src/app/shared/nav-menu/nav-menu.component.ts

@@ -1,5 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
 import { AuthService } from '@shared/auth/auth.service';
 
 import { Role } from '@shared/utils/roles';
@@ -30,9 +29,7 @@ export class NavMenuComponent {
     */
   userInfo : string;
 
-  isDarkTheme: boolean = false;
+  constructor(private authService : AuthService){
-
-  constructor(@Inject(DOCUMENT) private document: any, private authService : AuthService){
     this.userRole = authService.firstRole;
     this.userInfo = authService.userInfo;
   }
@@ -44,26 +41,4 @@ export class NavMenuComponent {
     this.authService.logout();
   }
 
-  toggleTheme() {
-    this.isDarkTheme = !this.isDarkTheme;
-
-    this.updateTheme();
-  }
-
-  updateTheme()
-  {
-    // Color theme - Use normal for loop for IE11 compatibility
-    for ( let i = 0; i < this.document.body.classList.length; i++ )
-    {
-        const className = this.document.body.classList[i];
-
-        if ( className.startsWith('theme-') )
-            this.document.body.classList.remove(className);
-    }
-
-    if (!this.isDarkTheme)
-      this.document.body.classList.add('theme-default');
-    else
-      this.document.body.classList.add('theme-blue-gray-dark');
-  }
 }

src/index.html

@@ -9,7 +9,7 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body class="theme-default mat-app-background">
+<body>
   <app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -0,0 +1,4 @@
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

src/styles.scss

@@ -1,24 +0,0 @@
-@import '~@angular/material/theming';
-@include mat-core();
-
-// Import app.theme.scss
-@import "app/app.theme";
-
-
-.bg-apside-primary 
-{
-    background-color: #183650 !important;
-}
-
-.bg-apside-secondary
-{
-    background-color: #E89759 !important;
-}
-
-.apside-secondary
-{
-    color: #E89759 !important;
-}
-
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }