avatars, Inter font added

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

@@ -1 +1 @@
-{{shortUsername}}
+<span>{{shortUsername}}</span>

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

@@ -3,22 +3,30 @@
   aspect-ratio: 1/1;
   text-transform: uppercase;
   color: #000;
-  display: flex;
+  line-height: var(--local-size, 50px);
-  justify-content: center;
+  text-align: center;
-  align-items: 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"] {
+  span {
-    --local-size: 50px;
+    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"] {
+  &[data-size="default"] {
-    --local-size: 50px;
+    --local-size: 42px;
+    font-weight: 500;
+  }
+  &[data-size="small"] {
+    --local-size: 32px;
+    font-weight: 600;
   }
 }

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()
-  @Input() size: AvatarSize = 'default';
+  @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);

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>

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;