Make download/follower displays consistent (#746)

Closes #602

assets/styles/components.scss

@@ -1271,3 +1271,23 @@ button {
     color: var(--color-button-text-active);
   }
 }
+
+.primary-stat {
+  align-items: center;
+  display: flex;
+  margin-bottom: 0.6rem;
+
+  .primary-stat__icon {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  .primary-stat__text {
+    margin-left: 0.4rem;
+  }
+
+  .primary-stat__counter {
+    font-size: var(--font-size-lg);
+    font-weight: bold;
+  }
+}

pages/_type/_id.vue

@@ -84,15 +84,23 @@
             class="categories"
           />
           <hr class="card-divider" />
-          <div class="stats">
+          <div class="primary-stat">
-            <span class="stat">{{ $formatNumber(project.downloads) }}</span>
+            <DownloadIcon class="primary-stat__icon" aria-hidden="true" />
-            <span class="label"
+            <div class="primary-stat__text">
-              >download<span v-if="project.downloads !== 1">s</span></span
+              <span class="primary-stat__counter">
-            >
+                {{ $formatNumber(project.downloads) }}
-            <span class="stat">{{ $formatNumber(project.followers) }}</span>
+              </span>
-            <span class="label"
+              download<span v-if="project.downloads !== 1">s</span>
-              >follower<span v-if="project.followers !== 1">s</span></span
+            </div>
-            >
+          </div>
+          <div class="primary-stat">
+            <HeartIcon class="primary-stat__icon" aria-hidden="true" />
+            <div class="primary-stat__text">
+              <span class="primary-stat__counter">
+                {{ $formatNumber(project.followers) }}
+              </span>
+              follower<span v-if="project.followers !== 1">s</span>
+            </div>
           </div>
           <div class="dates">
             <div
@@ -141,7 +149,7 @@
                 class="iconified-button"
                 @click="$store.dispatch('user/unfollowProject', project)"
               >
-                <FollowIcon fill="currentColor" aria-hidden="true" />
+                <HeartIcon fill="currentColor" aria-hidden="true" />
                 Unfollow
               </button>
             </template>
@@ -151,7 +159,7 @@
                 Report
               </a>
               <a class="iconified-button" :href="authUrl">
-                <FollowIcon fill="currentColor" aria-hidden="true" />
+                <HeartIcon fill="currentColor" aria-hidden="true" />
                 Follow
               </a>
             </template>
@@ -331,7 +339,7 @@
                   v-else-if="donation.id === 'open-collective'"
                   aria-hidden="true"
                 />
-                <FollowIcon v-else-if="donation.id === 'github'" />
+                <HeartIcon v-else-if="donation.id === 'github'" />
                 <UnknownIcon v-else />
                 <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
                 <span v-else-if="donation.id === 'patreon'">Patreon</span>
@@ -666,7 +674,7 @@
                   v-else-if="donation.id === 'open-collective'"
                   aria-hidden="true"
                 />
-                <FollowIcon v-else-if="donation.id === 'github'" />
+                <HeartIcon v-else-if="donation.id === 'github'" />
                 <UnknownIcon v-else />
                 <span v-if="donation.id === 'bmac'">Buy Me a Coffee</span>
                 <span v-else-if="donation.id === 'patreon'">Patreon</span>
@@ -837,7 +845,7 @@ import DownloadIcon from '~/assets/images/utils/download.svg?inline'
 import UpdateIcon from '~/assets/images/utils/updated.svg?inline'
 import CodeIcon from '~/assets/images/sidebar/mod.svg?inline'
 import ReportIcon from '~/assets/images/utils/report.svg?inline'
-import FollowIcon from '~/assets/images/utils/heart.svg?inline'
+import HeartIcon from '~/assets/images/utils/heart.svg?inline'
 import InfoIcon from '~/assets/images/utils/info.svg?inline'
 import IssuesIcon from '~/assets/images/utils/issues.svg?inline'
 import WikiIcon from '~/assets/images/utils/wiki.svg?inline'
@@ -873,7 +881,7 @@ export default {
     UpdateIcon,
     CodeIcon,
     ReportIcon,
-    FollowIcon,
+    HeartIcon,
     InfoIcon,
     WikiIcon,
     DiscordIcon,
@@ -1192,17 +1200,6 @@ export default {
     font-size: var(--font-size-nm);
   }
 
-  .stats {
-    .stat {
-      font-size: var(--font-size-lg);
-      font-weight: bold;
-    }
-
-    .label {
-      margin-right: 0.125rem;
-    }
-  }
-
   .dates {
     margin: 0.75rem 0;
 

pages/user/_id.vue

@@ -108,14 +108,14 @@
               <DownloadIcon class="primary-stat__icon" aria-hidden="true" />
               <div class="primary-stat__text">
                 <span class="primary-stat__counter">{{ sumDownloads() }}</span>
-                <span class="primary-stat__label">downloads</span>
+                downloads
               </div>
             </div>
             <div class="primary-stat">
               <HeartIcon class="primary-stat__icon" aria-hidden="true" />
               <div class="primary-stat__text">
                 <span class="primary-stat__counter">{{ sumFollows() }}</span>
-                <span class="primary-stat__label">followers of projects</span>
+                followers of projects
               </div>
             </div>
             <div class="stats-block__item secondary-stat">
@@ -566,26 +566,6 @@ export default {
   gap: 0.5rem;
 }
 
-.primary-stat {
-  align-items: center;
-  display: flex;
-  margin-bottom: 0.6rem;
-}
-
-.primary-stat__icon {
-  height: 1rem;
-  width: 1rem;
-}
-
-.primary-stat__text {
-  margin-left: 0.4rem;
-}
-
-.primary-stat__counter {
-  font-size: var(--font-size-md);
-  font-weight: bold;
-}
-
 .date {
   cursor: default;
 }