From 501d422931539e548387ff1abbbd32037bc3601b Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sat, 21 Jan 2023 21:49:29 +0100
Subject: [PATCH] style: filtered direct message spoiler

---
 components/status/StatusContent.vue | 3 +--
 components/status/StatusSpoiler.vue | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusContent.vue b/components/status/StatusContent.vue
index ad2492d9..ebf603d0 100644
--- a/components/status/StatusContent.vue
+++ b/components/status/StatusContent.vue
@@ -27,7 +27,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
     }"
   >
     <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
-    <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
+    <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered" :is-d-m="isDM">
       <template v-if="filterPhrase" #spoiler>
         <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
       </template>
@@ -51,7 +51,6 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
         :status="status.reblog" border="~ rounded"
         :actions="false"
       />
-      <div v-if="isDM" />
     </StatusSpoiler>
   </div>
 </template>
diff --git a/components/status/StatusSpoiler.vue b/components/status/StatusSpoiler.vue
index 10250a0f..9eced3bc 100644
--- a/components/status/StatusSpoiler.vue
+++ b/components/status/StatusSpoiler.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{ enabled?: boolean; filter?: boolean }>()
+const props = defineProps<{ enabled?: boolean; filter?: boolean; isDM?: boolean }>()
 
 const showContent = ref(!props.enabled)
 const toggleContent = useToggle(showContent)
@@ -14,8 +14,8 @@ watchEffect(() => {
     <div class="content-rich" p="x-4 b-2.5" text-center text-secondary w-full border="~ base" border-0 border-b-dotted border-b-3 mt-2>
       <slot name="spoiler" />
     </div>
-    <div flex="~ gap-1 center" w-full mt="-4.5">
-      <button btn-text px-2 py-1 bg-base flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
+    <div flex="~ gap-1 center" w-full :mb="isDM && !showContent ? '4' : ''" mt="-4.5">
+      <button btn-text px-2 py-1 :bg="isDM ? 'transparent' : 'base'" flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
         <div v-if="showContent" i-ri:eye-line />
         <div v-else i-ri:eye-close-line />
         {{ showContent ? $t('status.spoiler_show_less') : $t(filter ? 'status.filter_show_anyway' : 'status.spoiler_show_more') }}