add vars in css

angular.json

@@ -116,6 +116,42 @@
           }
         }
       }
+    },
+    "ui": {
+      "projectType": "library",
+      "root": "projects/ui",
+      "sourceRoot": "projects/ui/src",
+      "prefix": "skirda",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ui/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ui/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ui/src/test.ts",
+            "tsConfig": "projects/ui/tsconfig.spec.json",
+            "karmaConfig": "projects/ui/karma.conf.js"
+          }
+        }
+      },
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      }
     }
   },
   "cli": {

package.json

@@ -26,6 +26,7 @@
     "@taiga-ui/styles": "^3.6.0",
     "@tinkoff/ng-dompurify": "3.0.0",
     "dompurify": "2.2.9",
+    "fast-average-color": "^9.1.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -43,6 +44,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
+    "ng-packagr": "^14.1.0",
     "typescript": "~4.7.2"
   }
 }

projects/ui/README.md

@@ -0,0 +1,24 @@
+# Ui
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ui`.
+> Note: Don't forget to add `--project ui` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ui` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ui`, go to the dist folder `cd dist/ui` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ui` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

projects/ui/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

projects/ui/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

projects/ui/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^14.1.0",
+    "@angular/core": "^14.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

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

@@ -0,0 +1 @@
+<tui-svg [style]="'--local-stroke:' + stroke" [style.color]="color" [style.width]="sizeWithUnit" [style.height]="sizeWithUnit" [src]="src" (tui-icon-error)="error"></tui-svg>

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

@@ -0,0 +1,16 @@
+:host::ng-deep {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    path, circle, rect {
+      stroke-width: var(--local-stroke, 1.5);
+      stroke: currentColor;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { TuiIconError } from '@taiga-ui/core';
+
+const BASE_SIZE = 24;
+const BASE_STROKE_WIDTH = 1.5;
+
+@Component({
+  selector: 'skirda-icon[name]',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+})
+export class IconComponent implements OnInit {
+  @Input() name!: string;
+  @Input() size: number | string = 24;
+  @Input() sizeUnit: string = 'px';
+  @Input() color: string = '#fff';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  get src() {
+    return `/assets/icons/Name=${this.name}.svg`;
+  }
+
+  get sizeWithUnit() {
+    return this.size + this.sizeUnit;
+  }
+
+  get stroke() {
+    return +this.size / BASE_SIZE < 1 ? 2.5 : 1.5;
+  }
+
+  error(error: TuiIconError) {
+    console.log(`[${error.icon}]: ${error.message}`);
+  }
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from './icon.component';
+import { TuiSvgModule } from '@taiga-ui/core';
+
+@NgModule({
+  declarations: [IconComponent],
+  imports: [CommonModule, TuiSvgModule],
+  exports: [IconComponent],
+})
+export class IconModule {}

projects/ui/src/lib/image-icon/image-icon.component.html

@@ -0,0 +1 @@
+<div class="sk-image-icon" [style.background-image]="'url(' + src + ')'"></div>

projects/ui/src/lib/image-icon/image-icon.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+
+  .sk-image-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.1);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    overflow: hidden;
+  }
+}

projects/ui/src/lib/image-icon/image-icon.component.spec.ts

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

projects/ui/src/lib/image-icon/image-icon.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'skirda-image-icon[src]',
+  templateUrl: './image-icon.component.html',
+  styleUrls: ['./image-icon.component.scss'],
+})
+export class ImageIconComponent {
+  @Input() src!: string;
+}

projects/ui/src/lib/image-icon/image-icon.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ImageIconComponent } from './image-icon.component';
+
+
+
+@NgModule({
+  declarations: [
+    ImageIconComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ImageIconComponent
+  ]
+})
+export class ImageIconModule { }

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

