From 853b2b7c287516b3621646f951088f417df88cda Mon Sep 17 00:00:00 2001
From: jvyden <jvyden@jvyden.xyz>
Date: Wed, 28 Aug 2024 17:53:20 -0400
Subject: [PATCH] Fix incorrect rounding for user avatars in links

---
 src/app/components/ui/photos/user-avatar.component.ts   | 7 +++++--
 src/app/components/ui/text/links/user-link.component.ts | 2 +-
 tailwind.config.js                                      | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/components/ui/photos/user-avatar.component.ts b/src/app/components/ui/photos/user-avatar.component.ts
index 15e6cc9..b9e058b 100644
--- 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
index 98ba1d2..cab5739 100644
--- 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
index 13a764b..6cf8d17 100644
--- 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',