downloads section added, new icon, scrollbars fixed

.gitignore

@@ -7,6 +7,8 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
+.DS_Store
+*.DS_Store
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
@@ -132,4 +134,4 @@ dist
 #angular
 .angular/
 /.DS_Store
-.vscode/
+.vscode/

projects/ui/src/lib/icon/skirda/skirda.css

@@ -39,3 +39,4 @@
 .skirda-sign-out:before { content: '\e806'; } /* '' */
 .skirda-favorite:before { content: '\e807'; } /* '' */
 .skirda-library:before { content: '\e808'; } /* '' */
+.skirda-download:before { content: '\e809'; } /* '' */

projects/ui/src/lib/icon/skirda/skirda.svg

@@ -23,6 +23,8 @@
 <glyph glyph-name="favorite" unicode="&#xe807;" d="M500 801c-45 0-82-33-106-80a38 38 0 0 1 0 0l-73-147a38 38 0 0 1 0 0c-3-6-26-23-32-24l-133-22c-50-8-92-34-106-76-13-42 6-88 42-124l104-103c5-6 13-33 11-41l-29-128c-7-28-9-55-4-79 4-24 16-46 36-61 40-29 92-18 143 12l125 74c7 4 37 4 44 0a38 38 0 0 1 0 0l125-74a38 38 0 0 1 0 0c25-15 50-25 74-28 24-3 49 2 69 16 20 14 32 37 36 61 5 24 3 50-4 79l-29 128c-2 8 6 35 11 41l104 103c36 36 56 82 42 124-14 42-56 68-106 76l-133 22c-7 1-29 18-32 24a38 38 0 0 1 0 0l-73 146c-24 48-61 81-106 81z m0-75c7 0 22-6 39-39a38 38 0 0 1 0 0l73-146c0 0 0 0 0-1l0 0c17-35 48-57 86-64l133-22c35-5 45-18 48-25 2-7 1-23-24-48a38 38 0 0 1 0 0l-104-103c-29-30-40-70-31-110a38 38 0 0 1 0-1l29-127c5-22 6-39 4-49-2-10-5-13-7-14-2-2-5-4-16-2-10 1-26 6-45 18h0l-125 73c-38 23-82 23-120 1a38 38 0 0 1 0-1l-125-73c-38-23-57-19-61-16-2 1-5 4-7 14-1 10-1 27 4 49l29 127a38 38 0 0 1 0 1c10 40-2 80-31 110l-104 103c-24 25-26 41-23 48 2 7 12 20 47 25l133 22a38 38 0 0 1 0 0c38 7 68 29 86 65l73 146v0c16 32 32 39 39 39z" horiz-adv-x="1000" />
 
 <glyph glyph-name="library" unicode="&#xe808;" d="M609 804c-44 0-83-9-110-36-27-28-36-66-36-110v-62h-62c-44 0-83-9-110-36-28-28-37-67-37-111v-61h-61c-44 0-83-9-111-37-27-27-36-66-36-111v-197c0-45 9-83 36-111 28-27 67-36 111-36h197c45 0 84 9 111 36 28 27 37 66 37 111v61h61c44 0 83 9 111 37 27 27 36 66 36 110v62h61c44 0 83 9 111 36 27 27 36 66 36 111v198c0 44-9 83-36 110-28 27-67 36-111 36z m0-75h198c34 0 50-6 58-14 8-8 14-23 14-57v-198c0-35-6-50-14-58-8-8-24-14-58-14h-198c-34 0-49 6-57 14-8 8-14 23-14 58v98 100c0 34 6 49 14 57 8 8 23 14 57 14z m-208-208h62v-61c0-45 9-84 36-111 27-27 66-36 110-36h62v-62c0-34-7-50-15-57-7-8-23-15-57-15h-99-99c0 0 0 0 0 0-4 0-8 0-12 1 0 0 0 0 0 0-4 0-7 0-10 0 0 0 0 0 0 0-7 1-12 2-17 4 0 0 0 0 0 0-9 2-15 6-18 10-8 7-15 23-15 57v99 99c0 34 7 50 15 57 7 8 23 15 57 15z m-208-208h61v-62c0-16 2-32 5-47 1-7 3-14 5-21 1-3 2-5 3-7 6-13 13-25 23-35 0 0 1 0 1 0 1-2 3-4 5-5 0 0 0 0 0 0 2-2 3-3 5-5 0 0 0 0 0 0 2-1 4-3 6-4 0 0 0 0 0 0 2-1 4-2 6-4 0 0 0 0 0 0 2-1 4-2 6-3 0 0 0 0 0 0 3-1 5-2 7-3 0 0 0 0 0 0 2-1 4-2 7-2 0-1 0 0 0 0 2-1 4-2 6-3 0 0 0 0 1 0 2-1 4-1 7-2 0 0 0 0 0 0 2 0 4-1 7-1 0 0 0 0 0 0 5-1 10-2 15-3 0 0 0 0 0 0 5-1 10-1 16-1 0 0 0 0 0 0 5-1 10-1 16-1 0 0 0 0 0 0h62v-61c0-34-7-50-15-58-8-8-23-14-58-14h-197c-34 0-50 6-58 14-7 8-14 24-14 58v197c0 35 7 50 14 58 8 8 24 15 58 15z" horiz-adv-x="1000" />
