web/satellite/vuetify-poc: fix dialog close button position

This change fixes the position of the close button in dialogs where
there was no spacing between the button and the edges of the dialog
header.

References #6170

Change-Id: Id3f798953319c1703d7bb6868757aecd02ec09f5
This commit is contained in:
Jeremy Wharton 2023-08-08 22:13:47 -05:00 committed by Storj Robot
parent c931234e46
commit eace6e37b8
6 changed files with 43 additions and 42 deletions

View File

@ -10,12 +10,12 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 pr-0 pb-5 pt-0">
<v-row align="start" justify="space-between" class="ma-0">
<v-row align="center" class="ma-0 pt-5">
<img class="flex-shrink-0" src="@poc/assets/icon-change-name.svg" alt="Change name">
<v-card-title class="font-weight-bold ml-4">Edit name</v-card-title>
</v-row>
<v-card-item class="pl-7 py-4">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-change-name.svg" alt="Change name">
</template>
<v-card-title class="font-weight-bold">Edit Name</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
@ -24,8 +24,9 @@
:disabled="isLoading"
@click="model = false"
/>
</v-row>
</template>
</v-card-item>
<v-divider />
<v-card-item class="px-7 py-5">
<v-form v-model="formValid">

View File

@ -10,12 +10,12 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 pr-0 pb-5 pt-0">
<v-row align="start" justify="space-between" class="ma-0">
<v-row align="center" class="ma-0 pt-5">
<img class="flex-shrink-0" src="@poc/assets/icon-change-password.svg" alt="Change password">
<v-card-title class="font-weight-bold ml-4">Change password</v-card-title>
</v-row>
<v-card-item class="pl-7 py-4">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-change-password.svg" alt="Change password">
</template>
<v-card-title class="font-weight-bold">Change Password</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
@ -24,7 +24,7 @@
:disabled="isLoading"
@click="model = false"
/>
</v-row>
</template>
</v-card-item>
<v-divider />
<v-card-item class="px-7 py-5">

View File

@ -10,12 +10,12 @@
transition="fade-transition"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 pr-0 pb-5 pt-0">
<v-row align="start" justify="space-between" class="ma-0">
<v-row align="center" class="ma-0 pt-5">
<img class="flex-shrink-0" src="@poc/assets/icon-mfa.svg" alt="Change password">
<v-card-title class="font-weight-bold ml-4">Disable Two-Factor</v-card-title>
</v-row>
<v-card-item class="pl-7 py-4">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
</template>
<v-card-title class="font-weight-bold">Disable Two-Factor</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
@ -24,7 +24,7 @@
:disabled="isLoading"
@click="model = false"
/>
</v-row>
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-card-item class="px-8 py-4">

View File

@ -10,12 +10,12 @@
transition="fade-transition"
>
<v-card ref="innerContent" rounded="xlg">
<v-card-item class="pl-7 pr-0 pb-5 pt-0">
<v-row align="start" justify="space-between" class="ma-0">
<v-row align="center" class="ma-0 pt-5">
<img class="flex-shrink-0" src="@poc/assets/icon-mfa.svg" alt="MFA">
<v-card-title class="font-weight-bold ml-4">Setup Two-Factor</v-card-title>
</v-row>
<v-card-item class="pl-7 py-4">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
</template>
<v-card-title class="font-weight-bold">Setup Two-Factor</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
@ -24,7 +24,7 @@
:disabled="isLoading"
@click="model = false"
/>
</v-row>
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-window v-model="step" :class="{ 'overflow-y-auto': step === 0 }">

View File

@ -10,12 +10,12 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 pr-0 pb-5 pt-0">
<v-row align="start" justify="space-between" class="ma-0">
<v-row align="center" class="ma-0 pt-5">
<img class="flex-shrink-0" src="@poc/assets/icon-mfa.svg" alt="MFA">
<v-card-title class="font-weight-bold ml-4">Two-Factor Recovery Codes</v-card-title>
</v-row>
<v-card-item class="pl-7 py-4">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-mfa.svg" alt="MFA">
</template>
<v-card-title class="font-weight-bold">Two-Factor Recovery Codes</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
@ -23,7 +23,7 @@
color="default"
@click="model = false"
/>
</v-row>
</template>
</v-card-item>
<v-divider class="mx-8" />
<v-card-item class="px-8 py-4">

View File

@ -10,12 +10,12 @@
transition="fade-transition"
>
<v-card rounded="xlg">
<v-card-item class="pl-7 pr-0 pb-5 pt-0">
<v-row align="start" justify="space-between" class="ma-0">
<v-row align="center" class="ma-0 pt-5">
<img class="flex-shrink-0" src="@poc/assets/icon-session-timeout.svg" alt="Change name">
<v-card-title class="font-weight-bold ml-4">Session Timeout</v-card-title>
</v-row>
<v-card-item class="pl-7 py-4">
<template #prepend>
<img class="d-block" src="@poc/assets/icon-session-timeout.svg" alt="Session timeout">
</template>
<v-card-title class="font-weight-bold">Session Timeout</v-card-title>
<template #append>
<v-btn
icon="$close"
variant="text"
@ -24,7 +24,7 @@
:disabled="isLoading"
@click="model = false"
/>
</v-row>
</template>
</v-card-item>
<v-divider />
<v-card-item class="px-7 py-5">