From cd9957332275012dd37c4462b261294f1a98b44d Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 12 Sep 2021 22:20:29 +0200
Subject: [PATCH 01/42] #260 added theme colors

---
 src/app/design/_theme-colors.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/app/design/_theme-colors.scss

diff --git a/src/app/design/_theme-colors.scss b/src/app/design/_theme-colors.scss
new file mode 100644
index 00000000..285db322
--- /dev/null
+++ b/src/app/design/_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 626d36b4162145cbe352af212967de570e1f081b Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 13:35:37 +0200
Subject: [PATCH 02/42] created new component

---
 src/app/app.module.ts                         |  4 +-
 .../styled-button.component.html              |  1 +
 .../styled-button.component.scss              | 57 +++++++++++++++++++
 .../styled-button.component.spec.ts           | 25 ++++++++
 .../styled-button/styled-button.component.ts  | 15 +++++
 5 files changed, 101 insertions(+), 1 deletion(-)
 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/app.module.ts b/src/app/app.module.ts
index 54ad8725..0c1dceb2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -45,6 +45,7 @@ import { DesktopDeviceResolver } from './desktop/desktop-device.resolver';
 import { EditorComponent } from './desktop/windows/editor/editor.component';
 import { FileManagerComponent } from './desktop/windows/file-manager/file-manager.component';
 import { ContextMenuModule } from 'ngx-contextmenu';
