Add tooltips to project statuses

lib/components/base/Badge.vue

@@ -8,16 +8,71 @@
     <template v-else-if="type === 'creator'"><BoxIcon /> Creator</template>
 
     <!-- Project statuses -->
-    <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
-    <template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
-    <template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
-    <template v-else-if="type === 'withheld'"><EyeOffIcon /> Withheld</template>
-    <template v-else-if="type === 'private'"><LockIcon /> Private</template>
-    <template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
-    <template v-else-if="type === 'draft'"><FileTextIcon /> Draft</template>
-    <template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
-    <template v-else-if="type === 'rejected'"><XIcon /> Rejected</template>
-    <template v-else-if="type === 'processing'"> <UpdatedIcon /> Under review</template>
+    <template v-else-if="type === 'approved'">
+      <span v-tooltip="'Your project is visible in search and on your profile.'">
+        <ListIcon /> Listed
+      </span>
+    </template>
+    <template v-else-if="type === 'unlisted'">
+      <span
+        v-tooltip="
+          'Your project is published and can be accessed with a link, but it is not accessible in search or on your profile.'
+        "
+      >
+        <EyeOffIcon /> Unlisted
+      </span>
+    </template>
+    <template v-else-if="type === 'withheld'">
+      <span
+        v-tooltip="
+          'Your project is accessible by link but is not published in search. See the Moderation tab of the project for more details.'
+        "
+      >
+        <EyeOffIcon /> Withheld
+      </span>
+    </template>
+    <template v-else-if="type === 'private'">
+      <span v-tooltip="'Your project is only visible to members of the project.'">
+        <LockIcon /> Private
+      </span>
+    </template>
+    <template v-else-if="type === 'scheduled'">
+      <span
+        v-tooltip="'Your project will be automatically published at your chosen time and date.'"
+      >
+        <CalendarIcon /> Scheduled
+      </span>
+    </template>
+    <template v-else-if="type === 'draft'">
+      <span
+        v-tooltip="
+          'Your project is only visible to members of the project until you submit it for review.'
+        "
+        ><FileTextIcon /> Draft
+      </span>
+    </template>
+    <template v-else-if="type === 'archived'">
+      <span
+        v-tooltip="
+          'Your project is visible in search and will display a archival notice to visitors.'
+        "
+      >
+        <ArchiveIcon /> Archived
+      </span>
+    </template>
+    <template v-else-if="type === 'rejected'">
+      <span
+        v-tooltip="
+          'Your project cannot be published. See the Moderation tab of the project for more details.'
+        "
+        ><XIcon /> Rejected</span
+      >
+    </template>
+    <template v-else-if="type === 'processing'">
+      <span v-tooltip="'A moderator will need to review your project before it is published.'"
+        ><ProcessingIcon /> Under review</span
+      >
+    </template>
 
     <!-- Team members -->
     <template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>