Update ChannelPage.vue

src/components/ChannelPage.vue

@@ -13,8 +13,9 @@
             <span v-html="purifyHTML(urlify(channel.description))" />
         </p>
 
+        <div class="flex mt-4 mb-2 pp-channel-tabs">
             <button
-            class="btn"
+                class="btn pp-subscribe"
                 @click="subscribeHandler"
                 v-t="{
                     path: `actions.${subscribed ? 'unsubscribe' : 'subscribe'}`,
@@ -30,12 +31,12 @@
                 v-if="channel.id"
                 :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${channel.id}`"
                 target="_blank"
-            class="btn flex-col ml-3"
+                class="btn flex-col ml-2"
+                style="display: inline; float: unset"
             >
                 <font-awesome-icon icon="rss" />
             </a>
-
-        <div class="flex mt-4 mb-2">
+            <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>