From d536d0771bb542fd2d715cd435c9e5c87eab542f Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Tue, 7 Nov 2023 16:01:02 +0300
Subject: [PATCH] fix: border radius

---
 packages/frontend/src/components/MkNotification.vue       | 2 +-
 .../frontend/src/components/MkTutorialDialog.PostNote.vue | 2 +-
 .../src/components/MkTutorialDialog.Sensitive.vue         | 2 +-
 .../frontend/src/components/MkTutorialDialog.Timeline.vue | 2 +-
 .../frontend/src/components/MkUserOnlineIndicator.vue     | 2 +-
 packages/frontend/src/components/global/MkAvatar.vue      | 8 ++++----
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
index 7ab3a95f5..ae5be0f2d 100644
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -358,7 +358,7 @@ const rejectFollowRequest = () => {
 	width: 20px;
 	height: 20px;
 	box-sizing: border-box;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	background: var(--panel);
 	box-shadow: 0 0 0 3px var(--panel);
 	font-size: 11px;
diff --git a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
index 26febdfd2..f093d6d9e 100644
--- a/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.PostNote.vue
@@ -115,7 +115,7 @@ const exampleCWNote = reactive<Misskey.entities.Note>({
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 	}
 
diff --git a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
index bf30c10e5..dd255a221 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Sensitive.vue
@@ -125,7 +125,7 @@ const exampleNote = reactive<Misskey.entities.Note>({
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 	}
 
diff --git a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
index 9eb77772d..421c0a8af 100644
--- a/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.Timeline.vue
@@ -67,7 +67,7 @@ import { i18n } from '@/i18n.js';
 		left: 0;
 		right: 0;
 		bottom: 0;
-		border-radius: 999px;
+		border-radius: var(--radius-ellipse);
 		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 	}
 
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue
index ac50d73cd..c6e1218c0 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.vue
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@@ -38,7 +38,7 @@ const text = $computed(() => {
 .root {
 	box-shadow: 0 0 0 3px var(--panel);
 
-	// sharkey(ShittyKopper): the comment mentions something about 100% radius not behaving correctly on blink.
+	// sharkey: the comment mentions something about 100% radius not behaving correctly on blink.
 	// couldn't reproduce, assuming the 120% here was just an old workaround
 	border-radius: var(--radius-full); // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
 
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index e23883487..01bf66fed 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -159,7 +159,7 @@ watch(() => props.user.avatarBlurhash, () => {
 	display: inline-block;
 	vertical-align: bottom;
 	flex-shrink: 0;
-	border-radius: 100%;
+	border-radius: 100%; // sharkey: controlled by square avatars setting!
 	line-height: 16px;
 }
 
@@ -169,7 +169,7 @@ watch(() => props.user.avatarBlurhash, () => {
 	left: 0;
 	right: 0;
 	top: 0;
-	border-radius: 100%;
+	border-radius: 100%; // sharkey: controlled by square avatars setting!
 	z-index: 1;
 	overflow: clip;
 	object-fit: cover;
@@ -187,10 +187,10 @@ watch(() => props.user.avatarBlurhash, () => {
 }
 
 .square {
-	border-radius: 20%;
+	border-radius: 20%; // sharkey: controlled by square avatars setting!
 
 	> .inner {
-		border-radius: 20%;
+		border-radius: 20%; // sharkey: controlled by square avatars setting!
 	}
 }