From b5f438aa0cee8f568c29462b87ba3ef976c94f2c Mon Sep 17 00:00:00 2001
From: Emma <emmaffle@modrinth.com>
Date: Wed, 12 Jan 2022 11:37:20 -0500
Subject: [PATCH] Fix various issues reported on the Trello (#341)

* Fix various issues reported on the Trello

* Remove accidental additions
---
 layouts/default.vue          | 10 +++++-----
 pages/_type/_id/edit.vue     |  4 ++--
 pages/_type/_id/settings.vue |  4 ++--
 pages/_type/_id/version.vue  | 18 +++++++++++++++---
 pages/create/project.vue     | 26 +++++++++++++++++++-------
 pages/moderation.vue         | 11 ++++++-----
 pages/settings.vue           |  2 +-
 pages/settings/index.vue     | 15 +++++++--------
 pages/settings/privacy.vue   | 12 ++++++------
 pages/settings/security.vue  |  2 +-
 pages/user/_id.vue           | 18 ------------------
 11 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 18bdd130b..4588b1b7c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -54,7 +54,7 @@
               >
                 <MoonIcon v-if="$colorMode.value === 'light'" />
                 <SunIcon v-else />
-                Change Theme
+                Change theme
               </button>
               <div
                 v-if="$auth.user"
@@ -92,7 +92,7 @@
                     <li class="hide-desktop">
                       <NuxtLink to="/create/project">
                         <PlusIcon />
-                        <span>Create Project</span>
+                        <span>Create project</span>
                       </NuxtLink>
                     </li>
                     <li>
@@ -112,13 +112,13 @@
                       <button @click="changeTheme">
                         <MoonIcon v-if="$colorMode.value === 'light'" />
                         <SunIcon v-else />
-                        <span>Change Theme</span>
+                        <span>Change theme</span>
                       </button>
                     </li>
                     <li>
                       <button @click="logout">
                         <LogOutIcon />
-                        <span>Log Out</span>
+                        <span>Log out</span>
                       </button>
                     </li>
                     <hr class="hide-desktop" />
@@ -184,7 +184,7 @@
         <nuxt-link to="/settings/privacy">
           <button class="iconified-button">
             <ShieldIcon />
-            Set privacy settings
+            Privacy settings
           </button>
         </nuxt-link>
         <button class="iconified-button" @click="changeTheme">
diff --git a/pages/_type/_id/edit.vue b/pages/_type/_id/edit.vue
index 5e1d1c40d..fcd6a69a2 100644
--- a/pages/_type/_id/edit.vue
+++ b/pages/_type/_id/edit.vue
@@ -137,7 +137,7 @@
         :disabled="(currentMember.permissions & EDIT_DETAILS) !== EDIT_DETAILS"
       >
         <TrashIcon />
-        Reset icon
+        Reset
       </button>
     </section>
     <section class="card game-sides">
@@ -508,7 +508,7 @@ export default {
     this.MANAGE_INVITES = 1 << 4
     this.REMOVE_MEMBER = 1 << 5
     this.EDIT_MEMBER = 1 << 6
-    this.DELETE_MOD = 1 << 7
+    this.DELETE_PROJECT = 1 << 7
   },
   methods: {
     async saveProjectReview() {
diff --git a/pages/_type/_id/settings.vue b/pages/_type/_id/settings.vue
index 343e20e00..d6cf4c600 100644
--- a/pages/_type/_id/settings.vue
+++ b/pages/_type/_id/settings.vue
@@ -424,8 +424,8 @@ export default {
     },
     showPopup() {
       if (
-        (this.currentMember.permissions & this.DELETE_MOD) ===
-        this.DELETE_MOD
+        (this.currentMember.permissions & this.DELETE_PROJECT) ===
+        this.DELETE_PROJECT
       ) {
         this.$refs.delete_popup.show()
       }
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index b1e215188..66b8a8baf 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -218,7 +218,13 @@
               :hide-selected="true"
               placeholder="Choose mod loaders..."
             />
-            <p v-else class="value">{{ version.loaders.join(',') }}</p>
+            <p v-else class="value">
+              {{
+                version.loaders
+                  .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                  .join(', ')
+              }}
+            </p>
           </div>
           <div v-if="mode === 'version'" class="data">
             <p class="title">Downloads</p>
@@ -251,7 +257,13 @@
               :hide-selected="true"
               placeholder="Choose versions..."
             />
-            <p v-else class="value">{{ version.game_versions.join(',') }}</p>
+            <p v-else class="value">
+              {{
+                version.game_versions
+                  .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                  .join(', ')
+              }}
+            </p>
           </div>
           <div v-if="mode === 'version'" class="data">
             <p class="title">Published</p>
@@ -363,7 +375,7 @@
             <input
               v-model="newDependencyId"
               type="text"
-              :placeholder="`Enter the ${dependencyAddMode} id...`"
+              :placeholder="`Enter the ${dependencyAddMode} ID...`"
             />
             <Multiselect
               v-model="newDependencyType"
diff --git a/pages/create/project.vue b/pages/create/project.vue
index c3e4b6fed..a1e019de6 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -117,7 +117,7 @@
           "
         >
           <TrashIcon />
-          Reset icon
+          Reset
         </button>
       </section>
       <section class="card game-sides">
@@ -225,8 +225,20 @@
             >
               <td>{{ version.version_title }}</td>
               <td>{{ version.version_number }}</td>
-              <td>{{ version.loaders.join(', ') }}</td>
-              <td>{{ version.game_versions.join(', ') }}</td>
+              <td>
+                {{
+                  version.loaders
+                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .join(', ')
+                }}
+              </td>
+              <td>
+                {{
+                  version.game_versions
+                    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+                    .join(', ')
+                }}
+              </td>
               <td>
                 <VersionBadge
                   v-if="version.release_channel === 'release'"
@@ -393,7 +405,7 @@
                 <input
                   v-model="newDependencyId"
                   type="text"
-                  :placeholder="`Enter the ${dependencyAddMode} id...`"
+                  :placeholder="`Enter the ${dependencyAddMode} ID...`"
                 />
                 <Multiselect
                   v-model="newDependencyType"
@@ -506,7 +518,7 @@
             @click="gallery.push({})"
           >
             <PlusIcon />
-            Add a image
+            Add an image
           </button>
         </div>
         <div v-for="(item, index) in gallery" :key="index" class="gallery-item">
@@ -554,14 +566,14 @@
                 "
               >
                 <TrashIcon />
-                Reset image
+                Reset
               </button>
             </div>
           </div>
           <div class="buttons">
             <button class="iconified-button" @click="gallery.splice(index, 1)">
               <TrashIcon />
-              Remove Gallery Image
+              Remove
             </button>
 
             <hr v-if="gallery.length > 0 && index !== gallery.length - 1" />
diff --git a/pages/moderation.vue b/pages/moderation.vue
index 536619201..01e492daf 100644
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -2,14 +2,14 @@
   <div class="page-container">
     <Popup v-if="currentProject" :show-popup="true">
       <div class="moderation-popup">
-        <h2>Moderation Form</h2>
+        <h2>Moderation form</h2>
         <p>
           Both of these fields are optional, but can be used to communicate
-          problems with a project team members. The body supports markdown
+          problems with a project's team members. The body supports markdown
           formatting!
         </p>
         <div class="status">
-          <span>New Project Status: </span>
+          <span>New project status: </span>
           <Badge
             v-if="currentProject.newStatus === 'approved'"
             color="green"
@@ -18,6 +18,7 @@
           <Badge
             v-else-if="
               currentProject.newStatus === 'processing' ||
+              currentProject.newStatus === 'unlisted' ||
               currentProject.newStatus === 'archived'
             "
             color="yellow"
@@ -59,7 +60,7 @@
             @click="saveProject"
           >
             <CheckIcon />
-            Save project status
+            Confirm
           </button>
         </div>
       </div>
@@ -298,7 +299,7 @@ export default {
 
 <style lang="scss" scoped>
 .moderation-popup {
-  width: 480px;
+  width: auto;
   padding: var(--spacing-card-md) var(--spacing-card-lg);
 
   .status {
diff --git a/pages/settings.vue b/pages/settings.vue
index 19e10a447..07f48a3d7 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -6,7 +6,7 @@
         <h1 v-else>Settings</h1>
         <div class="card styled-tabs">
           <nuxt-link v-if="$auth.user" class="tab" to="/settings" exact
-            ><span>Profile</span></nuxt-link
+            ><span>General</span></nuxt-link
           >
           <nuxt-link v-if="$auth.user" class="tab" to="/settings/follows">
             <span>Followed projects</span>
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 6d657c326..e4d601419 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -20,7 +20,7 @@
           "
         >
           <TrashIcon />
-          Reset icon
+          Reset
         </button>
       </div>
       <div class="recap">
@@ -92,11 +92,10 @@
         </label>
         <h3>Theme</h3>
         <label>
-          <span
-            >Change the global site theme of Modrinth. You can switch it here or
-            anywhere by accessing the theme switcher in the navigation bar
-            dropdown.</span
-          >
+          <span>
+            Change the global site theme. It can also be changed between light
+            and dark in the navigation bar.
+          </span>
           <Multiselect
             v-model="$colorMode.preference"
             :options="['light', 'dark', 'oled']"
@@ -145,14 +144,14 @@ export default {
     }
   },
   fetch() {
-    this.$emit('update:action-button', 'Save profile settings')
+    this.$emit('update:action-button', 'Save')
     this.$emit('update:action-button-callback', this.saveChanges)
   },
   head: {
     title: 'Settings - Modrinth',
   },
   created() {
-    this.$emit('update:action-button', 'Save profile settings')
+    this.$emit('update:action-button', 'Save')
     this.$emit('update:action-button-callback', this.saveChanges)
   },
   methods: {
diff --git a/pages/settings/privacy.vue b/pages/settings/privacy.vue
index 77f9ff55b..557a9901f 100644
--- a/pages/settings/privacy.vue
+++ b/pages/settings/privacy.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="rows card">
-    <div class="consent-container">
+    <div class="privacy-settings-container">
       <div>
         Modrinth relies on different providers and in-house tools to allow us to
         provide custom-tailored experiences and personalized advertising. You
@@ -32,10 +32,10 @@
     </div>
     <div class="actions">
       <button class="iconified-button" @click="toggleAll(false)">
-        Refuse All
+        Select none
       </button>
       <button class="iconified-button" @click="toggleAll(true)">
-        Accept All
+        Select all
       </button>
     </div>
   </div>
@@ -54,7 +54,7 @@ export default {
     }
   },
   fetch() {
-    this.$emit('update:action-button', 'Confirm my choices')
+    this.$emit('update:action-button', 'Confirm')
     this.$emit('update:action-button-callback', this.confirm)
 
     this.$store.dispatch('consent/loadFromCookies', this.$cookies)
@@ -77,7 +77,7 @@ export default {
     title: 'Privacy Settings - Modrinth',
   },
   created() {
-    this.$emit('update:action-button', 'Confirm my choices')
+    this.$emit('update:action-button', 'Confirm')
     this.$emit('update:action-button-callback', this.confirm)
   },
   options: {
@@ -132,7 +132,7 @@ export default {
   }
 }
 
-.consent-container {
+.privacy-settings-container {
   .divider {
     margin-top: 1rem;
   }
diff --git a/pages/settings/security.vue b/pages/settings/security.vue
index 9945e1b4c..28ee7edb1 100644
--- a/pages/settings/security.vue
+++ b/pages/settings/security.vue
@@ -48,7 +48,7 @@
           This cannot be reversed, so be careful!</span
         >
         <input
-          value="Delete Account"
+          value="Delete account"
           type="button"
           class="iconified-button"
           @click="$refs.delete_popup.show()"
diff --git a/pages/user/_id.vue b/pages/user/_id.vue
index ab3c5c82f..22d8ce9d1 100644
--- a/pages/user/_id.vue
+++ b/pages/user/_id.vue
@@ -47,13 +47,6 @@
               <span class="primary-stat__label">downloads</span>
             </div>
           </div>
-          <div class="stats-block__item primary-stat">
-            <HeartIcon class="primary-stat__icon" />
-            <div class="primary-stat__text">
-              <span class="primary-stat__counter">{{ sumFollows() }}</span>
-              <span class="primary-stat__label">followers of projects</span>
-            </div>
-          </div>
         </div>
       </aside>
     </div>
@@ -130,7 +123,6 @@ import Advertisement from '~/components/ads/Advertisement'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
 import SunriseIcon from '~/assets/images/utils/sunrise.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download-alt.svg?inline'
-import HeartIcon from '~/assets/images/utils/heart.svg?inline'
 import SettingsIcon from '~/assets/images/utils/settings.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?inline'
@@ -143,7 +135,6 @@ export default {
     SunriseIcon,
     DownloadIcon,
     ReportIcon,
-    HeartIcon,
     Badge,
     SettingsIcon,
     PlusIcon,
@@ -243,15 +234,6 @@ export default {
         sum += projects.downloads
       }
 
-      return this.formatNumber(sum)
-    },
-    sumFollows() {
-      let sum = 0
-
-      for (const projects of this.projects) {
-        sum += projects.followers
-      }
-
       return this.formatNumber(sum)
     },
   },