From e89f955c91ab8b95a8023966c3713d7e77d218c8 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sun, 6 Mar 2022 11:20:17 +0100
Subject: [PATCH 01/23] Added Button Base Component (#275)

---
 ComponentDocs.md                              | 31 ++++++++++
 .../styled-button.component.html              |  1 +
 .../styled-button.component.scss              | 59 +++++++++++++++++++
 .../styled-button.component.spec.ts           | 25 ++++++++
 .../styled-button/styled-button.component.ts  | 17 ++++++
 src/global-styles/_theme-colors.scss          | 24 ++++++++
 6 files changed, 157 insertions(+)
 create mode 100644 ComponentDocs.md
 create mode 100644 src/app/design/styled-button/styled-button.component.html
 create mode 100644 src/app/design/styled-button/styled-button.component.scss
 create mode 100644 src/app/design/styled-button/styled-button.component.spec.ts
 create mode 100644 src/app/design/styled-button/styled-button.component.ts
 create mode 100644 src/global-styles/_theme-colors.scss

diff --git a/ComponentDocs.md b/ComponentDocs.md
new file mode 100644
index 00000000..cbd08e27
--- /dev/null
+++ b/ComponentDocs.md
@@ -0,0 +1,31 @@
+# Cryptic Components
+
+
+Style classes :
+- primary
+- success
+- warning
+- danger
+- info
+
+---
+
+## Button
+
+### Example
+
+```html
+ <app-styled-button (click)="login()" flavor="primary" [disabled]="!form.valid">Log in</app-styled-button>
+ ```
+
+---
+
+## Radio Button
+
+### Example
+
+```html
+// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS //
+```
+
+---
diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
new file mode 100644
index 00000000..a8821237
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -0,0 +1 @@
+<button [disabled]="disabled" (click)="onClick.emit($event)" [class]="flavor"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
new file mode 100644
index 00000000..1175d014
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -0,0 +1,59 @@
+@use "sass:list";
+@import "theme-colors";
+
+$flavors: (
+  primary: (
+    $primary-default,
+    $primary-hover,
+    $primary-disabled,
+  ),
+  success: (
+    $success-default,
+    $success-hover,
+    $success-disabled,
+  ),
+  warning: (
+    $warning-default,
+    $warning-hover,
+    $warning-disabled,
+  ),
+  danger: (
+    $danger-default,
+    $danger-hover,
+    $danger-disabled,
+  ),
+  info: (
+    $info-default,
+    $info-hover,
+    $info-disabled,
+  ),
+);
+
+button {
+  padding: 10px;
+  border-radius: 10px;
+  width: 100%;
+  color: white;
+  border: none;
+  font-size: 16px;
+  margin-right: 10px;
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      color: #2f2f36;
+      background: list.nth($colors, 1);
+
+      &:disabled {
+        background-color: list.nth($colors, 3);
+      }
+
+      &:hover {
+        background-color: list.nth($colors, 2);
+        color: white;
+      }
+    }
+  }
+}
diff --git a/src/app/design/styled-button/styled-button.component.spec.ts b/src/app/design/styled-button/styled-button.component.spec.ts
new file mode 100644
index 00000000..ca36cb31
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StyledButtonComponent } from './styled-button.component';
+
+describe('StyledButtonComponent', () => {
+  let component: StyledButtonComponent;
+  let fixture: ComponentFixture<StyledButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StyledButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StyledButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
new file mode 100644
index 00000000..f3521984
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -0,0 +1,17 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+@Component({
+  selector: 'app-styled-button',
+  templateUrl: './styled-button.component.html',
+  styleUrls: ['./styled-button.component.scss']
+})
+export class StyledButtonComponent {
+
+  @Input() public disabled = false;
+  @Input() public flavor: ButtonFlavor = 'primary';
+
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output() public onClick = new EventEmitter<MouseEvent>();
+}
diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss
new file mode 100644
index 00000000..f923211d
--- /dev/null
+++ b/src/global-styles/_theme-colors.scss
@@ -0,0 +1,24 @@
+/*primary*/
+$primary-default: #2ECC70;
+$primary-hover: #1F8C4C;
+$primary-disabled: #2E473E;
+/*success*/
+$success-default: #3ABB18;
+$success-hover: #277A10;
+$success-disabled: #2F5629;
+/*warning*/
+$warning-default: #F1C30E;
+$warning-hover: #B3910B;
+$warning-disabled: #675926;
+/*danger*/
+$danger-default: #F00040;
+$danger-hover: #B0002F;
+$danger-disabled: #671E35;
+/*info*/
+$info-default: #3281F6;
+$info-hover: #245EB5;
+$info-disabled: #2D456C;
+/*etc*/
+$logo-crypt: #27A036
+/* ISSUE : #260 */
+

From 529d50105f8378023776c452ba2ca549cf88e5c2 Mon Sep 17 00:00:00 2001
From: Marcel <34819524+MarcelCoding@users.noreply.github.com>
Date: Mon, 14 Mar 2022 18:33:42 +0100
Subject: [PATCH 02/23] Fixed merge conflicts

---
 .../styled-button.component.html              |  1 -
 .../styled-button.component.spec.ts           | 25 -------------------
 .../styled-button/styled-button.component.ts  | 17 -------------
 .../components/button/button.component.html   |  3 +++
 .../components/button/button.component.scss}  |  1 +
 .../button/button.component.spec.ts           | 23 +++++++++++++++++
 .../components/button/button.component.ts     | 17 +++++++++++++
 src/core/components/button/button.module.ts   | 17 +++++++++++++
 8 files changed, 61 insertions(+), 43 deletions(-)
 delete mode 100644 src/app/design/styled-button/styled-button.component.html
 delete mode 100644 src/app/design/styled-button/styled-button.component.spec.ts
 delete mode 100644 src/app/design/styled-button/styled-button.component.ts
 create mode 100644 src/core/components/button/button.component.html
 rename src/{app/design/styled-button/styled-button.component.scss => core/components/button/button.component.scss} (99%)
 create mode 100644 src/core/components/button/button.component.spec.ts
 create mode 100644 src/core/components/button/button.component.ts
 create mode 100644 src/core/components/button/button.module.ts

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
deleted file mode 100644
index a8821237..00000000
--- a/src/app/design/styled-button/styled-button.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<button [disabled]="disabled" (click)="onClick.emit($event)" [class]="flavor"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.spec.ts b/src/app/design/styled-button/styled-button.component.spec.ts
deleted file mode 100644
index ca36cb31..00000000
--- a/src/app/design/styled-button/styled-button.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { StyledButtonComponent } from './styled-button.component';
-
-describe('StyledButtonComponent', () => {
-  let component: StyledButtonComponent;
-  let fixture: ComponentFixture<StyledButtonComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ StyledButtonComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(StyledButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
deleted file mode 100644
index f3521984..00000000
--- a/src/app/design/styled-button/styled-button.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
-
-@Component({
-  selector: 'app-styled-button',
-  templateUrl: './styled-button.component.html',
-  styleUrls: ['./styled-button.component.scss']
-})
-export class StyledButtonComponent {
-
-  @Input() public disabled = false;
-  @Input() public flavor: ButtonFlavor = 'primary';
-
-  // tslint:disable-next-line: no-output-on-prefix
-  @Output() public onClick = new EventEmitter<MouseEvent>();
-}
diff --git a/src/core/components/button/button.component.html b/src/core/components/button/button.component.html
new file mode 100644
index 00000000..94abb52d
--- /dev/null
+++ b/src/core/components/button/button.component.html
@@ -0,0 +1,3 @@
+<button (click)="onClick.emit($event)" [class]="flavor" [disabled]="disabled">
+  <ng-content></ng-content>
+</button>
diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/core/components/button/button.component.scss
similarity index 99%
rename from src/app/design/styled-button/styled-button.component.scss
rename to src/core/components/button/button.component.scss
index 1175d014..f2f9411f 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/core/components/button/button.component.scss
@@ -37,6 +37,7 @@ button {
   border: none;
   font-size: 16px;
   margin-right: 10px;
+
   &:last-child {
     margin-right: 0;
   }
diff --git a/src/core/components/button/button.component.spec.ts b/src/core/components/button/button.component.spec.ts
new file mode 100644
index 00000000..3c2faae7
--- /dev/null
+++ b/src/core/components/button/button.component.spec.ts
@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {ButtonComponent} from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ButtonComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/button/button.component.ts b/src/core/components/button/button.component.ts
new file mode 100644
index 00000000..fc9ad2c3
--- /dev/null
+++ b/src/core/components/button/button.component.ts
@@ -0,0 +1,17 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent {
+
+  @Input() public disabled = false;
+  @Input() public flavor: ButtonFlavor = 'primary';
+
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() public onClick = new EventEmitter<MouseEvent>();
+}
diff --git a/src/core/components/button/button.module.ts b/src/core/components/button/button.module.ts
new file mode 100644
index 00000000..7c7d65bb
--- /dev/null
+++ b/src/core/components/button/button.module.ts
@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ButtonComponent} from './button.component';
+
+@NgModule({
+  declarations: [
+    ButtonComponent
+  ],
+  exports: [
+    ButtonComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class ButtonModule {
+}

From c69a13d039f314bd1a425d1905242db3e10a6bf6 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sun, 6 Mar 2022 11:20:17 +0100
Subject: [PATCH 03/23] Added Button Base Component (#275)

---
 .../styled-button.component.html              |  1 +
 .../styled-button.component.scss              | 59 +++++++++++++++++++
 .../styled-button.component.spec.ts           | 25 ++++++++
 .../styled-button/styled-button.component.ts  | 17 ++++++
 4 files changed, 102 insertions(+)
 create mode 100644 src/app/design/styled-button/styled-button.component.html
 create mode 100644 src/app/design/styled-button/styled-button.component.scss
 create mode 100644 src/app/design/styled-button/styled-button.component.spec.ts
 create mode 100644 src/app/design/styled-button/styled-button.component.ts

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
new file mode 100644
index 00000000..a8821237
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -0,0 +1 @@
+<button [disabled]="disabled" (click)="onClick.emit($event)" [class]="flavor"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
new file mode 100644
index 00000000..1175d014
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -0,0 +1,59 @@
+@use "sass:list";
+@import "theme-colors";
+
+$flavors: (
+  primary: (
+    $primary-default,
+    $primary-hover,
+    $primary-disabled,
+  ),
+  success: (
+    $success-default,
+    $success-hover,
+    $success-disabled,
+  ),
+  warning: (
+    $warning-default,
+    $warning-hover,
+    $warning-disabled,
+  ),
+  danger: (
+    $danger-default,
+    $danger-hover,
+    $danger-disabled,
+  ),
+  info: (
+    $info-default,
+    $info-hover,
+    $info-disabled,
+  ),
+);
+
+button {
+  padding: 10px;
+  border-radius: 10px;
+  width: 100%;
+  color: white;
+  border: none;
+  font-size: 16px;
+  margin-right: 10px;
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      color: #2f2f36;
+      background: list.nth($colors, 1);
+
+      &:disabled {
+        background-color: list.nth($colors, 3);
+      }
+
+      &:hover {
+        background-color: list.nth($colors, 2);
+        color: white;
+      }
+    }
+  }
+}
diff --git a/src/app/design/styled-button/styled-button.component.spec.ts b/src/app/design/styled-button/styled-button.component.spec.ts
new file mode 100644
index 00000000..ca36cb31
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StyledButtonComponent } from './styled-button.component';
+
+describe('StyledButtonComponent', () => {
+  let component: StyledButtonComponent;
+  let fixture: ComponentFixture<StyledButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StyledButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StyledButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
new file mode 100644
index 00000000..f3521984
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -0,0 +1,17 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+@Component({
+  selector: 'app-styled-button',
+  templateUrl: './styled-button.component.html',
+  styleUrls: ['./styled-button.component.scss']
+})
+export class StyledButtonComponent {
+
+  @Input() public disabled = false;
+  @Input() public flavor: ButtonFlavor = 'primary';
+
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output() public onClick = new EventEmitter<MouseEvent>();
+}

From 428be30fef432cbc99c120f624baf44ed7a5945a Mon Sep 17 00:00:00 2001
From: Marcel <34819524+MarcelCoding@users.noreply.github.com>
Date: Mon, 14 Mar 2022 18:33:42 +0100
Subject: [PATCH 04/23] Fixed merge conflicts

---
 .../styled-button.component.html              |  1 -
 .../styled-button.component.scss              | 59 -------------------
 .../styled-button.component.spec.ts           | 25 --------
 .../styled-button/styled-button.component.ts  | 17 ------
 4 files changed, 102 deletions(-)
 delete mode 100644 src/app/design/styled-button/styled-button.component.html
 delete mode 100644 src/app/design/styled-button/styled-button.component.scss
 delete mode 100644 src/app/design/styled-button/styled-button.component.spec.ts
 delete mode 100644 src/app/design/styled-button/styled-button.component.ts

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
deleted file mode 100644
index a8821237..00000000
--- a/src/app/design/styled-button/styled-button.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<button [disabled]="disabled" (click)="onClick.emit($event)" [class]="flavor"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
deleted file mode 100644
index 1175d014..00000000
--- a/src/app/design/styled-button/styled-button.component.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use "sass:list";
-@import "theme-colors";
-
-$flavors: (
-  primary: (
-    $primary-default,
-    $primary-hover,
-    $primary-disabled,
-  ),
-  success: (
-    $success-default,
-    $success-hover,
-    $success-disabled,
-  ),
-  warning: (
-    $warning-default,
-    $warning-hover,
-    $warning-disabled,
-  ),
-  danger: (
-    $danger-default,
-    $danger-hover,
-    $danger-disabled,
-  ),
-  info: (
-    $info-default,
-    $info-hover,
-    $info-disabled,
-  ),
-);
-
-button {
-  padding: 10px;
-  border-radius: 10px;
-  width: 100%;
-  color: white;
-  border: none;
-  font-size: 16px;
-  margin-right: 10px;
-  &:last-child {
-    margin-right: 0;
-  }
-
-  @each $name, $colors in $flavors {
-    &.#{$name} {
-      color: #2f2f36;
-      background: list.nth($colors, 1);
-
-      &:disabled {
-        background-color: list.nth($colors, 3);
-      }
-
-      &:hover {
-        background-color: list.nth($colors, 2);
-        color: white;
-      }
-    }
-  }
-}
diff --git a/src/app/design/styled-button/styled-button.component.spec.ts b/src/app/design/styled-button/styled-button.component.spec.ts
deleted file mode 100644
index ca36cb31..00000000
--- a/src/app/design/styled-button/styled-button.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { StyledButtonComponent } from './styled-button.component';
-
-describe('StyledButtonComponent', () => {
-  let component: StyledButtonComponent;
-  let fixture: ComponentFixture<StyledButtonComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ StyledButtonComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(StyledButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
deleted file mode 100644
index f3521984..00000000
--- a/src/app/design/styled-button/styled-button.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
-
-@Component({
-  selector: 'app-styled-button',
-  templateUrl: './styled-button.component.html',
-  styleUrls: ['./styled-button.component.scss']
-})
-export class StyledButtonComponent {
-
-  @Input() public disabled = false;
-  @Input() public flavor: ButtonFlavor = 'primary';
-
-  // tslint:disable-next-line: no-output-on-prefix
-  @Output() public onClick = new EventEmitter<MouseEvent>();
-}

From 7cc9f7b1721f0626d88985fc4c07376dc369bb6f Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Mon, 21 Mar 2022 20:11:39 +0100
Subject: [PATCH 05/23] Creates Base-Components-Page with lazy-loading. (#358)

---
 src/app/app-routing.module.ts                 |  1 +
 .../base-components-routing.module.ts         | 11 ++++++++
 .../base-components.component.html            |  1 +
 .../base-components.component.scss            |  0
 .../base-components.component.spec.ts         | 25 +++++++++++++++++++
 .../base-components.component.ts              | 12 +++++++++
 .../base-components/base-components.module.ts | 17 +++++++++++++
 7 files changed, 67 insertions(+)
 create mode 100644 src/app/base-components/base-components-routing.module.ts
 create mode 100644 src/app/base-components/base-components.component.html
 create mode 100644 src/app/base-components/base-components.component.scss
 create mode 100644 src/app/base-components/base-components.component.spec.ts
 create mode 100644 src/app/base-components/base-components.component.ts
 create mode 100644 src/app/base-components/base-components.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 50186b78..6e967a06 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -5,6 +5,7 @@ const routes: Routes = [
   {path: '', loadChildren: () => import('./control-center/control-center.module').then(m => m.ControlCenterModule)},
   {path: 'desktop', loadChildren: () => import('./desktop/desktop.module').then(m => m.DesktopModule)},
   {path: '', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)},
+  { path: 'design', loadChildren: () => import('./base-components/base-components.module').then(m => m.BaseComponentsModule) },
   {path: '**', redirectTo: '/'}
 ];
 
diff --git a/src/app/base-components/base-components-routing.module.ts b/src/app/base-components/base-components-routing.module.ts
new file mode 100644
index 00000000..e3f30d06
--- /dev/null
+++ b/src/app/base-components/base-components-routing.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { BaseComponentsComponent } from './base-components.component';
+
+const routes: Routes = [{ path: '', component: BaseComponentsComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BaseComponentsRoutingModule { }
diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
new file mode 100644
index 00000000..043c3cd5
--- /dev/null
+++ b/src/app/base-components/base-components.component.html
@@ -0,0 +1 @@
+<p>base-components works!</p>
diff --git a/src/app/base-components/base-components.component.scss b/src/app/base-components/base-components.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/base-components/base-components.component.spec.ts b/src/app/base-components/base-components.component.spec.ts
new file mode 100644
index 00000000..6f462277
--- /dev/null
+++ b/src/app/base-components/base-components.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BaseComponentsComponent } from './base-components.component';
+
+describe('BaseComponentsComponent', () => {
+  let component: BaseComponentsComponent;
+  let fixture: ComponentFixture<BaseComponentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BaseComponentsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BaseComponentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts
new file mode 100644
index 00000000..296b5d83
--- /dev/null
+++ b/src/app/base-components/base-components.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-base-components',
+  templateUrl: './base-components.component.html',
+  styleUrls: ['./base-components.component.scss']
+})
+export class BaseComponentsComponent {
+
+  constructor() { }
+
+}
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
new file mode 100644
index 00000000..2e4dde6b
--- /dev/null
+++ b/src/app/base-components/base-components.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BaseComponentsRoutingModule } from './base-components-routing.module';
+import { BaseComponentsComponent } from './base-components.component';
+
+
+@NgModule({
+  declarations: [
+    BaseComponentsComponent
+  ],
+  imports: [
+    CommonModule,
+    BaseComponentsRoutingModule
+  ]
+})
+export class BaseComponentsModule { }

From 71178d14d1471293c19b58a6b1c905eca8c5908d Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Mon, 21 Mar 2022 21:23:13 +0100
Subject: [PATCH 06/23] Renamed button to "design-button".

---
 src/core/components/button/button.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/core/components/button/button.component.ts b/src/core/components/button/button.component.ts
index fc9ad2c3..b9e16119 100644
--- a/src/core/components/button/button.component.ts
+++ b/src/core/components/button/button.component.ts
@@ -3,7 +3,8 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 
 @Component({
-  selector: 'app-button',
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'design-button',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss']
 })

From 7ec4ae7f300337cba63793fa28dd2a3dd1ba4024 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Mon, 21 Mar 2022 21:49:31 +0100
Subject: [PATCH 07/23] Added testing page for design-button. (#358)

---
 .../base-components.component.html            | 34 ++++++++++++++++++-
 .../base-components.component.scss            | 16 +++++++++
 .../base-components.component.ts              |  3 ++
 .../base-components/base-components.module.ts |  4 ++-
 4 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 043c3cd5..bb1e01c7 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -1 +1,33 @@
-<p>base-components works!</p>
+<div class="componentContainer">
+  <h2>Buttons</h2>
+  <design-button (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button>
+  <design-button [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
+    Primary
+  </design-button>
+  <design-button [disabled]="true" flavor="primary" class="component">
+    Primary disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button>
+  <design-button [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
+    Success
+  </design-button>
+  <design-button [disabled]="true" flavor="success" class="component">
+    Success disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Warning')" [disabled]="false" flavor="warning" class="component">
+    Warning
+  </design-button>
+  <design-button [disabled]="true" flavor="warning" class="component">
+    Warning disabled
+  </design-button>
+</div>
diff --git a/src/app/base-components/base-components.component.scss b/src/app/base-components/base-components.component.scss
index e69de29b..718a0a34 100644
--- a/src/app/base-components/base-components.component.scss
+++ b/src/app/base-components/base-components.component.scss
@@ -0,0 +1,16 @@
+.componentContainer {
+  display: inline-grid;
+  width: 300px;
+  height: fit-content;
+  margin: 30px;
+  padding: 1em;
+  border: 3px solid #ffffff;
+}
+
+.component{
+  padding-bottom: 10px;
+}
+
+* {
+  background: #2f3035;
+}
diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts
index 296b5d83..ec2fc41d 100644
--- a/src/app/base-components/base-components.component.ts
+++ b/src/app/base-components/base-components.component.ts
@@ -9,4 +9,7 @@ export class BaseComponentsComponent {
 
   constructor() { }
 
+  pressedAlert(name: string) {
+    alert(name + " was pressed!");
+  }
 }
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index 2e4dde6b..ebe4c478 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { BaseComponentsRoutingModule } from './base-components-routing.module';
 import { BaseComponentsComponent } from './base-components.component';
+import {ButtonModule} from "../../core/components/button/button.module";
 
 
 @NgModule({
@@ -11,7 +12,8 @@ import { BaseComponentsComponent } from './base-components.component';
   ],
   imports: [
     CommonModule,
-    BaseComponentsRoutingModule
+    BaseComponentsRoutingModule,
+    ButtonModule
   ]
 })
 export class BaseComponentsModule { }

From 95b487fbaa67d142be09ebe5e57cdf131ff444b9 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Mon, 21 Mar 2022 21:49:51 +0100
Subject: [PATCH 08/23] Fixed design-button being animated while disabled.

---
 src/core/components/button/button.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/button/button.component.scss b/src/core/components/button/button.component.scss
index f2f9411f..6579a42d 100644
--- a/src/core/components/button/button.component.scss
+++ b/src/core/components/button/button.component.scss
@@ -51,7 +51,7 @@ button {
         background-color: list.nth($colors, 3);
       }
 
-      &:hover {
+      &:hover:not([disabled]) {
         background-color: list.nth($colors, 2);
         color: white;
       }

From 2a71c442c88f0ad45acdc2740ec3d20a28d84cc5 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 15:37:13 +0100
Subject: [PATCH 09/23] Changes ES-Lint to allow the "design"-prefix in the
 component-selector.

---
 .eslintrc.json                                 | 2 +-
 src/core/components/button/button.component.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index f71c1c6a..bcab7dff 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -31,7 +31,7 @@
           "error",
           {
             "type": "element",
-            "prefix": "app",
+            "prefix": ["app", "design"],
             "style": "kebab-case"
           }
         ],
diff --git a/src/core/components/button/button.component.ts b/src/core/components/button/button.component.ts
index b9e16119..9049c584 100644
--- a/src/core/components/button/button.component.ts
+++ b/src/core/components/button/button.component.ts
@@ -3,7 +3,6 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 export type ButtonFlavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 
 @Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'design-button',
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss']

From 2ccb1ff984f791d4e39a99066b3173c51de9c37b Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:01:55 +0100
Subject: [PATCH 10/23] Added the color-variables for fonts, backgrounds and
 popUps. (#260)

---
 src/global-styles/_theme-colors.scss | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss
index f923211d..e44c709f 100644
--- a/src/global-styles/_theme-colors.scss
+++ b/src/global-styles/_theme-colors.scss
@@ -19,6 +19,25 @@ $info-default: #3281F6;
 $info-hover: #245EB5;
 $info-disabled: #2D456C;
 /*etc*/
-$logo-crypt: #27A036
+$logo-crypt: #27A036;
+$labeled-disabled-font: #748781;
+$checkbox-disabled-font: $labeled-disabled-font;
+$radio-disabled-font: $labeled-disabled-font;
+$switch-disabled-font: $labeled-disabled-font;
+$light-disabled-font: $labeled-disabled-font;
+$button-dark-disabled-font: #222D2D;
+$input-disabled-background: #25252B;
+$sidebar-submenu-background: #2B2B31;
+$background: #2F2F36;
+$dark-font: #1A1C23;
+$input-background: #1D1D24;
+$popup-dark-background: #1D1D24;
+$sidebar-background: #1E1E24;
+$disabled-placeholder-font: #434349;
+$placeholder-font: #888888;
+$button-disabled-font: #888888;
+$grey-font: #BEBEBE;
+$light-font: #FFFFFF;
+$popup-light-background: #FFFFFF;
 /* ISSUE : #260 */
 

From 140f93ad2370b11b5e2e9b55a39994bd53081091 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:02:18 +0100
Subject: [PATCH 11/23] Set new radius for the button. (#260)

---
 src/core/components/button/button.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/button/button.component.scss b/src/core/components/button/button.component.scss
index 6579a42d..e5e43490 100644
--- a/src/core/components/button/button.component.scss
+++ b/src/core/components/button/button.component.scss
@@ -31,7 +31,7 @@ $flavors: (
 
 button {
   padding: 10px;
-  border-radius: 10px;
+  border-radius: 8px;
   width: 100%;
   color: white;
   border: none;

From 56ddecfc991b6f85035d6c403b73d255dbd1c217 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:02:53 +0100
Subject: [PATCH 12/23] Fixed background. (#358)

---
 src/app/base-components/base-components.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/base-components/base-components.component.scss b/src/app/base-components/base-components.component.scss
index 718a0a34..af051eff 100644
--- a/src/app/base-components/base-components.component.scss
+++ b/src/app/base-components/base-components.component.scss
@@ -12,5 +12,5 @@
 }
 
 * {
-  background: #2f3035;
+  background: #2F2F36;
 }

From 1a729fee070384d7c11e1a0daac133e64c12fe81 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:28:37 +0100
Subject: [PATCH 13/23] Grouped colors. (#260)

---
 src/global-styles/_theme-colors.scss | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss
index e44c709f..4288af91 100644
--- a/src/global-styles/_theme-colors.scss
+++ b/src/global-styles/_theme-colors.scss
@@ -2,42 +2,51 @@
 $primary-default: #2ECC70;
 $primary-hover: #1F8C4C;
 $primary-disabled: #2E473E;
+
 /*success*/
 $success-default: #3ABB18;
 $success-hover: #277A10;
 $success-disabled: #2F5629;
+
 /*warning*/
 $warning-default: #F1C30E;
 $warning-hover: #B3910B;
 $warning-disabled: #675926;
+
 /*danger*/
 $danger-default: #F00040;
 $danger-hover: #B0002F;
 $danger-disabled: #671E35;
+
 /*info*/
 $info-default: #3281F6;
 $info-hover: #245EB5;
 $info-disabled: #2D456C;
-/*etc*/
-$logo-crypt: #27A036;
+
+/*fonts*/
 $labeled-disabled-font: #748781;
 $checkbox-disabled-font: $labeled-disabled-font;
 $radio-disabled-font: $labeled-disabled-font;
 $switch-disabled-font: $labeled-disabled-font;
 $light-disabled-font: $labeled-disabled-font;
 $button-dark-disabled-font: #222D2D;
-$input-disabled-background: #25252B;
-$sidebar-submenu-background: #2B2B31;
-$background: #2F2F36;
 $dark-font: #1A1C23;
-$input-background: #1D1D24;
-$popup-dark-background: #1D1D24;
-$sidebar-background: #1E1E24;
 $disabled-placeholder-font: #434349;
 $placeholder-font: #888888;
 $button-disabled-font: #888888;
 $grey-font: #BEBEBE;
 $light-font: #FFFFFF;
+
+/*backgrounds*/
+$input-disabled-background: #25252B;
+$sidebar-submenu-background: #2B2B31;
+$background: #2F2F36;
+$input-background: #1D1D24;
+$popup-dark-background: #1D1D24;
+$sidebar-background: #1E1E24;
 $popup-light-background: #FFFFFF;
+
+/*etc*/
+$logo-crypt: #27A036;
 /* ISSUE : #260 */
 

From 7724400b6aeca40357a7eccda5d35f5f10433259 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:29:09 +0100
Subject: [PATCH 14/23] Fixed Fontsize. (#260)

---
 src/core/components/button/button.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/button/button.component.scss b/src/core/components/button/button.component.scss
index e5e43490..1cb38238 100644
--- a/src/core/components/button/button.component.scss
+++ b/src/core/components/button/button.component.scss
@@ -35,7 +35,7 @@ button {
   width: 100%;
   color: white;
   border: none;
-  font-size: 16px;
+  font-size: 20px;
   margin-right: 10px;
 
   &:last-child {

From a798dc7436cb717e052157914f79e7dd28573f06 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:29:29 +0100
Subject: [PATCH 15/23] Added outline-buttons. (#279)

---
 .../base-components.component.html            | 59 ++++++++++++++----
 .../base-components/base-components.module.ts | 12 ++--
 .../button-outline.component.html             |  3 +
 .../button-outline.component.scss             | 62 +++++++++++++++++++
 .../button-outline.component.spec.ts          | 25 ++++++++
 .../button-outline.component.ts               | 16 +++++
 .../button-outline/button-outline.module.ts   | 18 ++++++
 7 files changed, 177 insertions(+), 18 deletions(-)
 create mode 100644 src/core/components/button-outline/button-outline.component.html
 create mode 100644 src/core/components/button-outline/button-outline.component.scss
 create mode 100644 src/core/components/button-outline/button-outline.component.spec.ts
 create mode 100644 src/core/components/button-outline/button-outline.component.ts
 create mode 100644 src/core/components/button-outline/button-outline.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index bb1e01c7..d4fc6af7 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -1,23 +1,11 @@
 <div class="componentContainer">
-  <h2>Buttons</h2>
-  <design-button (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
-    Info
-  </design-button>
-  <design-button [disabled]="true" flavor="info" class="component">
-    Info disabled
-  </design-button>
+  <h2>Buttons - Primary</h2>
   <design-button (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
     Primary
   </design-button>
   <design-button [disabled]="true" flavor="primary" class="component">
     Primary disabled
   </design-button>
-  <design-button (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
-    Danger
-  </design-button>
-  <design-button [disabled]="true" flavor="danger" class="component">
-    Danger disabled
-  </design-button>
   <design-button (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
     Success
   </design-button>
@@ -30,4 +18,49 @@ <h2>Buttons</h2>
   <design-button [disabled]="true" flavor="warning" class="component">
     Warning disabled
   </design-button>
+  <design-button (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button>
+  <design-button [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button>
+  <design-button (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button>
+  <design-button [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button>
+</div>
+<div class="componentContainer">
+  <h2>Buttons - Outlined</h2>
+  <design-button-outline (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
+    Primary
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="primary" class="component">
+    Primary disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
+    Success
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="success" class="component">
+    Success disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Warning')" [disabled]="false" flavor="warning" class="component">
+    Warning
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="warning" class="component">
+    Warning disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button-outline>
+  <design-button-outline (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button-outline>
+  <design-button-outline [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button-outline>
 </div>
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index ebe4c478..b6672358 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -4,16 +4,18 @@ import { CommonModule } from '@angular/common';
 import { BaseComponentsRoutingModule } from './base-components-routing.module';
 import { BaseComponentsComponent } from './base-components.component';
 import {ButtonModule} from "../../core/components/button/button.module";
+import {ButtonOutlineModule} from "../../core/components/button-outline/button-outline.module";
 
 
 @NgModule({
   declarations: [
     BaseComponentsComponent
   ],
-  imports: [
-    CommonModule,
-    BaseComponentsRoutingModule,
-    ButtonModule
-  ]
+    imports: [
+        CommonModule,
+        BaseComponentsRoutingModule,
+        ButtonModule,
+        ButtonOutlineModule
+    ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/button-outline/button-outline.component.html b/src/core/components/button-outline/button-outline.component.html
new file mode 100644
index 00000000..94abb52d
--- /dev/null
+++ b/src/core/components/button-outline/button-outline.component.html
@@ -0,0 +1,3 @@
+<button (click)="onClick.emit($event)" [class]="flavor" [disabled]="disabled">
+  <ng-content></ng-content>
+</button>
diff --git a/src/core/components/button-outline/button-outline.component.scss b/src/core/components/button-outline/button-outline.component.scss
new file mode 100644
index 00000000..51f8ac48
--- /dev/null
+++ b/src/core/components/button-outline/button-outline.component.scss
@@ -0,0 +1,62 @@
+@use "sass:list";
+@import "theme-colors";
+
+$flavors: (
+  primary: (
+    $primary-default,
+    $primary-disabled,
+  ),
+  success: (
+    $success-default,
+    $success-disabled,
+  ),
+  warning: (
+    $warning-default,
+    $warning-disabled,
+  ),
+  danger: (
+    $danger-default,
+    $danger-disabled,
+  ),
+  info: (
+    $info-default,
+    $info-disabled,
+  ),
+);
+
+button {
+  padding: 10px;
+  border-radius: 8px;
+  border: 2px solid;
+  width: 100%;
+  color: white;
+  font-size: 20px;
+  margin-right: 10px;
+  background: none;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      border-color: list.nth($colors, 1);
+      color: list.nth($colors, 1);
+
+      &:disabled {
+        border-color: list.nth($colors, 2);
+        color: list.nth($colors, 2);
+      }
+
+      &:hover:not([disabled]) {
+        border-color: list.nth($colors, 1);
+        background: list.nth($colors, 1);
+        @if $name == "danger" or $name == "info" {
+          color: $light-font;
+        } @else {
+          color: $dark-font;
+        }
+      }
+    }
+  }
+}
diff --git a/src/core/components/button-outline/button-outline.component.spec.ts b/src/core/components/button-outline/button-outline.component.spec.ts
new file mode 100644
index 00000000..85739b8d
--- /dev/null
+++ b/src/core/components/button-outline/button-outline.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonOutlineComponent } from './button-outline.component';
+
+describe('ButtonOutlineComponent', () => {
+  let component: ButtonOutlineComponent;
+  let fixture: ComponentFixture<ButtonOutlineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ButtonOutlineComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonOutlineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/button-outline/button-outline.component.ts b/src/core/components/button-outline/button-outline.component.ts
new file mode 100644
index 00000000..6767a133
--- /dev/null
+++ b/src/core/components/button-outline/button-outline.component.ts
@@ -0,0 +1,16 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ButtonFlavor} from "../button/button.component";
+
+@Component({
+  selector: 'design-button-outline',
+  templateUrl: './button-outline.component.html',
+  styleUrls: ['./button-outline.component.scss']
+})
+export class ButtonOutlineComponent {
+
+  @Input() public disabled = false;
+  @Input() public flavor: ButtonFlavor = 'primary';
+
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() public onClick = new EventEmitter<MouseEvent>();
+}
diff --git a/src/core/components/button-outline/button-outline.module.ts b/src/core/components/button-outline/button-outline.module.ts
new file mode 100644
index 00000000..3e1df64f
--- /dev/null
+++ b/src/core/components/button-outline/button-outline.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ButtonOutlineComponent} from "./button-outline.component";
+
+
+
+@NgModule({
+  declarations: [
+    ButtonOutlineComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ButtonOutlineComponent
+  ]
+})
+export class ButtonOutlineModule { }

From 1a10220a1b3fce50298632ef41646594e7a96701 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:31:34 +0100
Subject: [PATCH 16/23] Added cursor-behaviour. (#279)

---
 .../components/button-outline/button-outline.component.scss    | 3 +++
 src/core/components/button/button.component.scss               | 2 ++
 2 files changed, 5 insertions(+)

diff --git a/src/core/components/button-outline/button-outline.component.scss b/src/core/components/button-outline/button-outline.component.scss
index 51f8ac48..2f1d33e7 100644
--- a/src/core/components/button-outline/button-outline.component.scss
+++ b/src/core/components/button-outline/button-outline.component.scss
@@ -33,6 +33,8 @@ button {
   font-size: 20px;
   margin-right: 10px;
   background: none;
+  cursor: pointer;
+
 
   &:last-child {
     margin-right: 0;
@@ -46,6 +48,7 @@ button {
       &:disabled {
         border-color: list.nth($colors, 2);
         color: list.nth($colors, 2);
+        cursor: default;
       }
 
       &:hover:not([disabled]) {
diff --git a/src/core/components/button/button.component.scss b/src/core/components/button/button.component.scss
index 1cb38238..4381c80b 100644
--- a/src/core/components/button/button.component.scss
+++ b/src/core/components/button/button.component.scss
@@ -37,6 +37,7 @@ button {
   border: none;
   font-size: 20px;
   margin-right: 10px;
+  cursor: pointer;
 
   &:last-child {
     margin-right: 0;
@@ -49,6 +50,7 @@ button {
 
       &:disabled {
         background-color: list.nth($colors, 3);
+        cursor: default;
       }
 
       &:hover:not([disabled]) {

From 58a1134a73c79884fa59efcd2c2d390dda03d9de Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 16:50:07 +0100
Subject: [PATCH 17/23] Added text-only button. (#279)

---
 .../base-components.component.html            | 35 +++++++++++
 .../base-components.component.scss            |  2 +-
 .../base-components/base-components.module.ts | 14 +++--
 .../button-text/button-text.component.html    |  3 +
 .../button-text/button-text.component.scss    | 58 +++++++++++++++++++
 .../button-text/button-text.component.spec.ts | 25 ++++++++
 .../button-text/button-text.component.ts      | 16 +++++
 .../button-text/button-text.module.ts         | 18 ++++++
 8 files changed, 164 insertions(+), 7 deletions(-)
 create mode 100644 src/core/components/button-text/button-text.component.html
 create mode 100644 src/core/components/button-text/button-text.component.scss
 create mode 100644 src/core/components/button-text/button-text.component.spec.ts
 create mode 100644 src/core/components/button-text/button-text.component.ts
 create mode 100644 src/core/components/button-text/button-text.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index d4fc6af7..daae8da9 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -1,3 +1,4 @@
+<div class="page">
 <div class="componentContainer">
   <h2>Buttons - Primary</h2>
   <design-button (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
@@ -64,3 +65,37 @@ <h2>Buttons - Outlined</h2>
     Info disabled
   </design-button-outline>
 </div>
+<div class="componentContainer">
+  <h2>Buttons - Text only</h2>
+  <design-button-text (click)="pressedAlert('Primary')" [disabled]="false" flavor="primary" class="component">
+    Primary
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="primary" class="component">
+    Primary disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Success')" [disabled]="false" flavor="success" class="component">
+    Success
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="success" class="component">
+    Success disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Warning')" [disabled]="false" flavor="warning" class="component">
+    Warning
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="warning" class="component">
+    Warning disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Danger')" [disabled]="false" flavor="danger" class="component">
+    Danger
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="danger" class="component">
+    Danger disabled
+  </design-button-text>
+  <design-button-text (click)="pressedAlert('Info')" [disabled]="false" flavor="info" class="component">
+    Info
+  </design-button-text>
+  <design-button-text [disabled]="true" flavor="info" class="component">
+    Info disabled
+  </design-button-text>
+</div>
+</div>
diff --git a/src/app/base-components/base-components.component.scss b/src/app/base-components/base-components.component.scss
index af051eff..f328adb3 100644
--- a/src/app/base-components/base-components.component.scss
+++ b/src/app/base-components/base-components.component.scss
@@ -11,6 +11,6 @@
   padding-bottom: 10px;
 }
 
-* {
+.page {
   background: #2F2F36;
 }
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index b6672358..87f567bd 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -5,17 +5,19 @@ import { BaseComponentsRoutingModule } from './base-components-routing.module';
 import { BaseComponentsComponent } from './base-components.component';
 import {ButtonModule} from "../../core/components/button/button.module";
 import {ButtonOutlineModule} from "../../core/components/button-outline/button-outline.module";
+import {ButtonTextModule} from "../../core/components/button-text/button-text.module";
 
 
 @NgModule({
   declarations: [
     BaseComponentsComponent
   ],
-    imports: [
-        CommonModule,
-        BaseComponentsRoutingModule,
-        ButtonModule,
-        ButtonOutlineModule
-    ]
+  imports: [
+    CommonModule,
+    BaseComponentsRoutingModule,
+    ButtonModule,
+    ButtonOutlineModule,
+    ButtonTextModule
+  ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/button-text/button-text.component.html b/src/core/components/button-text/button-text.component.html
new file mode 100644
index 00000000..94abb52d
--- /dev/null
+++ b/src/core/components/button-text/button-text.component.html
@@ -0,0 +1,3 @@
+<button (click)="onClick.emit($event)" [class]="flavor" [disabled]="disabled">
+  <ng-content></ng-content>
+</button>
diff --git a/src/core/components/button-text/button-text.component.scss b/src/core/components/button-text/button-text.component.scss
new file mode 100644
index 00000000..18315458
--- /dev/null
+++ b/src/core/components/button-text/button-text.component.scss
@@ -0,0 +1,58 @@
+@use "sass:list";
+@import "theme-colors";
+
+$flavors: (
+  primary: (
+    $primary-default,
+    $primary-disabled,
+  ),
+  success: (
+    $success-default,
+    $success-disabled,
+  ),
+  warning: (
+    $warning-default,
+    $warning-disabled,
+  ),
+  danger: (
+    $danger-default,
+    $danger-disabled,
+  ),
+  info: (
+    $info-default,
+    $info-disabled,
+  ),
+);
+
+button {
+  padding: 10px;
+  border: none;
+  width: 100%;
+  color: white;
+  font-size: 20px;
+  margin-right: 10px;
+  background: none;
+  cursor: pointer;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      color: list.nth($colors, 1);
+
+      &:disabled {
+        color: list.nth($colors, 2);
+        cursor: default;
+      }
+
+      &:hover:not([disabled]) {
+        color: list.nth($colors, 1);
+        text-decoration: underline;
+        text-underline: list.nth($colors, 1);;
+      }
+    }
+  }
+}
+
diff --git a/src/core/components/button-text/button-text.component.spec.ts b/src/core/components/button-text/button-text.component.spec.ts
new file mode 100644
index 00000000..a1cea4db
--- /dev/null
+++ b/src/core/components/button-text/button-text.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonTextComponent } from './button-text.component';
+
+describe('ButtonTextComponent', () => {
+  let component: ButtonTextComponent;
+  let fixture: ComponentFixture<ButtonTextComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ButtonTextComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/button-text/button-text.component.ts b/src/core/components/button-text/button-text.component.ts
new file mode 100644
index 00000000..abd887f6
--- /dev/null
+++ b/src/core/components/button-text/button-text.component.ts
@@ -0,0 +1,16 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ButtonFlavor} from "../button/button.component";
+
+@Component({
+  selector: 'design-button-text',
+  templateUrl: './button-text.component.html',
+  styleUrls: ['./button-text.component.scss']
+})
+export class ButtonTextComponent {
+
+  @Input() public disabled = false;
+  @Input() public flavor: ButtonFlavor = 'primary';
+
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() public onClick = new EventEmitter<MouseEvent>();
+}
diff --git a/src/core/components/button-text/button-text.module.ts b/src/core/components/button-text/button-text.module.ts
new file mode 100644
index 00000000..a94fb6bf
--- /dev/null
+++ b/src/core/components/button-text/button-text.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonTextComponent } from './button-text.component';
+
+
+
+@NgModule({
+  declarations: [
+    ButtonTextComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ButtonTextComponent
+  ]
+})
+export class ButtonTextModule { }

From a05098aa964b209532dce02e0ab292b1aa8e4bc4 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 19:43:12 +0100
Subject: [PATCH 18/23] Moved Buttons into buttons-dir and fixed some paddings.
 (#279)

---
 .../base-components/base-components.module.ts |  6 +++---
 src/core/components/buttons/_buttons.scss     |  8 ++++++++
 .../button-outline.component.html             |  0
 .../button-outline.component.scss             | 19 ++++++++++---------
 .../button-outline.component.spec.ts          |  0
 .../button-outline.component.ts               |  0
 .../button-outline/button-outline.module.ts   |  0
 .../button-text/button-text.component.html    |  0
 .../button-text/button-text.component.scss    | 17 +++++++++--------
 .../button-text/button-text.component.spec.ts |  0
 .../button-text/button-text.component.ts      |  0
 .../button-text/button-text.module.ts         |  0
 .../button/button.component.html              |  0
 .../button/button.component.scss              | 19 ++++++++++---------
 .../button/button.component.spec.ts           |  0
 .../{ => buttons}/button/button.component.ts  |  0
 .../{ => buttons}/button/button.module.ts     |  0
 17 files changed, 40 insertions(+), 29 deletions(-)
 create mode 100644 src/core/components/buttons/_buttons.scss
 rename src/core/components/{ => buttons}/button-outline/button-outline.component.html (100%)
 rename src/core/components/{ => buttons}/button-outline/button-outline.component.scss (80%)
 rename src/core/components/{ => buttons}/button-outline/button-outline.component.spec.ts (100%)
 rename src/core/components/{ => buttons}/button-outline/button-outline.component.ts (100%)
 rename src/core/components/{ => buttons}/button-outline/button-outline.module.ts (100%)
 rename src/core/components/{ => buttons}/button-text/button-text.component.html (100%)
 rename src/core/components/{ => buttons}/button-text/button-text.component.scss (77%)
 rename src/core/components/{ => buttons}/button-text/button-text.component.spec.ts (100%)
 rename src/core/components/{ => buttons}/button-text/button-text.component.ts (100%)
 rename src/core/components/{ => buttons}/button-text/button-text.module.ts (100%)
 rename src/core/components/{ => buttons}/button/button.component.html (100%)
 rename src/core/components/{ => buttons}/button/button.component.scss (75%)
 rename src/core/components/{ => buttons}/button/button.component.spec.ts (100%)
 rename src/core/components/{ => buttons}/button/button.component.ts (100%)
 rename src/core/components/{ => buttons}/button/button.module.ts (100%)

diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index 87f567bd..5f0daab6 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -3,9 +3,9 @@ import { CommonModule } from '@angular/common';
 
 import { BaseComponentsRoutingModule } from './base-components-routing.module';
 import { BaseComponentsComponent } from './base-components.component';
-import {ButtonModule} from "../../core/components/button/button.module";
-import {ButtonOutlineModule} from "../../core/components/button-outline/button-outline.module";
-import {ButtonTextModule} from "../../core/components/button-text/button-text.module";
+import {ButtonModule} from "../../core/components/buttons/button/button.module";
+import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module";
+import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
 
 
 @NgModule({
diff --git a/src/core/components/buttons/_buttons.scss b/src/core/components/buttons/_buttons.scss
new file mode 100644
index 00000000..3c04c194
--- /dev/null
+++ b/src/core/components/buttons/_buttons.scss
@@ -0,0 +1,8 @@
+$b-padding: 8px;
+$b-border-radius: 8px;
+$b-width: 100%;
+$b-color: white;
+$b-border: none;
+$b-font-size: 20px;
+$b-margin-right: 10px;
+$b-cursor: pointer;
diff --git a/src/core/components/button-outline/button-outline.component.html b/src/core/components/buttons/button-outline/button-outline.component.html
similarity index 100%
rename from src/core/components/button-outline/button-outline.component.html
rename to src/core/components/buttons/button-outline/button-outline.component.html
diff --git a/src/core/components/button-outline/button-outline.component.scss b/src/core/components/buttons/button-outline/button-outline.component.scss
similarity index 80%
rename from src/core/components/button-outline/button-outline.component.scss
rename to src/core/components/buttons/button-outline/button-outline.component.scss
index 2f1d33e7..36cfce3f 100644
--- a/src/core/components/button-outline/button-outline.component.scss
+++ b/src/core/components/buttons/button-outline/button-outline.component.scss
@@ -1,5 +1,6 @@
 @use "sass:list";
-@import "theme-colors";
+@import "src/global-styles/theme-colors";
+@import "../buttons";
 
 $flavors: (
   primary: (
@@ -25,15 +26,15 @@ $flavors: (
 );
 
 button {
-  padding: 10px;
-  border-radius: 8px;
-  border: 2px solid;
-  width: 100%;
-  color: white;
-  font-size: 20px;
-  margin-right: 10px;
+  padding: 6px;
   background: none;
-  cursor: pointer;
+  border: 2px solid;
+  border-radius: $b-border-radius;
+  width: $b-width;
+  color: $b-color;
+  font-size: $b-font-size;
+  margin-right: $b-margin-right;
+  cursor: $b-cursor;
 
 
   &:last-child {
diff --git a/src/core/components/button-outline/button-outline.component.spec.ts b/src/core/components/buttons/button-outline/button-outline.component.spec.ts
similarity index 100%
rename from src/core/components/button-outline/button-outline.component.spec.ts
rename to src/core/components/buttons/button-outline/button-outline.component.spec.ts
diff --git a/src/core/components/button-outline/button-outline.component.ts b/src/core/components/buttons/button-outline/button-outline.component.ts
similarity index 100%
rename from src/core/components/button-outline/button-outline.component.ts
rename to src/core/components/buttons/button-outline/button-outline.component.ts
diff --git a/src/core/components/button-outline/button-outline.module.ts b/src/core/components/buttons/button-outline/button-outline.module.ts
similarity index 100%
rename from src/core/components/button-outline/button-outline.module.ts
rename to src/core/components/buttons/button-outline/button-outline.module.ts
diff --git a/src/core/components/button-text/button-text.component.html b/src/core/components/buttons/button-text/button-text.component.html
similarity index 100%
rename from src/core/components/button-text/button-text.component.html
rename to src/core/components/buttons/button-text/button-text.component.html
diff --git a/src/core/components/button-text/button-text.component.scss b/src/core/components/buttons/button-text/button-text.component.scss
similarity index 77%
rename from src/core/components/button-text/button-text.component.scss
rename to src/core/components/buttons/button-text/button-text.component.scss
index 18315458..27722b31 100644
--- a/src/core/components/button-text/button-text.component.scss
+++ b/src/core/components/buttons/button-text/button-text.component.scss
@@ -1,5 +1,6 @@
 @use "sass:list";
-@import "theme-colors";
+@import "src/global-styles/theme-colors";
+@import "../buttons";
 
 $flavors: (
   primary: (
@@ -25,14 +26,14 @@ $flavors: (
 );
 
 button {
-  padding: 10px;
-  border: none;
-  width: 100%;
-  color: white;
-  font-size: 20px;
-  margin-right: 10px;
+  padding: $b-padding;
+  width: $b-width;
+  color: $b-color;
+  border: $b-border;
+  font-size: $b-font-size;
+  margin-right: $b-margin-right;
   background: none;
-  cursor: pointer;
+  cursor: $b-cursor;
 
   &:last-child {
     margin-right: 0;
diff --git a/src/core/components/button-text/button-text.component.spec.ts b/src/core/components/buttons/button-text/button-text.component.spec.ts
similarity index 100%
rename from src/core/components/button-text/button-text.component.spec.ts
rename to src/core/components/buttons/button-text/button-text.component.spec.ts
diff --git a/src/core/components/button-text/button-text.component.ts b/src/core/components/buttons/button-text/button-text.component.ts
similarity index 100%
rename from src/core/components/button-text/button-text.component.ts
rename to src/core/components/buttons/button-text/button-text.component.ts
diff --git a/src/core/components/button-text/button-text.module.ts b/src/core/components/buttons/button-text/button-text.module.ts
similarity index 100%
rename from src/core/components/button-text/button-text.module.ts
rename to src/core/components/buttons/button-text/button-text.module.ts
diff --git a/src/core/components/button/button.component.html b/src/core/components/buttons/button/button.component.html
similarity index 100%
rename from src/core/components/button/button.component.html
rename to src/core/components/buttons/button/button.component.html
diff --git a/src/core/components/button/button.component.scss b/src/core/components/buttons/button/button.component.scss
similarity index 75%
rename from src/core/components/button/button.component.scss
rename to src/core/components/buttons/button/button.component.scss
index 4381c80b..b513cf52 100644
--- a/src/core/components/button/button.component.scss
+++ b/src/core/components/buttons/button/button.component.scss
@@ -1,5 +1,6 @@
 @use "sass:list";
-@import "theme-colors";
+@import "src/global-styles/theme-colors";
+@import "../buttons";
 
 $flavors: (
   primary: (
@@ -30,14 +31,14 @@ $flavors: (
 );
 
 button {
-  padding: 10px;
-  border-radius: 8px;
-  width: 100%;
-  color: white;
-  border: none;
-  font-size: 20px;
-  margin-right: 10px;
-  cursor: pointer;
+  padding: $b-padding;
+  border-radius: $b-border-radius;
+  width: $b-width;
+  color: $b-color;
+  border: $b-border;
+  font-size: $b-font-size;
+  margin-right: $b-margin-right;
+  cursor: $b-cursor;
 
   &:last-child {
     margin-right: 0;
diff --git a/src/core/components/button/button.component.spec.ts b/src/core/components/buttons/button/button.component.spec.ts
similarity index 100%
rename from src/core/components/button/button.component.spec.ts
rename to src/core/components/buttons/button/button.component.spec.ts
diff --git a/src/core/components/button/button.component.ts b/src/core/components/buttons/button/button.component.ts
similarity index 100%
rename from src/core/components/button/button.component.ts
rename to src/core/components/buttons/button/button.component.ts
diff --git a/src/core/components/button/button.module.ts b/src/core/components/buttons/button/button.module.ts
similarity index 100%
rename from src/core/components/button/button.module.ts
rename to src/core/components/buttons/button/button.module.ts

From 07e2f6368ae81eb7672286a3014ac7247c00a425 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 20:21:57 +0100
Subject: [PATCH 19/23] Improved Base-Components showcase page. (#260)

---
 src/app/base-components/base-components.component.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/base-components/base-components.component.scss b/src/app/base-components/base-components.component.scss
index f328adb3..bf19d58f 100644
--- a/src/app/base-components/base-components.component.scss
+++ b/src/app/base-components/base-components.component.scss
@@ -1,16 +1,17 @@
 .componentContainer {
   display: inline-grid;
   width: 300px;
-  height: fit-content;
   margin: 30px;
   padding: 1em;
   border: 3px solid #ffffff;
 }
 
-.component{
+.component {
   padding-bottom: 10px;
 }
 
 .page {
+  height: 100%;
+  overflow: auto;
   background: #2F2F36;
 }

From 9c6950adb79a411d5f34298e3fed9e77aa854121 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 11:50:49 +0100
Subject: [PATCH 20/23] Cloudflare trigger.

---
 src/app/base-components/base-components.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index daae8da9..c2b20396 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -99,3 +99,4 @@ <h2>Buttons - Text only</h2>
   </design-button-text>
 </div>
 </div>
+<!-- Cloudflare trigger -->

From e330e27b3b5544e529ef5fa0efd9db908afec908 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 12:13:47 +0100
Subject: [PATCH 21/23] Added Jost and set default size to 20px. (#260)

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 src/styles.scss   |  4 +++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index f9886049..8a5524cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@angular/platform-browser": "~13.2.5",
         "@angular/platform-browser-dynamic": "~13.2.5",
         "@angular/router": "~13.2.5",
+        "@fontsource/jost": "^4.5.4",
         "@sentry/angular": "^6.18.2",
         "ng-particles": "^2.40.2",
         "rxjs": "~7.5.0",
@@ -2625,6 +2626,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fontsource/jost": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz",
+      "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -15351,6 +15357,11 @@
         }
       }
     },
+    "@fontsource/jost": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz",
+      "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ=="
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
diff --git a/package.json b/package.json
index c7c037c4..cb773f4b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@angular/platform-browser": "~13.2.5",
     "@angular/platform-browser-dynamic": "~13.2.5",
     "@angular/router": "~13.2.5",
+    "@fontsource/jost": "^4.5.4",
     "@sentry/angular": "^6.18.2",
     "ng-particles": "^2.40.2",
     "rxjs": "~7.5.0",
diff --git a/src/styles.scss b/src/styles.scss
index 39a54f1a..82bfe68c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,7 @@
 @import "variables";
 @import "controls";
 @import "context-menu";
+@import "@fontsource/jost";
 
 app-root {
   width: 100%;
@@ -15,7 +16,8 @@ html {
   height: 100%;
   margin: 0;
   overflow: hidden;
-  font-family: $default-font;
+  font-size: 20px;
+  font-family: "Jost", Roboto, "Open Sans", sans-serif;
   background-color: #000;
   color: #fff;
 }

From 86df9253f3b26d91ca2a46961e485209047f8418 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 16:03:41 +0100
Subject: [PATCH 22/23] Fixed button colors. (#279)

---
 .../components/buttons/button/button.component.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/core/components/buttons/button/button.component.scss b/src/core/components/buttons/button/button.component.scss
index b513cf52..b76b0f1a 100644
--- a/src/core/components/buttons/button/button.component.scss
+++ b/src/core/components/buttons/button/button.component.scss
@@ -46,12 +46,23 @@ button {
 
   @each $name, $colors in $flavors {
     &.#{$name} {
-      color: #2f2f36;
+      color: $dark-font;
       background: list.nth($colors, 1);
 
+      @if $name == "danger" or $name == "info" {
+        color: $light-font;
+      } @else {
+        color: $dark-font;
+      }
+
       &:disabled {
         background-color: list.nth($colors, 3);
         cursor: default;
+        @if $name == "danger" or $name == "info" {
+          color: $button-disabled-font;
+        } @else {
+          color: $button-dark-disabled-font;
+        }
       }
 
       &:hover:not([disabled]) {

From 5c1450d4fffb00fa95308f04bfcbc050ea3ecd8b Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sat, 14 May 2022 15:08:13 +0200
Subject: [PATCH 23/23] Added progress bar (#363)

---
 .../base-components.component.html            |  7 ++++
 .../base-components/base-components.module.ts |  7 ++--
 .../progressbar/progressbar.component.html    |  7 ++++
 .../progressbar/progressbar.component.scss    | 35 +++++++++++++++++++
 .../progressbar/progressbar.component.spec.ts | 25 +++++++++++++
 .../progressbar/progressbar.component.ts      | 12 +++++++
 .../progressbar/progressbar.module.ts         | 17 +++++++++
 7 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 src/core/components/progressbar/progressbar.component.html
 create mode 100644 src/core/components/progressbar/progressbar.component.scss
 create mode 100644 src/core/components/progressbar/progressbar.component.spec.ts
 create mode 100644 src/core/components/progressbar/progressbar.component.ts
 create mode 100644 src/core/components/progressbar/progressbar.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index c2b20396..5acf8f94 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -97,6 +97,13 @@ <h2>Buttons - Text only</h2>
   <design-button-text [disabled]="true" flavor="info" class="component">
     Info disabled
   </design-button-text>
+
 </div>
+
+<div class="componentContainer">
+  <h2>Progressbar</h2>
+  <design-progressbar></design-progressbar>
+  <design-progressbar value="50"></design-progressbar>
+  <design-progressbar value="0"></design-progressbar>
 </div>
 <!-- Cloudflare trigger -->
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index 5f0daab6..ad75c8b0 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -1,3 +1,4 @@
+import { ProgressbarModule } from './../../core/components/progressbar/progressbar.module';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -7,17 +8,17 @@ import {ButtonModule} from "../../core/components/buttons/button/button.module";
 import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module";
 import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
 
-
 @NgModule({
   declarations: [
-    BaseComponentsComponent
+    BaseComponentsComponent,
   ],
   imports: [
     CommonModule,
     BaseComponentsRoutingModule,
     ButtonModule,
     ButtonOutlineModule,
-    ButtonTextModule
+    ButtonTextModule,
+    ProgressbarModule
   ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/progressbar/progressbar.component.html b/src/core/components/progressbar/progressbar.component.html
new file mode 100644
index 00000000..3117e7f2
--- /dev/null
+++ b/src/core/components/progressbar/progressbar.component.html
@@ -0,0 +1,7 @@
+<div class="bar">
+  <p>{{value}}%</p>
+  <p class="desc"><ng-content></ng-content></p>
+<div class="p-bar">
+  <div class="p-bar-value" style="width:{{value}}%">&nbsp;</div>
+</div>
+</div>
diff --git a/src/core/components/progressbar/progressbar.component.scss b/src/core/components/progressbar/progressbar.component.scss
new file mode 100644
index 00000000..7ea0234a
--- /dev/null
+++ b/src/core/components/progressbar/progressbar.component.scss
@@ -0,0 +1,35 @@
+@import 'theme-colors';
+
+
+p{
+  text-align: center;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  font-size: 1.2rem;
+  color: white;
+}
+.bar{
+  margin: 4px;
+  padding: 8px;
+}
+.desc{
+  font-size: 1rem;
+  color: grey;
+  margin-top: 0px;
+  margin-bottom: 4px;
+}
+
+.p-bar{
+  height: 1.8vh;
+  width: 100%;
+  border-radius: 100vw;
+  background-color: white;
+  margin-top: 5px;
+  overflow: hidden;
+}
+.p-bar-value{
+  height: 100%;
+  background-color: $primary-default;
+  width: 100%;
+  border-radius: 100px 0px 0px 100px;
+}
diff --git a/src/core/components/progressbar/progressbar.component.spec.ts b/src/core/components/progressbar/progressbar.component.spec.ts
new file mode 100644
index 00000000..6d3c3210
--- /dev/null
+++ b/src/core/components/progressbar/progressbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgressbarComponent } from './progressbar.component';
+
+describe('ProgressbarComponent', () => {
+  let component: ProgressbarComponent;
+  let fixture: ComponentFixture<ProgressbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProgressbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProgressbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/core/components/progressbar/progressbar.component.ts b/src/core/components/progressbar/progressbar.component.ts
new file mode 100644
index 00000000..4b26e379
--- /dev/null
+++ b/src/core/components/progressbar/progressbar.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'design-progressbar',
+  templateUrl: './progressbar.component.html',
+  styleUrls: ['./progressbar.component.scss']
+})
+export class ProgressbarComponent {
+
+  @Input() value = '100';
+
+}
diff --git a/src/core/components/progressbar/progressbar.module.ts b/src/core/components/progressbar/progressbar.module.ts
new file mode 100644
index 00000000..9ee55c77
--- /dev/null
+++ b/src/core/components/progressbar/progressbar.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProgressbarComponent } from './progressbar.component';
+
+
+@NgModule({
+  declarations: [
+    ProgressbarComponent
+  ],
+  exports: [
+    ProgressbarComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class ProgressbarModule { }