From f6d090fdf5912f390c3d1fe5b43f15c1f0704bd3 Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Tue, 13 Aug 2024 09:26:23 +0200
Subject: [PATCH] Change avatars border radius (#31390)

---
 app/javascript/styles/mastodon/admin.scss      | 6 +++---
 app/javascript/styles/mastodon/components.scss | 5 +++--
 app/javascript/styles/mastodon/containers.scss | 2 +-
 app/javascript/styles/mastodon/forms.scss      | 2 +-
 app/javascript/styles/mastodon/variables.scss  | 1 +
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 61e949b27b744b..a1b4e74e0df776 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -697,7 +697,7 @@ body,
     top: 15px;
 
     .avatar {
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
@@ -748,7 +748,7 @@ body,
     top: 15px;
 
     .avatar {
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
@@ -1595,7 +1595,7 @@ a.sparkline {
       position: absolute;
       inset-inline-start: 15px;
       top: 15px;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       width: 40px;
       height: 40px;
     }
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 7ffbf482c2a51b..995568e14757a3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1996,13 +1996,14 @@ body > [data-popper-placement] {
 .account__avatar {
   display: block;
   position: relative;
+  border-radius: var(--avatar-border-radius);
 
   img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
-    border-radius: 4px;
+    border-radius: var(--avatar-border-radius);
   }
 
   &-inline {
@@ -7975,7 +7976,7 @@ noscript {
       .account__avatar {
         background: var(--background-color);
         border: 1px solid var(--background-border-color);
-        border-radius: 4px;
+        border-radius: var(--avatar-border-radius);
       }
     }
   }
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 9363e428b3809b..ac1f862a099e06 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -81,7 +81,7 @@
       height: 100%;
       display: block;
       margin: 0;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
     }
   }
 
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index f3cf66237f5592..cf8c1327dc51be 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -312,7 +312,7 @@ code {
       margin-bottom: 10px;
       max-width: 100%;
       height: auto;
-      border-radius: 4px;
+      border-radius: var(--avatar-border-radius);
       background: url('images/void.png');
 
       &[src$='missing.png'] {
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 2848a42b3fec7e..2ba3dfb49d67bf 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -108,4 +108,5 @@ $font-monospace: 'mastodon-font-monospace' !default;
   --surface-background-color: #{darken($ui-base-color, 4%)};
   --surface-variant-background-color: #{$ui-base-color};
   --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
+  --avatar-border-radius: 8px;
 }