From 039bae7f9a79e5605c57f18bd866c3ad256bc605 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 22 Nov 2022 21:58:09 -0800
Subject: [PATCH] Slightly smaller avatars

---
 package.json                                        | 2 +-
 packages/client/src/components/MkChannelPreview.vue | 9 +++++++--
 packages/client/src/components/MkNote.vue           | 4 ++--
 packages/client/src/components/MkNoteDetailed.vue   | 4 ++--
 packages/client/src/pages/page.vue                  | 6 +++---
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 4e3e06fcb..ae9bb2cb9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.17.3",
+	"version": "12.119.0-calc.17.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index 26cff3b21..a970c9ae6 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -81,9 +81,12 @@ const bannerStyle = computed(() => {
 			top: 16px;
 			left: 16px;
 			padding: 12px 16px;
-			background: rgba(0, 0, 0, 0.7);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+			background: rgba(0, 0, 0, 0.2);
 			color: #fff;
 			font-size: 1.2em;
+			border-radius: 999px;
 		}
 
 		> .status {
@@ -93,7 +96,9 @@ const bannerStyle = computed(() => {
 			right: 16px;
 			padding: 8px 12px;
 			font-size: 80%;
-			background: rgba(0, 0, 0, 0.7);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+			background: rgba(0, 0, 0, 0.2);
 			border-radius: 6px;
 			color: #fff;
 		}
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 9ae883a4d..80441f34d 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -431,8 +431,8 @@ function readPromo() {
 			flex-shrink: 0;
 			display: block;
 			margin: 0 14px 8px 0;
-			width: 58px;
-			height: 58px;
+			width: 52px;
+			height: 52px;
 			position: sticky;
 			/* For some reason this breaks avatar
 			positions on notes, commenting it for now */
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 83d44f59f..19feacec4 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -411,8 +411,8 @@ if (appearNote.replyId) {
 			> .avatar {
 				display: block;
 				flex-shrink: 0;
-				width: 58px;
-				height: 58px;
+				width: 52px;
+				height: 52px;
 			}
 
 			> .body {
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 0557cbd42..4cc13cf7b 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -249,7 +249,7 @@ definePageMetadata(computed(() => page ? {
 		}
 
 		> .content {
-			padding: 16px 0 0 0;
+			padding: 16px 0;
 		}
 
 		> .actions {
@@ -290,8 +290,8 @@ definePageMetadata(computed(() => page ? {
 				align-items: center;
 
 				> .avatar {
-					width: 52px;
-					height: 52px;
+					width: 40px;
+					height: 40px;
 				}
 
 				> .name {