enhance(frontend): ログイン時にアイコンの形状を「アイコンを四角形で表示」の設定に従うように

CHANGELOG_CHERRYPICK.md

@@ -59,6 +59,7 @@
 - Enhance: 공지사항에서 다이얼로그 알림을 아카이브 할 때 이벤트가 발생하지 않도록・아카이브 된 공지를 알기 쉽게 (MisskeyIO/misskey#153)
 - Enhance: 네비게이션 메뉴 디자인 개선
 - Enhance: '서버의 머신 사양을 공개하기' 설정이 비활성화 상태인 경우, 제어판에서 서버 통계를 출력할 수 없다는 안내 문구를 표시하도록
+- Enhance: 로그인할 때 프로필 아이콘의 모양을 '프로필 아이콘을 사각형으로 표시' 설정을 따르도록
 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: (Friendly) 위젯 버튼에서 'UI 애니메이션 줄이기' 옵션이 적용되지 않는 문제
 - Fix: (Friendly) 스크롤을 해도 위젯 버튼이 숨겨지지 않는 문제

packages/frontend/src/components/MkSignin.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <form :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
 	<div class="_gaps_m">
-		<div v-show="withAvatar" :class="$style.avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : undefined, marginBottom: message ? '1.5em' : undefined }"></div>
+		<div v-show="withAvatar" :class="[$style.avatar, { [$style.square]: squareAvatars }]" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : undefined, marginBottom: message ? '1.5em' : undefined }"></div>
 		<MkInfo v-if="message">
 			{{ message }}
 		</MkInfo>
@@ -61,6 +61,9 @@ import { host as configHost } from '@/config';
 import * as os from '@/os';
 import { login } from '@/account';
 import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+
+const squareAvatars = $ref(defaultStore.state.squareAvatars);
 
 let signing = $ref(false);
 let user = $ref<UserDetailed | null>(null);
@@ -233,9 +236,12 @@ function resetPassword(): void {
 	margin: 0 auto 0 auto;
 	width: 64px;
 	height: 64px;
-	background: #ddd;
-	background-position: center;
+	background: #ddd center;
 	background-size: cover;
 	border-radius: 100%;
 }
+
+.square {
+	border-radius: 20%;
+}
 </style>