@@ -0,0 +1,5 @@
+<label [style]="style">
+  <ng-content select="skirda-icon[role=left]"></ng-content>
+  <input type="text" (input)="input(inp.value)" [value]="value" #inp [disabled]="disabled" [placeholder]="placeholder"/>
+  <ng-content select="skirda-icon[role=right]"></ng-content>
+</label>

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

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--local-gap);
+    cursor: text;
+    background-color: var(--sk-input);
+    color: #fff;
+    border-radius: 8px;
+
+    &:focus-within {
+      background-color: var(--sk-input-focus);
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      font-family: var(--tui-text-font);
+      outline: none;
+      appearance: none;
+      background: transparent;
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+}
+
+:host::ng-deep {
+  skirda-icon svg {
+    color: var(--tui-base-01);
+    opacity: 0.5;
+  }
+}

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

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

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

@@ -0,0 +1,65 @@
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Size } from '../interfaces/sizes';
+
+@Component({
+  selector: 'skirda-input',
+  templateUrl: './input.component.html',
+  styleUrls: ['./input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: InputComponent,
+      multi: true,
+    },
+  ],
+})
+export class InputComponent implements ControlValueAccessor {
+  @Input() size: Size = 'm';
+  @Input() placeholder: string = '';
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  disabled = false;
+  value: any = '';
+  touched = false;
+
+  constructor() {}
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  markAsTouched() {
+    if (!this.touched) {
+      this.onTouched();
+      this.touched = true;
+    }
+  }
+
+  input(value: any) {
+    this.markAsTouched();
+    this.value = value;
+    this.onChange(this.value);
+  }
+
+  get style() {
+    let styles: string[] = [];
+
+    styles.push(`--local-gap: var(--sk-gap-${this.size})`);
+
+    return styles.join(';');
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputComponent } from './input.component';
+
+
+
+@NgModule({
+  declarations: [
+    InputComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    InputComponent
+  ]
+})
+export class InputModule { }

projects/ui/src/lib/interfaces/session.ts

@@ -0,0 +1,7 @@
+export interface Session {
+  icon: string;
+  title: string;
+  status?: string;
+  version: string;
+  expires: string | Date;
+}

projects/ui/src/lib/interfaces/sizes.ts

@@ -0,0 +1 @@
+export type Size = 's' | 'm' | 'l' | 'xl';

projects/ui/src/lib/section-label/section-label.component.html

@@ -0,0 +1,6 @@
+<skirda-text>
+  <ng-content></ng-content>
+</skirda-text>
+<div class="count">
+  <ng-content select=".count"></ng-content>
+</div>

projects/ui/src/lib/section-label/section-label.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  align-items: baseline;
+  padding: var(--sk-gap-m) var(--sk-gap-l);
+  gap: var(--sk-gap-m);
+  opacity: 0.65;
+
+  skirda-text {
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
+  .count {
+    height: 18px;
+    min-width: 18px;
+    background-color: rgba(255, 255, 255, 0.2);
+    text-align: center;
+    line-height: 18px;
+    border-radius: 18px;
+    padding: 0rem 0.3125rem;
+    box-sizing: border-box;
+  }
+}

projects/ui/src/lib/section-label/section-label.component.spec.ts

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

projects/ui/src/lib/section-label/section-label.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-section-label',
+  templateUrl: './section-label.component.html',
+  styleUrls: ['./section-label.component.scss']
+})
+export class SectionLabelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

projects/ui/src/lib/section-label/section-label.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SectionLabelComponent } from './section-label.component';
+import { TypographyModule } from '../typography/typography.module';
+
+@NgModule({
+  declarations: [SectionLabelComponent],
+  imports: [CommonModule, TypographyModule],
+  exports: [SectionLabelComponent],
+})
+export class SectionLabelModule {}

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

@@ -0,0 +1,4 @@
+<div class="sk-section">
+  <ng-content select="skirda-icon"></ng-content>
+  <ng-content select="skirda-heading, skirda-text"></ng-content>
+</div>

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

