From 2c5986a32e946a2ba6dfe37c21a79d4e701676b5 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 2 Apr 2026 21:37:31 +0100
Subject: [PATCH] feat: reskin modals to zine direction

---
 app/components/LoginModal.vue | 369 ++++++++++++++++++++--------------
 1 file changed, 221 insertions(+), 148 deletions(-)

diff --git a/app/components/LoginModal.vue b/app/components/LoginModal.vue
index 41ca259..d313ad7 100644
--- a/app/components/LoginModal.vue
+++ b/app/components/LoginModal.vue
@@ -1,102 +1,76 @@
 <template>
   <UModal
     v-model:open="isOpen"
-    :title="title"
-    :description="description"
     :dismissible="dismissible"
     :ui="{
-      content: 'bg-guild-900 border border-guild-700',
-      header: 'bg-guild-900 border-b border-guild-700',
-      body: 'bg-guild-900',
-      footer: 'bg-guild-900 border-t border-guild-700',
-      title: 'text-guild-100',
-      description: 'text-guild-400',
-    }">
+      overlay: 'bg-[--parch]/60 backdrop-blur-sm',
+      content: 'bg-[--bg] border border-dashed border-[--border] rounded-none shadow-none max-w-[480px]',
+      header: 'hidden',
+      body: 'p-0',
+      footer: 'hidden',
+    }"
+  >
     <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">
-            <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>
-          <p class="text-guild-300">
-            We've sent a magic link to
-            <strong class="text-guild-100">{{ loginForm.email }}</strong
-            >. Click the link to sign in.
-          </p>
+      <div class="modal">
+        <!-- Close button -->
+        <button class="modal-close" @click="resetAndClose">&times;</button>
+
+        <!-- Header -->
+        <div class="modal-header">
+          <div class="modal-overline">Ghost Guild</div>
+          <div class="modal-title">{{ loginModalOptions.title || 'Sign in to continue' }}</div>
+          <div class="modal-meta">{{ loginModalOptions.description || 'Enter your email to receive a secure login link' }}</div>
         </div>
 
-        <!-- Login Form -->
-        <UForm v-else :state="loginForm" @submit="handleLogin">
-          <UFormField label="Email Address" name="email" required class="mb-4">
-            <UInput
-              v-model="loginForm.email"
-              type="email"
-              size="lg"
-              class="w-full"
-              placeholder="your.email@example.com"
-              :ui="{
-                root: 'bg-guild-800 text-guild-100 placeholder-guild-500',
-              }" />
-          </UFormField>
+        <!-- Body -->
+        <div class="modal-body">
+          <!-- Success State -->
+          <div v-if="loginSuccess" class="success-state">
+            <div class="success-icon">✓</div>
+            <h3>Check your email</h3>
+            <p>We've sent a magic link to <strong>{{ loginForm.email }}</strong>. Click the link to sign in.</p>
+          </div>
 
-          <!-- Info Box -->
-          <div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6">
-            <div class="flex items-start gap-3">
-              <p class="text-sm text-guild-300">
-                We'll send you a secure magic link. No password needed!
-              </p>
+          <!-- Login Form -->
+          <form v-else @submit.prevent="handleLogin">
+            <div class="field">
+              <label>Email Address</label>
+              <input
+                v-model="loginForm.email"
+                type="email"
+                placeholder="your.email@example.com"
+                required
+              />
             </div>
+
+            <div class="info-box">
+              We'll send you a secure magic link. No password needed.
+            </div>
+
+            <!-- Error -->
+            <div v-if="loginError" class="error-box">
+              {{ loginError }}
+            </div>
+
+            <button
+              type="submit"
+              class="btn btn-primary submit-btn"
+              :disabled="!isLoginFormValid || isLoggingIn"
+            >
+              {{ isLoggingIn ? 'Sending...' : 'Send magic link' }}
+            </button>
+          </form>
+
+          <!-- Join Link -->
+          <div v-if="!loginSuccess" class="join-link">
+            Not a member? <NuxtLink to="/join" @click="resetAndClose">Join Ghost Guild</NuxtLink>
           </div>
-
-          <!-- Error Message -->
-          <div
-            v-if="loginError"
-            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>
-
-          <!-- Submit Button -->
-          <UButton
-            type="submit"
-            :loading="isLoggingIn"
-            :disabled="!isLoginFormValid"
-            size="lg"
-            class="w-full">
-            Send Magic Link
-          </UButton>
-        </UForm>
-
-        <!-- Join Link -->
-        <div
-          v-if="!loginSuccess"
-          class="text-center pt-2 border-t border-guild-700">
-          <p class="text-guild-400 text-sm pt-4">
-            <a
-              href="https://babyghosts.fund/ghost-guild/"
-              class="text-candlelight-400 hover:text-candlelight-300 font-medium">
-              Join Ghost Guild
-            </a>
-          </p>
         </div>
-      </div>
-    </template>
 
