padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve UI

Browse source
This commit is contained in:
padreug 2025-02-12 00:06:57 +01:00
parent b32c609a3b
commit f3eb1622eb
9 changed files with 320 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/ui/button/Button.vue
View file

@ -16,11 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
</script>
<template>
<Primitive
:as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), props.class)"
>
<Primitive :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
<slot />
</Primitive>
</template>

36
src/components/ui/logout-dialog/LogoutDialog.vue
View file

@ -15,7 +15,7 @@ const hasCopied = ref(false)
const copyPrivateKey = async () => {
if (!nostrStore.account?.privkey) return
try {
await navigator.clipboard.writeText(nostrStore.account.privkey)
hasCopied.value = true
@ -43,44 +43,34 @@ const handleLogout = () => {
</DialogTrigger>
<DialogContent class="sm:max-w-md">
<DialogHeader class="space-y-4">
<div class="mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-red-500 to-orange-500 p-0.5 shadow-lg">
<div class="mx-auto w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/80 p-0.5">
<div class="w-full h-full rounded-full bg-background flex items-center justify-center">
<ShieldAlert class="h-6 w-6 text-red-500" />
<ShieldAlert class="h-6 w-6 text-primary" />
</div>
</div>
<div class="text-center space-y-2">
<DialogTitle class="text-xl font-semibold text-red-500">
<DialogTitle class="text-xl font-semibold text-foreground">
Backup Required
</DialogTitle>
<DialogDescription>
If you haven't saved your private key, you will permanently lose access to this chat history. Make sure to copy and securely store your private key before logging out.
<DialogDescription class="text-muted-foreground">
If you haven't saved your private key, you will permanently lose access to this chat history. Make sure to
copy and securely store your private key before logging out.
</DialogDescription>
</div>
</DialogHeader>
<div class="flex flex-col gap-4 py-6">
<Button
class="w-full"
variant="outline"
@click="copyPrivateKey"
>
<Button class="w-full bg-muted hover:bg-muted/80 text-muted-foreground" variant="outline"
@click="copyPrivateKey">
<Copy v-if="!hasCopied" class="h-4 w-4 mr-2" />
<Check v-else class="h-4 w-4 mr-2" />
{{ hasCopied ? 'Copied!' : 'Copy Private Key' }}
</Button>
</div>
<DialogFooter class="flex flex-col sm:flex-row gap-2 sm:gap-3">
<Button
variant="ghost"
@click="() => isOpen = false"
class="flex-1 sm:flex-none"
>
<Button variant="ghost" @click="() => isOpen = false" class="flex-1 sm:flex-none hover:bg-muted">
Cancel
</Button>
<Button
variant="destructive"
@click="handleLogout"
class="flex-1 sm:flex-none"
>
<Button variant="destructive" @click="handleLogout" class="flex-1 sm:flex-none">
<LogOut class="h-4 w-4 mr-2" />
Logout
</Button>
@ -92,7 +82,7 @@ const handleLogout = () => {
<style scoped>
/* Improved focus styles */
:focus-visible {
outline: 2px solid #cba6f7;
outline: 2px solid hsl(var(--primary));
outline-offset: 2px;
transition: outline-offset 0.2s ease;
}
@ -112,4 +102,4 @@ button:not(:disabled):active {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
</style>
</style>