From 84e2504d5f92841846a1c898b6a7bff96d318b21 Mon Sep 17 00:00:00 2001
From: IceDBorn <51162078+IceDBorn@users.noreply.github.com>
Date: Sat, 4 Sep 2021 21:30:13 +0300
Subject: [PATCH] Restyle subscriptions page (#413)

---
 src/components/SubscriptionsPage.vue | 79 +++++++++++++++-------------
 1 file changed, 41 insertions(+), 38 deletions(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 846e5e28..ff557bdf 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,46 +1,49 @@
 <template>
     <h1 class="uk-text-bold uk-text-center">Subscriptions</h1>
 
-    <button
-        v-if="authenticated"
-        @click="exportHandler"
-        class="uk-button uk-button-small"
-        style="background: #222"
-        type="button"
-    >
-        <router-link to="/import">
-        Import from JSON
-        </router-link>
-    </button>
+    <div style="text-align: center">
+        <button
+            v-if="authenticated"
+            class="uk-button uk-button-small"
+            style="background: #222; margin-right: 0.5rem"
+            type="button"
+        >
+            <router-link to="/import">
+                Import from JSON
+            </router-link>
+        </button>
 
-    <br />
-
-    <button
-        v-if="authenticated"
-        @click="exportHandler"
-        class="uk-button uk-button-small"
-        style="background: #222"
-        type="button"
-    >
-        Export to JSON
-    </button>
-
-    <div :key="subscription.url" v-for="subscription in subscriptions">
-        <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
-            <a :href="subscription.url">
-                <img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="50" height="50" />
-                <span class="uk-text-truncate">{{ subscription.name }}</span>
-            </a>
-            <button
-                class="uk-button uk-button-small"
-                style="background: #222"
-                type="button"
-                @click="handleButton(subscription)"
-            >
-                {{ subscription.subscribed ? "Unsubscribe" : "Subscribe" }}
-            </button>
-        </div>
+        <button
+            v-if="authenticated"
+            @click="exportHandler"
+            class="uk-button uk-button-small"
+            style="background: #222; color: white"
+            type="button"
+        >
+            Export to JSON
+        </button>
     </div>
+        <hr />
+
+
+        <div :key="subscription.url" v-for="subscription in subscriptions" style="text-align: center;">
+            <div class="uk-text-primary" :style="[{ background: backgroundColor }]">
+                <a :href="subscription.url">
+                    <img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="96" height="96" />
+                    <span class="uk-text-large" style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem">{{ subscription.name }}</span>
+                </a>
+                <button
+                    class="uk-button uk-button-large"
+                    style="background: #222; margin-left: 0.5rem; width: 185px"
+                    type="button"
+                    @click="handleButton(subscription)"
+                >
+                    {{ subscription.subscribed ? "Unsubscribe" : "Subscribe" }}
+                </button>
+            </div>
+            <br />
+        </div>
+    <br />
 </template>
 
 <script>