From 1aa41cb770422ee566541a8a973064b7bb4343af Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Tue, 21 May 2024 19:47:21 +0900
Subject: [PATCH] tweak design

---
 .../frontend/src/components/MkPostForm.vue    | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 776ba4eb9b..85dd479221 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -66,8 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 	<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
 	<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]">
-		<div v-if="postChannel" :class="$style.colorBar" :style="{ background: postChannel.color }"></div>
+	<div :class="[$style.textOuter, { [$style.withCw]: useCw }]" :style="postChannel && postChannel.color ? `--channel-color: ${postChannel.color}` : undefined">
 		<textarea ref="textareaEl" v-model="text" :class="[$style.text]" :disabled="posting || posted" :readonly="textAreaReadOnly" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
@@ -1098,16 +1097,6 @@ defineExpose({
 	}
 }
 
-.colorBar {
-	position: absolute;
-	top: 0px;
-	left: 12px;
-	width: 5px;
-	height: 100% ;
-	border-radius: 999px;
-	pointer-events: none;
-}
-
 .submitInner {
 	padding: 0 12px;
 	line-height: 34px;
@@ -1236,6 +1225,18 @@ defineExpose({
 	width: 100%;
 	position: relative;
 
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 10px; // 10px + 4px + 10px = 24px
+		width: 4px;
+		height: 100%;
+		background: var(--channel-color, transparent);
+		border-radius: 2px;
+		pointer-events: none;
+	}
+
 	&.withCw {
 		padding-top: 8px;
 	}
@@ -1341,6 +1342,11 @@ defineExpose({
 		padding: 0 16px;
 	}
 
+	.textOuter::before {
+		left: 0;
+		border-radius: 0 4px 4px 0;
+	}
+
 	.text {
 		min-height: 80px;
 	}