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/modal/NewModal.vue

@@ -7,7 +7,7 @@
       :class="{ shown: visible }"
       class="tauri-overlay"
       data-tauri-drag-region
-      @click="() => (closable ? hide() : {})"
+      @click="() => (closeOnClickOutside && closable ? hide() : {})"
     />
     <div
       :class="{
@@ -16,12 +16,12 @@
         danger: danger,
       }"
       class="modal-overlay"
-      @click="() => (closable ? hide() : {})"
+      @click="() => (closeOnClickOutside && closable ? hide() : {})"
     />
     <div class="modal-container experimental-styles-within" :class="{ shown: visible }">
       <div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
         <div
-          class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-button-bg max-w-full"
+          class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
         >
           <div class="flex text-wrap break-words items-center gap-3 min-w-0">
             <slot name="title">
@@ -31,7 +31,7 @@
             </slot>
           </div>
           <ButtonStyled v-if="closable" circular>
-            <button @click="hide" aria-label="Close">
+            <button aria-label="Close" @click="hide">
               <XIcon aria-hidden="true" />
             </button>
           </ButtonStyled>
@@ -56,6 +56,7 @@ const props = withDefaults(
     closable?: boolean
     danger?: boolean
     closeOnEsc?: boolean
+    closeOnClickOutside?: boolean
     warnOnClose?: boolean
     header?: string
     onHide?: () => void
@@ -65,6 +66,7 @@ const props = withDefaults(
     type: true,
     closable: true,
     danger: false,
+    closeOnClickOutside: true,
     closeOnEsc: true,
     warnOnClose: false,
     onHide: () => {},
@@ -161,7 +163,13 @@ function handleKeyDown(event: KeyboardEvent) {
   opacity: 0;
   transition: all 0.2s ease-out;
   background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
-  filter: blur(5px);
+  //transform: translate(
+  //    calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 2),
+  //    calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 2)
+  //  )
+  //  scaleX(0.8) scaleY(0.5);
+  border-radius: 180px;
+  //filter: blur(5px);
 
   @media (prefers-reduced-motion) {
     transition: none !important;