@@ -0,0 +1,52 @@
+:host {
+  display: block;
+  border-radius: var(--sk-br-m);
+  overflow: hidden;
+  position: relative;
+
+  .sk-section {
+    display: flex;
+    align-items: center;
+    padding: var(--sk-gap-l);
+    gap: var(--sk-gap-l);
+    opacity: 0.75;
+    mix-blend-mode: overlay;
+    transition: 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+
+      &:before {
+        opacity: 0.5;
+      }
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: rgba(255, 255, 255, 0.2);
+      width: 100%;
+      height: 100%;
+      mix-blend-mode: overlay;
+      z-index: -1;
+      opacity: 0;
+      transition: 0.2s ease;
+    }
+  }
+
+  &.active {
+
+    .sk-section {
+      opacity: 1;
+      mix-blend-mode: normal;
+
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-section',
+  templateUrl: './section.component.html',
+  styleUrls: ['./section.component.scss']
+})
+export class SectionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SectionComponent } from './section.component';
+
+
+
+@NgModule({
+  declarations: [
+    SectionComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SectionComponent
+  ]
+})
+export class SectionModule { }

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

@@ -0,0 +1,7 @@
+<div class="sk-session">
+  <skirda-image-icon [src]="session.icon"></skirda-image-icon>
+  <div class="sk-session-info">
+    <skirda-heading size="6">{{session.title}}</skirda-heading>
+    <skirda-text *ngIf="session.status">{{session.status}}</skirda-text>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+
+  &.active {
+
+    .sk-session {
+      background-color: var(--sk-accent);
+    }
+  }
+
+  .sk-session {
+    display: flex;
+    align-items: center;
+    gap: var(--sk-gap-l);
+    padding: var(--sk-gap-l);
+    border-radius: var(--sk-br-m);
+
+    .sk-session-info {
+
+    }
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Session } from '../interfaces/session';
+
+@Component({
+  selector: 'skirda-session[session]',
+  templateUrl: './session.component.html',
+  styleUrls: ['./session.component.scss'],
+})
+export class SessionComponent implements OnInit {
+  @Input() session!: Session;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SessionComponent } from './session.component';
+import { ImageIconModule } from '../image-icon/image-icon.module';
+import { TypographyModule } from '../typography/typography.module';
+
+@NgModule({
+  declarations: [SessionComponent],
+  imports: [CommonModule, ImageIconModule, TypographyModule],
+  exports: [SessionComponent],
+})
+export class SessionModule {}

projects/ui/src/lib/typography/heading/heading.component.html

@@ -0,0 +1,3 @@
+<div class="heading" [attr.data-size]="size">
+  <ng-content></ng-content>
+</div>

projects/ui/src/lib/typography/heading/heading.component.scss

@@ -0,0 +1,25 @@
+:host {
+
+  .heading {
+    font-weight: 600;
+
+    &[data-size="1"] {
+      font-size: 32px;
+    }
+    &[data-size="2"] {
+      font-size: 28px;
+    }
+    &[data-size="3"] {
+      font-size: 24px;
+    }
+    &[data-size="4"] {
+      font-size: 22px;
+    }
+    &[data-size="5"] {
+      font-size: 18px;
+    }
+    &[data-size="6"] {
+      font-size: 15px;
+    }
+  }
+}

projects/ui/src/lib/typography/heading/heading.component.spec.ts

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

projects/ui/src/lib/typography/heading/heading.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-heading',
+  templateUrl: './heading.component.html',
+  styleUrls: ['./heading.component.scss'],
+})
+export class HeadingComponent implements OnInit {
+  @Input() size: number | string = 3;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/ui/src/lib/typography/text/text.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

projects/ui/src/lib/typography/text/text.component.spec.ts

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

projects/ui/src/lib/typography/text/text.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'skirda-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.scss']
+})
+export class TextComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeadingComponent } from './heading/heading.component';
+import { TextComponent } from './text/text.component';
+
+@NgModule({
+  declarations: [HeadingComponent, TextComponent],
+  imports: [CommonModule],
+  exports: [HeadingComponent, TextComponent],
+})
+export class TypographyModule {}

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

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { IconModule } from './icon/icon.module';
+import { InputModule } from './input/input.module';
+import { SessionModule } from './session/session.module';
+import { SectionModule } from './section/section.module';
+import { TypographyModule } from './typography/typography.module';
+import { SectionLabelModule } from './section-label/section-label.module';
+import { ImageIconModule } from './image-icon/image-icon.module';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    IconModule,
+    InputModule,
+    SessionModule,
+    SectionModule,
+    TypographyModule,
+    SectionLabelModule,
+    ImageIconModule,
+  ],
+  exports: [
+    IconModule,
+    InputModule,
+    SessionModule,
+    SectionModule,
+    TypographyModule,
+    SectionLabelModule,
+    ImageIconModule,
+  ],
+})
+export class UiModule {}

