projects/ui/src/lib/button/button.component.html

@@ -1,3 +1,3 @@
-<button [attr.data-appearance]="appearance">
+<button>
   <ng-content></ng-content>
 </button>

projects/ui/src/lib/button/button.component.scss

@@ -6,34 +6,14 @@
     display: flex;
     align-items: center;
     gap: var(--sk-gap-m);
-    border-radius: var(--sk-br-m);
+    background-color: var(--sk-accent);
     border: none;
+    border-radius: var(--sk-br-m);
     cursor: pointer;
-    font-weight: 500;
+    color: #fff;
 
     &:hover {
       opacity: 0.9;
     }
-
-    &[data-appearance="default"], &[data-appearance="primary"] {
-      background-color: var(--sk-primary);
-      color: #fff;
-    }
-
-    &[data-appearance="secondary"] {
-      background-color: var(--sk-secondary);
-      color: #fff;
-    }
-
-    &[data-appearance="outline"] {
-      color: #fff;
-      background-color: transparent;
-      box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
-    }
-
-    &[data-appearance="flat"] {
-      color: #fff;
-      background-color: transparent;
-    }
   }
 }

projects/ui/src/lib/button/button.component.ts

@@ -1,12 +1,15 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'skirda-button',
   templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss'],
+  styleUrls: ['./button.component.scss']
 })
