Follow page, and edit button consistency (#123)

* WIP: Added base for follow page

* Updated style for moderation page, and added label for unfollow button (not sure about that one)

* Fixed overflow issue, and width of element

* Updated npm to restore the package-lock.json file

pages/dashboard/follows.vue

@@ -0,0 +1,111 @@
+<template>
+  <DashboardPage>
+    <div class="section-header">
+      <h3 class="column-grow-1">Followed mods</h3>
+    </div>
+    <ModCard
+      v-for="(mod, index) in mods"
+      :id="mod.id"
+      :key="mod.id"
+      :author="mod.author"
+      :name="mod.title"
+      :description="mod.description"
+      :latest-version="mod.latest_version"
+      :created-at="mod.published"
+      :updated-at="mod.updated"
+      :downloads="mod.downloads.toString()"
+      :icon-url="mod.icon_url"
+      :author-url="mod.author_url"
+      :page-url="mod.page_url"
+      :categories="mod.categories"
+      :edit-mode="true"
+      :is-modrinth="true"
+    >
+      <div class="buttons">
+        <button
+          class="button column unfav-button iconified-button"
+          @click="unfavMod(index)"
+        >
+          <FollowIcon />
+          Unfollow
+        </button>
+      </div>
+    </ModCard>
+  </DashboardPage>
+</template>
+
+<script>
+import axios from 'axios'
+
+import ModCard from '@/components/ProjectCard'
+import DashboardPage from '@/components/DashboardPage'
+import FollowIcon from '~/assets/images/utils/heart.svg?inline'
+
+export default {
+  components: {
+    DashboardPage,
+    ModCard,
+    FollowIcon,
+  },
+  async asyncData(data) {
+    const config = {
+      headers: {
+        Authorization: data.$auth.getToken('local')
+          ? data.$auth.getToken('local')
+          : '',
+      },
+    }
+
+    const res = await axios.get(
+      `https://api.modrinth.com/api/v1/user/${data.$auth.user.id}/follows`,
+      config
+    )
+
+    const mods = (
+      await axios.get(
+        `https://api.modrinth.com/api/v1/mods?ids=${JSON.stringify(res.data)}`
+      )
+    ).data
+
+    return {
+      mods,
+    }
+  },
+  methods: {
+    async unfavMod(index) {
+      const config = {
+        headers: {
+          Authorization: this.$auth.getToken('local')
+            ? this.$auth.getToken('local')
+            : '',
+        },
+      }
+
+      await axios.delete(
+        `https://api.modrinth.com/api/v1/mod/${this.mods[index].id}/follow`,
+        config
+      )
+
+      this.mods.splice(index, 1)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  margin: 0.25rem 2rem 0.25rem 0;
+}
+
+.buttons {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.unfav-button {
+  margin-left: auto;
+  padding: 0.5rem;
+}
+</style>

pages/dashboard/moderation.vue

@@ -22,18 +22,20 @@
       :status="mod.status"
       :is-modrinth="true"
     >
-      <button
-        class="button column approve"
-        @click="changeModStatus(mod.id, 'approved', index)"
-      >
-        Approve
-      </button>
-      <button
-        class="button column reject"
-        @click="changeModStatus(mod.id, 'rejected', index)"
-      >
-        Reject
-      </button>
+      <div class="buttons">
+        <button
+          class="button column approve"
+          @click="changeModStatus(mod.id, 'approved', index)"
+        >
+          Approve
+        </button>
+        <button
+          class="button column reject"
+          @click="changeModStatus(mod.id, 'rejected', index)"
+        >
+          Reject
+        </button>
+      </div>
     </ModCard>
     <div class="section-header">
       <h3 class="column-grow-1">Reports</h3>
@@ -145,7 +147,14 @@ export default {
 
 <style lang="scss" scoped>
 .button {
-  margin: 0.25rem 0;
+  margin: 0 5rem 0.5rem auto;
+}
+
+.buttons {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .report {
@@ -156,6 +165,7 @@ export default {
     display: flex;
     align-items: center;
     flex-direction: row;
+    justify-content: center;
 
     .title {
       font-size: var(--font-size-lg);

pages/dashboard/projects.vue

@@ -26,7 +26,7 @@
       :is-modrinth="true"
     >
       <nuxt-link
-        class="button buttons column"
+        class="button column edit-button"
         :to="'/mod/' + mod.id + '/settings'"
       >
         Settings
@@ -75,6 +75,11 @@ export default {
 .mod-name {
   font-weight: bold;
 }
+
+.edit-button {
+  align-self: flex-end;
+  margin-right: 2rem;
+}
 // .buttonse {
 //   margin-left: 4.5rem;
 //   padding: 0.5rem 2rem 0.5rem 2rem;