projects/ui/src/public-api.ts

@@ -0,0 +1,12 @@
+/*
+ * Public API Surface of ui
+ */
+
+export * from './lib/ui.module';
+export * from './lib/icon/icon.module';
+export * from './lib/input/input.module';
+export * from './lib/session/session.module';
+export * from './lib/section/section.module';
+export * from './lib/typography/typography.module';
+export * from './lib/section-label/section-label.module';
+export * from './lib/image-icon/image-icon.module';

projects/ui/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

projects/ui/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/ui/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

projects/ui/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

src/app/app.component.html

@@ -1,9 +1,3 @@
 <tui-root>
-Test (version: {{version}})
-
-<button (click)="getVersion()">Get version</button>
-<app-games-bar></app-games-bar>
-<!-- <button (click)="RunGame()">Launch Open Arena</button> -->
-<!-- <button (click)="launchGame2()">Launch Garry's Mod</button> -->
-
-</tui-root>
+  <router-outlet></router-outlet>
+</tui-root>

src/app/app.component.ts

@@ -7,15 +7,4 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'go-web';
-  version: string | null = null;
-
-  constructor() {}
-
-  getVersion() {
-    document.addEventListener('GetVersion_Callback', (event: Event): void => {
-      if (!(event instanceof CustomEvent<string>)) return;
-      this.version = event.detail;
-    });
-    //GetVersion();
-  }
 }

src/app/app.module.ts

@@ -1,7 +1,12 @@
-import { NgDompurifySanitizer } from "@tinkoff/ng-dompurify";
-import { TuiRootModule, TuiDialogModule, TuiAlertModule, TUI_SANITIZER } from "@taiga-ui/core";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import {TuiButtonModule} from '@taiga-ui/core';
+import { NgDompurifySanitizer } from '@tinkoff/ng-dompurify';
+import {
+  TuiRootModule,
+  TuiDialogModule,
+  TuiAlertModule,
+  TUI_SANITIZER,
+} from '@taiga-ui/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { TuiButtonModule } from '@taiga-ui/core';
 import {
   APP_BASE_HREF,
   LocationStrategy,
@@ -12,18 +17,34 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './modules/app-routing.module';
 import { AppComponent } from './app.component';
-import { TuiAvatarModule } from "@taiga-ui/kit";
-import { GamesBarModule } from "./components/games-bar/games-bar.module";
-
+import { TuiAvatarModule } from '@taiga-ui/kit';
+import { GamesBarModule } from './components/games-bar/games-bar.module';
+import { MainModule } from './components/main/main.module';
+import { PlaygroundModule } from './components/playground/playground.module';
+import { SandboxModule } from './components/sandbox/sandbox.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, TuiRootModule, TuiDialogModule, TuiAlertModule, TuiButtonModule, TuiAvatarModule, GamesBarModule],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    TuiRootModule,
+    TuiDialogModule,
+    TuiAlertModule,
+    TuiButtonModule,
+    TuiAvatarModule,
+    GamesBarModule,
+    MainModule,
+    PlaygroundModule,
+    SandboxModule,
+  ],
   providers: [
     { provide: APP_BASE_HREF, useValue: '/' },
     { provide: LocationStrategy, useClass: HashLocationStrategy },
-      {provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}
-],
+    { provide: TUI_SANITIZER, useClass: NgDompurifySanitizer },
+  ],
   bootstrap: [AppComponent],
+  exports: [],
 })
 export class AppModule {}

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

