From d49c9baec3bf1e3b93d233bbda060f63a3d8b673 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 8 Jul 2022 13:34:53 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BD=D0=B8=D1=84=D0=B8=D0=BA=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84=D0=B5?=
 =?UTF-8?q?=D0=B9=D1=81=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Reader/HelpPage/HelpPage.vue   | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/components/Reader/HelpPage/HelpPage.vue b/client/components/Reader/HelpPage/HelpPage.vue
index 8278affa..2e1d80be 100644
--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/client/components/Reader/HelpPage/HelpPage.vue
@@ -5,13 +5,20 @@
         </template>
 
         <div class="col column" style="min-width: 600px">
-            <q-btn-toggle
-                v-model="selectedTab"
-                toggle-color="primary"
-                no-caps unelevated
-                :options="buttons"
-            />
-            <div class="separator"></div>
+            <div class="bg-grey-3 row">
+                <q-tabs
+                    v-model="selectedTab"
+                    active-color="black"
+                    active-bg-color="white"
+                    indicator-color="white"
+                    dense
+                    no-caps
+                    inline-label
+                    class="bg-grey-4 text-grey-7"
+                >
+                    <q-tab v-for="btn in buttons" :key="btn.value" :name="btn.value" :label="btn.label" />
+                </q-tabs>
+            </div>
 
             <keep-alive>
                 <component :is="activePage" ref="page" class="col"></component>
@@ -93,8 +100,4 @@ export default vueComponent(HelpPage);
 </script>
 
 <style scoped>
-.separator {
-    height: 1px;
-    background-color: #E0E0E0;
-}
 </style>