Project, Search, User redesign (#1281)

* New project page

* fix silly icon tailwind classes

* Start new versions page, add new ButtonStyled component

* Pagination and finish mocking up versions page functionality

* green download button

* hover animation

* New Modal, Avatar refactor, subpages in NavTabs

* lint

* Download modal

* New user page + fix lint

* fix ui lint

* Download animation fix

* Versions filter + finish project page

* Improve consistency of buttons on home page

* Fix ButtonStyled breaking

* Fix margin on version summary

* finish search, new modals, user + project page mobile

* fix gallery image pages

* New project header

* Fix gallery tab showing improperly

* Use auto direction + position for all popouts

* Preliminary user page

* test to see if this fixes login stuff

* remove extra slash

* Add version actions, move download button on versions page

* Listed -> public

* Shorten download modal selector height

* Fix user menu open direction

* Change breakpoint for header collapse

* Only underline title

* Tighten padding on stats a little

* New nav

* Make mobile breakpoint more consistent

* fix header breakpoint regression

* Add sign in button

* Fix edit icon color

* Fix margin at top of screen

* Fix user bios and ad width

* Fix user nav showing when there's only one type of project

* Fix plural projects on user page & extract i18n

* Remove ads on mobile for now

* Fix overflow menu showing hidden items

* NavTabs on mobile

* Fix navbar z index

* Search filter overhaul + negative filters

* fix no-max-height

* port version filters, fix following/collections, lint

* hide promos

* ui lint

* Disable modal background animation to reduce reported motion sickness

* Hide install with modrinth app button on mobile

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>

apps/frontend/src/components/ui/Badge.vue

@@ -1,5 +1,9 @@
 <template>
-  <span :class="'badge flex items-center gap-1 ' + color + ' type--' + type">
+  <span
+    :class="
+      'badge flex items-center gap-1 font-semibold text-secondary ' + color + ' type--' + type
+    "
+  >
     <template v-if="color"> <span class="circle" /> {{ $capitalizeString(type) }}</template>
 
     <!-- User roles -->
@@ -9,10 +13,11 @@
     <template v-else-if="type === 'plus'"><PlusIcon /> Modrinth Plus</template>
 
     <!-- Project statuses -->
-    <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
+    <template v-else-if="type === 'approved'"><GlobeIcon /> Public</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 === 'unlisted' || type === 'withheld'"
+      ><LinkIcon /> Unlisted</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'"><DraftIcon /> Draft</template>
@@ -36,12 +41,12 @@
 </template>
 
 <script setup>
+import { GlobeIcon, LinkIcon } from "@modrinth/assets";
+
 import ModrinthIcon from "~/assets/images/logo.svg?component";
 import PlusIcon from "~/assets/images/utils/plus.svg?component";
 import ModeratorIcon from "~/assets/images/sidebar/admin.svg?component";
 import CreatorIcon from "~/assets/images/utils/box.svg?component";
-import ListIcon from "~/assets/images/utils/list.svg?component";
-import EyeOffIcon from "~/assets/images/utils/eye-off.svg?component";
 import DraftIcon from "~/assets/images/utils/file-text.svg?component";
 import CrossIcon from "~/assets/images/utils/x.svg?component";
 import ArchiveIcon from "~/assets/images/utils/archive.svg?component";
@@ -65,12 +70,6 @@ defineProps({
 
 <style lang="scss" scoped>
 .badge {
-  font-weight: bold;
-  width: fit-content;
-  --badge-color: var(--color-gray);
-  color: var(--badge-color);
-  white-space: nowrap;
-
   .circle {
     width: 0.5rem;
     height: 0.5rem;
@@ -110,7 +109,6 @@ defineProps({
   }
 
   &.type--creator,
-  &.type--approved,
   &.blue {
     --badge-color: var(--color-blue);
   }
@@ -122,8 +120,9 @@ defineProps({
   }
 
   &.type--private,
+  &.type--approved,
   &.gray {
-    --badge-color: var(--color-gray);
+    --badge-color: var(--color-secondary);
   }
 }
 </style>