Embrace non-circle avatars

src/components/account-info.css

@@ -58,8 +58,10 @@
     8px 0 24px var(--header-color-4, --bg-color);
 }
 .account-container header .avatar {
-  box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
-    8px 0 24px var(--header-color-4, --bg-color);
+  /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
+    8px 0 24px var(--header-color-4, --bg-color); */
+  filter: drop-shadow(-8px 0 24px var(--header-color-3, --bg-color))
+    drop-shadow(8px 0 24px var(--header-color-4, --bg-color));
 }
 
 .account-container .note {
@@ -222,7 +224,7 @@
     font-size: 175%;
     margin-bottom: -8px;
     line-height: 1.1;
-    letter-spacing: -1px;
+    letter-spacing: -0.5px;
     mix-blend-mode: multiply;
     gap: 12px;
   }

src/components/account-info.jsx

@@ -164,7 +164,8 @@ function AccountInfo({
                       ).data,
                     ];
                     const rgbColors = colors.map((color) => {
-                      return `rgb(${color[0]}, ${color[1]}, ${color[2]}, 0.3)`;
+                      const [r, g, b, a] = lightenRGB(color);
+                      return `rgba(${r}, ${g}, ${b}, ${a})`;
                     });
                     setHeaderCornerColors(rgbColors);
                     console.log({ colors, rgbColors });
@@ -482,4 +483,15 @@ function RelatedActions({ info, instance, authenticated }) {
   );
 }
 
+// Apply more alpha if high luminence
+function lightenRGB([r, g, b]) {
+  const luminence = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  console.log('luminence', luminence);
+  // Follow this range
+  // luminence = 0, alpha = 0.05
+  // luminence = 220, alpha = 1
+  const alpha = Math.min(1, (luminence / 220) * 0.95 + 0.05);
+  return [r, g, b, alpha];
+}
+
 export default AccountInfo;

src/components/avatar.css

@@ -16,3 +16,9 @@
   object-fit: cover;
   background-color: var(--img-bg-color);
 }
+
+.avatar.loaded,
+.avatar.loaded img {
+  box-shadow: none;
+  background-color: transparent;
+}

src/components/avatar.jsx

@@ -1,5 +1,7 @@
 import './avatar.css';
 
+import { useRef } from 'preact/hooks';
+
 const SIZES = {
   s: 16,
   m: 20,
@@ -11,8 +13,10 @@ const SIZES = {
 
 function Avatar({ url, size, alt = '', ...props }) {
   size = SIZES[size] || size || SIZES.m;
+  const avatarRef = useRef();
   return (
     <span
+      ref={avatarRef}
       class="avatar"
       style={{
         width: size,
@@ -22,7 +26,16 @@ function Avatar({ url, size, alt = '', ...props }) {
       {...props}
     >
       {!!url && (
-        <img src={url} width={size} height={size} alt={alt} loading="lazy" />
+        <img
+          src={url}
+          width={size}
+          height={size}
+          alt={alt}
+          loading="lazy"
+          onLoad={(e) => {
+            avatarRef.current.classList.add('loaded');
+          }}
+        />
       )}
     </span>
   );