App redesign (#2946)

* Start of app redesign

* format

* continue progress

* Content page nearly done

* Fix recursion issues with content page

* Fix update all alignment

* Discover page progress

* Settings progress

* Removed unlocked-size hack that breaks web

* Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues

* Ads + run prettier

* Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor

* fix ads not hiding when plus log in

* rev lockfile changes/conflicts

* Fix sign in page

* Add generated

* (mostly) Data driven search

* Fix search mobile issue

* profile fixes

* Project versions page, fix typescript on UI lib and misc fixes

* Remove unused gallery component

* Fix linkfunction err

* Search filter controls at top, localization for locked filters

* Fix provided filter names

* Fix navigating from instance browse to main browse

* Friends frontend (#2995)

* Friends system frontend

* (almost) finish frontend

* finish friends, fix lint

* Fix lint

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

* Refresh macOS app icon

* Update web search UI more

* Fix link opens

* Fix frontend build

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Jai A <jaiagr+gpg@pm.me>
Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

packages/ui/src/components/base/Checkbox.vue

@@ -6,14 +6,15 @@
     @click="toggle"
   >
     <button
-      class="checkbox"
+      class="checkbox border-none"
       role="checkbox"
       :disabled="disabled"
       :class="{ checked: modelValue, collapsing: collapsingToggleStyle }"
       :aria-label="description"
       :aria-checked="modelValue"
     >
-      <CheckIcon v-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
+      <MinusIcon v-if="indeterminate" aria-hidden="true" />
+      <CheckIcon v-else-if="modelValue && !collapsingToggleStyle" aria-hidden="true" />
       <DropdownIcon v-else-if="collapsingToggleStyle" aria-hidden="true" />
     </button>
     <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
@@ -24,7 +25,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { CheckIcon, DropdownIcon } from '@modrinth/assets'
+import { CheckIcon, DropdownIcon, MinusIcon } from '@modrinth/assets'
 
 const emit = defineEmits<{
   'update:modelValue': [boolean]
@@ -32,12 +33,13 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
-    label: string
+    label?: string
     disabled?: boolean
-    description: string
+    description?: string
     modelValue: boolean
     clickEvent?: () => void
     collapsingToggleStyle?: boolean
+    indeterminate?: boolean
   }>(),
   {
     label: '',
@@ -46,6 +48,7 @@ const props = withDefaults(
     modelValue: false,
     clickEvent: () => {},
     collapsingToggleStyle: false,
+    indeterminate: false,
   },
 )
 
@@ -78,7 +81,6 @@ function toggle() {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  outline: none;
 
   min-width: 1rem;
   min-height: 1rem;
@@ -95,10 +97,14 @@ function toggle() {
 
   &.checked {
     background-color: var(--color-brand);
+
+    svg {
+      color: var(--color-accent-contrast);
+    }
   }
 
   svg {
-    color: var(--color-accent-contrast);
+    color: var(--color-secondary);
     stroke-width: 0.2rem;
     height: 0.8rem;
     width: 0.8rem;