-    <template #footer>
-      <div class="flex justify-end">
-        <UButton
-          v-if="loginSuccess"
-          variant="ghost"
-          color="neutral"
-          @click="resetAndClose">
-          Close
-        </UButton>
+        <!-- Footer (success only) -->
+        <div v-if="loginSuccess" class="modal-footer">
+          <button class="btn" @click="resetAndClose">Close</button>
+        </div>
       </div>
     </template>
   </UModal>
@@ -104,96 +78,195 @@
 
 <script setup>
 const props = defineProps({
-  title: {
-    type: String,
-    default: "Sign in to continue",
-  },
-  description: {
-    type: String,
-    default: "Enter your email to receive a secure login link",
-  },
-  dismissible: {
-    type: Boolean,
-    default: true,
-  },
-});
+  dismissible: { type: Boolean, default: true },
+})
 
-const emit = defineEmits(["success", "close"]);
+const emit = defineEmits(['success', 'close'])
 
-const { showLoginModal, hideLoginModal } = useLoginModal();
-const { checkMemberStatus } = useAuth();
+const { showLoginModal, loginModalOptions, hideLoginModal } = useLoginModal()
 
 const isOpen = computed({
   get: () => showLoginModal.value,
   set: (value) => {
     if (!value) {
-      hideLoginModal();
-      emit("close");
+      hideLoginModal()
+      emit('close')
     }
   },
-});
+})
 
-const loginForm = reactive({
-  email: "",
-});
-
-const isLoggingIn = ref(false);
-const loginSuccess = ref(false);
-const loginError = ref("");
+const loginForm = reactive({ email: '' })
+const isLoggingIn = ref(false)
+const loginSuccess = ref(false)
+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;
-
-  isLoggingIn.value = true;
-  loginError.value = "";
+  if (isLoggingIn.value) return
+  isLoggingIn.value = true
+  loginError.value = ''
 
   try {
-    const response = await $fetch("/api/auth/login", {
-      method: "POST",
-      body: {
-        email: loginForm.email,
-      },
-    });
-
+    const response = await $fetch('/api/auth/login', {
+      method: 'POST',
+      body: { email: loginForm.email },
+    })
     if (response.success) {
-      loginSuccess.value = true;
-      emit("success", { email: loginForm.email });
+      loginSuccess.value = true
+      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;
-};
+}
 
 const resetAndClose = () => {
-  loginForm.email = "";
-  loginSuccess.value = false;
-  loginError.value = "";
-  close();
-};
+  loginForm.email = ''
+  loginSuccess.value = false
+  loginError.value = ''
+  isOpen.value = false
+}
 
-// Reset form when modal opens
 watch(isOpen, (newValue) => {
   if (newValue) {
-    loginForm.email = "";
-    loginSuccess.value = false;
-    loginError.value = "";
+    loginForm.email = ''
+    loginSuccess.value = false
+    loginError.value = ''
   }
-});
+})
 </script>
+
+<style scoped>
+.modal {
+  position: relative;
+}
+
+.modal-close {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  background: none;
+  border: none;
+  font-family: 'Commit Mono', monospace;
+  font-size: 16px;
+  color: var(--text-faint);
+  cursor: pointer;
+  padding: 4px 8px;
+  line-height: 1;
+  transition: color 0.15s;
+}
+.modal-close:hover { color: var(--text); }
+
+.modal-header {
+  padding: 24px 28px 0;
+}
+
+.modal-overline {
+  font-family: 'Brygada 1918', serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--candle);
+  margin-bottom: 12px;
+}
+
+.modal-title {
+  font-family: 'Brygada 1918', serif;
+  font-size: 22px;
+  font-weight: 500;
+  color: var(--text-bright);
+  line-height: 1.25;
+  margin-bottom: 8px;
+  padding-right: 32px;
+}
+
+.modal-meta {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.modal-body {
+  padding: 20px 28px;
+}
+
+.modal-footer {
+  padding: 16px 28px;
+  border-top: 1px dashed var(--border);
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.info-box {
+  font-size: 11px;
+  color: var(--text-faint);
+  padding: 10px 14px;
+  border: 1px dashed var(--border);
+  margin-bottom: 16px;
+  line-height: 1.6;
+}
+
+.error-box {
+  font-size: 12px;
+  color: var(--ember);
+  padding: 10px 14px;
+  border: 1px dashed var(--ember);
+  margin-bottom: 16px;
+}
+
+.submit-btn {
+  width: 100%;
+  text-align: center;
+}
+
+.success-state {
+  text-align: center;
+  padding: 12px 0;
+}
+.success-icon {
+  width: 48px;
+  height: 48px;
+  border: 2px dashed var(--candle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  font-size: 20px;
+  color: var(--candle);
+}
+.success-state h3 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+.success-state p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+}
+.success-state strong {
+  color: var(--text);
+}
+
+.join-link {
+  text-align: center;
+  padding-top: 16px;
+  border-top: 1px dashed var(--border);
+  font-size: 12px;
+  color: var(--text-faint);
+}
+.join-link a {
+  color: var(--candle);
+}
+</style>