From 1b081a927288ff2f43025d688e2fa15cf6ce6be1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 19 Jul 2023 17:00:46 -0400
Subject: [PATCH] Make reply-or-quote selection display as horizontal button
 group

---
 .../post_status_form/post_status_form.vue     | 50 ++++++-------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0d793885..9b108a5a 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -129,44 +129,32 @@
         <div
           v-if="quotable"
           role="radiogroup"
-          class="reply-or-quote-selector"
+          class="btn-group reply-or-quote-selector"
         >
-          <div
-            class="reply-or-quote-option"
+          <button
+            :id="`reply-or-quote-option-${randomSeed}-reply`"
+            class="btn button-default reply-or-quote-option"
+            :class="{ toggled: !newStatus.quoting }"
             tabindex="0"
             role="radio"
             :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
             :aria-checked="!newStatus.quoting"
             @click="newStatus.quoting = false"
           >
-            <input
-              type="radio"
-              :checked="!newStatus.quoting"
-            >
-            <label class="reply-or-quote-option-text">
-              <span :id="`reply-or-quote-option-${randomSeed}-reply`">
-                {{ $t('post_status.reply_option') }}
-              </span>
-            </label>
-          </div>
-          <div
-            class="reply-or-quote-option"
+            {{ $t('post_status.reply_option') }}
+          </button>
+          <button
+            :id="`reply-or-quote-option-${randomSeed}-quote`"
+            class="btn button-default reply-or-quote-option"
+            :class="{ toggled: newStatus.quoting }"
             tabindex="0"
             role="radio"
             :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
             :aria-checked="newStatus.quoting"
             @click="newStatus.quoting = true"
           >
-            <input
-              type="radio"
-              :checked="newStatus.quoting"
-            >
-            <label class="reply-or-quote-option-text">
-              <span :id="`reply-or-quote-option-${randomSeed}-quote`">
-                {{ $t('post_status.quote_option') }}
-              </span>
-            </label>
-          </div>
+            {{ $t('post_status.quote_option') }}
+          </button>
         </div>
         <EmojiInput
           v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
@@ -463,17 +451,7 @@
   }
 
   .reply-or-quote-selector {
-    display: flex;
-    flex-direction: column;
-
-    .reply-or-quote-option {
-      display: flex;
-      align-items: center;
-
-      .reply-or-quote-option-text::before {
-        vertical-align: middle;
-      }
-    }
+    margin-bottom: 0.5em;
   }
 
   .text-format {