From deea8c0aab2f1862005777a9aa3fd0483a35cb61 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Fri, 9 Dec 2022 22:19:26 +0100
Subject: [PATCH] style: spoiler and filter UI improvements (#378)

---
 components/status/StatusCard.vue    | 6 ++++--
 components/status/StatusDetails.vue | 2 +-
 components/status/StatusSpoiler.vue | 8 +++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index a36baafa..8b0c1294 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -125,7 +125,9 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
       </div>
     </div>
   </div>
-  <div v-else-if="isFiltered" gap-2 px-4>
-    <p>{{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}</p>
+  <div v-else-if="isFiltered" gap-2 p-4>
+    <p text-center text-secondary text-sm>
+      {{ filterPhrase && `${$t('status.filter_removed_phrase')}: ${filterPhrase}` }}
+    </p>
   </div>
 </template>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index f78302b2..8651afd8 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -40,9 +40,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
           v-if="status.mediaAttachments?.length"
           :status="status"
         />
+        <StatusPreviewCard v-if="status.card" :card="status.card" />
       </StatusSpoiler>
     </div>
-    <StatusPreviewCard v-if="status.card" :card="status.card" />
     <div flex="~ gap-1" items-center text-secondary text-sm>
       <div flex>
         <div>{{ createdAt }}</div>
diff --git a/components/status/StatusSpoiler.vue b/components/status/StatusSpoiler.vue
index c6c5576e..caebe518 100644
--- a/components/status/StatusSpoiler.vue
+++ b/components/status/StatusSpoiler.vue
@@ -11,17 +11,15 @@ watchEffect(() => {
 
 <template>
   <div v-if="enabled" flex flex-col items-start>
-    <div class="content-rich">
+    <div class="content-rich" px-4 pb-2 text-center text-secondary text-sm 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>
-      <div border="t base" w-5 h-1px />
-      <button btn-text px-2 py-1 text-3 flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
+    <div flex="~ gap-1 center" w-full mt="-3.5">
+      <button btn-text px-2 py-1 text-3 bg-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') }}
       </button>
-      <div border="t base" flex-auto h-1px />
     </div>
   </div>
   <slot v-if="!enabled || showContent" />