@@ -0,0 +1,25 @@
+<menu>
+  <div class="sk-search-panel">
+    <skirda-input [formControl]="search" size="l" placeholder="Quick search">
+      <skirda-icon name="search" size="16" role="left"></skirda-icon>
+    </skirda-input>
+    <button>
+      <skirda-icon name="menu-panel" color="var(--sk-accent)"></skirda-icon>
+    </button>
+  </div>
+  <div class="sk-sections">
+    <skirda-section class="active">
+      <skirda-icon name="server"></skirda-icon>
+      <skirda-heading size="6">Servers</skirda-heading>
+    </skirda-section>
+    <skirda-section>
+      <skirda-icon name="game"></skirda-icon>
+      <skirda-heading size="6">Games</skirda-heading>
+    </skirda-section>
+    <skirda-section>
+      <skirda-icon name="friends"></skirda-icon>
+      <skirda-heading size="6">Friends</skirda-heading>
+    </skirda-section>
+  </div>
+  <app-menu-sessions></app-menu-sessions>
+</menu>

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

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  width: 340px;
+
+  menu {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.4);
+    padding: 2rem 0.5rem 0.5rem 0.5rem;
+    box-sizing: border-box;
+    backdrop-filter: blur(64px);
+    gap: 1rem;
+
+    .sk-search-panel {
+      display: flex;
+      gap: 0.625rem;
+
+      skirda-input {
+        flex: 1;
+      }
+
+      button {
+        height: 100%;
+        aspect-ratio: 1/1;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        appearance: none;
+        background: none;
+        border: 0;
+      }
+    }
+
+    .sk-sections {
+      display: flex;
+      flex-direction: column;
+      gap: 0.1875rem;
+    }
+  }
+}

src/app/components/main/main-menu/main-menu.component.spec.ts

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-main-menu',
+  templateUrl: './main-menu.component.html',
+  styleUrls: ['./main-menu.component.scss'],
+})
+export class MainMenuComponent implements OnInit {
+  search = new FormControl<string>('');
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,6 @@
+<skirda-section-label>
+  Active sessions <div class="count">3</div>
+</skirda-section-label>
+<div class="sessions">
+  <skirda-session [ngClass]="{'active': i == 1}" *ngFor="let session of sessions; index as i" [session]="session"></skirda-session>
+</div>

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+
+  .sessions {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+}

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.spec.ts

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

src/app/components/main/main-menu/menu-sessions/menu-sessions.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Session } from 'projects/ui/src/lib/interfaces/session';
+
+@Component({
+  selector: 'app-menu-sessions',
+  templateUrl: './menu-sessions.component.html',
+  styleUrls: ['./menu-sessions.component.scss'],
+})
+export class MenuSessionsComponent implements OnInit {
+  sessions: Session[] = [
+    {
+      icon: '/assets/games-icons/gmod.png',
+      title: 'Minecraft',
+      version: '000',
+      status: 'text',
+      expires: new Date(),
+    },
+    {
+      icon: '/assets/games-icons/openarena.jpg',
+      title: 'Minecraft 2',
+      version: '000',
+      expires: new Date(),
+    },
+    {
+      icon: '/assets/games-icons/gmod.png',
+      title: 'Minecraft 3',
+      version: '000',
+      expires: new Date(),
+    },
+  ];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -0,0 +1,6 @@
+<div class="main-wrapper" [style.background-image]="'url(' + image + ')'">
+  <app-main-menu></app-main-menu>
+  <div class="content">
+    content will be here
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+
+  .main-wrapper {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    // background-image: url('https://images.unsplash.com/photo-1580234811497-9df7fd2f357e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2934&q=80');
+    background-size: cover;
+  }
+
+  .content {
+    flex: 1;
+    background-color: rgba(0,0,0,0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(1rem);
+  }
+}

src/app/components/main/main-root/main-root.component.spec.ts

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

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FastAverageColor } from 'fast-average-color';
+
+@Component({
+  selector: 'app-main-root',
+  templateUrl: './main-root.component.html',
+  styleUrls: ['./main-root.component.scss'],
+})
+export class MainRootComponent implements OnInit {
+  image: string = 'assets/games-icons/gmod.png';
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.setColors();
+  }
+
+  setColors() {
+    // extractColors(this.image).then((value) => {
+    //   console.log(value);
+    // });
+    console.log(FastAverageColor);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MainRootComponent } from './main-root/main-root.component';
+import { MainMenuComponent } from './main-menu/main-menu.component';
+import { UiModule } from 'projects/ui/src/lib/ui.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MenuSessionsComponent } from './main-menu/menu-sessions/menu-sessions.component';
+
+@NgModule({
+  declarations: [MainRootComponent, MainMenuComponent, MenuSessionsComponent],
+  imports: [CommonModule, UiModule, ReactiveFormsModule, FormsModule],
+  exports: [MainRootComponent, MainMenuComponent, MenuSessionsComponent],
+})
+export class MainModule {}

