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/utils/analytics.js

@@ -68,7 +68,7 @@ export const getDefaultColor = (value) => {
   return defaultColors[value % defaultColors.length];
 };
 
-export const intToRgba = (color, projectId = "Unknown", theme = "dark") => {
+export const intToRgba = (color, projectId = "Unknown", theme = "dark", alpha = "1") => {
   const hash = hashProjectId(projectId);
 
   if (!color || color === 0) {
@@ -110,7 +110,7 @@ export const intToRgba = (color, projectId = "Unknown", theme = "dark") => {
   g = Math.min(255, Math.max(0, g));
   b = Math.min(255, Math.max(0, b));
 
-  return `rgba(${r}, ${g}, ${b}, 1)`;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 
 const emptyAnalytics = {

apps/frontend/src/utils/common-messages.ts

@@ -15,6 +15,10 @@ export const commonMessages = defineMessages({
     id: "button.continue",
     defaultMessage: "Continue",
   },
+  copyIdButton: {
+    id: "button.copy-id",
+    defaultMessage: "Copy ID",
+  },
   changesSavedLabel: {
     id: "label.changes-saved",
     defaultMessage: "Changes saved",
@@ -91,6 +95,10 @@ export const commonMessages = defineMessages({
     id: "label.rejected",
     defaultMessage: "Rejected",
   },
+  reportButton: {
+    id: "button.report",
+    defaultMessage: "Report",
+  },
   passwordLabel: {
     id: "label.password",
     defaultMessage: "Password",