From 4d26d2dec689d48f3d481ddd38e036d251fd639f Mon Sep 17 00:00:00 2001
From: svensken <vladfolder@gmail.com>
Date: Thu, 3 Nov 2022 03:01:39 +0300
Subject: [PATCH] avatars, Inter font added

---
 .../ui/src/lib/avatar/avatar.component.html   |  2 +-
 .../ui/src/lib/avatar/avatar.component.scss   | 28 ++++++++++++-------
 .../ui/src/lib/avatar/avatar.component.ts     | 14 +++++-----
 .../components/sandbox/sandbox.component.html |  7 ++++-
 src/styles.scss                               |  6 ++--
 5 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/projects/ui/src/lib/avatar/avatar.component.html b/projects/ui/src/lib/avatar/avatar.component.html
index 8e248f9..0e1994f 100644
--- a/projects/ui/src/lib/avatar/avatar.component.html
+++ b/projects/ui/src/lib/avatar/avatar.component.html
@@ -1 +1 @@
-{{shortUsername}}
+<span>{{shortUsername}}</span>
\ No newline at end of file
diff --git a/projects/ui/src/lib/avatar/avatar.component.scss b/projects/ui/src/lib/avatar/avatar.component.scss
index 3f12b54..490f184 100644
--- a/projects/ui/src/lib/avatar/avatar.component.scss
+++ b/projects/ui/src/lib/avatar/avatar.component.scss
@@ -3,22 +3,30 @@
   aspect-ratio: 1/1;
   text-transform: uppercase;
   color: #000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  line-height: var(--local-size, 50px);
+  text-align: center;
   width: var(--local-size, 50px);
-  font-size: var(--local-size);
+  font-size: calc(var(--local-size, 50px) / 2.5);
+  border-radius: 50%;
+  user-select: none;
 
-  &[data-size="default"] {
-    --local-size: 50px;
+  span {
+    display: block;
+    translate: 0px 1px;
   }
-  &[data-size="small"] {
-    --local-size: 50px;
+
+  &[data-size="large"] {
+    --local-size: 64px;
   }
   &[data-size="medium"] {
     --local-size: 50px;
   }
-  &[data-size="large"] {
-    --local-size: 50px;
+  &[data-size="default"] {
+    --local-size: 42px;
+    font-weight: 500;
+  }
+  &[data-size="small"] {
+    --local-size: 32px;
+    font-weight: 600;
   }
 }
diff --git a/projects/ui/src/lib/avatar/avatar.component.ts b/projects/ui/src/lib/avatar/avatar.component.ts
index d1da9d1..800975d 100644
--- a/projects/ui/src/lib/avatar/avatar.component.ts
+++ b/projects/ui/src/lib/avatar/avatar.component.ts
@@ -8,8 +8,13 @@ import { AvatarSize } from './avatar.interface';
   styleUrls: ['./avatar.component.scss'],
 })
 export class AvatarComponent implements OnInit {
-  @Input() username: string = 'username';
-  @Input() size: AvatarSize = 'default';
+  @Input()
+  @HostBinding('title')
+  username: string = 'username';
+
+  @Input()
+  @HostBinding('attr.data-size')
+  size: AvatarSize = 'default';
 
   constructor() {}
 
@@ -20,11 +25,6 @@ export class AvatarComponent implements OnInit {
     return stringHashToHsl(this.username);
   }
 
-  @HostBinding('data-size')
-  get avatarSize() {
-    return `${this.size}px`;
-  }
-
   get shortUsername() {
     let array = this.username.split(' ');
     if (array.length >= 2) return array[0].charAt(0) + array[1].charAt(0);
diff --git a/src/app/components/sandbox/sandbox.component.html b/src/app/components/sandbox/sandbox.component.html
index 925b92e..406e5f9 100644
--- a/src/app/components/sandbox/sandbox.component.html
+++ b/src/app/components/sandbox/sandbox.component.html
@@ -33,4 +33,9 @@
 <hr>
 
 <h3>Avatar</h3>
-<skirda-avatar></skirda-avatar>
+<div class="line">
+  <skirda-avatar size="large" username="Vlad Simonov"></skirda-avatar>
+  <skirda-avatar size="medium" username="Greg Brzezinski"></skirda-avatar>
+  <skirda-avatar size="default" username="svensken"></skirda-avatar>
+  <skirda-avatar size="small" username="cyberdream"></skirda-avatar>
+</div>
diff --git a/src/styles.scss b/src/styles.scss
index 31956e9..9392e23 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,10 +1,12 @@
-/* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+
 html, body {
   background-color: #222;
   color: #fff;
   font-size: 16px;
   margin: 0;
   font-family: var(--font);
+  line-height: 90%;
 }
 
 button, input, textarea {
@@ -12,7 +14,7 @@ button, input, textarea {
 }
 
 :root {
-  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --sk-gap-xs: 0.125rem;
   --sk-gap-s: 0.25rem;
   --sk-gap-m: 0.5rem;