Readying for design
This commit is contained in:
parent
d73256ca2b
commit
fadf473dde
50 changed files with 1478 additions and 1259 deletions
|
|
@ -4,7 +4,6 @@
|
|||
<PageHeader
|
||||
title="Member Dashboard"
|
||||
:subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
|
||||
theme="blue"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
|
|
@ -55,7 +54,7 @@
|
|||
<template #header>
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-2xl font-bold text-guild-100 warm-text">
|
||||
<h1 class="text-display-lg text-guild-100 warm-text">
|
||||
Welcome to Ghost Guild, {{ memberData?.name }}!
|
||||
</h1>
|
||||
<p
|
||||
|
|
@ -88,13 +87,13 @@
|
|||
|
||||
<div class="flex flex-wrap gap-4 text-sm">
|
||||
<div class="bg-guild-800 border border-guild-600 px-4 py-2">
|
||||
<span class="text-guild-200">Circle:</span>
|
||||
<span class="text-ui-label text-guild-200">Circle:</span>
|
||||
<span class="font-medium text-stone-50 ml-1 capitalize">{{
|
||||
memberData?.circle
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="bg-guild-800 border border-guild-600 px-4 py-2">
|
||||
<span class="text-guild-200">Contribution:</span>
|
||||
<span class="text-ui-label text-guild-200">Contribution:</span>
|
||||
<span class="font-medium text-stone-50 ml-1"
|
||||
>${{ memberData?.contributionTier }} CAD/month</span
|
||||
>
|
||||
|
|
@ -111,7 +110,7 @@
|
|||
}"
|
||||
>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold text-guild-100 warm-text">
|
||||
<h2 class="text-display-sm text-guild-100 warm-text">
|
||||
Quick Links
|
||||
</h2>
|
||||
</template>
|
||||
|
|
@ -195,7 +194,7 @@
|
|||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold text-guild-100 warm-text">
|
||||
<h2 class="text-display-sm text-guild-100 warm-text">
|
||||
Your Upcoming Events
|
||||
</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
|
|
@ -263,7 +262,7 @@
|
|||
<h3 class="font-semibold text-guild-100 mb-1">
|
||||
{{ evt.title }}
|
||||
</h3>
|
||||
<div class="flex items-center gap-4 text-sm text-guild-400">
|
||||
<div class="flex items-center gap-4 text-ui-mono text-guild-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<Icon name="heroicons:calendar" class="w-4 h-4" />
|
||||
{{ formatEventDate(evt.startDate) }}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<PageHeader
|
||||
title="My Updates"
|
||||
subtitle="View and manage your updates"
|
||||
theme="stone"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<PageHeader
|
||||
title="Your Profile"
|
||||
subtitle="Manage your profile information and privacy settings"
|
||||
theme="blue"
|
||||
size="medium"
|
||||
/>
|
||||
|
||||
|
|
@ -16,9 +15,9 @@
|
|||
>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-gray-600 dark:text-guild-400">
|
||||
<p class="text-guild-400">
|
||||
Loading your profile...
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -52,7 +51,7 @@
|
|||
<!-- Basic Information -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-8 text-guild-100 warm-text"
|
||||
>
|
||||
Basic Information
|
||||
</h2>
|
||||
|
|
@ -123,7 +122,7 @@
|
|||
class="relative aspect-square rounded-lg border-2 transition-all hover:scale-105"
|
||||
:class="
|
||||
formData.avatar === ghost.value
|
||||
? 'border-blue-400 bg-blue-500/20'
|
||||
? 'border-candlelight-400 bg-candlelight-900/20'
|
||||
: 'border-guild-700 bg-guild-800/50 hover:border-guild-600'
|
||||
"
|
||||
@click="formData.avatar = ghost.value"
|
||||
|
|
@ -135,7 +134,7 @@
|
|||
/>
|
||||
<span
|
||||
v-if="formData.avatar === ghost.value"
|
||||
class="absolute -top-2 -right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs"
|
||||
class="absolute -top-2 -right-2 w-6 h-6 bg-candlelight-500 rounded-full flex items-center justify-center text-white text-xs"
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
|
|
@ -153,7 +152,7 @@
|
|||
<!-- Professional Info -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-8 text-guild-100 warm-text"
|
||||
>
|
||||
Professional Information
|
||||
</h2>
|
||||
|
|
@ -222,7 +221,7 @@
|
|||
<!-- Community Connections -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-8 text-guild-100 warm-text"
|
||||
>
|
||||
Community Connections
|
||||
</h2>
|
||||
|
|
@ -238,7 +237,7 @@
|
|||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
|
|
@ -256,7 +255,7 @@
|
|||
<span
|
||||
v-for="(tag, index) in formData.offering.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 rounded-full text-sm border border-blue-300 dark:border-blue-500/30 flex items-center gap-2 group hover:bg-blue-200 dark:hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
class="px-3 py-1 bg-guild-800 text-guild-200 rounded-full text-sm border border-guild-600 flex items-center gap-2 group hover:bg-guild-700 transition-colors cursor-pointer"
|
||||
@click="removeOfferingTag(index)"
|
||||
>
|
||||
{{ tag }}
|
||||
|
|
@ -270,7 +269,7 @@
|
|||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
|
|
@ -300,7 +299,7 @@
|
|||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
|
|
@ -318,7 +317,7 @@
|
|||
<span
|
||||
v-for="(tag, index) in formData.lookingFor.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300 rounded-full text-sm border border-purple-300 dark:border-purple-500/30 flex items-center gap-2 group hover:bg-purple-200 dark:hover:bg-purple-500/30 transition-colors cursor-pointer"
|
||||
class="px-3 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full text-sm border border-candlelight-500/30 flex items-center gap-2 group hover:bg-candlelight-900/30 transition-colors cursor-pointer"
|
||||
@click="removeLookingForTag(index)"
|
||||
>
|
||||
{{ tag }}
|
||||
|
|
@ -332,7 +331,7 @@
|
|||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
|
||||
class="block text-sm font-medium text-guild-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
|
|
@ -357,7 +356,7 @@
|
|||
<!-- Peer Support -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-8 text-guild-100 warm-text"
|
||||
>
|
||||
Peer Support
|
||||
</h2>
|
||||
|
|
@ -368,12 +367,12 @@
|
|||
<USwitch v-model="formData.peerSupportEnabled" />
|
||||
<div>
|
||||
<p
|
||||
class="font-medium text-gray-800 dark:text-guild-200"
|
||||
class="font-medium text-guild-200"
|
||||
>
|
||||
Offer Peer Support
|
||||
</p>
|
||||
<p
|
||||
class="text-sm text-gray-600 dark:text-guild-400 mt-1"
|
||||
class="text-sm text-guild-400 mt-1"
|
||||
>
|
||||
Make yourself available to support other members
|
||||
</p>
|
||||
|
|
@ -383,7 +382,7 @@
|
|||
<!-- Conditional Fields -->
|
||||
<div
|
||||
v-if="formData.peerSupportEnabled"
|
||||
class="space-y-6 pl-4 border-l-2 border-purple-500/30"
|
||||
class="space-y-6 pl-4 border-l-2 border-candlelight-500/30"
|
||||
>
|
||||
<!-- Skill-Based Topics -->
|
||||
<UFormField
|
||||
|
|
@ -408,7 +407,7 @@
|
|||
topic, index
|
||||
) in formData.peerSupportSkillTopics"
|
||||
:key="topic"
|
||||
class="px-3 py-1 bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300 rounded-full text-sm border border-blue-300 dark:border-blue-500/30 flex items-center gap-2 group hover:bg-blue-200 dark:hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
class="px-3 py-1 bg-guild-800 text-guild-200 rounded-full text-sm border border-guild-600 flex items-center gap-2 group hover:bg-guild-700 transition-colors cursor-pointer"
|
||||
@click="removePeerSkillTopic(index)"
|
||||
>
|
||||
{{ topic }}
|
||||
|
|
@ -417,7 +416,7 @@
|
|||
>
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-xs text-stone-500 mt-2">
|
||||
<p class="text-xs text-guild-500 mt-2">
|
||||
Suggested from your offerings:
|
||||
<span
|
||||
v-for="tag in formData.offering.tags?.filter(
|
||||
|
|
@ -478,7 +477,7 @@
|
|||
/>
|
||||
<template #hint>
|
||||
<span
|
||||
class="text-xs text-gray-500 dark:text-guild-500"
|
||||
class="text-xs text-guild-500"
|
||||
>
|
||||
{{ formData.peerSupportMessage?.length || 0 }}/200
|
||||
characters
|
||||
|
|
@ -506,7 +505,7 @@
|
|||
<!-- Directory Settings -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-8 text-guild-100 warm-text"
|
||||
>
|
||||
Directory Visibility
|
||||
</h2>
|
||||
|
|
@ -514,10 +513,10 @@
|
|||
<div class="flex items-start gap-4">
|
||||
<USwitch v-model="formData.showInDirectory" />
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 dark:text-guild-200">
|
||||
<p class="font-medium text-guild-200">
|
||||
Show in Member Directory
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400 mt-1">
|
||||
<p class="text-sm text-guild-400 mt-1">
|
||||
Allow other members to discover and connect with you
|
||||
through the directory
|
||||
</p>
|
||||
|
|
@ -528,16 +527,16 @@
|
|||
<!-- Success/Error Messages -->
|
||||
<div
|
||||
v-if="saveSuccess"
|
||||
class="backdrop-blur-sm bg-green-500/10 border border-green-500/30 rounded-lg p-4"
|
||||
class="backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-green-300">✓ Profile updated successfully!</p>
|
||||
<p class="text-candlelight-500">✓ Profile updated successfully!</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="saveError"
|
||||
class="backdrop-blur-sm bg-red-500/10 border border-red-500/30 rounded-lg p-4"
|
||||
class="backdrop-blur-sm bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-red-300">
|
||||
<p class="text-ember-400">
|
||||
{{ saveError }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -574,20 +573,20 @@
|
|||
<!-- Current Membership -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-6 text-guild-100 warm-text"
|
||||
>
|
||||
Current Membership
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6 space-y-4"
|
||||
class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6 space-y-4"
|
||||
>
|
||||
<!-- Status Badge -->
|
||||
<div
|
||||
class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-guild-700"
|
||||
class="flex items-center justify-between pb-4 border-b border-guild-700"
|
||||
>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
Membership Status
|
||||
</p>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
|
|
@ -620,21 +619,21 @@
|
|||
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
Circle
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-medium text-gray-900 dark:text-guild-100 capitalize"
|
||||
class="text-lg font-medium text-guild-100 capitalize"
|
||||
>
|
||||
{{ memberData.circle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
Contribution Level
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-medium text-gray-900 dark:text-guild-100"
|
||||
class="text-lg font-medium text-guild-100"
|
||||
>
|
||||
${{ contributionTierDetails?.amount }}/month
|
||||
</p>
|
||||
|
|
@ -642,10 +641,10 @@
|
|||
</div>
|
||||
|
||||
<div v-if="memberData.subscriptionStartDate">
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
Member Since
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-guild-100">
|
||||
<p class="text-guild-100">
|
||||
{{ formatDate(memberData.subscriptionStartDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -656,10 +655,10 @@
|
|||
memberData.contributionTier !== '0'
|
||||
"
|
||||
>
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400">
|
||||
<p class="text-sm text-guild-400">
|
||||
Next Billing Date
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-guild-100">
|
||||
<p class="text-guild-100">
|
||||
{{ formatDate(memberData.nextBillingDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -669,15 +668,15 @@
|
|||
<!-- Change Contribution Level -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-6 text-guild-100 warm-text"
|
||||
>
|
||||
Change Contribution Level
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
|
||||
class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6"
|
||||
>
|
||||
<p class="text-gray-700 dark:text-guild-300 mb-6">
|
||||
<p class="text-guild-300 mb-6">
|
||||
Choose a new contribution level that works for you.
|
||||
Changes will take effect on your next billing cycle.
|
||||
</p>
|
||||
|
|
@ -690,22 +689,22 @@
|
|||
:class="[
|
||||
'w-full text-left p-4 rounded-lg border-2 transition-all',
|
||||
selectedContributionTier === tier.value
|
||||
? 'border-blue-400 bg-blue-500/20'
|
||||
: 'border-gray-300 dark:border-guild-600 bg-gray-50 dark:bg-guild-900/30 hover:border-blue-300 dark:hover:border-guild-500',
|
||||
? 'border-candlelight-400 bg-candlelight-900/20'
|
||||
: 'border-guild-600 bg-guild-900/30 hover:border-guild-500',
|
||||
]"
|
||||
@click="selectedContributionTier = tier.value"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p
|
||||
class="font-medium text-gray-900 dark:text-guild-100"
|
||||
class="font-medium text-guild-100"
|
||||
>
|
||||
{{ tier.label }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedContributionTier === tier.value"
|
||||
class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs"
|
||||
class="w-6 h-6 bg-candlelight-500 rounded-full flex items-center justify-center text-white text-xs"
|
||||
>
|
||||
✓
|
||||
</div>
|
||||
|
|
@ -715,16 +714,16 @@
|
|||
|
||||
<div
|
||||
v-if="contributionChangeError"
|
||||
class="mb-4 backdrop-blur-sm bg-red-500/10 border border-red-500/30 rounded-lg p-4"
|
||||
class="mb-4 backdrop-blur-sm bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-red-300">{{ contributionChangeError }}</p>
|
||||
<p class="text-ember-400">{{ contributionChangeError }}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="contributionChangeSuccess"
|
||||
class="mb-4 backdrop-blur-sm bg-green-500/10 border border-green-500/30 rounded-lg p-4"
|
||||
class="mb-4 backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-green-300">
|
||||
<p class="text-candlelight-500">
|
||||
✓ Contribution level updated successfully!
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -745,20 +744,20 @@
|
|||
<!-- Cancel Membership -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
|
||||
class="text-display-sm mb-6 text-guild-100 warm-text"
|
||||
>
|
||||
Cancel Membership
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
|
||||
class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6"
|
||||
>
|
||||
<p class="text-gray-700 dark:text-guild-300 mb-4">
|
||||
<p class="text-guild-300 mb-4">
|
||||
We're sorry to see you go. If you cancel, you'll lose
|
||||
access to member benefits at the end of your current
|
||||
billing period.
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-guild-400 mb-6">
|
||||
<p class="text-sm text-guild-400 mb-6">
|
||||
Need a break? Consider switching to the free tier instead.
|
||||
</p>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue