From 01703aff4392a936d6e74bdd1ca615b6c1990cc4 Mon Sep 17 00:00:00 2001
From: Geometrically <jai.a@tuta.io>
Date: Fri, 29 Jan 2021 20:49:13 -0700
Subject: [PATCH] Visual fixes

---
 layouts/default.vue          | 136 ++++++++++++++++++-----------------
 pages/dashboard/settings.vue |  19 +++--
 pages/mod/_id/versions.vue   |  14 ++--
 3 files changed, 92 insertions(+), 77 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 21c1c41a5..0ccb75b46 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -17,77 +17,81 @@
             <NuxtLink to="/mods" class="tab">
               <span>Mods</span>
             </NuxtLink>
-            <div v-if="this.$auth.loggedIn" class="section">
-              <NuxtLink to="/dashboard/projects" class="tab">
-                <span>Dashboard</span>
-              </NuxtLink>
-            </div>
+            <client-only>
+              <div v-if="this.$auth.loggedIn" class="section">
+                <NuxtLink to="/dashboard/projects" class="tab">
+                  <span>Dashboard</span>
+                </NuxtLink>
+              </div>
+            </client-only>
           </div>
         </section>
         <section class="column-grow">
-          <template v-if="this.$auth.loggedIn">
-            <section class="user-controls">
-              <div
-                v-click-outside="hideDropdown"
-                class="dropdown"
-                :class="{ open: isDropdownOpen }"
-              >
-                <button class="control" @click="toggleDropdown">
-                  <div class="avatar">
-                    <span>{{ this.$auth.user.username }}</span>
-                    <img :src="this.$auth.user.avatar_url" class="icon" />
-                  </div>
-                  <DropdownIcon class="dropdown-icon" />
-                </button>
-                <div class="content">
-                  <ul v-if="isDropdownOpen" @click="hideDropdown">
-                    <li>
-                      <NuxtLink :to="userUrl">
-                        <UserIcon />
-                        <span>Profile</span>
-                      </NuxtLink>
-                    </li>
-                    <li>
-                      <NuxtLink to="/dashboard/notifications">
-                        <NotificationIcon />
-                        <span>Notifications</span>
-                      </NuxtLink>
-                    </li>
-                    <!--<li v-tooltip="'Not implemented yet'" class="hidden">
-                      <NuxtLink :to="userTeamsUrl" disabled>
-                        <UsersIcon />
-                        <span>Teams</span>
-                      </NuxtLink>
-                    </li>-->
-                    <li>
-                      <button @click="changeTheme">
-                        <MoonIcon v-if="$colorMode.value === 'light'" />
-                        <SunIcon v-else />
-                        <span v-if="$colorMode.value === 'light'">
+          <client-only>
+            <template v-if="this.$auth.loggedIn">
+              <section class="user-controls">
+                <div
+                  v-click-outside="hideDropdown"
+                  class="dropdown"
+                  :class="{ open: isDropdownOpen }"
+                >
+                  <button class="control" @click="toggleDropdown">
+                    <div class="avatar">
+                      <span>{{ this.$auth.user.username }}</span>
+                      <img :src="this.$auth.user.avatar_url" class="icon" />
+                    </div>
+                    <DropdownIcon class="dropdown-icon" />
+                  </button>
+                  <div class="content">
+                    <ul v-if="isDropdownOpen" @click="hideDropdown">
+                      <li>
+                        <NuxtLink :to="userUrl">
+                          <UserIcon />
+                          <span>Profile</span>
+                        </NuxtLink>
+                      </li>
+                      <li>
+                        <NuxtLink to="/dashboard/notifications">
+                          <NotificationIcon />
+                          <span>Notifications</span>
+                        </NuxtLink>
+                      </li>
+                      <!--<li v-tooltip="'Not implemented yet'" class="hidden">
+                        <NuxtLink :to="userTeamsUrl" disabled>
+                          <UsersIcon />
+                          <span>Teams</span>
+                        </NuxtLink>
+                      </li>-->
+                      <li>
+                        <button @click="changeTheme">
+                          <MoonIcon v-if="$colorMode.value === 'light'" />
+                          <SunIcon v-else />
+                          <span v-if="$colorMode.value === 'light'">
                           Dark Mode</span
-                        >
-                        <span v-else>Light Mode</span>
-                      </button>
-                    </li>
-                    <hr />
-                    <li>
-                      <button @click="logout">
-                        <LogOutIcon />
-                        <span>Log Out</span>
-                      </button>
-                    </li>
-                  </ul>
+                          >
+                          <span v-else>Light Mode</span>
+                        </button>
+                      </li>
+                      <hr />
+                      <li>
+                        <button @click="logout">
+                          <LogOutIcon />
+                          <span>Log Out</span>
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
                 </div>
-              </div>
-            </section>
-          </template>
-          <template v-else>
-            <section class="auth-prompt">
-              <a :href="authUrl" class="log-in-button"
-                ><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
-              >
-            </section>
-          </template>
+              </section>
+            </template>
+            <template v-else>
+              <section class="auth-prompt">
+                <a :href="authUrl" class="log-in-button"
+                  ><GitHubIcon aria-hidden="true" />Sign In with GitHub</a
+                >
+              </section>
+            </template>
+          </client-only>
         </section>
       </section>
     </header>
diff --git a/pages/dashboard/settings.vue b/pages/dashboard/settings.vue
index 4499ba252..d49af9c55 100644
--- a/pages/dashboard/settings.vue
+++ b/pages/dashboard/settings.vue
@@ -93,12 +93,9 @@
           will be removed from our servers. This cannot be reversed, so be
           careful!</span
         >
-        <input
-          type="button"
-          class="button"
-          value="Delete Account"
-          @click="deleteAccount"
-        />
+        <div type="button" class="button" @click="deleteAccount">
+          Delete Account
+        </div>
       </label>
     </section>
   </DashboardPage>
@@ -257,5 +254,15 @@ label {
   input[type='button']:hover {
     cursor: pointer;
   }
+
+  div,
+  a {
+    text-align: center;
+    height: fit-content;
+    flex: 1;
+  }
+  div:hover {
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/pages/mod/_id/versions.vue b/pages/mod/_id/versions.vue
index b2bbc8e75..af29c314d 100644
--- a/pages/mod/_id/versions.vue
+++ b/pages/mod/_id/versions.vue
@@ -68,9 +68,11 @@
         </tr>
       </tbody>
     </table>
-    <nuxt-link v-if="currentMember" to="newversion" class="button">
-      New Version
-    </nuxt-link>
+    <div class="new-version">
+      <nuxt-link v-if="currentMember" to="newversion" class="button">
+        New Version
+      </nuxt-link>
+    </div>
   </ModPage>
 </template>
 <script>
@@ -294,8 +296,10 @@ table {
   }
 }
 
-.button {
-  float: right;
+.new-version {
+  width: 100%;
+  text-align: right;
+  margin-bottom: var(--spacing-card-md);
 }
 
 @media screen and (max-width: 400px) {