Layout refactor (#150)

* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing

pages/dashboard/follows.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header">
       <h3 class="column-grow-1">Followed mods</h3>
     </div>
@@ -9,18 +9,18 @@
         :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"
+        :created-at="mod.published"
+        :description="mod.description"
+        :downloads="mod.downloads.toString()"
         :edit-mode="true"
+        :icon-url="mod.icon_url"
         :is-modrinth="true"
+        :latest-version="mod.latest_version"
+        :name="mod.title"
+        :page-url="mod.page_url"
+        :updated-at="mod.updated"
       >
         <div class="buttons">
           <button
@@ -34,27 +34,26 @@
       </ModCard>
     </div>
     <div v-else class="error">
-      <FollowIllustration class="icon"></FollowIllustration><br />
+      <FollowIllustration class="icon"></FollowIllustration>
+      <br />
       <span class="text"
         >You don't have any followed mods. <br />
-        Why don't you <nuxt-link to="/mods" class="link">search</nuxt-link> for
+        Why don't you <nuxt-link class="link" to="/mods">search</nuxt-link> for
         new ones?</span
       >
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import FollowIcon from '~/assets/images/utils/heart.svg?inline'
 import FollowIllustration from '~/assets/images/illustrations/follow_illustration.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     FollowIcon,
     FollowIllustration,
@@ -76,17 +75,9 @@ export default {
   },
   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.$auth.headers
       )
 
       this.mods.splice(index, 1)
@@ -111,6 +102,7 @@ export default {
   margin-left: auto;
   padding: 0.5rem;
 }
+
 .error {
   display: flex;
   flex-direction: column;

pages/dashboard/misc/revoke-token.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">Revoke your Modrinth token</h3>
     </div>
@@ -23,10 +23,11 @@
       <ol>
         <li>
           <a
-            target="_blank"
             href="https://github.com/settings/connections/applications/3acffb2e808d16d4b226"
-            >Head to the Modrinth Application page on GitHub.</a
+            target="_blank"
           >
+            Head to the Modrinth Application page on GitHub.
+          </a>
           Make sure to be logged into the GitHub account you used for Modrinth!
         </li>
         <li>
@@ -36,22 +37,19 @@
       </ol>
       <p>Once you have completed the steps, press the continue button below.</p>
       <p>
-        <strong
-          >This will log you out of Modrinth, however when you log back in your
-          token will be regenerated.</strong
-        >
+        <strong>
+          This will log you out of Modrinth, however when you log back in your
+          token will be regenerated.
+        </strong>
       </p>
       <button @click="logout">Continue</button>
     </section>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
-import DashboardPage from '@/components/wrapper/DashboardPage'
 export default {
-  components: {
-    DashboardPage,
-  },
+  components: {},
   methods: {
     async logout() {
       this.$cookies.set('auth-token-reset', true)
@@ -103,10 +101,12 @@ label {
     flex: 3;
     height: fit-content;
   }
+
   button {
     :hover {
       cursor: pointer;
     }
+
     height: fit-content;
     flex: 1;
   }

pages/dashboard/moderation.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header">
       <h3 class="column-grow-1">Mods</h3>
     </div>
@@ -9,19 +9,19 @@
         :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"
+        :created-at="mod.published"
+        :description="mod.description"
+        :downloads="mod.downloads.toString()"
         :edit-mode="true"
-        :status="mod.status"
+        :icon-url="mod.icon_url"
         :is-modrinth="true"
+        :latest-version="mod.latest_version"
+        :name="mod.title"
+        :page-url="mod.page_url"
+        :status="mod.status"
+        :updated-at="mod.updated"
       >
         <div class="buttons">
           <button
@@ -79,22 +79,21 @@
       </div>
     </div>
     <div v-else class="error">
-      <Security class="icon"></Security><br />
+      <Security class="icon"></Security>
+      <br />
       <span class="text">You are up-to-date!</span>
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
 
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import Security from '~/assets/images/illustrations/security.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     Security,
   },

pages/dashboard/notifications.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">My notifications</h3>
     </div>
@@ -44,21 +44,19 @@
       </div>
     </div>
     <div v-else class="error">
-      <UpToDate class="icon"></UpToDate><br />
+      <UpToDate class="icon"></UpToDate>
+      <br />
       <span class="text">You are up-to-date!</span>
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
-
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     UpToDate,
   },
   async asyncData(data) {
@@ -136,6 +134,7 @@ export default {
     margin: 0;
   }
 }
+
 .error {
   display: flex;
   flex-direction: column;

pages/dashboard/projects.vue

@@ -1,5 +1,5 @@
 <template>
-  <DashboardPage>
+  <div>
     <div class="section-header columns">
       <h3 class="column-grow-1">My mods</h3>
       <nuxt-link class="brand-button column" to="/mod/create">
@@ -42,19 +42,16 @@
         <nuxt-link class="link" to="/mod/create">create one</nuxt-link>?</span
       >
     </div>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
 import axios from 'axios'
-
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import ModCard from '~/components/ui/ProjectCard'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
 
 export default {
   components: {
-    DashboardPage,
     ModCard,
     UpToDate,
   },

pages/dashboard/settings.vue

@@ -1,6 +1,6 @@
 /* eslint-disable vue/attribute-hyphenation */
 <template>
-  <DashboardPage>
+  <div>
     <ConfirmPopup
       ref="delete_popup"
       title="Are you sure you want to delete your account?"
@@ -108,16 +108,16 @@
         </div>
       </label>
     </section>
-  </DashboardPage>
+  </div>
 </template>
 
 <script>
-import DashboardPage from '@/components/wrapper/DashboardPage'
 import axios from 'axios'
+import ConfirmPopup from '~/components/ui/ConfirmPopup'
 
 export default {
   components: {
-    DashboardPage,
+    ConfirmPopup,
   },
   fetch() {
     this.username = this.$auth.user.username