From bfde7bbb882b26bb961ff64a5005b8147a128f38 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sat, 20 May 2023 12:08:20 -0400
Subject: [PATCH] Change detailed note tabs design

---
 .../client/src/components/MkNoteDetailed.vue  |  7 +-----
 packages/client/src/components/MkTab.vue      | 23 +++++++++++++++++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 2c36f985d0..8280afb0cb 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -33,37 +33,32 @@
 			detailedView
 		></MkNote>
 
-		<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab">
+		<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
 			<option value="replies">
-				<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 				<template v-if="appearNote.repliesCount > 0">
 					<span class="count">{{ appearNote.repliesCount }}</span>
 				</template>
 				{{ i18n.ts._notification._types.reply }}
 			</option>
 			<option value="renotes">
-				<i class="ph-repeat ph-bold ph-lg"></i>
 				<template v-if="appearNote.renoteCount > 0">
 					<span class="count">{{ appearNote.renoteCount }}</span>
 				</template>
 				{{ i18n.ts._notification._types.renote }}
 			</option>
 			<option value="quotes">
-				<i class="ph-quotes ph-bold ph-lg"></i>
 				<template v-if="directQuotes?.length > 0">
 					<span class="count">{{ directQuotes.length }}</span>
 				</template>
 				{{ i18n.ts._notification._types.quote }}
 			</option>
 			<option value="reactions">
-				<i class="ph-smiley ph-bold ph-lg"></i>
 				<template v-if="reactionsCount > 0">
 					<span class="count">{{ reactionsCount }}</span>
 				</template>
 				{{ i18n.ts.reaction }}
 			</option>
 			<option value="clips">
-				<i class="ph-paperclip ph-bold ph-lg"></i>
 				<template v-if="clips?.length > 0">
 					<span class="count">{{ clips.length }}</span>
 				</template>
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 0dcea7673a..29c9435476 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -16,7 +16,10 @@ export default defineComponent({
 		return h(
 			"div",
 			{
-				class: ["pxhvhrfw", { chips: this.style === "chips" }],
+				class: ["pxhvhrfw", 
+					{ chips: this.style === "chips" },
+					{ underline: this.style === "underline" }
+				],
 				role: "tablist",
 			},
 			options.map((option) =>
@@ -85,7 +88,7 @@ export default defineComponent({
 		}
 	}
 
-	&.chips {
+	&.chips, &.underline {
 		padding: 12px 32px;
 		font-size: 0.85em;
 		overflow-x: auto;
@@ -118,6 +121,22 @@ export default defineComponent({
 		}
 	}
 
+	&.underline {
+		padding-block: 0 !important;
+		margin-bottom: -1px;
+		button {
+			background: none !important;
+			border-radius: 0 !important;
+			padding-block: 10px !important;
+			border-bottom: 2px solid transparent;
+			&[aria-selected="true"] {
+				background: none !important;
+				font-weight: 700;
+				border-bottom-color: var(--accent);
+			}
+		}
+	}
+
 	&.max-width_500px {
 		font-size: 80%;