+import { StyledButtonComponent } from './styled-button/styled-button.component';
 // tslint:enable:max-line-length
 
 const routes: Routes = [
@@ -96,7 +97,8 @@ const routes: Routes = [
     WalletAppTransactionComponent,
     HardwareShopSidebarComponent,
     EditorComponent,
-    FileManagerComponent
+    FileManagerComponent,
+    StyledButtonComponent
   ],
   imports: [
     RouterModule.forRoot(routes),
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..0a956af6
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -0,0 +1 @@
+<p>styled-button works!</p>
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..6d37a6e5
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -0,0 +1,57 @@
+@import '../theme-colors';
+button.primary{
+  color: #2F2F36;
+  background: $primary-default;
+  	&:disabled{
+      background-color: $primary-disabled;
+    }
+    &:hover{
+      background-color: $primary-hover;
+      color: white;
+    }
+}
+
+button.success{
+  color: #2F2F36;
+  background: $success-default;
+  	&:disabled{
+      background-color: $success-disabled;
+    }
+    &:hover{
+      background-color: $success-hover;
+      color: white;
+    }
+}
+button.warning{
+  color: #2F2F36;
+  background: $warning-default;
+  	&:disabled{
+      background-color: $warning-disabled;
+    }
+    &:hover{
+      background-color: $warning-hover;
+      color: white;
+    }
+}
+button.error{
+  color: #2F2F36;
+  background: $error-default;
+  	&:disabled{
+      background-color: $error-disabled;
+    }
+    &:hover{
+      background-color: $error-hover;
+      color: white;
+    }
+}
+button.info{
+  color: #2F2F36;
+  background: $info-default;
+  	&:disabled{
+      background-color: $info-disabled;
+    }
+    &:hover{
+      background-color: $info-hover;
+      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..9395e6a6
--- /dev/null
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-styled-button',
+  templateUrl: './styled-button.component.html',
+  styleUrls: ['./styled-button.component.scss']
+})
+export class StyledButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

From d6d810b764250506a3b22af77528873eb6699958 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 13:38:02 +0200
Subject: [PATCH 03/42] added logic and StandartStyle Enum

---
 src/app/design/StandartStyle.ts               |  7 +++++
 .../styled-button/styled-button.component.ts  | 28 +++++++++++++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/app/design/StandartStyle.ts

diff --git a/src/app/design/StandartStyle.ts b/src/app/design/StandartStyle.ts
new file mode 100644
index 00000000..3ea23ebd
--- /dev/null
+++ b/src/app/design/StandartStyle.ts
@@ -0,0 +1,7 @@
+enum StandardStyle {
+  Primary,
+  Success,
+  Warning,
+  Error,
+  Info
+}
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 9395e6a6..57a8e2a6 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,15 +1,37 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, Input, OnInit } from '@angular/core';
 @Component({
   selector: 'app-styled-button',
   templateUrl: './styled-button.component.html',
   styleUrls: ['./styled-button.component.scss']
 })
 export class StyledButtonComponent implements OnInit {
+  constructor(ststy: StandardStyle) {
+    switch (ststy) {
+      case StandardStyle.Primary:
+        break;
+      case StandardStyle.Warning:
+        break;
+      case StandardStyle.Error:
+        break;
+      case StandardStyle.Success:
+        break;
+      case StandardStyle.Info:
+        break;
+      default:
+        this.buttonClass = 'primary';
+        break;
+    }
+  }
+
+  @Input() disabled = false;
 
-  constructor() { }
 
+  buttonClass = 'primary';
   ngOnInit(): void {
+    throw new Error('Method not implemented.');
   }
+  @Input() onClick: (event: Event) => void = () => {};
+
+
 
 }

From ff2bb8e4b7db1809f2c37e87476307060852ff2a Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 13:39:12 +0200
Subject: [PATCH 04/42] added html

---
 src/app/design/styled-button/styled-button.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
index 0a956af6..21bb46cc 100644
--- a/src/app/design/styled-button/styled-button.component.html
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -1 +1 @@
-<p>styled-button works!</p>
+<button [disabled]="disabled" (click)="onClick"><ng-content></ng-content></button>

From 4faddaf2de1d3984f3f084f263a09357794b3d85 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 13:55:40 +0200
Subject: [PATCH 05/42] added class

---
 src/app/design/styled-button/styled-button.component.html | 2 +-
 src/app/design/styled-button/styled-button.component.ts   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
index 21bb46cc..6e7c5ac9 100644
--- a/src/app/design/styled-button/styled-button.component.html
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -1 +1 @@
-<button [disabled]="disabled" (click)="onClick"><ng-content></ng-content></button>
+<button [disabled]="disabled" (click)="onClick" class="{{buttonClass}}"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 57a8e2a6..a30b25f9 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -8,14 +8,19 @@ export class StyledButtonComponent implements OnInit {
   constructor(ststy: StandardStyle) {
     switch (ststy) {
       case StandardStyle.Primary:
+        this.buttonClass = 'primary';
         break;
       case StandardStyle.Warning:
+        this.buttonClass = 'warning';
         break;
       case StandardStyle.Error:
+        this.buttonClass = 'error';
         break;
       case StandardStyle.Success:
+        this.buttonClass = 'success';
         break;
       case StandardStyle.Info:
+        this.buttonClass = 'info';
         break;
       default:
         this.buttonClass = 'primary';

From 9e3d0b4f22ac3ac0686482d75f31881cd9426656 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 14:02:30 +0200
Subject: [PATCH 06/42] changed component structure

---
 .../styled-button.component.html              |  2 +-
 .../styled-button/styled-button.component.ts  | 26 +------------------
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
index 6e7c5ac9..f031308f 100644
--- a/src/app/design/styled-button/styled-button.component.html
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -1 +1 @@
-<button [disabled]="disabled" (click)="onClick" class="{{buttonClass}}"><ng-content></ng-content></button>
+<button [disabled]="disabled" (click)="onClick" class="{{styleClass}}"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index a30b25f9..07c35671 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -5,38 +5,14 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./styled-button.component.scss']
 })
 export class StyledButtonComponent implements OnInit {
-  constructor(ststy: StandardStyle) {
-    switch (ststy) {
-      case StandardStyle.Primary:
-        this.buttonClass = 'primary';
-        break;
-      case StandardStyle.Warning:
-        this.buttonClass = 'warning';
-        break;
-      case StandardStyle.Error:
-        this.buttonClass = 'error';
-        break;
-      case StandardStyle.Success:
-        this.buttonClass = 'success';
-        break;
-      case StandardStyle.Info:
-        this.buttonClass = 'info';
-        break;
-      default:
-        this.buttonClass = 'primary';
-        break;
-    }
-  }
 
   @Input() disabled = false;
+  @Input() styleClass: string;
 
-
-  buttonClass = 'primary';
   ngOnInit(): void {
     throw new Error('Method not implemented.');
   }
   @Input() onClick: (event: Event) => void = () => {};
 
 
-
 }

From 28de0bbe183b5b1f4d153ff294f682ec825538fc Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 14:06:17 +0200
Subject: [PATCH 07/42] removed useless file StandartStyle.ts

---
 src/app/design/StandartStyle.ts | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 src/app/design/StandartStyle.ts

diff --git a/src/app/design/StandartStyle.ts b/src/app/design/StandartStyle.ts
deleted file mode 100644
index 3ea23ebd..00000000
--- a/src/app/design/StandartStyle.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-enum StandardStyle {
-  Primary,
-  Success,
-  Warning,
-  Error,
-  Info
-}

From 46ab827e04ec8e4d22ef7a02d802773ad22fc3b7 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 14:09:26 +0200
Subject: [PATCH 08/42] fixed naming issue

---
 src/app/design/styled-button/styled-button.component.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 6d37a6e5..cde45682 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -33,14 +33,14 @@ button.warning{
       color: white;
     }
 }
-button.error{
+button.danger{
   color: #2F2F36;
-  background: $error-default;
+  background: $danger-default;
   	&:disabled{
-      background-color: $error-disabled;
+      background-color: $danger-disabled;
     }
     &:hover{
-      background-color: $error-hover;
+      background-color: $danger-hover;
       color: white;
     }
 }

From e90d379b755d02e1637ab9bd42018cbbd84cea03 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 14:12:25 +0200
Subject: [PATCH 09/42] removed useless onInit

---
 src/app/design/styled-button/styled-button.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 07c35671..b08095a0 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,10 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input} from '@angular/core';
 @Component({
   selector: 'app-styled-button',
   templateUrl: './styled-button.component.html',
   styleUrls: ['./styled-button.component.scss']
 })
-export class StyledButtonComponent implements OnInit {
+export class StyledButtonComponent {
 
   @Input() disabled = false;
   @Input() styleClass: string;

From 2cd273866b51bdc6e002817560e77e8e5e86ff14 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 14:16:17 +0200
Subject: [PATCH 10/42] readded onInit

---
 src/app/design/styled-button/styled-button.component.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index b08095a0..7495ffc4 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,17 +1,17 @@
-import { Component, Input} from '@angular/core';
+import { Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'app-styled-button',
   templateUrl: './styled-button.component.html',
   styleUrls: ['./styled-button.component.scss']
 })
-export class StyledButtonComponent {
+export class StyledButtonComponent implements OnInit {
 
   @Input() disabled = false;
   @Input() styleClass: string;
+  ngOnInit() {
 
-  ngOnInit(): void {
-    throw new Error('Method not implemented.');
   }
+
   @Input() onClick: (event: Event) => void = () => {};
 
 

From 0275188718c23207e6d5dae881cdf890eca65fc4 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sat, 18 Sep 2021 14:31:47 +0200
Subject: [PATCH 11/42] fixed bug

---
 src/app/app.module.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0c1dceb2..54ad8725 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -45,7 +45,6 @@ import { DesktopDeviceResolver } from './desktop/desktop-device.resolver';
 import { EditorComponent } from './desktop/windows/editor/editor.component';
 import { FileManagerComponent } from './desktop/windows/file-manager/file-manager.component';
 import { ContextMenuModule } from 'ngx-contextmenu';
-import { StyledButtonComponent } from './styled-button/styled-button.component';
 // tslint:enable:max-line-length
 
 const routes: Routes = [
@@ -97,8 +96,7 @@ const routes: Routes = [
     WalletAppTransactionComponent,
     HardwareShopSidebarComponent,
     EditorComponent,
-    FileManagerComponent,
-    StyledButtonComponent
+    FileManagerComponent
   ],
   imports: [
     RouterModule.forRoot(routes),

From 8d02ffc1919e147b57e6310c91ac06cec1ddd92b Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 00:05:18 +0200
Subject: [PATCH 12/42] removed empty on init

---
 src/app/design/styled-button/styled-button.component.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 7495ffc4..8fda5089 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -4,13 +4,11 @@ import { Component, Input, OnInit} from '@angular/core';
   templateUrl: './styled-button.component.html',
   styleUrls: ['./styled-button.component.scss']
 })
-export class StyledButtonComponent implements OnInit {
+export class StyledButtonComponent {
 
   @Input() disabled = false;
   @Input() styleClass: string;
-  ngOnInit() {
 
-  }
 
   @Input() onClick: (event: Event) => void = () => {};
 

From 3dc6f54beb2b3e78eec9bc663b313d1db4c42f14 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sun, 19 Sep 2021 00:03:40 +0200
Subject: [PATCH 13/42] Update
 src/app/design/styled-button/styled-button.component.ts suggested by Marcel
 edited "Style-Class-Arguments"

Co-authored-by: Marcel <34819524+MarcelCoding@users.noreply.github.com>
---
 src/app/design/styled-button/styled-button.component.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 8fda5089..d2c1a52b 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,4 +1,5 @@
-import { Component, Input, OnInit} from '@angular/core';
+import { Component, Input } from '@angular/core';
+
 @Component({
   selector: 'app-styled-button',
   templateUrl: './styled-button.component.html',
@@ -7,10 +8,7 @@ import { Component, Input, OnInit} from '@angular/core';
 export class StyledButtonComponent {
 
   @Input() disabled = false;
-  @Input() styleClass: string;
-
+  @Input() styleClass: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
 
   @Input() onClick: (event: Event) => void = () => {};
-
-
 }

From cc507a9ab3963a8d69625c39fd5cc3f14129b060 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 00:09:47 +0200
Subject: [PATCH 14/42] made scss prettier

---
 .../styled-button.component.scss              | 94 +++++++++++--------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index cde45682..288c02c0 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,57 +1,71 @@
 @import '../theme-colors';
-button.primary{
+
+button.primary {
   color: #2F2F36;
   background: $primary-default;
-  	&:disabled{
-      background-color: $primary-disabled;
-    }
-    &:hover{
-      background-color: $primary-hover;
-      color: white;
-    }
+
+  &:disabled {
+    background-color: $primary-disabled;
+  }
+
+  &:hover {
+    background-color: $primary-hover;
+    color: white;
+  }
 }
 
-button.success{
+button.success {
   color: #2F2F36;
   background: $success-default;
-  	&:disabled{
-      background-color: $success-disabled;
-    }
-    &:hover{
-      background-color: $success-hover;
-      color: white;
-    }
+
+  &:disabled {
+    background-color: $success-disabled;
+  }
+
+  &:hover {
+    background-color: $success-hover;
+    color: white;
+  }
 }
-button.warning{
+
+button.warning {
   color: #2F2F36;
   background: $warning-default;
-  	&:disabled{
-      background-color: $warning-disabled;
-    }
-    &:hover{
-      background-color: $warning-hover;
-      color: white;
-    }
+
+  &:disabled {
+    background-color: $warning-disabled;
+  }
+
+  &:hover {
+    background-color: $warning-hover;
+    color: white;
+  }
 }
-button.danger{
+
+button.danger {
   color: #2F2F36;
   background: $danger-default;
-  	&:disabled{
-      background-color: $danger-disabled;
-    }
-    &:hover{
-      background-color: $danger-hover;
-      color: white;
-    }
+
+  &:disabled {
+    background-color: $danger-disabled;
+  }
+
+  &:hover {
+    background-color: $danger-hover;
+    color: white;
+  }
 }
-button.info{
+
+button.info {
   color: #2F2F36;
   background: $info-default;
-  	&:disabled{
-      background-color: $info-disabled;
-    }
-    &:hover{
-      background-color: $info-hover;
-      color: white;
-    }
+
+  &:disabled {
+    background-color: $info-disabled;
+  }
+
+  &:hover {
+    background-color: $info-hover;
+    color: white;
+  }
 }

From 9bfd3ea6742100c78826b400e50dcfa0a65ebe09 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sat, 18 Sep 2021 14:51:12 +0200
Subject: [PATCH 15/42] Apply suggestions from Marcel

Co-authored-by: Marcel <34819524+MarcelCoding@users.noreply.github.com>
---
 src/app/design/_theme-colors.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/design/_theme-colors.scss b/src/app/design/_theme-colors.scss
index 285db322..f923211d 100644
--- a/src/app/design/_theme-colors.scss
+++ b/src/app/design/_theme-colors.scss
@@ -1,23 +1,23 @@
 /*primary*/
 $primary-default: #2ECC70;
 $primary-hover: #1F8C4C;
-$primary-disabled:#2E473E;
+$primary-disabled: #2E473E;
 /*success*/
 $success-default: #3ABB18;
 $success-hover: #277A10;
-$success-disabled:#2F5629;
+$success-disabled: #2F5629;
 /*warning*/
 $warning-default: #F1C30E;
 $warning-hover: #B3910B;
-$warning-disabled:#675926;
+$warning-disabled: #675926;
 /*danger*/
 $danger-default: #F00040;
 $danger-hover: #B0002F;
-$danger-disabled:#671E35;
+$danger-disabled: #671E35;
 /*info*/
 $info-default: #3281F6;
 $info-hover: #245EB5;
-$info-disabled:#2D456C;
+$info-disabled: #2D456C;
 /*etc*/
 $logo-crypt: #27A036
 /* ISSUE : #260 */

From 26aa0f1f820709b01fb2c6a35966edd552680412 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 12:42:28 +0200
Subject: [PATCH 16/42] changed theme colors file location

---
 src/global-styles/_theme-colors.scss | 24 ++++++++++++++++++++++++
 src/styles.scss                      |  1 +
 2 files changed, 25 insertions(+)
 create mode 100644 src/global-styles/_theme-colors.scss

diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss
new file mode 100644
index 00000000..285db322
--- /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 */
+
diff --git a/src/styles.scss b/src/styles.scss
index 412222f6..d138c57f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,7 @@
 @import "variables";
 @import "controls";
 @import "context-menu";
+@import "theme-colors"
 
 app-root {
   width: 100%;

From b0dad58273d595f8a746d6f8f17b2c2c0a836e0c Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 12:45:37 +0200
Subject: [PATCH 17/42] deleted duplicate theme colors

---
 src/app/design/_theme-colors.scss | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 src/app/design/_theme-colors.scss

diff --git a/src/app/design/_theme-colors.scss b/src/app/design/_theme-colors.scss
deleted file mode 100644
index f923211d..00000000
--- a/src/app/design/_theme-colors.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*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 66a445d6b227f66216217ab6ffc7592803a59153 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 12:46:07 +0200
Subject: [PATCH 18/42] removed false import

---
 src/app/design/styled-button/styled-button.component.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 288c02c0..68112ce1 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,4 +1,3 @@
-@import '../theme-colors';
 
 button.primary {
   color: #2F2F36;

From 9a7875e9d2dd1d411c02c17eb03085291be6db33 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 12:49:00 +0200
Subject: [PATCH 19/42] fixed typo

---
 src/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles.scss b/src/styles.scss
index d138c57f..0a886467 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,7 +3,7 @@
 @import "variables";
 @import "controls";
 @import "context-menu";
-@import "theme-colors"
+@import "theme-colors";
 
 app-root {
   width: 100%;

From 85b5f41b1f0f440a6df3f00aee0b10983401456d Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 12:57:35 +0200
Subject: [PATCH 20/42] importet variables

---
 src/app/design/styled-button/styled-button.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 68112ce1..d653cd1a 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,4 +1,4 @@
-
+@import 'variables'
 button.primary {
   color: #2F2F36;
   background: $primary-default;

From 4a29d94509828e3eb2a336f93cd2cfc1b031cdda Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 12:57:54 +0200
Subject: [PATCH 21/42] changed imports

---
 src/global-styles/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/global-styles/_variables.scss b/src/global-styles/_variables.scss
index 0465370e..6c19f561 100644
--- a/src/global-styles/_variables.scss
+++ b/src/global-styles/_variables.scss
@@ -1,5 +1,5 @@
 //  GLOBAL COLORS  //
-
+@import 'theme-colors'
 $green: #64dd17;
 $green-dark: darken($green, 10%);
 $red: #dd2c00;

From 1fdbd5f28fc57928e963195fbba04f4cfe37209c Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 13:01:06 +0200
Subject: [PATCH 22/42] fixed scss  import

---
 src/app/design/styled-button/styled-button.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index d653cd1a..0987befc 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,4 +1,4 @@
-@import 'variables'
+@import 'variables';
 button.primary {
   color: #2F2F36;
   background: $primary-default;

From 0943e7df3f5c7a21020eef92b975bf5fae5b1a07 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 13:00:45 +0200
Subject: [PATCH 23/42] fixed import

---
 src/global-styles/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/global-styles/_variables.scss b/src/global-styles/_variables.scss
index 6c19f561..ef9b1090 100644
--- a/src/global-styles/_variables.scss
+++ b/src/global-styles/_variables.scss
@@ -1,5 +1,5 @@
 //  GLOBAL COLORS  //
-@import 'theme-colors'
+@import 'theme-colors';
 $green: #64dd17;
 $green-dark: darken($green, 10%);
 $red: #dd2c00;

From 28bf7c91d8f5ff1cd9b26ef4cb3cc25e5f8cec1c Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 13:53:17 +0200
Subject: [PATCH 24/42] removed useless import

---
 src/global-styles/_variables.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/global-styles/_variables.scss b/src/global-styles/_variables.scss
index ef9b1090..fafb17b2 100644
--- a/src/global-styles/_variables.scss
+++ b/src/global-styles/_variables.scss
@@ -1,5 +1,4 @@
 //  GLOBAL COLORS  //
-@import 'theme-colors';
 $green: #64dd17;
 $green-dark: darken($green, 10%);
 $red: #dd2c00;

From 815a64c51ef4803ca9b73744c64036cf59a6835f Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 13:57:27 +0200
Subject: [PATCH 25/42] switched import from variables to theme colors

---
 src/app/design/styled-button/styled-button.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 0987befc..3ec9e459 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'theme-colors';
 button.primary {
   color: #2F2F36;
   background: $primary-default;

From d971209420b90fdc2445d33646550ba44fe2f996 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 14:51:59 +0200
Subject: [PATCH 26/42] made theme colors import more optional

---
 src/styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles.scss b/src/styles.scss
index 0a886467..412222f6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,7 +3,6 @@
 @import "variables";
 @import "controls";
 @import "context-menu";
-@import "theme-colors";
 
 app-root {
   width: 100%;

From d00acb622864ecb0c85fc4200a420fb3e92e8528 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 15:01:13 +0200
Subject: [PATCH 27/42] changed the way onClick works to event emitter

---
 src/app/design/styled-button/styled-button.component.html | 2 +-
 src/app/design/styled-button/styled-button.component.ts   | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
index f031308f..3b1e4f4b 100644
--- a/src/app/design/styled-button/styled-button.component.html
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -1 +1 @@
-<button [disabled]="disabled" (click)="onClick" class="{{styleClass}}"><ng-content></ng-content></button>
+<button [disabled]="disabled" (click)="onClick.emit($event)" class="{{styleClass}}"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index d2c1a52b..4c7cedc4 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,5 +1,4 @@
-import { Component, Input } from '@angular/core';
-
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
   selector: 'app-styled-button',
   templateUrl: './styled-button.component.html',
@@ -9,6 +8,9 @@ export class StyledButtonComponent {
 
   @Input() disabled = false;
   @Input() styleClass: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
+  // tslint:disable-next-line: no-output-on-prefix
+  @Output() onClick: EventEmitter<any> = new EventEmitter();
+
+  // @Input() onClick: (event: Event) => void = () => {};
 
-  @Input() onClick: (event: Event) => void = () => {};
 }

From 795897721b1b64774b927ec972b772339408d5f4 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Sun, 19 Sep 2021 15:01:33 +0200
Subject: [PATCH 28/42] updated styling

---
 src/global-styles/_theme-colors.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/global-styles/_theme-colors.scss b/src/global-styles/_theme-colors.scss
index 285db322..f923211d 100644
--- a/src/global-styles/_theme-colors.scss
+++ b/src/global-styles/_theme-colors.scss
@@ -1,23 +1,23 @@
 /*primary*/
 $primary-default: #2ECC70;
 $primary-hover: #1F8C4C;
-$primary-disabled:#2E473E;
+$primary-disabled: #2E473E;
 /*success*/
 $success-default: #3ABB18;
 $success-hover: #277A10;
-$success-disabled:#2F5629;
+$success-disabled: #2F5629;
 /*warning*/
 $warning-default: #F1C30E;
 $warning-hover: #B3910B;
-$warning-disabled:#675926;
+$warning-disabled: #675926;
 /*danger*/
 $danger-default: #F00040;
 $danger-hover: #B0002F;
-$danger-disabled:#671E35;
+$danger-disabled: #671E35;
 /*info*/
 $info-default: #3281F6;
 $info-hover: #245EB5;
-$info-disabled:#2D456C;
+$info-disabled: #2D456C;
 /*etc*/
 $logo-crypt: #27A036
 /* ISSUE : #260 */

From 562e6176b6e0f33745aadc12d9083d3981920970 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Thu, 14 Oct 2021 21:07:29 +0200
Subject: [PATCH 29/42] added imports

---
 src/app/app.module.ts                                   | 4 +++-
 src/app/design/styled-button/styled-button.component.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 54ad8725..70a202d2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -45,6 +45,7 @@ import { DesktopDeviceResolver } from './desktop/desktop-device.resolver';
 import { EditorComponent } from './desktop/windows/editor/editor.component';
 import { FileManagerComponent } from './desktop/windows/file-manager/file-manager.component';
 import { ContextMenuModule } from 'ngx-contextmenu';
+import { StyledButtonComponent } from './design/styled-button/styled-button.component';
 // tslint:enable:max-line-length
 
 const routes: Routes = [
@@ -96,7 +97,8 @@ const routes: Routes = [
     WalletAppTransactionComponent,
     HardwareShopSidebarComponent,
     EditorComponent,
-    FileManagerComponent
+    FileManagerComponent,
+    StyledButtonComponent
   ],
   imports: [
     RouterModule.forRoot(routes),
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 4c7cedc4..42f07491 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
-  selector: 'app-styled-button',
+  selector: 'styled-button',
   templateUrl: './styled-button.component.html',
   styleUrls: ['./styled-button.component.scss']
 })

From 512c1f5887c22ba6f8cf426b0a986ff34db95829 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Thu, 14 Oct 2021 21:10:26 +0200
Subject: [PATCH 30/42] added spacing

---
 src/global-styles/_variables.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/global-styles/_variables.scss b/src/global-styles/_variables.scss
index fafb17b2..0465370e 100644
--- a/src/global-styles/_variables.scss
+++ b/src/global-styles/_variables.scss
@@ -1,4 +1,5 @@
 //  GLOBAL COLORS  //
+
 $green: #64dd17;
 $green-dark: darken($green, 10%);
 $red: #dd2c00;

From ed11d556d11f364d16eb44af459d71e0a4819cb1 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Thu, 14 Oct 2021 21:09:18 +0200
Subject: [PATCH 31/42] Apply some of the suggestions from code review

Co-authored-by: Marcel <34819524+MarcelCoding@users.noreply.github.com>
---
 src/app/design/styled-button/styled-button.component.html | 2 +-
 src/app/design/styled-button/styled-button.component.ts   | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
index 3b1e4f4b..cc28c5d8 100644
--- a/src/app/design/styled-button/styled-button.component.html
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -1 +1 @@
-<button [disabled]="disabled" (click)="onClick.emit($event)" class="{{styleClass}}"><ng-content></ng-content></button>
+<button [disabled]="disabled" (click)="onClick.emit($event)" [class]="styleClass"><ng-content></ng-content></button>
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 42f07491..9663f288 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -11,6 +11,5 @@ export class StyledButtonComponent {
   // tslint:disable-next-line: no-output-on-prefix
   @Output() onClick: EventEmitter<any> = new EventEmitter();
 
-  // @Input() onClick: (event: Event) => void = () => {};
 
 }

From 780f5d0d4e2aee97f1f81a50d0bcd0a40a719c70 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Thu, 14 Oct 2021 21:15:37 +0200
Subject: [PATCH 32/42] improved button styling

---
 src/app/design/styled-button/styled-button.component.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 3ec9e459..681edcba 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,4 +1,11 @@
 @import 'theme-colors';
+button{
+  padding: 10px;
+  border-radius: 10px;
+  margin-top: 8px;
+  width: 100%;
+  color: white;
+}
 button.primary {
   color: #2F2F36;
   background: $primary-default;

From 8bb1dc79eda3e67a4ea0980de13af204d7af8841 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Thu, 14 Oct 2021 21:20:24 +0200
Subject: [PATCH 33/42] improved button design

---
 src/app/design/styled-button/styled-button.component.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 681edcba..6902ace2 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -5,6 +5,8 @@ button{
   margin-top: 8px;
   width: 100%;
   color: white;
+  border: none;
+  font-size: 16px;
 }
 button.primary {
   color: #2F2F36;

From 302b7cbde4e5aed197218c2d0ce0cf4c2a19dd07 Mon Sep 17 00:00:00 2001
From: ClientCrash <clientcrashyt@gmail.com>
Date: Thu, 14 Oct 2021 21:27:15 +0200
Subject: [PATCH 34/42] added "app-" to StyledButtonComponent selector

---
 src/app/design/styled-button/styled-button.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index 9663f288..afd5db51 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 @Component({
-  selector: 'styled-button',
+  selector: 'app-styled-button',
   templateUrl: './styled-button.component.html',
   styleUrls: ['./styled-button.component.scss']
 })

From abff23e5a31857637367ea76162151a2a5fb13e6 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Thu, 14 Oct 2021 23:11:35 +0200
Subject: [PATCH 35/42] Create ComponentDocs.md

---
 ComponentDocs.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 ComponentDocs.md

diff --git a/ComponentDocs.md b/ComponentDocs.md
new file mode 100644
index 00000000..1ddb4c05
--- /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()" styleClass="primary" [disabled]="!form.valid">Log in</app-styled-button>
+ ```
+
+---
+
+## Radio Button
+
+### Example
+
+```html
+// ADD EXAMPLES FOR ALL THE DEFAULT COMPONENTS //
+```
+
+---

From ae1c23fc5413019fae24d6d423ab0b40634a3e2f Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Mon, 28 Feb 2022 02:14:51 +0100
Subject: [PATCH 36/42] renamed styleClass to flavor

---
 src/app/design/styled-button/styled-button.component.html | 2 +-
 src/app/design/styled-button/styled-button.component.ts   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.html b/src/app/design/styled-button/styled-button.component.html
index cc28c5d8..a8821237 100644
--- a/src/app/design/styled-button/styled-button.component.html
+++ b/src/app/design/styled-button/styled-button.component.html
@@ -1 +1 @@
-<button [disabled]="disabled" (click)="onClick.emit($event)" [class]="styleClass"><ng-content></ng-content></button>
+<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.ts b/src/app/design/styled-button/styled-button.component.ts
index afd5db51..a8d18513 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -7,7 +7,9 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 export class StyledButtonComponent {
 
   @Input() disabled = false;
-  @Input() styleClass: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
+
+
+  @Input() flavor: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
   // tslint:disable-next-line: no-output-on-prefix
   @Output() onClick: EventEmitter<any> = new EventEmitter();
 

From 864759e17849e18c32e5ace9db8a717e1135b045 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sat, 5 Mar 2022 17:58:02 +0100
Subject: [PATCH 37/42] Update ComponentDocs.md

Co-authored-by: Marcel <34819524+MarcelCoding@users.noreply.github.com>
---
 ComponentDocs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ComponentDocs.md b/ComponentDocs.md
index 1ddb4c05..cbd08e27 100644
--- a/ComponentDocs.md
+++ b/ComponentDocs.md
@@ -15,7 +15,7 @@ Style classes :
 ### Example
 
 ```html
- <app-styled-button (click)="login()" styleClass="primary" [disabled]="!form.valid">Log in</app-styled-button>
+ <app-styled-button (click)="login()" flavor="primary" [disabled]="!form.valid">Log in</app-styled-button>
  ```
 
 ---

From 8bf6c5c103d05383061e51cbb2e6e6187b7c6ea0 Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sat, 5 Mar 2022 18:01:45 +0100
Subject: [PATCH 38/42] linted styled-button scss

---
 .../styled-button/styled-button.component.scss     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 6902ace2..13fe7e8b 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,5 +1,5 @@
-@import 'theme-colors';
-button{
+@import "theme-colors";
+button {
   padding: 10px;
   border-radius: 10px;
   margin-top: 8px;
@@ -9,7 +9,7 @@ button{
   font-size: 16px;
 }
 button.primary {
-  color: #2F2F36;
+  color: #2f2f36;
   background: $primary-default;
 
   &:disabled {
@@ -23,7 +23,7 @@ button.primary {
 }
 
 button.success {
-  color: #2F2F36;
+  color: #2f2f36;
   background: $success-default;
 
   &:disabled {
@@ -37,7 +37,7 @@ button.success {
 }
 
 button.warning {
-  color: #2F2F36;
+  color: #2f2f36;
   background: $warning-default;
 
   &:disabled {
@@ -51,7 +51,7 @@ button.warning {
 }
 
 button.danger {
-  color: #2F2F36;
+  color: #2f2f36;
   background: $danger-default;
 
   &:disabled {
@@ -65,7 +65,7 @@ button.danger {
 }
 
 button.info {
-  color: #2F2F36;
+  color: #2f2f36;
   background: $info-default;
 
   &:disabled {

From 951093ff95f7da0e3bae3eb92b47509fa04d81af Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sun, 6 Mar 2022 00:27:34 +0100
Subject: [PATCH 39/42] updated styled button scss

---
 .../styled-button.component.scss              | 82 ++++++-------------
 1 file changed, 25 insertions(+), 57 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index 13fe7e8b..b5ad4997 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -1,79 +1,47 @@
+@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;
-  margin-top: 8px;
   width: 100%;
   color: white;
   border: none;
   font-size: 16px;
-}
-button.primary {
-  color: #2f2f36;
-  background: $primary-default;
-
-  &:disabled {
-    background-color: $primary-disabled;
+  margin-right: 10px;
+  &:last-child {
+        margin-right: 0;
   }
 
-  &:hover {
-    background-color: $primary-hover;
-    color: white;
-  }
-}
 
-button.success {
-  color: #2f2f36;
-  background: $success-default;
+  @each $name,$colorsa in $flavors{
 
-  &:disabled {
-    background-color: $success-disabled;
-  }
+    &.#{$name} {
+      color: #2f2f36;
+      background: list.nth($colorsa, 1);
 
-  &:hover {
-    background-color: $success-hover;
-    color: white;
-  }
-}
+      &:disabled {
+        background-color: list.nth($colorsa, 3);
+      }
 
-button.warning {
-  color: #2f2f36;
-  background: $warning-default;
+      &:hover {
+        background-color: list.nth($colorsa, 2);
+        color: white;
+      }
+    }
 
-  &:disabled {
-    background-color: $warning-disabled;
-  }
 
-  &:hover {
-    background-color: $warning-hover;
-    color: white;
-  }
 }
 
-button.danger {
-  color: #2f2f36;
-  background: $danger-default;
 
-  &:disabled {
-    background-color: $danger-disabled;
-  }
-
-  &:hover {
-    background-color: $danger-hover;
-    color: white;
-  }
 }
 
-button.info {
-  color: #2f2f36;
-  background: $info-default;
 
-  &:disabled {
-    background-color: $info-disabled;
-  }
-
-  &:hover {
-    background-color: $info-hover;
-    color: white;
-  }
-}

From 5e0f2978f9c7181dff0a9557e45cf261e545779d Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sun, 6 Mar 2022 01:59:14 +0100
Subject: [PATCH 40/42] reformated styled button scss

---
 .../styled-button.component.scss              | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index b5ad4997..bd90fd84 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -2,11 +2,31 @@
 @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),
+  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 {
@@ -18,12 +38,10 @@ button {
   font-size: 16px;
   margin-right: 10px;
   &:last-child {
-        margin-right: 0;
+    margin-right: 0;
   }
 
-
-  @each $name,$colorsa in $flavors{
-
+  @each $name, $colorsa in $flavors {
     &.#{$name} {
       color: #2f2f36;
       background: list.nth($colorsa, 1);
@@ -37,11 +55,5 @@ button {
         color: white;
       }
     }
-
-
-}
-
-
+  }
 }
-
-

From 15f7ea8a6af661e4051ae29b5e315ee983f85e6c Mon Sep 17 00:00:00 2001
From: ClientCrash <40364569+ClientCrash@users.noreply.github.com>
Date: Sun, 6 Mar 2022 02:25:54 +0100
Subject: [PATCH 41/42] moved styled button component registration from app
 module to design module

---
 src/app/app.module.ts           | 4 +---
 src/app/design/design.module.ts | 5 +++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 70a202d2..54ad8725 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -45,7 +45,6 @@ import { DesktopDeviceResolver } from './desktop/desktop-device.resolver';
 import { EditorComponent } from './desktop/windows/editor/editor.component';
 import { FileManagerComponent } from './desktop/windows/file-manager/file-manager.component';
 import { ContextMenuModule } from 'ngx-contextmenu';
-import { StyledButtonComponent } from './design/styled-button/styled-button.component';
 // tslint:enable:max-line-length
 
 const routes: Routes = [
@@ -97,8 +96,7 @@ const routes: Routes = [
     WalletAppTransactionComponent,
     HardwareShopSidebarComponent,
     EditorComponent,
-    FileManagerComponent,
-    StyledButtonComponent
+    FileManagerComponent
   ],
   imports: [
     RouterModule.forRoot(routes),
diff --git a/src/app/design/design.module.ts b/src/app/design/design.module.ts
index 4d45823d..5971c073 100644
--- a/src/app/design/design.module.ts
+++ b/src/app/design/design.module.ts
@@ -3,12 +3,13 @@ import { CommonModule } from '@angular/common';
 import { ButtonComponent } from './button/button.component';
 import { TextFieldComponent } from './text-field/text-field.component';
 import { FormGroupComponent } from './form-group/form-group.component';
-
+import { StyledButtonComponent } from './styled-button/styled-button.component';
 @NgModule({
   declarations: [
     ButtonComponent,
     TextFieldComponent,
-    FormGroupComponent
+    FormGroupComponent,
+    StyledButtonComponent
   ],
   imports: [
     CommonModule

From 92399c21a231870e5c03fe5c6d630075cf5c9a06 Mon Sep 17 00:00:00 2001
From: Marcel <34819524+MarcelCoding@users.noreply.github.com>
Date: Sun, 6 Mar 2022 11:14:14 +0100
Subject: [PATCH 42/42] Slightly improved Button Component

---
 .../styled-button/styled-button.component.scss     |  8 ++++----
 .../styled-button/styled-button.component.ts       | 14 +++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/design/styled-button/styled-button.component.scss b/src/app/design/styled-button/styled-button.component.scss
index bd90fd84..1175d014 100644
--- a/src/app/design/styled-button/styled-button.component.scss
+++ b/src/app/design/styled-button/styled-button.component.scss
@@ -41,17 +41,17 @@ button {
     margin-right: 0;
   }
 
-  @each $name, $colorsa in $flavors {
+  @each $name, $colors in $flavors {
     &.#{$name} {
       color: #2f2f36;
-      background: list.nth($colorsa, 1);
+      background: list.nth($colors, 1);
 
       &:disabled {
-        background-color: list.nth($colorsa, 3);
+        background-color: list.nth($colors, 3);
       }
 
       &:hover {
-        background-color: list.nth($colorsa, 2);
+        background-color: list.nth($colors, 2);
         color: white;
       }
     }
diff --git a/src/app/design/styled-button/styled-button.component.ts b/src/app/design/styled-button/styled-button.component.ts
index a8d18513..f3521984 100644
--- a/src/app/design/styled-button/styled-button.component.ts
+++ b/src/app/design/styled-button/styled-button.component.ts
@@ -1,4 +1,7 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+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',
@@ -6,12 +9,9 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 })
 export class StyledButtonComponent {
 
-  @Input() disabled = false;
-
+  @Input() public disabled = false;
+  @Input() public flavor: ButtonFlavor = 'primary';
 
-  @Input() flavor: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
   // tslint:disable-next-line: no-output-on-prefix
-  @Output() onClick: EventEmitter<any> = new EventEmitter();
-
-
+  @Output() public onClick = new EventEmitter<MouseEvent>();
 }