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/assets/styles/classes.scss

@@ -476,6 +476,11 @@ a,
     }
   }
 
+  &.btn-large-round {
+    padding: 0.75rem;
+    border-radius: 50%;
+  }
+
   &.btn-dropdown-animation {
     svg:last-child {
       transition: transform 0.125s ease-in-out;
@@ -1085,7 +1090,8 @@ select {
     box-shadow: var(--shadow-inset-sm);
     border: none;
     cursor: pointer;
-    padding-left: 0.5rem;
+    padding-left: 7px;
+    padding-top: 10px;
     font-size: 1rem;
 
     transition: background-color 0.1s ease-in-out;

packages/assets/styles/defaults.scss

@@ -135,7 +135,7 @@ input[type='number'] {
   position: relative;
 
   input {
-    padding: 0 2.5rem;
+    padding: 0 0.5rem 0 2.5rem;
     width: 100%;
   }
 

packages/assets/styles/variables.scss

@@ -45,8 +45,15 @@ html {
   --color-purple: #8e32f3;
   --color-gray: #595b61;
 
+  --color-red-highlight: rgba(203, 34, 69, 0.25);
+  --color-orange-highlight: rgba(224, 131, 37, 0.25);
+  --color-green-highlight: rgba(0, 175, 92, 0.25);
+  --color-blue-highlight: rgba(31, 104, 192, 0.25);
+  --color-purple-highlight: rgba(142, 50, 243, 0.25);
+  --color-gray-highlight: rgba(89, 91, 97, 0.25);
+
   --color-brand: var(--color-green);
-  --color-brand-highlight: rgba(0, 175, 92, 0.25);
+  --color-brand-highlight: var(--color-green-highlight);
   --color-brand-shadow: rgba(0, 175, 92, 0.7);
 
   --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 91%, 0.1);
@@ -83,6 +90,13 @@ html {
   --color-purple: #c78aff;
   --color-gray: #9fa4b3;
 
+  --color-red-highlight: rgba(255, 73, 110, 0.25);
+  --color-orange-highlight: rgba(255, 163, 71, 0.25);
+  --color-green-highlight: rgba(27, 217, 106, 0.25);
+  --color-blue-highlight: rgba(79, 156, 255, 0.25);
+  --color-purple-highlight: rgba(199, 138, 255, 0.25);
+  --color-gray-highlight: rgba(159, 164, 179, 0.25);
+
   --color-brand: var(--color-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
   --color-brand-shadow: rgba(27, 217, 106, 0.7);