fix: tweak account info social login layout

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Oct 11, 2024 · d1a8900 · d1a8900
1 parent 202daad
commit d1a8900
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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>