update download with modrinth app button

apps/frontend/src/components/ui/ProjectDownloadModal/InstallWithModrinthApp.vue

@@ -6,29 +6,19 @@
 		"
 		class="modrinth-app-section contents"
 	>
-		<div class="flex flex-col">
+		<div class="flex flex-col items-center">
-			<a
+			<ButtonStyled color="brand">
-				class="modrinth-app-install-card flex items-center justify-between gap-3 rounded-2xl border border-solid border-brand-highlight bg-surface-1 px-4 py-3 text-primary no-underline transition-[filter] hover:brightness-110"
+				<a
-				:href="`modrinth://mod/${project.slug}`"
+					class="!min-h-10 w-fit no-underline"
-				@click="installWithApp"
+					:href="`modrinth://mod/${project.slug}`"
-			>
+					@click="installWithApp"
-				<span class="flex w-full min-w-0 flex-col gap-1">
+				>
-					<div class="flex items-center justify-between">
+					<ModrinthIcon aria-hidden="true" />
-						<span class="flex min-w-0 items-center gap-1.5 font-medium text-contrast">
+					<span class="min-w-0 text-center">
-							Install with
+						{{ formatMessage(messages.installWithModrinthApp) }}
-							<span class="text-brand">Modrinth App</span>
-							<ModrinthIcon aria-hidden="true" class="size-4 flex-shrink-0 text-brand" />
-						</span>
-						<ExternalIcon
-							aria-hidden="true"
-							class="size-4 flex-shrink-0 text-contrast transition-colors"
-						/>
-					</div>
-					<span class="truncate text-base text-contrast opacity-80">
-						{{ formatMessage(messages.installWithModrinthAppDescription) }}
 					</span>
-				</span>
+				</a>
-			</a>
+			</ButtonStyled>
 			<Accordion ref="getModrinthAppAccordion">
 				<nuxt-link class="mt-2 flex justify-center text-brand-blue hover:underline" to="/app">
 					{{ formatMessage(messages.dontHaveModrinthApp) }}
@@ -48,8 +38,8 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ExternalIcon, ModrinthIcon } from '@modrinth/assets'
+import { ModrinthIcon } from '@modrinth/assets'
-import { defineMessages, useVIntl } from '@modrinth/ui'
+import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
 import type { DisplayProjectType } from '@modrinth/utils'
 import { ref } from 'vue'
 
@@ -73,6 +63,10 @@ const tags = useGeneratedState()
 const getModrinthAppAccordion = ref<InstanceType<typeof Accordion> | null>(null)
 
 const messages = defineMessages({
+	installWithModrinthApp: {
+		id: 'project.download.install-with-app',
+		defaultMessage: 'Install with Modrinth App',
+	},
 	dontHaveModrinthApp: {
 		id: 'project.download.no-app',
 		defaultMessage: "Don't have Modrinth App?",
@@ -81,10 +75,6 @@ const messages = defineMessages({
 		id: 'project.download.manually',
 		defaultMessage: 'Download manually',
 	},
-	installWithModrinthAppDescription: {
-		id: 'project.download.install-with-app-description',
-		defaultMessage: 'Automatically install the correct version and dependencies.',
-	},
 })
 
 function installWithApp() {
@@ -95,14 +85,6 @@ function installWithApp() {
 </script>
 
 <style lang="scss" scoped>
-.modrinth-app-install-card {
-	background: radial-gradient(
-		ellipse 90% 250% at 50% 200%,
-		color-mix(in srgb, var(--color-brand-shadow) 50%, var(--surface-1)) -30%,
-		var(--surface-1) 72%
-	);
-}
-
 @media (hover: none) and (max-width: 767px) {
 	.modrinth-app-section {
 		display: none;