+
+<glyph glyph-name="download" unicode="&#xe809;" d="M500 804a38 38 0 0 1-37-37v-493l-76 75a38 38 0 0 1-27 11 38 38 0 0 1-26-11 38 38 0 0 1 0-53l139-139a38 38 0 0 1 54 0l139 139a38 38 0 0 1 0 53 38 38 0 0 1-53 0l-75-75v493a38 38 0 0 1-38 37z m188-287a38 38 0 0 1-40-35 38 38 0 0 1 34-40c69-6 110-25 136-57 26-33 41-85 41-165v-5c0-88-18-142-50-174-32-32-85-49-174-49h-271c-88 0-141 17-174 49-32 32-49 86-49 174v5c0 80 14 132 40 164 26 32 66 51 134 57a38 38 0 0 1 34 41 38 38 0 0 1-41 34c-80-7-144-34-185-85-42-52-57-122-57-211v-5c0-98 20-175 71-227 52-52 129-71 227-71h271c99 0 176 19 227 71 52 52 72 129 72 227v5c0 89-16 160-58 212-42 52-107 78-188 85z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>

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

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  border-radius: var(--sk-br-m);
   overflow: hidden;
   position: relative;
 
@@ -12,6 +11,7 @@
     opacity: 0.5;
     transition: 0.1s ease;
     cursor: pointer;
+    border-radius: var(--sk-br-m);
 
     &:hover {
       opacity: 1;

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

@@ -22,6 +22,10 @@
       <skirda-icon name="friends"></skirda-icon>
       <skirda-heading size="6">Friends</skirda-heading>
     </skirda-section>
+    <skirda-section [routerLink]="['downloads']" routerLinkActive="active">
+      <skirda-icon name="download"></skirda-icon>
+      <skirda-heading size="6">Downloads</skirda-heading>
+    </skirda-section>
   </div>
   <app-menu-games></app-menu-games>
   <app-menu-sessions></app-menu-sessions>

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

@@ -13,6 +13,7 @@
     padding: 2rem 0.5rem 0.5rem 0.5rem;
     box-sizing: border-box;
     backdrop-filter: blur(64px);
+    overflow-y: auto;
     gap: 1rem;
 
     .sk-search-panel {

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

@@ -17,7 +17,6 @@
     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;
   }
 
@@ -26,5 +25,6 @@
     background-color: rgba(0,0,0,0.05);
     display: flex;
     backdrop-filter: blur(1rem);
+    overflow-y: auto;
   }
 }

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

@@ -3,8 +3,7 @@ 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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MenuSessionsComponent } from './main-menu/menu-sessions/menu-sessions.component';
 import { MenuGamesComponent } from './main-menu/menu-games/menu-games.component';
 import { ServersPageComponent } from './sections/servers-page/servers-page.component';
@@ -12,10 +11,11 @@ import { FriendsPageComponent } from './sections/friends-page/friends-page.compo
 import { GamesPageComponent } from './sections/games-page/games-page.component';
 import { SessionPageComponent } from './sections/session-page/session-page.component';
 import { GamePageComponent } from './sections/game-page/game-page.component';
