update basic and app.component styles

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/globals.scss

@@ -0,0 +1,30 @@
+@import './modules/_variables.scss';
+
+$dist: './fonts/Montserrat-Regular';
+@font-face {
+    font-family: Montserrat;
+    font-weight: 400;
+    src: url("./fonts/Montserrat-Regular.eot?") format("eot"),url("./fonts/Montserrat-Regular.woff") format("woff"),url("./fonts/Montserrat-Regular.ttf") format("truetype"),url("./fonts/Montserrat-Regular.svg#Montserrat") format("svg")
+}
+
+@font-face {
+    font-family: Montserrat;
+    font-weight: 700;
+    src: url("./fonts/Montserrat-Bold.eot?") format("eot"),url("./fonts/Montserrat-Bold.woff") format("woff"),url("./fonts/Montserrat-Bold.ttf") format("truetype"),url("./fonts/Montserrat-Bold.svg#Montserrat") format("svg")
+}
+
+html,
+body {
+    font-family: Montserrat,sans-serif;
+    font-size: 16px;
+    font-weight: $font-weight-normal;
+    z-index: 10;
+}
+
+.preloading {
+    color: $color-brand;
+    font-size: $font-size-xl;
+    left: 50%;
+    position: fixed;
+    top: 50%;
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss

@@ -13,7 +13,7 @@ $color-secondary-brighter: lighten($color-secondary, 20%);
 
 $color-background-dark: #333333;
 $color-background-darker: #000000;
-$color-background-bright: #EEEEEE;
+$color-background-bright: #EEEEFF;
 $color-background-brighter: #FFFFFF;
 
 $color-foreground-dark: #333333;
@@ -49,8 +49,5 @@ $media-screen-xl: 1440px;
 $media-screen-xxl: 1680px;
 $media-screen-xxxl: 1920px;
 
-// Margins
+// Borders
-$margin-center: 10vw;
+$border-light: 1px;
-
-$medias: xxs, xs, s, m, l, xl, xxl, xxxl;
-$mediavalues: $media-screen-xxs, $media-screen-xs, $media-screen-s, $media-screen-m, $media-screen-l, $media-screen-xl, $media-screen-xxl, $media-screen-xxxl;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html

@@ -1,44 +1,38 @@
-<div class="app">
+<header class="navbar navbar-light navbar-static-top">
-    <header class="navbar navbar-light navbar-static-top">
+    <div class="container">
-        <div class="container">
+        <article class="row">
-            <div class="row">
-                <div class="col-sm-10">
-                    <a class="navbar-brand" routerLink="catalog">
-                        <img src="../images/brand.png" />
-                    </a>
-                </div>
-                <div class="col-sm-2">
-                    <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
-                    <esh-identity></esh-identity>
-                </div>
-            </div>
-        </div>
-    </header>
 
+            <section class="col-sm-10">
+                <a class="navbar-brand" routerLink="catalog">
+                    <img src="../images/brand.png" />
+                </a>
+            </section>
 
+            <section class="col-sm-2">
+                <esh-basket-status *ngIf="Authenticated"></esh-basket-status>
+                <esh-identity></esh-identity>
+            </section>
 
-    <!-- component routing placeholder -->
+        </article>
-    <router-outlet></router-outlet>
+    </div>
+</header>
 
+<!-- component routing placeholder -->
+<router-outlet></router-outlet>
 
-    <footer class="app-footer">
+<footer class="esh-app-footer">
-        <div class="container">
+    <div class="container">
-            <div class="row">
+        <article class="row">
-                <div class="col-sm-6">
-                    <br>
-                    <div class="app-footer-brand">
-                        <img src="../images/brand_dark.png" />
-                    </div>
-                </div>
-                <div class="col-sm-6">
-                    <br>
-                    <br>
-                    <br>
-                    <div class="app-footer-text hidden-xs">e-ShoponContainers. All right reserved</div>
-                </div>
-            </div>
-        </div>
-    </footer>
-</div>
 
+            <section class="col-sm-6">
+                <img class="esh-app-footer-brand" src="../images/brand_dark.png" />
+            </section>
+
+            <section class="col-sm-6">
+                <div class="esh-app-footer-text hidden-xs"> e-ShoponContainers. All right reserved </div>
+            </section>
+
+        </article>
+    </div>
+</footer>
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.scss

@@ -1,44 +1,28 @@
 @import './_variables.scss';
 
-@font-face {
+.esh-app {
-    font-family: Montserrat;
-    font-weight: 400;
-    src: url("../dist/fonts/Montserrat-Regular.eot?") format("eot"),url("../dist/fonts/Montserrat-Regular.woff") format("woff"),url("../dist/fonts/Montserrat-Regular.ttf") format("truetype"),url("../dist/fonts/Montserrat-Regular.svg#Montserrat") format("svg")
-}
-
-@font-face {
-    font-family: Montserrat;
-    font-weight: 700;
-    src: url("../dist/fonts/Montserrat-Bold.eot?") format("eot"),url("../dist/fonts/Montserrat-Bold.woff") format("woff"),url("../dist/fonts/Montserrat-Bold.ttf") format("truetype"),url("../dist/fonts/Montserrat-Bold.svg#Montserrat") format("svg")
-}
-
-.app {
-    font-family: Montserrat,sans-serif;
-
     &-footer {
-        padding-top: 40px;
+        $margin: 2.5rem;
-        padding-bottom: 40px;
+        $padding: 2.5rem;
-        margin-top: 40px;
+
-        border-top: 1px solid #eee;
+        background-color: $color-background-darker;
-        background-color: black;
+        border-top: $border-light solid $color-foreground-bright;
+        margin-top: $margin;
+        padding-bottom: $padding;
+        padding-top: $padding;
         width: 100%;
 
+        $height: 50px;
         &-brand {
-            margin-top: 25px;
+            height: $height;
-            max-width: 231px;
+            width: 230px;
-            height: 52px;
-            margin-left: 0px !important;
         }
 
         &-text {
+            color: $color-secondary;
+            line-height: $height;
             text-align: right;
             width: 100%;
-            height: 100%;
-            color: #83d01b;
-            margin-top: 10px;
         }
     }
 }
-
-
-

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts

@@ -12,7 +12,7 @@ import { SecurityService } from './shared/services/security.service';
  */
 
 @Component({
-    selector: 'appc-app',
+    selector: 'esh-app.esh-app',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html'
 })

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts

@@ -11,11 +11,6 @@ export const routes: Routes = [
     { path: 'catalog', component: CatalogComponent },
     { path: 'orders', component: OrdersComponent },
     { path: 'orders/:id', component: OrdersDetailComponent },
-   //Lazy async modules (angular-loader-router) and enable a router in each module. 
-   //{
-   // path: 'basket',  loadChildren: '/basket/basket.module' });
-   // })
-   //}
 ];
 
 export const routing = RouterModule.forRoot(routes);

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -28,7 +28,7 @@ select::-ms-expand {
         &-container {
             position: absolute;
             width: 100%;
-            background-color: $primary-colour;
+            background-color: $color-brand;
             left: 0;
             height: 65px;
         }
@@ -37,7 +37,7 @@ select::-ms-expand {
             width: 45px;
             height: 45px;
             padding: 6px 20px 10px 8px;
-            background-color: $primary-accent;
+            background-color: $color-secondary;
             color: white;
             font-size: 16px;
             margin: 10px 0;
@@ -96,7 +96,7 @@ select::-ms-expand {
                 width: 255px;
                 height: 45px;
                 padding: 10px 20px 10px 20px;
-                background-color: $primary-accent;
+                background-color: $color-secondary;
                 color: white;
                 font-size: 16px;
                 margin: 10px 0;

src/Web/WebSPA/eShopOnContainers.WebSPA/Views/Home/Index.cshtml

@@ -1,16 +1,8 @@
-<style>
+<esh-app class="esh-app" asp-prerender-webpack-config="config/webpack.config.js">
-    div.app-spinner {
+    <div class="preloading">
-        position: fixed;
-        top: 50%;
-        left: 50%;
-    }
-</style>
-
-<appc-app asp-prerender-webpack-config="config/webpack.config.js">
-    <div class="app-spinner">
         <i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i>
     </div>
-</appc-app>
+</esh-app>
 
 <script>
     window.user = '@ViewBag.user';

src/Web/WebSPA/eShopOnContainers.WebSPA/config/webpack.config.vendor.js

@@ -44,7 +44,8 @@ module.exports = {
             '@angular/forms',
             '@angular/platform-browser',
             '@angular/platform-browser-dynamic',
-            '@angular/router'
+            '@angular/router',
+            './Client/globals.scss'
         ]
     },
     output: {