BETTERZON-74

simple top-bar has been created.

Frontend/angular.json

@@ -24,7 +24,9 @@
               "src/assets"
             ],
             "styles": [
-                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+                {
+                    "input":"src/themes.scss"
+                },
                 "src/styles.css",
                 "./node_modules/cookieconsent/build/cookieconsent.min.css"
             ],
@@ -92,7 +94,9 @@
               "src/assets"
             ],
             "styles": [
-                "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+                {
+                    "input":"src/themes.scss"
+                },
                 "src/styles.css",
                 "./node_modules/cookieconsent/build/cookieconsent.min.css"
             ],

Frontend/package-lock.json

@@ -8726,9 +8726,9 @@
             }
         },
         "node_modules/make-fetch-happen/node_modules/ssri": {
-            "version": "6.0.1",
+            "version": "6.0.2",
-            "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-            "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+            "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
             "dependencies": {
                 "figgy-pudding": "^3.5.1"
             }
@@ -10148,9 +10148,9 @@
             }
         },
         "node_modules/pacote/node_modules/ssri": {
-            "version": "6.0.1",
+            "version": "6.0.2",
-            "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-            "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+            "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
             "dependencies": {
                 "figgy-pudding": "^3.5.1"
             }
@@ -13575,9 +13575,9 @@
             }
         },
         "node_modules/ssri": {
-            "version": "8.0.0",
+            "version": "8.0.1",
-            "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-            "integrity": "sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==",
+            "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
             "dev": true,
             "dependencies": {
                 "minipass": "^3.1.1"
@@ -15942,9 +15942,9 @@
             }
         },
         "node_modules/webpack/node_modules/ssri": {
-            "version": "6.0.1",
+            "version": "6.0.2",
-            "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+            "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-            "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+            "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
             "dev": true,
             "dependencies": {
                 "figgy-pudding": "^3.5.1"
@@ -23723,9 +23723,9 @@
                     }
                 },
                 "ssri": {
-                    "version": "6.0.1",
+                    "version": "6.0.2",
-                    "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+                    "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-                    "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+                    "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
                     "requires": {
                         "figgy-pudding": "^3.5.1"
                     }
@@ -24915,9 +24915,9 @@
                     "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
                 },
                 "ssri": {
-                    "version": "6.0.1",
+                    "version": "6.0.2",
-                    "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+                    "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-                    "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+                    "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
                     "requires": {
                         "figgy-pudding": "^3.5.1"
                     }
@@ -27865,9 +27865,9 @@
             }
         },
         "ssri": {
-            "version": "8.0.0",
+            "version": "8.0.1",
-            "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.0.tgz",
+            "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-            "integrity": "sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==",
+            "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
             "dev": true,
             "requires": {
                 "minipass": "^3.1.1"
@@ -29503,9 +29503,9 @@
                     "dev": true
                 },
                 "ssri": {
-                    "version": "6.0.1",
+                    "version": "6.0.2",
-                    "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
+                    "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-                    "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+                    "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
                     "dev": true,
                     "requires": {
                         "figgy-pudding": "^3.5.1"

Frontend/src/app/app.component.html

@@ -1 +1,3 @@
+<app-top-bar></app-top-bar>
+
 <router-outlet></router-outlet>

Frontend/src/app/app.module.ts

@@ -20,6 +20,15 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {ImprintComponent} from './pages/imprint/imprint.component';
 import {PrivacyComponent} from './pages/privacy/privacy.component';
 import {NgcCookieConsentModule, NgcCookieConsentConfig} from 'ngx-cookieconsent';
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import { TopBarComponent } from './components/top-bar/top-bar.component';
+import {RouterModule} from "@angular/router";
+import {MatButtonModule} from '@angular/material/button';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatListModule} from '@angular/material/list';
+
 
 // For cookie popup
 const cookieConfig: NgcCookieConsentConfig = {
@@ -73,7 +82,8 @@ const cookieConfig: NgcCookieConsentConfig = {
         NewestPricesListComponent,
         PageNotFoundPageComponent,
         ImprintComponent,
-        PrivacyComponent
+        PrivacyComponent,
+        TopBarComponent
     ],
     imports: [
         BrowserModule,
@@ -83,7 +93,17 @@ const cookieConfig: NgcCookieConsentConfig = {
         FormsModule,
         MatMenuModule,
         BrowserAnimationsModule,
-        NgcCookieConsentModule.forRoot(cookieConfig)
+        NgcCookieConsentModule.forRoot(cookieConfig),
+        MatSlideToggleModule,
+        MatButtonModule,
+        MatToolbarModule,
+        MatSidenavModule,
+        MatListModule,
+        MatButtonModule,
+        MatIconModule,
+        RouterModule.forRoot([
+            { path: '', component: LandingpageComponent },
+        ]),
     ],
     providers: [],
     bootstrap: [AppComponent]

Frontend/src/app/components/footer/footer.component.css

@@ -30,5 +30,3 @@
     text-decoration: none;
 }
 
-
-

Frontend/src/app/components/header/header.component.css

@@ -48,3 +48,8 @@
     padding: 10px;
     color: #fff;
 }
+
+.slider {
+    position: relative;
+    margin: auto;
+}

Frontend/src/app/components/header/header.component.html

@@ -7,6 +7,9 @@
         <div class="searchBox">
             <input *ngIf="showSearch===true" type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
         </div>
+        <div class="slider">
+            <mat-slide-toggle color="primary">dark me</mat-slide-toggle>
+        </div>
         <div class="profileIcon">
             <button mat-button [matMenuTriggerFor]="menu">Menu</button>
             <mat-menu #menu="matMenu">

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,4 +1,4 @@
-<app-header [showSearch]="false"></app-header>
+
 <div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">

Frontend/src/app/pages/product-detail-page/product-detail-page.component.html

@@ -1,4 +1,3 @@
-<app-header [showSearch]="true"></app-header>
 <div id="mainComponents">
     <app-product-details [productId]="productId"></app-product-details>
     <app-newest-prices-list [productId]="productId"></app-newest-prices-list>

Frontend/src/app/pages/product-search-page/product-search-page.component.html

@@ -1,6 +1,6 @@
-<app-header [showSearch]="true"></app-header>
 <div id="mainComponents">
     <app-product-list numberOfProducts="20" [showProductPicture]="true" searchQuery="{{searchTerm}}"
                       type="search"></app-product-list>
 </div>
+
 <app-footer></app-footer>

Frontend/src/styles.css

@@ -1,9 +1,123 @@
-/* You can add global styles to this file, and also import other style files */
+* {
-body {
+    font-family: 'Roboto', Arial, sans-serif;
-    margin: 0;
+    color: #616161;
-    font-family: sans-serif;
+    box-sizing: border-box;
-    margin-bottom: 10em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+}
+
+router-outlet + *  {
+    padding: 0 16px;
+}
+
+/* Text */
+
+h1 {
+    font-size: 32px;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+h1, h2 {
+    font-weight: lighter;
+}
+
+p {
+    font-size: 14px;
+}
+
+/* Hyperlink */
+
+a {
+    cursor: pointer;
+    color: #1976d2;
+    text-decoration: none;
+}
+
+a:hover {
+    opacity: 0.8;
+}
+
+/* Input */
+
+input {
+    font-size: 14px;
+    border-radius: 2px;
+    padding: 8px;
+    margin-bottom: 16px;
+    border: 1px solid #BDBDBD;
+}
+
+label {
+    font-size: 12px;
+    font-weight: bold;
+    margin-bottom: 4px;
+    display: block;
+    text-transform: uppercase;
+}
+
+/* Button */
+.button, button {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 16px;
+    border-radius: 2px;
+    font-size: 14px;
+    cursor: pointer;
+    background-color: #1976d2;
+    color: white;
+    border: none;
+}
+
+.button:hover, button:hover {
+    opacity: 0.8;
+    font-weight: normal;
+}
+
+.button:disabled, button:disabled {
+    opacity: 0.5;
+    cursor: auto;
+}
+
+/* Fancy Button */
+
+.fancy-button {
+    background-color: white;
+    color: #1976d2;
+}
+
+.fancy-button i.material-icons {
+    color: #1976d2;
+    padding-right: 4px;
+}
+
+/* Top Bar */
+
+app-top-bar {
+    width: 100%;
+    height: 68px;
+    background-color: #1976d2;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)
+}
+
+app-top-bar h1 {
+    color: white;
+    margin: 0;
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }