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/tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
         icon: "var(--color-icon)",
         // Text
         primary: "var(--color-text)",
+        contrast: "var(--color-contrast)",
         secondary: "var(--color-secondary)",
         inactive: "var(--color-text-inactive)",
         dark: "var(--color-text-dark)",
@@ -24,22 +25,37 @@ module.exports = {
         red: "var(--color-red)",
         orange: "var(--color-orange)",
         purple: "var(--color-purple)",
-        contrast: "var(--color-contrast)",
         bg: {
           DEFAULT: "var(--color-bg)",
           red: "var(--color-red-bg)",
+          orange: "var(--color-orange-bg)",
+          green: "var(--color-green-bg)",
+          blue: "var(--color-blue-bg)",
+          purple: "var(--color-purple-bg)",
           raised: "var(--color-raised-bg)",
         },
+        highlight: {
+          DEFAULT: "var(--color-brand-highlight)",
+          red: "var(--color-red-highlight)",
+          orange: "var(--color-orange-highlight)",
+          green: "var(--color-green-highlight)",
+          blue: "var(--color-blue-highlight)",
+          purple: "var(--color-purple-highlight)",
+        },
         divider: {
           DEFAULT: "var(--color-divider)",
           dark: "var(--color-divider-dark)",
         },
         brand: {
           DEFAULT: "var(--color-brand)",
-          green: "var(--color-brand-green)",
+          red: "var(--color-red)",
+          orange: "var(--color-orange)",
+          green: "var(--color-green)",
+          blue: "var(--color-blue)",
+          purple: "var(--color-purple)",
           highlight: "var(--color-brand-highlight)",
           shadow: "var(--color-brand-shadow)",
-          inverted: "var(--color-brand-inverted)",
+          inverted: "var(--color-accent-contrast)",
         },
         tabUnderlineHovered: "var(--tab-underline-hovered)",
         button: {