src/app/components/playground/playground.component.html

@@ -0,0 +1,9 @@
+<tui-root>
+  Test (version: {{version}})
+
+  <button (click)="getVersion()">Get version</button>
+  <app-games-bar></app-games-bar>
+  <!-- <button (click)="RunGame()">Launch Open Arena</button> -->
+  <!-- <button (click)="launchGame2()">Launch Garry's Mod</button> -->
+
+  </tui-root>

src/app/components/playground/playground.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/app/components/playground/playground.component.spec.ts

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

src/app/components/playground/playground.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-playground',
+  templateUrl: './playground.component.html',
+  styleUrls: ['./playground.component.scss'],
+})
+export class PlaygroundComponent implements OnInit {
+  title = 'go-web';
+  version: string | null = null;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    return;
+  }
+
+  getVersion() {
+    document.addEventListener('GetVersion_Callback', (event: Event): void => {
+      if (!(event instanceof CustomEvent<string>)) return;
+      this.version = event.detail;
+    });
+    //GetVersion();
+  }
+}

src/app/components/playground/playground.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PlaygroundComponent } from './playground.component';
+import { GamesBarModule } from '../games-bar/games-bar.module';
+import { TuiRootModule } from '@taiga-ui/core';
+
+@NgModule({
+  declarations: [PlaygroundComponent],
+  imports: [CommonModule, GamesBarModule, TuiRootModule],
+  exports: [PlaygroundComponent],
+})
+export class PlaygroundModule {}

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

@@ -0,0 +1,22 @@
+<h3>Icon</h3>
+<div class="line">
+  <skirda-icon [name]="'search'" [size]="16"></skirda-icon>
+  <skirda-icon [name]="'friends'" [size]="24" color="red"></skirda-icon>
+  <skirda-icon [name]="'server'" [size]="48"></skirda-icon>
+</div>
+
+<hr>
+
+<h3>Input</h3>
+<div>Single control</div>
+<skirda-input [formControl]="control"></skirda-input>
+
+<div>Form group</div>
+<form [formGroup]="form">
+  <skirda-input formControlName="name" placeholder="Search" size="xl">
+    <skirda-icon name="search" role="left" [size]="16"></skirda-icon>
+  </skirda-input>
+  <skirda-input formControlName="age" placeholder="Age"></skirda-input>
+</form>
+
+<hr>

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

@@ -0,0 +1,18 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem;
+
+  .line {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}

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

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

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-sandbox',
+  templateUrl: './sandbox.component.html',
+  styleUrls: ['./sandbox.component.scss'],
+})
+export class SandboxComponent implements OnInit {
+  control = new FormControl<string>('Sample text');
+
+  form = new FormGroup({
+    name: new FormControl<string>(''),
+    age: new FormControl<number>(0),
+  });
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  print() {
+    console.log(this.form);
+  }
+}

src/app/components/sandbox/sandbox.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SandboxComponent } from './sandbox.component';
+import { UiModule } from 'projects/ui/src/lib/ui.module';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [SandboxComponent],
+  imports: [CommonModule, FormsModule, ReactiveFormsModule, UiModule],
+  exports: [SandboxComponent],
+})
+export class SandboxModule {}

src/app/modules/app-routing.module.ts