-import { MainRoutingModule } from './routing.module'
-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 { MainRoutingModule } from './routing.module';
+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';
 
 @NgModule({
   declarations: [
@@ -27,7 +27,8 @@ import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
     FriendsPageComponent,
     GamesPageComponent,
     SessionPageComponent,
-    GamePageComponent
+    GamePageComponent,
+    DownloadsPageComponent,
   ],
   imports: [
     CommonModule,
@@ -37,7 +38,7 @@ import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
     MainRoutingModule,
     TypographyModule,
     ButtonModule,
-    IconModule
+    IconModule,
   ],
   exports: [
     MainRootComponent,
@@ -48,7 +49,8 @@ import { IconModule } from 'projects/ui/src/lib/icon/icon.module'
     FriendsPageComponent,
     GamesPageComponent,
     SessionPageComponent,
-    GamePageComponent
-  ]
+    GamePageComponent,
+    DownloadsPageComponent,
+  ],
 })
 export class MainModule {}

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

@@ -1,35 +1,48 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router'
-import { MainRootComponent } from './main-root/main-root.component'
-import { FriendsPageComponent } from './sections/friends-page/friends-page.component'
-import { GamePageComponent } from './sections/game-page/game-page.component'
-import { GamesPageComponent } from './sections/games-page/games-page.component'
-import { ServersPageComponent } from './sections/servers-page/servers-page.component'
-import { SessionPageComponent } from './sections/session-page/session-page.component'
+import { RouterModule, Routes } from '@angular/router';
+import { MainRootComponent } from './main-root/main-root.component';
+import { DownloadsPageComponent } from './sections/downloads-page/downloads-page.component';
+import { FriendsPageComponent } from './sections/friends-page/friends-page.component';
+import { GamePageComponent } from './sections/game-page/game-page.component';
+import { GamesPageComponent } from './sections/games-page/games-page.component';
+import { ServersPageComponent } from './sections/servers-page/servers-page.component';
+import { SessionPageComponent } from './sections/session-page/session-page.component';
 
-const routes: Routes = [{
-  path: '',
-  component: MainRootComponent,
-  children: [{
-    path: 'servers',
-    component: ServersPageComponent
-  }, {
-    path: 'friends',
-    component: FriendsPageComponent
-  }, {
-    path: 'games',
-    component: GamesPageComponent
-  }, {
-    path: 'session/:id',
-    component: SessionPageComponent
-  }, {
-    path: 'game/:id',
-    component: GamePageComponent
-  }]
-}]
+const routes: Routes = [
+  {
+    path: '',
+    component: MainRootComponent,
+    children: [
+      {
+        path: 'servers',
+        component: ServersPageComponent,
+      },
+      {
+        path: 'friends',
+        component: FriendsPageComponent,
+      },
+      {
+        path: 'games',
+        component: GamesPageComponent,
+      },
+      {
+        path: 'downloads',
+        component: DownloadsPageComponent,
+      },
+      {
+        path: 'session/:id',
+        component: SessionPageComponent,
+      },
+      {
+        path: 'game/:id',
+        component: GamePageComponent,
+      },
+    ],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class MainRoutingModule { }
+export class MainRoutingModule {}

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

@@ -0,0 +1,8 @@
+<div class="section">
+  <div class="section-head">
+    <div class="head-title">
+      <skirda-heading size="1">Downloads</skirda-heading>
+    </div>
+    <div class="head-subtitle">Downloads page will be here</div>
+  </div>
+</div>

src/app/components/main/sections/downloads-page/downloads-page.component.scss

@@ -0,0 +1,7 @@
+@use '../global';
+
+:host {
+  display: block;
+
+  @include global.page();
+}

src/app/components/main/sections/downloads-page/downloads-page.component.spec.ts

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

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

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

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

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MainRootComponent } from '../components/main/main-root/main-root.component';
-import { MainRoutingModule } from '../components/main/routing.module'
+import { MainRoutingModule } from '../components/main/routing.module';
 import { PlaygroundComponent } from '../components/playground/playground.component';
 import { SandboxComponent } from '../components/sandbox/sandbox.component';
 import { SignInComponent } from '../components/sign-in/sign-in.component';
@@ -13,7 +12,7 @@ const routes: Routes = [
   },
   {
     path: '',
-    loadChildren: () => MainRoutingModule
+    loadChildren: () => MainRoutingModule,
   },
   {
     path: 'sandbox',