Style tweaks

app/components/LoginModal.vue

@@ -11,19 +11,24 @@
       footer: 'bg-guild-900 border-t border-guild-700',
       title: 'text-guild-100',
       description: 'text-guild-400',
-    }"
+    }">
-  >
     <template #body>
       <div class="space-y-6">
         <!-- Success State -->
         <div v-if="loginSuccess" class="text-center py-4">
-          <div class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+          <div
-            <Icon name="heroicons:check-circle" class="w-10 h-10 text-candlelight-400" />
+            class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
+            <Icon
+              name="heroicons:check-circle"
+              class="w-10 h-10 text-candlelight-400" />
           </div>
-          <h3 class="text-lg font-semibold text-guild-100 mb-2">Check your email</h3>
+          <h3 class="text-lg font-semibold text-guild-100 mb-2">
+            Check your email
+          </h3>
           <p class="text-guild-300">
-            We've sent a magic link to <strong class="text-guild-100">{{ loginForm.email }}</strong>.
+            We've sent a magic link to
-            Click the link to sign in.
+            <strong class="text-guild-100">{{ loginForm.email }}</strong
+            >. Click the link to sign in.
           </p>
         </div>
 
@@ -37,15 +42,13 @@
               class="w-full"
               placeholder="your.email@example.com"
               :ui="{
-                root: 'bg-guild-800 border-guild-600 text-guild-100 placeholder-guild-500',
+                root: 'bg-guild-800 text-guild-100 placeholder-guild-500',
-              }"
+              }" />
-            />
           </UFormField>
 
           <!-- Info Box -->
           <div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6">
             <div class="flex items-start gap-3">
-              <Icon name="heroicons:envelope" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
               <p class="text-sm text-guild-300">
                 We'll send you a secure magic link. No password needed!
               </p>
@@ -55,8 +58,7 @@
           <!-- Error Message -->
           <div
             v-if="loginError"
-            class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg"
+            class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg">
-          >
             <p class="text-ember-400 text-sm">{{ loginError }}</p>
           </div>
 
@@ -66,23 +68,22 @@
             :loading="isLoggingIn"
             :disabled="!isLoginFormValid"
             size="lg"
-            class="w-full"
+            class="w-full">
-          >
             Send Magic Link
           </UButton>
         </UForm>
 
         <!-- Join Link -->
-        <div v-if="!loginSuccess" class="text-center pt-2 border-t border-guild-700">
+        <div
+          v-if="!loginSuccess"
+          class="text-center pt-2 border-t border-guild-700">
           <p class="text-guild-400 text-sm pt-4">
             Don't have an account?
-            <NuxtLink
+            <a
-              to="/join"
+              href="https://babyghosts.fund/ghost-guild/"
-              class="text-candlelight-400 hover:text-candlelight-300 font-medium"
+              class="text-candlelight-400 hover:text-candlelight-300 font-medium">
-              @click="close"
-            >
               Join Ghost Guild
-            </NuxtLink>
+            </a>
           </p>
         </div>
       </div>
@@ -94,8 +95,7 @@
           v-if="loginSuccess"
           variant="ghost"
           color="neutral"
-          @click="resetAndClose"
+          @click="resetAndClose">
-        >
           Close
         </UButton>
       </div>
@@ -107,93 +107,94 @@
 const props = defineProps({
   title: {
     type: String,
-    default: 'Sign in to continue',
+    default: "Sign in to continue",
   },
   description: {
     type: String,
-    default: 'Enter your email to receive a secure login link',
+    default: "Enter your email to receive a secure login link",
   },
   dismissible: {
     type: Boolean,
     default: true,
   },
-})
+});
 
-const emit = defineEmits(['success', 'close'])
+const emit = defineEmits(["success", "close"]);
 
-const { showLoginModal, hideLoginModal } = useLoginModal()
+const { showLoginModal, hideLoginModal } = useLoginModal();
-const { checkMemberStatus } = useAuth()
+const { checkMemberStatus } = useAuth();
 
 const isOpen = computed({
   get: () => showLoginModal.value,
   set: (value) => {
     if (!value) {
-      hideLoginModal()
+      hideLoginModal();
-      emit('close')
+      emit("close");
     }
   },
-})
+});
 
 const loginForm = reactive({
-  email: '',
+  email: "",
-})
+});
 
-const isLoggingIn = ref(false)
+const isLoggingIn = ref(false);
-const loginSuccess = ref(false)
+const loginSuccess = ref(false);
-const loginError = ref('')
+const loginError = ref("");
 
 const isLoginFormValid = computed(() => {
-  return loginForm.email && loginForm.email.includes('@')
+  return loginForm.email && loginForm.email.includes("@");
-})
+});
 
 const handleLogin = async () => {
-  if (isLoggingIn.value) return
+  if (isLoggingIn.value) return;
 
-  isLoggingIn.value = true
+  isLoggingIn.value = true;
-  loginError.value = ''
+  loginError.value = "";
 
   try {
-    const response = await $fetch('/api/auth/login', {
+    const response = await $fetch("/api/auth/login", {
-      method: 'POST',
+      method: "POST",
       body: {
         email: loginForm.email,
       },
-    })
+    });
 
     if (response.success) {
-      loginSuccess.value = true
+      loginSuccess.value = true;
-      emit('success', { email: loginForm.email })
+      emit("success", { email: loginForm.email });
     }
   } catch (err) {
-    console.error('Login error:', err)
+    console.error("Login error:", err);
 
     if (err.statusCode === 500) {
-      loginError.value = 'Failed to send login email. Please try again later.'
+      loginError.value = "Failed to send login email. Please try again later.";
     } else {
-      loginError.value = err.statusMessage || 'Something went wrong. Please try again.'
+      loginError.value =
+        err.statusMessage || "Something went wrong. Please try again.";
     }
   } finally {
-    isLoggingIn.value = false
+    isLoggingIn.value = false;
   }
-}
+};
 
 const close = () => {
-  isOpen.value = false
+  isOpen.value = false;
-}
+};
 
 const resetAndClose = () => {
-  loginForm.email = ''
+  loginForm.email = "";
-  loginSuccess.value = false
+  loginSuccess.value = false;
-  loginError.value = ''
+  loginError.value = "";
-  close()
+  close();
-}
+};
 
 // Reset form when modal opens
 watch(isOpen, (newValue) => {
   if (newValue) {
-    loginForm.email = ''
+    loginForm.email = "";
-    loginSuccess.value = false
+    loginSuccess.value = false;
-    loginError.value = ''
+    loginError.value = "";
   }
-})
+});
 </script>