Fix incorrect rounding for user avatars in links

LittleBigRefresh · Aug 28, 2024 · 853b2b7 · 853b2b7
1 parent 17ebfe9
commit 853b2b7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/app/components/ui/photos/user-avatar.component.ts b/src/app/components/ui/photos/user-avatar.component.ts
@@ -12,8 +12,10 @@ import { NgClass, NgOptimizedImage, NgStyle } from "@angular/common";
 ],
   template: `
     @if (this.user) {
-      <img [ngSrc]=this.user.iconHash [width]=size [height]=size class="inline rounded-md h-auto aspect-square object-cover" alt=""
-        (error)="err($event.target)" [ngStyle]="{'min-height': size + 'px', 'min-width': size + 'px'}" loading="lazy">
+      <img [ngSrc]=this.user.iconHash [width]=size [height]=size class="inline h-auto aspect-square object-cover" alt=""
+        (error)="err($event.target)" loading="lazy"
+           [ngStyle]="{'min-height': size + 'px', 'min-width': size + 'px'}"
+           [ngClass]="borderRule">
     }
     `
 })
@@ -22,6 +24,7 @@ export class UserAvatarComponent {
   error: boolean = false;
 
   @Input() size: number = 19;
+  @Input() borderRule: string = "rounded";
 
   err(img: EventTarget | null): void {
     if(this.error) return;

diff --git a/src/app/components/ui/text/links/user-link.component.ts b/src/app/components/ui/text/links/user-link.component.ts
@@ -14,7 +14,7 @@ import {ClientService} from "../../../../api/client.service";
     template: `
         @if(user) {
             <app-user-router-link class="ml-1 inline" [user]=user>
-                <app-user-avatar [user]=user class="inline mr-1"></app-user-avatar>
+                <app-user-avatar [user]=user class="inline mr-1" borderRule="rounded-[3px]"></app-user-avatar>
                 <span>{{ user.username }}</span>
             </app-user-router-link>
         } @else {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -52,7 +52,8 @@ module.exports = {
     },
     borderRadius: {
       'none': '0',
-      DEFAULT: '11px',
+      DEFAULT: '0.6875rem',
+      // DEFAULT: '11px',
       'md': '0.375rem',
       'lg': '0.5rem',
       'full': '9999px',