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>

packages/ui/src/components/modal/ConfirmModal.vue

@@ -1,6 +1,11 @@
 <template>
-  <Modal ref="modal" :header="title" :noblur="noblur">
-    <div class="modal-delete">
+  <NewModal ref="modal" :noblur="noblur" danger>
+    <template #title>
+      <slot name="title">
+        <span class="font-extrabold text-contrast text-lg">{{ title }}</span>
+      </slot>
+    </template>
+    <div>
       <div class="markdown-body" v-html="renderString(description)" />
       <label v-if="hasToType" for="confirmation" class="confirmation-label">
         <span>
@@ -19,25 +24,30 @@
           @input="type"
         />
       </div>
-      <div class="input-group push-right">
-        <button class="btn" @click="modal.hide()">
-          <XIcon />
-          Cancel
-        </button>
-        <button class="btn btn-danger" :disabled="action_disabled" @click="proceed">
-          <TrashIcon />
-          {{ proceedLabel }}
-        </button>
+      <div class="flex gap-2 mt-6">
+        <ButtonStyled color="red">
+          <button :disabled="action_disabled" @click="proceed">
+            <TrashIcon />
+            {{ proceedLabel }}
+          </button>
+        </ButtonStyled>
+        <ButtonStyled>
+          <button @click="modal.hide()">
+            <XIcon />
+            Cancel
+          </button>
+        </ButtonStyled>
       </div>
     </div>
-  </Modal>
+  </NewModal>
 </template>
 
 <script setup>
 import { renderString } from '@modrinth/utils'
 import { ref } from 'vue'
 import { TrashIcon, XIcon } from '@modrinth/assets'
-import Modal from './Modal.vue'
+import NewModal from './NewModal.vue'
+import ButtonStyled from '../base/ButtonStyled.vue'
 
 const props = defineProps({
   confirmationText: {
@@ -92,36 +102,3 @@ function show() {
 
 defineExpose({ show })
 </script>
-
-<style scoped lang="scss">
-.modal-delete {
-  padding: var(--gap-lg);
-  display: flex;
-  flex-direction: column;
-
-  .markdown-body {
-    margin-bottom: 1rem;
-  }
-
-  .confirmation-label {
-    margin-bottom: 0.5rem;
-  }
-
-  .confirmation-text {
-    padding-right: 0.25ch;
-    margin: 0 0.25rem;
-  }
-
-  .confirmation-input {
-    input {
-      width: 20rem;
-      max-width: 100%;
-    }
-  }
-
-  .button-group {
-    margin-left: auto;
-    margin-top: 1.5rem;
-  }
-}
-</style>