-export class ButtonComponent {
+export class ButtonComponent implements OnInit {
-  @Input() appearance: string = 'default';
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
 
-  constructor() {}
 }

projects/ui/src/lib/game/game.component.html

@@ -6,5 +6,5 @@
     </div>
     <skirda-text>description</skirda-text>
   </div>
-  <skirda-icon name="play" size="16" (click)="run(game)" color="var(--sk-primary)"></skirda-icon>
+  <skirda-icon name="play" size="16" (click)="run(game)" color="var(--sk-accent)"></skirda-icon>
 </div>

projects/ui/src/lib/popup/popup.component.html

@@ -1,21 +0,0 @@
-<div class="popup-overlay" [ngClass]="{'shown': loaded, 'hiding': hiding}">
-  <div class="popup-window-wrapper">
-    <div class="popup-window">
-      <div class="popup-head">
-        <div class="head-title">Notification</div>
-        <div class="head-close" (click)="cancel.emit()">
-          <skirda-icon name="sign-out" size="18"></skirda-icon>
-        </div>
-      </div>
-
-      <div class="popup-body">
-        <ng-template skirdaPopup></ng-template>
-      </div>
-
-      <div class="popup-actions">
-        <skirda-button appearance="flat" (click)="cancel.emit()">Cancel</skirda-button>
-        <skirda-button (click)="confirm.emit()">Confirm</skirda-button>
-      </div>
-    </div>
-  </div>
-</div>

projects/ui/src/lib/popup/popup.component.scss

@@ -1,121 +0,0 @@
-:host {
-  position: absolute;
-
-  @keyframes show {
-    from {
-      translate: 0px 20px;
-      opacity: 0;
-    }
-    to {
-      translate: 0px 0px;
-      opacity: 1;
-    }
-  }
-
-  @keyframes hide {
-    from {
-      translate: 0px 0px;
-      opacity: 1;
-    }
-    to {
-      translate: 0px 20px;
-      opacity: 0;
-    }
-  }
-
-  @keyframes showOverlay {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes hideOverlay {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  .popup-overlay {
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: rgba(0,0,0,0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-
-    &.shown {
-      animation: showOverlay 0.2s ease 0s 1 forwards;
-
-      .popup-window-wrapper {
-        animation: show 0.3s ease 0.1s 1 forwards;
-      }
-    }
-    &.hiding {
-      animation: hideOverlay 0.3s ease 0s 1 forwards;
-
-      .popup-window-wrapper {
-        animation: hide 0.3s ease 0s 1 forwards;
-      }
-    }
-
-    .popup-window-wrapper {
-      width: 500px;
-      background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25));
-      padding: 1px;
-      border-radius: 8px;
-      overflow: hidden;
-      translate: 0px 20px;
-      opacity: 0;
-
-      .popup-window {
-        border-radius: 7px;
-        background-color: #222;
-
-        .popup-head {
-          padding: 1rem;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-
-          .head-title {
-            font-size: 1rem;
-            color: #aaa;
-          }
-
-          .head-close {
-            width: 1.125rem;
-            height: 1.125rem;
-            cursor: pointer;
-          }
-        }
-
-        .popup-body {
-          padding: 2rem;
-          text-align: center;
-          line-height: 140%;
-        }
-
-        .popup-actions {
-          border-top: 1px solid rgba(255, 255, 255, 0.1);
-          display: flex;
-          align-items: center;
-          padding: 1rem;
-          gap: 0.25rem;
-          justify-content: flex-end;
-        }
-      }
-    }
-  }
-}

projects/ui/src/lib/popup/popup.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PopupComponent } from './popup.component';
-
-describe('PopupComponent', () => {
-  let component: PopupComponent;
-  let fixture: ComponentFixture<PopupComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ PopupComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PopupComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

projects/ui/src/lib/popup/popup.component.ts

@@ -1,55 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  EventEmitter,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { PopupDirective } from './popup.directive';
-
-@Component({
-  selector: 'skirda-popup',
-  templateUrl: './popup.component.html',
-  styleUrls: ['./popup.component.scss'],
-})
-export class PopupComponent implements OnInit, AfterViewInit {
-  loaded: boolean = false;
-  hiding: boolean = false;
-  contentQueue?: TemplateRef<any>;
-
-  @Output() cancel: EventEmitter<void> = new EventEmitter();
-  @Output() confirm: EventEmitter<void> = new EventEmitter();
-
-  @ViewChild(PopupDirective) private popupContent!: PopupDirective;
-
-  constructor(private viewContainerRef: ViewContainerRef) {}
-
-  ngOnInit(): void {}
-
-  ngAfterViewInit(): void {
-    if (this.contentQueue) {
-      this.load(this.contentQueue);
-      this.contentQueue = undefined;
-    }
-  }
-
-  load(template?: TemplateRef<any>) {
-    this.loaded = true;
-
-    if (!template) return;
-    if (!this.popupContent) {
-      this.contentQueue = template;
-      return;
-    }
-
-    this.popupContent.viewContainerRef.createEmbeddedView(template);
-  }
-
-  hide() {
-    this.loaded = false;
-    this.hiding = true;
-  }
-}

projects/ui/src/lib/popup/popup.directive.spec.ts

@@ -1,8 +0,0 @@
-import { PopupDirective } from './popup.directive';
-
-describe('PopupDirective', () => {
-  it('should create an instance', () => {
-    const directive = new PopupDirective();
-    expect(directive).toBeTruthy();
-  });
-});

projects/ui/src/lib/popup/popup.directive.ts

@@ -1,8 +0,0 @@
-import { Directive, ViewContainerRef } from '@angular/core';
-
-@Directive({
-  selector: '[skirdaPopup]',
-})
-export class PopupDirective {
-  constructor(public viewContainerRef: ViewContainerRef) {}
-}

projects/ui/src/lib/popup/popup.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PopupComponent } from './popup.component';
-import { PopupDirective } from './popup.directive';
-import { ButtonModule } from '../button/button.module';
-import { IconModule } from '../icon/icon.module';
-
-@NgModule({
-  declarations: [PopupComponent, PopupDirective],
-  imports: [CommonModule, ButtonModule, IconModule],
-  exports: [PopupComponent, PopupDirective],
-})
-export class PopupModule {}

projects/ui/src/lib/popup/popup.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { PopupService } from './popup.service';
-
-describe('PopupService', () => {
-  let service: PopupService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(PopupService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

projects/ui/src/lib/popup/popup.service.ts

@@ -1,49 +0,0 @@
-import {
-  ComponentRef,
-  EventEmitter,
-  Injectable,
-  Output,
-  TemplateRef,
-  ViewChild,
-} from '@angular/core';
-import { first } from 'rxjs';
-import { PopupComponent } from './popup.component';
-import { PopupDirective } from './popup.directive';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class PopupService {
-  instance?: PopupComponent;
-
-  constructor() {}
-
-  open(portal: PopupDirective, template?: TemplateRef<any>) {
-    let container = portal.viewContainerRef;
-
-    container.clear();
-    let componentRef = container.createComponent(PopupComponent);
-
-    this.instance = componentRef.instance;
-
-    this.instance.confirm.pipe(first()).subscribe(() => {
-      this.hide(componentRef);
-    });
-    this.instance.cancel.pipe(first()).subscribe(() => {
-      this.hide(componentRef);
-    });
-
-    this.instance.load(template);
-    return this.instance;
-  }
-
-  hide(componentRef: ComponentRef<PopupComponent>) {
-    if (!this.instance) return;
-
-    this.instance.hide();
-
-    setTimeout(() => {
-      componentRef.destroy();
-    }, 300);
-  }
-}

projects/ui/src/lib/tag/tag.component.scss

@@ -1,7 +1,7 @@
 :host {
 
   &.filled .sk-tag {
-    background-color: var(--sk-primary);
+    background-color: var(--sk-accent);
   }
 
   .sk-tag {

projects/ui/src/lib/ui.module.ts

@@ -10,7 +10,6 @@ import { ButtonModule } from './button/button.module';
 import { TagModule } from './tag/tag.module';
 import { PipesModule } from './pipes/pipes.module';
 import { GameModule } from './game/game.module';
-import { PopupModule } from '../public-api';
 
 @NgModule({
   declarations: [],
@@ -26,7 +25,6 @@ import { PopupModule } from '../public-api';
     TagModule,
     PipesModule,
     GameModule,
-    PopupModule,
   ],
   exports: [
     IconModule,
@@ -36,11 +34,9 @@ import { PopupModule } from '../public-api';
     TypographyModule,
     SectionLabelModule,
     ImageIconModule,
-    ButtonModule,
     TagModule,
     PipesModule,
-    GameModule,
+    GameModule
-    PopupModule,
   ],
 })
 export class UiModule {}

projects/ui/src/public-api.ts

@@ -13,4 +13,3 @@ export * from './lib/image-icon/image-icon.module';
 export * from './lib/tag/tag.module';
 export * from './lib/pipes/pipes.module';
 export * from './lib/game/game.module';
-export * from './lib/popup/popup.module';

src/app/components/main/main-menu/main-menu.component.html

@@ -4,7 +4,7 @@
       <skirda-icon name="search" size="16" role="left"></skirda-icon>
     </skirda-input>
     <button>
-      <skirda-icon name="menu-panel" color="var(--sk-primary)"></skirda-icon>
+      <skirda-icon name="menu-panel" color="var(--sk-accent)"></skirda-icon>
     </button>
   </div>
   <div class="sk-sections">

src/app/components/main/main-root/main-root.component.scss

@@ -18,7 +18,6 @@
     width: 100vw;
     height: 100vh;
     background-size: cover;
-    position: inherit;
   }
 
   .content {

src/app/components/main/main.module.ts

@@ -16,7 +16,6 @@ import { ButtonModule } from 'projects/ui/src/lib/button/button.module';
 import { TypographyModule } from 'projects/ui/src/lib/typography/typography.module';
 import { IconModule } from 'projects/ui/src/lib/icon/icon.module';
 import { DownloadsPageComponent } from './sections/downloads-page/downloads-page.component';
-import { PopupModule } from 'projects/ui/src/public-api';
 
 @NgModule({
   declarations: [
@@ -40,7 +39,6 @@ import { PopupModule } from 'projects/ui/src/public-api';
     TypographyModule,
     ButtonModule,
     IconModule,
-    PopupModule,
   ],
   exports: [
     MainRootComponent,

src/app/components/main/sections/game-page/game-page.component.html

@@ -1,9 +1,3 @@
-<ng-template [skirdaPopup]></ng-template>
-<ng-template #popupContent>
-  <h1 style="font-size: 72px">😳🕶🤏</h1>
-  <p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
-</ng-template>
-
 <div class="section">
   <div class="section-head">
     <div class="head-title">
@@ -12,10 +6,6 @@
     <div class="head-subtitle">Game page will be here</div>
   </div>
   <div class="section-content">
-    <!-- <skirda-button (click)="openPopup(popupContent)">
-      <skirda-icon name="play" size="16"></skirda-icon>
-      Run game
-    </skirda-button> -->
     <skirda-button>
       <skirda-icon name="play" size="16"></skirda-icon>
       Run game

src/app/components/main/sections/game-page/game-page.component.ts

@@ -1,29 +1,15 @@
-import { TemplateRef, ViewChild } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
-import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive';
-import { PopupService } from 'projects/ui/src/lib/popup/popup.service';
-import { first } from 'rxjs';
 
 @Component({
   selector: 'app-game-page',
   templateUrl: './game-page.component.html',
-  styleUrls: ['./game-page.component.scss'],
+  styleUrls: ['./game-page.component.scss']
 })
 export class GamePageComponent implements OnInit {
-  @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective;
 
-  constructor(private popup: PopupService) {}
+  constructor() { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
-
-  openPopup(template: TemplateRef<any>) {
-    let dialog = this.popup.open(this.popupPortal, template);
-
-    dialog.cancel.pipe(first()).subscribe(() => {
-      console.log('cancel clicked');
-    });
-    dialog.confirm.pipe(first()).subscribe(() => {
-      console.log('confirm clicked');
-    });
   }
+
 }

src/app/components/sandbox/sandbox.component.html

@@ -20,12 +20,3 @@
 </form>
 
 <hr>
-
-<h3>Dialog</h3>
-
-<ng-template [skirdaPopup]></ng-template>
-<ng-template #popupContent>
-  <h3>Warning</h3>
-  <p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
-</ng-template>
-<skirda-button (click)="openPopup(popupContent)">Call popup</skirda-button>

src/app/components/sandbox/sandbox.component.scss

@@ -10,11 +10,6 @@
     gap: 1rem;
   }
 
-  hr {
-    width: 100%;
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
   form {
     display: flex;
     flex-direction: column;

src/app/components/sandbox/sandbox.component.ts

@@ -1,8 +1,5 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive';
-import { PopupService } from 'projects/ui/src/lib/popup/popup.service';
-import { first } from 'rxjs';
 
 @Component({
   selector: 'app-sandbox',
@@ -16,24 +13,12 @@ export class SandboxComponent implements OnInit {
     name: new FormControl<string>(''),
     age: new FormControl<number>(0),
   });
-  @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective;
 
-  constructor(private popup: PopupService) {}
+  constructor() {}
 
   ngOnInit(): void {}
 
   print() {
     console.log(this.form);
   }
-
-  openPopup(template: TemplateRef<any>) {
-    let dialog = this.popup.open(this.popupPortal, template);
-
-    dialog.cancel.pipe(first()).subscribe(() => {
-      console.log('cancel clicked');
-    });
-    dialog.confirm.pipe(first()).subscribe(() => {
-      console.log('confirm clicked');
-    });
-  }
 }

src/styles.scss

@@ -22,9 +22,8 @@ button, input, textarea {
   // colors
   --sk-input: rgba(18,18,18,0.5);
   --sk-input-focus: rgba(18,18,18,0.9);
-  --sk-primary: #24927a;
+  --sk-accent: #67A69E;
-  --sk-secondary: #1b557d;
+  --sk-accent-dark: #2A3B39;
-  --sk-primary-dark: #2A3B39;
 
   // border-radius
   --sk-br-s: 0.25rem;