BETTERZON 78: logo and follow us edited, links added.

Frontend/package.json

@@ -26,6 +26,7 @@
         "@ng-bootstrap/ng-bootstrap": "^8.0.4",
         "apexcharts": "^3.22.3",
         "bootstrap": "^4.5.0",
+        "cookieconsent": "^3.1.1",
         "karma-firefox-launcher": "^2.1.0",
         "ng": "0.0.0",
         "ng-apexcharts": "^1.5.6",

Frontend/src/app/app.module.ts

@@ -23,11 +23,11 @@ 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 {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';
+import {MatListModule} from "@angular/material/list";
 import {BottomBarComponent} from './components/bottom-bar/bottom-bar.component';
 
 

Frontend/src/app/components/bottom-bar/bottom-bar.component.css

@@ -1,6 +1,6 @@
 .bottom-bar-wrapper {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 546px 546px 546px;
     grid-template-rows: 70px 70px 70px;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
@@ -21,10 +21,43 @@
     margin-right: 60px;
 }
 
+#footer-line {
+    grid-area: 3/1/3/4;
+    width: 100%;
+    background-color: #000000;
+    height: 2px;
+}
+
 .bottom-logo {
     grid-column: 1; grid-row: 3;
 }
 
 .bottom-info {
     grid-column: 3; grid-row: 3;
+    justify-self: right;
+}
+
+#folge {
+    font-size: 46px;
+    font-weight: bold;
+    color: #E53167;
+    margin-right: 10px;
+}
+
+#uns {
+    font-size: 32px;
+    font-weight: bold;
+    color: #000000;
+}
+
+#better {
+    font-size: 28px;
+    font-weight: bold;
+    color: #3480E3;
+}
+
+#zon {
+    font-size: 28px;
+    font-weight: bold;
+    color: #E53167;
 }

Frontend/src/app/components/bottom-bar/bottom-bar.component.html

@@ -1,22 +1,23 @@
 <div class="bottom-bar-wrapper">
     <div class="folge-uns-item">
-        <p>FOLGE UNS</p>
+        <p><span id="folge">FOLGE</span><span id="uns">UNS</span></p>
     </div>
     <div class="link-items">
         <ul style="list-style-type:none" class="footer-links">
-            <li><a>GiT</a></li>
-            <li><a>BLOG</a></li>
-            <li><a>Wiki</a></li>
-            <li><a>YouTrack</a></li>
+            <li><a href="https://github.com/Mueller-Patrick/Betterzon">GiT</a></li>
+            <li><a href="https://blog.betterzon.xyz/">BLOG</a></li>
+            <li><a href="https://github.com/Mueller-Patrick/Betterzon/wiki">Wiki</a></li>
         </ul>
+    </div>
+    <div id="footer-line">
+
     </div>
     <div class="bottom-logo">
-        <p>BETTERZON</p>
+        <p><span id="better">BETTER</span><span id="zon">ZON</span></p>
     </div>
     <div class="bottom-info">
         <ul style="list-style-type:none" class="footer-links">
-            <li><a>COOKIES</a></li>
-            <li><a>NUTZUNGSBEDINGUNGEN</a></li>
+            <li><a>DATENSCHUTZERKLÄRUNG</a></li>
             <li><a>IMPRESSUM</a></li>
         </ul>
     </div>

Frontend/src/app/components/bottom-bar/bottom-bar.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BottomBarComponent } from './bottom-bar.component';
+import { BottomBarComponent } from "./bottom-bar.component";
 
-describe('BottomBarComponent', () => {
+describe("BottomBarComponent", () => {
   let component: BottomBarComponent;
   let fixture: ComponentFixture<BottomBarComponent>;
 

Frontend/src/app/components/bottom-bar/bottom-bar.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-bottom-bar',
-  templateUrl: './bottom-bar.component.html',
-  styleUrls: ['./bottom-bar.component.css']
+  templateUrl: "./bottom-bar.component.html",
+  styleUrls: ["./bottom-bar.component.css"]
 })
 export class BottomBarComponent implements OnInit {
 

Frontend/src/styles.css

@@ -42,6 +42,7 @@ a {
 
 a:hover {
     opacity: 0.8;
+    color: #3480E3;
 }
 
 a, p{
@@ -128,10 +129,11 @@ app-bottom-bar{
     width: 1640px;
     height: 210px;
     position: fixed;
-    padding: 16px;
     margin-top: 90px;
     bottom: 0;
     flex-direction: row;
+    display: flex;
+    justify-content: space-between;
 }