@@ -1,7 +1,23 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { MainRootComponent } from '../components/main/main-root/main-root.component';
+import { PlaygroundComponent } from '../components/playground/playground.component';
+import { SandboxComponent } from '../components/sandbox/sandbox.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    component: PlaygroundComponent,
+  },
+  {
+    path: 'main',
+    component: MainRootComponent,
+  },
+  {
+    path: 'sandbox',
+    component: SandboxComponent,
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/assets/icons/Name=friends.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.16006 10.87C9.06006 10.86 8.94006 10.86 8.83006 10.87C6.45006 10.79 4.56006 8.84 4.56006 6.44C4.56006 3.99 6.54006 2 9.00006 2C11.4501 2 13.4401 3.99 13.4401 6.44C13.4301 8.84 11.5401 10.79 9.16006 10.87Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.41 4C18.35 4 19.91 5.57 19.91 7.5C19.91 9.39 18.41 10.93 16.54 11C16.46 10.99 16.37 10.99 16.28 11" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.15997 14.56C1.73997 16.18 1.73997 18.82 4.15997 20.43C6.90997 22.27 11.42 22.27 14.17 20.43C16.59 18.81 16.59 16.17 14.17 14.56C11.43 12.73 6.91997 12.73 4.15997 14.56Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3401 20C19.0601 19.85 19.7401 19.56 20.3001 19.13C21.8601 17.96 21.8601 16.03 20.3001 14.86C19.7501 14.44 19.0801 14.16 18.3701 14" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/Name=game.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.57002 12.46L6.52002 15.51" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.55005 12.49L9.60005 15.54" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.53 14H13.54" stroke="#292D32" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.47 14H17.48" stroke="#292D32" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 15.98V15.96" stroke="#292D32" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 12.04V12.02" stroke="#292D32" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 22H15C20 22 22 20 22 15V13C22 8 20 6 15 6H9C4 6 2 8 2 13V15C2 20 4 22 9 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.01 2L13 3.01C12.99 3.56 12.55 4 12 4H11.97C11.42 4 10.98 4.45 10.98 5C10.98 5.55 11.43 6 11.98 6H12.98" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/Name=menu-panel.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 2V22" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/Name=search.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4998 20.9998C16.7465 20.9998 20.9998 16.7465 20.9998 11.4998C20.9998 6.25305 16.7465 1.99976 11.4998 1.99976C6.25305 1.99976 1.99976 6.25305 1.99976 11.4998C1.99976 16.7465 6.25305 20.9998 11.4998 20.9998Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.9998 21.9998L19.9998 19.9998" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/Name=server.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6.25V8.25" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 6.25V8.25" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16V18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 16V18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 7.25H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 17H18" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 12H22" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icons/Name=sign-out.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1001 7.55999C14.7901 3.95999 12.9401 2.48999 8.8901 2.48999H8.7601C4.2901 2.48999 2.5001 4.27999 2.5001 8.74999V15.27C2.5001 19.74 4.2901 21.53 8.7601 21.53H8.8901C12.9101 21.53 14.7601 20.08 15.0901 16.54" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.99988 12H20.3799" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.15 8.6499L21.5 11.9999L18.15 15.3499" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/styles.scss

@@ -1 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
+html, body {
+  color: #fff!important;
+  background-color: #222;
+}
+
+:root {
+  --sk-gap-s: 0.25rem;
+  --sk-gap-m: 0.5rem;
+  --sk-gap-l: 0.75rem;
+  --sk-gap-xl: 1rem;
+
+  // colors
+  --sk-input: rgba(18,18,18,0.5);
+  --sk-input-focus: rgba(18,18,18,0.9);
+  --sk-accent: #67A69E;
+  --sk-accent-dark: #2A3B39;
+
+  // border-radius
+  --sk-br-m: 0.5rem;
+}

tsconfig.json

@@ -14,6 +14,7 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2020",
@@ -21,7 +22,12 @@
     "lib": [
       "es2020",
       "dom"
-    ]
+    ],
+    "paths": {
+      "ui": [
+        "dist/ui"
+      ]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,