feat: update instance card styles

apps/app-frontend/src/components/ui/library/instance-group/drag-preview.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { PageRoundIcon } from '@modrinth/assets'
 import { Avatar, TagItem } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed } from 'vue'
@@ -42,13 +43,18 @@ const instanceType = computed(() => {
 			class="relative flex min-h-[76px] w-full items-center justify-center gap-2 overflow-clip rounded-[20px] border border-solid border-surface-4 bg-surface-3 p-4 text-left opacity-90 shadow-lg"
 		>
 			<Avatar
-				class="pointer-events-none !border-none !bg-transparent !rounded-[26px] !rounded-br-[42px] !absolute -top-[40px] right-[18px] opacity-50 [mask-image:linear-gradient(135deg,transparent_16%,black_100%)]"
-				size="100px"
-				:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+				v-if="instance.icon_path"
+				class="pointer-events-none !border-none !bg-transparent !rounded-[26px] !rounded-br-[42px] !absolute -top-[26px] right-[20px] opacity-50 [mask-image:linear-gradient(135deg,transparent_16%,black_100%)]"
+				size="84px"
+				:src="convertFileSrc(instance.icon_path)"
 				:tint-by="instance.id"
 				alt=""
 				no-shadow
 			/>
+			<PageRoundIcon
+				aria-hidden="true"
+				class="pointer-events-none absolute -top-[52px] right-[0px] size-[124px] opacity-10 [mask-image:linear-gradient(135deg,transparent_16%,black_100%)]"
+			/>
 			<TagItem
 				v-if="count > 1"
 				class="!absolute right-3 top-3 z-[2] border-surface-5 bg-surface-2 font-semibold tabular-nums text-contrast"

apps/app-frontend/src/components/ui/library/instance-group/instance.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { useDraggable } from '@dnd-kit/vue'
-import { CheckIcon, DownloadIcon, PlayIcon, SpinnerIcon, StopCircleIcon } from '@modrinth/assets'
+import {
+	CheckIcon,
+	DownloadIcon,
+	PageRoundIcon,
+	PlayIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+} from '@modrinth/assets'
 import { Avatar, ButtonStyled, injectNotificationManager } from '@modrinth/ui'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { useMagicKeys } from '@vueuse/core'
@@ -240,13 +247,18 @@ onUnmounted(() => unlisten())
 		@mouseenter="checkProcess"
 	>
 		<Avatar
-			class="pointer-events-none !border-none !bg-transparent !rounded-[26px] !rounded-br-[42px] !absolute -top-[40px] right-[18px] opacity-50 [mask-image:linear-gradient(135deg,transparent_16%,black_100%)]"
-			size="100px"
-			:src="instance.icon_path ? convertFileSrc(instance.icon_path) : null"
+			v-if="instance.icon_path"
+			class="pointer-events-none !border-none !bg-transparent !rounded-[26px] !rounded-br-[42px] !absolute -top-[26px] right-[20px] opacity-50 [mask-image:linear-gradient(135deg,transparent_16%,black_100%)]"
+			size="84px"
+			:src="convertFileSrc(instance.icon_path)"
 			:tint-by="instance.id"
 			alt=""
 			no-shadow
 		/>
+		<PageRoundIcon
+			aria-hidden="true"
+			class="pointer-events-none absolute -top-[52px] right-[0px] size-[124px] opacity-10 [mask-image:linear-gradient(135deg,transparent_16%,black_100%)]"
+		/>
 		<button
 			type="button"
 			class="selection-button group/selection absolute right-0 top-0 z-[2] flex size-[50px] h-full cursor-pointer items-start pt-4 justify-center border-0 bg-transparent p-0"

packages/assets/generated-icons.ts

@@ -206,6 +206,7 @@ import _PackageIcon from './icons/package.svg?component'
 import _PackageClosedIcon from './icons/package-closed.svg?component'
 import _PackageOpenIcon from './icons/package-open.svg?component'
 import _PackagePlusIcon from './icons/package-plus.svg?component'
+import _PageRoundIcon from './icons/page-round.svg?component'
 import _PaintbrushIcon from './icons/paintbrush.svg?component'
 import _PaletteIcon from './icons/palette.svg?component'
 import _PauseIcon from './icons/pause.svg?component'
@@ -639,6 +640,7 @@ export const PackageIcon = _PackageIcon
 export const PackageClosedIcon = _PackageClosedIcon
 export const PackageOpenIcon = _PackageOpenIcon
 export const PackagePlusIcon = _PackagePlusIcon
+export const PageRoundIcon = _PageRoundIcon
 export const PaintbrushIcon = _PaintbrushIcon
 export const PaletteIcon = _PaletteIcon
 export const PauseIcon = _PauseIcon

packages/assets/icons/page-round.svg

@@ -0,0 +1,9 @@
+<svg width="110" height="110" viewBox="0 0 110 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M93.9596 55.0001C93.9596 63.4375 87.1195 70.2777 78.682 70.2777C75.6304 70.2777 72.033 69.7433 69.0657 70.538C66.4298 71.2443 64.3705 73.3036 63.6643 75.9395C62.8695 78.9067 63.4039 82.5042 63.4039 85.5558C63.4039 93.9932 56.5638 100.833 48.1263 100.833M36.668 32.0834H68.7513M36.668 50.4168H50.418M16.043 45.8334C16.043 28.5486 16.043 19.9062 21.7483 14.5364C27.4536 9.16675 36.6362 9.16675 55.0013 9.16675H58.5428C73.49 9.16675 80.9636 9.16675 86.1538 12.8235C87.6411 13.8712 88.9611 15.1137 90.0743 16.5133C93.9596 21.3982 93.9596 28.4321 93.9596 42.5001V54.1668C93.9596 67.7482 93.9596 74.5384 91.8105 79.9618C88.3551 88.6812 81.0479 95.5584 71.7836 98.8103C66.0215 100.833 58.8064 100.833 44.3763 100.833C36.1306 100.833 32.0077 100.833 28.7149 99.6775C23.4212 97.8194 19.2456 93.8892 17.2711 88.9071C16.043 85.8079 16.043 81.9276 16.043 74.1667V45.8334Z"
+		stroke="white"
+		stroke-width="8"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>