From 9b4bb9f0a3cd60f2044026d76b8aac52224042d8 Mon Sep 17 00:00:00 2001
From: wagonsoftware <68749617+wagonsoftware@users.noreply.github.com>
Date: Sat, 12 Nov 2022 23:44:03 +0300
Subject: [PATCH] button sizes

---
 .../ui/src/lib/button/button.component.html   |  2 +-
 .../ui/src/lib/button/button.component.scss   | 25 ++++++++++++++++---
 .../ui/src/lib/button/button.component.ts     |  9 +++++--
 .../ui/src/lib/button/button.interface.ts     |  8 ++----
 src/_themes.scss                              |  1 +
 .../game-page/game-page.component.html        |  5 +++-
 6 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/projects/ui/src/lib/button/button.component.html b/projects/ui/src/lib/button/button.component.html
index e970e42..779e4a4 100644
--- a/projects/ui/src/lib/button/button.component.html
+++ b/projects/ui/src/lib/button/button.component.html
@@ -1,3 +1,3 @@
-<button [attr.data-appearance]="appearance">
+<button [attr.data-appearance]="appearance" [attr.data-size]="size">
   <ng-content></ng-content>
 </button>
diff --git a/projects/ui/src/lib/button/button.component.scss b/projects/ui/src/lib/button/button.component.scss
index 771c820..3dca73e 100644
--- a/projects/ui/src/lib/button/button.component.scss
+++ b/projects/ui/src/lib/button/button.component.scss
@@ -2,11 +2,9 @@
   display: block;
 
   button {
-    padding: var(--sk-gap-m) var(--sk-gap-xl);
     display: flex;
     align-items: center;
     gap: var(--sk-gap-m);
-    border-radius: var(--sk-br-m);
     border: none;
     cursor: pointer;
     font-size: 1rem;
@@ -18,6 +16,7 @@
       opacity: 0.9;
     }
 
+    // Appearance
     &[data-appearance="default"], &[data-appearance="primary"] {
       background-color: var(--sk-primary-accent);
       color: #fff;
@@ -38,13 +37,33 @@
       color: #fff;
       background-color: transparent;
     }
+
+    // Size
+    &[data-size="small"] {
+      padding: var(--sk-gap-s) var(--sk-gap-l);
+      border-radius: var(--sk-br-m);
+    }
+    &[data-size="default"] {
+      padding: var(--sk-gap-m) var(--sk-gap-xl);
+      border-radius: var(--sk-br-m);
+    }
+    &[data-size="medium"] {
+      padding: var(--sk-gap-l) var(--sk-gap-xl);
+      border-radius: var(--sk-br-l);
+      gap: var(--sk-gap-l);
+    }
+    &[data-size="large"] {
+      padding: var(--sk-gap-xl) var(--sk-gap-xxxl);
+      border-radius: var(--sk-br-xl);
+      gap: var(--sk-gap-xl);
+    }
   }
 }
 
 :host::ng-deep {
 
   button {
-    &[data-appearance="default"], &[data-appearance="primary"] {
+    &[data-appearance="default"], &[data-appearance="primary"], &[data-appearance="secondary"]  {
 
       skirda-icon ng-icon {
         color: #fff!important;
diff --git a/projects/ui/src/lib/button/button.component.ts b/projects/ui/src/lib/button/button.component.ts
index 46a7e6e..303e321 100644
--- a/projects/ui/src/lib/button/button.component.ts
+++ b/projects/ui/src/lib/button/button.component.ts
@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ContentChild, Input } from '@angular/core';
+import { IconComponent } from '../icon/icon.component';
+import { ButtonAppearance, ButtonSize } from './button.interface'
 
 @Component({
   selector: 'skirda-button',
@@ -6,7 +8,10 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./button.component.scss'],
 })
 export class ButtonComponent {
-  @Input() appearance: string = 'default';
+  @ContentChild(IconComponent) icon!: IconComponent
+  @Input() appearance: ButtonAppearance = 'default';
+  @Input() size: ButtonSize = 'default'
+
 
   constructor() {}
 }
diff --git a/projects/ui/src/lib/button/button.interface.ts b/projects/ui/src/lib/button/button.interface.ts
index 5cbe392..bced259 100644
--- a/projects/ui/src/lib/button/button.interface.ts
+++ b/projects/ui/src/lib/button/button.interface.ts
@@ -1,6 +1,2 @@
-export type ButtonAppearance =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'outline'
-  | 'flat';
+export type ButtonAppearance = 'default' | 'primary' | 'secondary' | 'outline' | 'flat';
+export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
diff --git a/src/_themes.scss b/src/_themes.scss
index 3605954..cc5681a 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -145,4 +145,5 @@
   --sk-br-s: 0.25rem;
   --sk-br-m: 0.5rem;
   --sk-br-l: 0.75rem;
+  --sk-br-xl: 1rem;
 }
diff --git a/src/app/components/main/sections/game-page/game-page.component.html b/src/app/components/main/sections/game-page/game-page.component.html
index d568b22..2b7577c 100644
--- a/src/app/components/main/sections/game-page/game-page.component.html
+++ b/src/app/components/main/sections/game-page/game-page.component.html
@@ -41,7 +41,10 @@
           <skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
         </div>
       </div>
-      <skirda-heading size="1">Play</skirda-heading>
+      <skirda-button size="large" appearance="secondary">
+        <skirda-icon name="play" size="32"></skirda-icon>
+        <skirda-heading size="1">Play</skirda-heading>
+      </skirda-button>
     </div>
   </div>
 </div>