From d6ccc7e28be6e17ed1b08a9f9fb195ac17c47da0 Mon Sep 17 00:00:00 2001
From: Dragos <86549690+dragos-efy@users.noreply.github.com>
Date: Tue, 8 Nov 2022 18:53:43 +0200
Subject: [PATCH] Update ChannelPage.vue

---
 src/components/ChannelPage.vue | 60 ++++++++++++++++++----------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 9d82f411..dfcc1ea5 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -13,29 +13,30 @@
             <span v-html="purifyHTML(urlify(channel.description))" />
         </p>
 
-        <button
-            class="btn"
-            @click="subscribeHandler"
-            v-t="{
-                path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
-                args: { count: numberFormat(channel.subscriberCount) },
-            }"
-        ></button>
+        <div class="flex mt-4 mb-2 pp-channel-tabs">
+            <button
+                class="btn pp-subscribe"
+                @click="subscribeHandler"
+                v-t="{
+                    path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
+                    args: { count: numberFormat(channel.subscriberCount) },
+                }"
+            ></button>
 
-        <!-- RSS Feed button -->
-        <a
-            aria-label="RSS feed"
-            title="RSS feed"
-            role="button"
-            v-if="channel.id"
-            :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
-            target="_blank"
-            class="btn flex-col ml-3"
-        >
-            <font-awesome-icon icon="rss" />
-        </a>
-
-        <div class="flex mt-4 mb-2">
+            <!-- RSS Feed button -->
+            <a
+                aria-label="RSS feed"
+                title="RSS feed"
+                role="button"
+                v-if="channel.id"
+                :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
+                target="_blank"
+                class="btn flex-col ml-2"
+                style="display: inline; float: unset"
+            >
+                <font-awesome-icon icon="rss" />
+            </a>
+            <p>|</p>
             <button
                 v-for="(tab, index) in tabs"
                 :key="tab.name"
@@ -57,11 +58,20 @@
                 height="94"
                 width="168"
                 hide-channel
+                class="efy_trans_filter"
             />
         </div>
     </div>
 </template>
 
+<style>
+.pp-channel-tabs > p {
+    place-self: center;
+    padding: 0 10rem;
+    -webkit-text-fill-color: var(--efy_text_trans2);
+}
+</style>
+
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
 import ContentItem from "./ContentItem.vue";
@@ -236,9 +246,3 @@ export default {
     },
 };
 </script>
-
-<style>
-.active {
-    border: 0.1rem outset red;
-}
-</style>