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/CollectionCreateModal.vue

@@ -1,47 +1,59 @@
 <template>
-  <Modal ref="modal" header="Create a collection">
-    <div class="universal-modal modal-creation universal-labels">
-      <div class="markdown-body">
-        <p>
-          Your new collection will be created as a public collection with
-          {{ projectIds.length > 0 ? projectIds.length : "no" }}
-          {{ projectIds.length !== 1 ? "projects" : "project" }}.
-        </p>
+  <NewModal ref="modal" header="Creating a collection">
+    <div class="flex flex-col gap-3">
+      <div class="flex flex-col gap-2">
+        <label for="name">
+          <span class="text-lg font-semibold text-contrast">
+            Name
+            <span class="text-brand-red">*</span>
+          </span>
+        </label>
+        <input
+          id="name"
+          v-model="name"
+          type="text"
+          maxlength="64"
+          :placeholder="`Enter collection name...`"
+          autocomplete="off"
+        />
       </div>
-      <label for="name">
-        <span class="label__title">Name<span class="required">*</span></span>
-      </label>
-      <input
-        id="name"
-        v-model="name"
-        type="text"
-        maxlength="64"
-        :placeholder="`Enter collection name...`"
-        autocomplete="off"
-      />
-      <label for="additional-information">
-        <span class="label__title">Summary<span class="required">*</span></span>
-        <span class="label__description">This appears on your collection's page.</span>
-      </label>
-      <div class="textarea-wrapper">
-        <textarea id="additional-information" v-model="description" maxlength="256" />
+      <div class="flex flex-col gap-2">
+        <label for="additional-information" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast">
+            Summary
+            <span class="text-brand-red">*</span>
+          </span>
+          <span>A sentence or two that describes your collection.</span>
+        </label>
+        <div class="textarea-wrapper">
+          <textarea id="additional-information" v-model="description" maxlength="256" />
+        </div>
       </div>
-      <div class="push-right input-group">
-        <Button @click="modal.hide()">
-          <CrossIcon />
-          Cancel
-        </Button>
-        <Button color="primary" @click="create">
-          <CheckIcon />
-          Continue
-        </Button>
+      <p class="m-0 max-w-[30rem]">
+        Your new collection will be created as a public collection with
+        {{ projectIds.length > 0 ? projectIds.length : "no" }}
+        {{ projectIds.length !== 1 ? "projects" : "project" }}.
+      </p>
+      <div class="flex gap-2">
+        <ButtonStyled color="brand">
+          <button @click="create">
+            <PlusIcon />
+            Create collection
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modal.hide()">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
       </div>
     </div>
-  </Modal>
+  </NewModal>
 </template>
 <script setup>
-import { XIcon as CrossIcon, CheckIcon } from "@modrinth/assets";
-import { Modal, Button } from "@modrinth/ui";
+import { XIcon, PlusIcon } from "@modrinth/assets";
+import { NewModal, ButtonStyled } from "@modrinth/ui";
 
 const router = useNativeRouter();
 
@@ -86,10 +98,10 @@ async function create() {
   }
   stopLoading();
 }
-function show() {
+function show(event) {
   name.value = "";
   description.value = "";
-  modal.value.show();
+  modal.value.show(event);
 }
 
 defineExpose({