From d1a8900f68fadf0daad3c866f681e68349edb8fc Mon Sep 17 00:00:00 2001
From: Alexander Trost <galexrt@googlemail.com>
Date: Fri, 11 Oct 2024 17:20:43 +0200
Subject: [PATCH] fix: tweak account info social login layout

Signed-off-by: Alexander Trost <galexrt@googlemail.com>
---
 app/components/auth/account/AccountInfo.vue   |   8 +-
 .../auth/account/OAuth2Connection.vue         | 103 +++++++++++-------
 .../auth/account/OAuth2Connections.vue        |  16 +--
 3 files changed, 74 insertions(+), 53 deletions(-)

diff --git a/app/components/auth/account/AccountInfo.vue b/app/components/auth/account/AccountInfo.vue
index 2a4277326..2f1c05294 100644
--- a/app/components/auth/account/AccountInfo.vue
+++ b/app/components/auth/account/AccountInfo.vue
@@ -105,8 +105,8 @@ const selectedTab = computed({
                                     class="grid grid-cols-2 items-center gap-2"
                                     :ui="{ container: '' }"
                                 >
-                                    <div class="inline-flex w-full justify-between">
-                                        <span>
+                                    <div class="inline-flex w-full justify-between gap-1">
+                                        <span class="truncate">
                                             {{ account.account?.username }}
                                         </span>
                                         <CopyToClipboardButton
@@ -122,8 +122,8 @@ const selectedTab = computed({
                                     class="grid grid-cols-2 items-center gap-2"
                                     :ui="{ container: '' }"
                                 >
-                                    <div class="inline-flex w-full justify-between">
-                                        <span>
+                                    <div class="inline-flex w-full justify-between gap-1">
+                                        <span class="truncate">
                                             {{ account.account?.license }}
                                         </span>
                                         <CopyToClipboardButton
diff --git a/app/components/auth/account/OAuth2Connection.vue b/app/components/auth/account/OAuth2Connection.vue
index fe73737db..8e3c7e9ee 100644
--- a/app/components/auth/account/OAuth2Connection.vue
+++ b/app/components/auth/account/OAuth2Connection.vue
@@ -41,52 +41,71 @@ const modal = useModal();
 </script>
 
 <template>
-    <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-5 sm:py-4">
-        <dt class="text-sm font-medium">
-            <UButton variant="link" :external="true" :to="provider.homepage" target="_blank" class="inline-flex gap-2">
-                <img v-if="!provider.icon?.startsWith('i-')" :src="provider.icon" :alt="provider.name" class="size-10" />
-                <UIcon
-                    v-else
-                    :name="provider.icon"
-                    class="size-10"
-                    :style="provider.name === 'discord' && { color: '#7289da' }"
-                />
+    <UPageCard
+        :ui="{
+            body: {
+                padding: 'px-4 py-4 sm:p-4',
+            },
+            icon: { wrapper: 'mb-1' },
+        }"
+    >
+        <template #title>
+            <div class="flex flex-1 gap-2">
+                <UButton
+                    variant="ghost"
+                    :external="true"
+                    :to="provider.homepage"
+                    target="_blank"
+                    class="inline-flex flex-1 gap-2"
+                >
+                    <img v-if="!provider.icon?.startsWith('i-')" :src="provider.icon" :alt="provider.name" class="size-10" />
+                    <UIcon
+                        v-else
+                        :name="provider.icon"
+                        class="size-10"
+                        :style="provider.name === 'discord' && { color: '#7289da' }"
+                    />
 
-                {{ provider.label }}
-            </UButton>
-        </dt>
-        <dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
-            <div v-if="account !== undefined" class="flex items-center justify-between">
-                <div class="inline-flex items-center gap-4">
-                    <UAvatar size="md" :src="account.avatar" :alt="$t('common.image')" />
+                    <div class="flex items-center gap-1.5 text-base font-semibold text-gray-900 dark:text-white">
+                        {{ provider.label }}
+                    </div>
+                </UButton>
 
-                    <span class="text-left" :title="`ID: ${account.externalId}`">
-                        {{ account.username }}
-                    </span>
+                <div v-if="account !== undefined" class="flex items-center justify-between">
+                    <UButton
+                        icon="i-mdi-close-circle"
+                        color="red"
+                        @click="
+                            modal.open(ConfirmModal, {
+                                confirm: async () => disconnectOAuth2Connection(provider),
+                            })
+                        "
+                    >
+                        {{ $t('common.disconnect') }}
+                    </UButton>
                 </div>
 
-                <UButton
-                    icon="i-mdi-close-circle"
-                    color="red"
-                    @click="
-                        modal.open(ConfirmModal, {
-                            confirm: async () => disconnectOAuth2Connection(provider),
-                        })
-                    "
-                >
-                    {{ $t('common.disconnect') }}
-                </UButton>
+                <div v-else class="flex flex-row-reverse">
+                    <template v-if="isNUIAvailable()">
+                        <p class="ml-4 text-end text-sm">
+                            {{ $t('system.not_supported_on_tablet.title') }}
+                        </p>
+                    </template>
+                    <template v-else>
+                        <OAuth2ConnectButton :provider="provider" />
+                    </template>
+                </div>
             </div>
-            <div v-else class="flex flex-row-reverse">
-                <template v-if="isNUIAvailable()">
-                    <p class="ml-4 text-end text-sm">
-                        {{ $t('system.not_supported_on_tablet.title') }}
-                    </p>
-                </template>
-                <template v-else>
-                    <OAuth2ConnectButton class="self-end" :provider="provider" />
-                </template>
+        </template>
+
+        <template v-if="account" #footer>
+            <div class="inline-flex items-center gap-4">
+                <UAvatar size="md" :src="account.avatar" :alt="$t('common.image')" />
+
+                <span class="text-left" :title="`ID: ${account.externalId}`">
+                    {{ account.username }}
+                </span>
             </div>
-        </dd>
-    </div>
+        </template>
+    </UPageCard>
 </template>
diff --git a/app/components/auth/account/OAuth2Connections.vue b/app/components/auth/account/OAuth2Connections.vue
index 7ed9ee5e0..1ab4fb157 100644
--- a/app/components/auth/account/OAuth2Connections.vue
+++ b/app/components/auth/account/OAuth2Connections.vue
@@ -22,13 +22,15 @@ function getProviderConnection(provider: string): undefined | OAuth2Account {
             :title="$t('components.auth.OAuth2Connections.title')"
             :description="$t('components.auth.OAuth2Connections.subtitle')"
         >
-            <OAuth2Connection
-                v-for="provider in providers"
-                :key="provider.name"
-                :provider="provider"
-                :account="getProviderConnection(provider.name)"
-                @disconnected="$emit('disconnected', $event)"
-            />
+            <UPageGrid :ui="{ wrapper: 'grid-cols-1' }">
+                <OAuth2Connection
+                    v-for="provider in providers"
+                    :key="provider.name"
+                    :provider="provider"
+                    :account="getProviderConnection(provider.name)"
+                    @disconnected="$emit('disconnected', $event)"
+                />
+            </UPageGrid>
         </UDashboardSection>
     </UDashboardPanelContent>
 </template>