Merge commit '81ec068747a39e927c42273011252daaa58f1e14' into feature-clean

apps/app-frontend/src/components/ui/AccountsCard.vue

@@ -1,10 +1,27 @@
 <template>
-  <div v-if="mode !== 'isolated'" ref="button" v-tooltip.right="'Minecraft accounts'" class="button-base avatar-button"
-    :class="{ expanded: mode === 'expanded' }" @click="toggleMenu">
-    <Avatar :size="mode === 'expanded' ? 'xs' : 'sm'" :src="selectedAccount
-      ? `https://mc-heads.net/avatar/${selectedAccount.username}/128`
-      : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      " />
+  <div
+    v-if="mode !== 'isolated'"
+    ref="button"
+    class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
+    :class="{ expanded: mode === 'expanded' }"
+    @click="toggleMenu"
+  >
+    <Avatar
+      size="36px"
+      :src="
+        selectedAccount
+          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
+          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      "
+    />
+    <div class="flex flex-col w-full">
+      <span>
+        <component v-if="selectedAccount" :is="getAccountType(selectedAccount)" class="vector-icon" />
+        {{ selectedAccount ? selectedAccount.username : 'Select account' }}
+      </span>
+      <span class="text-secondary text-xs">Minecraft account</span>
+    </div>
+    <DropdownIcon class="w-5 h-5 shrink-0" />
   </div>
   <transition name="fade">
     <Card v-if="showCard || mode === 'isolated'" ref="card" class="account-card"
@@ -79,7 +96,7 @@
 </template>
 
 <script setup>
-import { PlusIcon, TrashIcon, LogInIcon, PirateIcon as Offline, MicrosoftIcon as License, MicrosoftIcon, PirateIcon } from '@modrinth/assets'
+import { DropdownIcon, PlusIcon, TrashIcon, LogInIcon, PirateIcon as Offline, MicrosoftIcon as License, MicrosoftIcon, PirateIcon } from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
@@ -271,11 +288,11 @@ onUnmounted(() => {
 }
 
 .account-card {
-  position: absolute;
+  position: fixed;
   display: flex;
   flex-direction: column;
-  top: 0.5rem;
-  left: 5.5rem;
+  margin-top: 0.5rem;
+  right: 2rem;
   z-index: 11;
   gap: 0.5rem;
   padding: 1rem;
@@ -356,12 +373,17 @@ onUnmounted(() => {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.3s ease;
+  transition:
+    opacity 0.25s ease,
+    translate 0.25s ease,
+    scale 0.25s ease;
 }
 
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
+  translate: 0 -2rem;
+  scale: 0.9;
 }
 
 .avatar-button {
@@ -369,9 +391,10 @@ onUnmounted(() => {
   align-items: center;
   gap: 0.5rem;
   color: var(--color-base);
-  background-color: var(--color-raised-bg);
+  background-color: var(--color-button-bg);
   border-radius: var(--radius-md);
   width: 100%;
+  padding: 0.5rem 0.75rem;
   text-align: left;
 
   &.expanded {