Redesign interface across member dashboard and events pages
The changes involve a comprehensive interface redesign across multiple pages, including: - Updated peer support badge with shield design - Switched privacy toggle to use USwitch component - Added light/dark mode support throughout - Enhanced layout and spacing in default template - Added series details page with timeline view - Improved event cards and status indicators - Refreshed member profile styles for better readability - Introduced global cursor styling for interactive elements
This commit is contained in:
parent
e8e3b84276
commit
896ad0336c
12 changed files with 915 additions and 360 deletions
|
|
@ -17,7 +17,9 @@
|
|||
<div
|
||||
class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
|
||||
></div>
|
||||
<p class="text-ghost-400">Loading your profile...</p>
|
||||
<p class="text-gray-600 dark:text-ghost-400">
|
||||
Loading your profile...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
<!-- Basic Information -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Basic Information
|
||||
</h2>
|
||||
|
|
@ -134,7 +136,7 @@
|
|||
<!-- Professional Info -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Professional Information
|
||||
</h2>
|
||||
|
|
@ -203,7 +205,7 @@
|
|||
<!-- Community Connections -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Community Connections
|
||||
</h2>
|
||||
|
|
@ -219,7 +221,7 @@
|
|||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
|
|
@ -237,7 +239,7 @@
|
|||
<span
|
||||
v-for="(tag, index) in formData.offering.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30 flex items-center gap-2 group hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
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"
|
||||
@click="removeOfferingTag(index)"
|
||||
>
|
||||
{{ tag }}
|
||||
|
|
@ -251,7 +253,7 @@
|
|||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
|
|
@ -281,7 +283,7 @@
|
|||
<!-- Tags input -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
>
|
||||
Skills & Topics
|
||||
</label>
|
||||
|
|
@ -299,7 +301,7 @@
|
|||
<span
|
||||
v-for="(tag, index) in formData.lookingFor.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm border border-purple-500/30 flex items-center gap-2 group hover:bg-purple-500/30 transition-colors cursor-pointer"
|
||||
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"
|
||||
@click="removeLookingForTag(index)"
|
||||
>
|
||||
{{ tag }}
|
||||
|
|
@ -313,7 +315,7 @@
|
|||
<!-- Description textarea -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-ghost-200 mb-2"
|
||||
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
|
||||
>
|
||||
Details
|
||||
</label>
|
||||
|
|
@ -338,7 +340,7 @@
|
|||
<!-- Peer Support -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Peer Support
|
||||
</h2>
|
||||
|
|
@ -348,10 +350,14 @@
|
|||
<div class="flex items-start gap-4">
|
||||
<USwitch v-model="formData.peerSupportEnabled" />
|
||||
<div>
|
||||
<p class="font-medium text-ghost-200">
|
||||
<p
|
||||
class="font-medium text-gray-800 dark:text-ghost-200"
|
||||
>
|
||||
Offer Peer Support
|
||||
</p>
|
||||
<p class="text-sm text-ghost-400 mt-1">
|
||||
<p
|
||||
class="text-sm text-gray-600 dark:text-ghost-400 mt-1"
|
||||
>
|
||||
Make yourself available to support other members
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -385,7 +391,7 @@
|
|||
topic, index
|
||||
) in formData.peerSupportSkillTopics"
|
||||
:key="topic"
|
||||
class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30 flex items-center gap-2 group hover:bg-blue-500/30 transition-colors cursor-pointer"
|
||||
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"
|
||||
@click="removePeerSkillTopic(index)"
|
||||
>
|
||||
{{ topic }}
|
||||
|
|
@ -454,7 +460,9 @@
|
|||
class="w-full"
|
||||
/>
|
||||
<template #hint>
|
||||
<span class="text-xs text-ghost-500">
|
||||
<span
|
||||
class="text-xs text-gray-500 dark:text-ghost-500"
|
||||
>
|
||||
{{ formData.peerSupportMessage?.length || 0 }}/200
|
||||
characters
|
||||
</span>
|
||||
|
|
@ -481,7 +489,7 @@
|
|||
<!-- Directory Settings -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Directory Visibility
|
||||
</h2>
|
||||
|
|
@ -489,10 +497,10 @@
|
|||
<div class="flex items-start gap-4">
|
||||
<USwitch v-model="formData.showInDirectory" />
|
||||
<div>
|
||||
<p class="font-medium text-ghost-200">
|
||||
<p class="font-medium text-gray-800 dark:text-ghost-200">
|
||||
Show in Member Directory
|
||||
</p>
|
||||
<p class="text-sm text-ghost-400 mt-1">
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400 mt-1">
|
||||
Allow other members to discover and connect with you
|
||||
through the directory
|
||||
</p>
|
||||
|
|
@ -546,34 +554,42 @@
|
|||
<!-- Current Membership -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Current Membership
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-ghost-800/50 border border-ghost-700 rounded-lg p-6 space-y-4"
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6 space-y-4"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Circle</p>
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
Circle
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-medium text-ghost-100 capitalize"
|
||||
class="text-lg font-medium text-gray-900 dark:text-ghost-100 capitalize"
|
||||
>
|
||||
{{ memberData.circle }}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Contribution Level</p>
|
||||
<p class="text-lg font-medium text-ghost-100">
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
Contribution Level
|
||||
</p>
|
||||
<p
|
||||
class="text-lg font-medium text-gray-900 dark:text-ghost-100"
|
||||
>
|
||||
${{ contributionTierDetails?.amount }}/month
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="memberData.subscriptionStartDate">
|
||||
<p class="text-sm text-ghost-400">Member Since</p>
|
||||
<p class="text-ghost-100">
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
Member Since
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-ghost-100">
|
||||
{{ formatDate(memberData.subscriptionStartDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -584,8 +600,10 @@
|
|||
memberData.contributionTier !== '0'
|
||||
"
|
||||
>
|
||||
<p class="text-sm text-ghost-400">Next Billing Date</p>
|
||||
<p class="text-ghost-100">
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400">
|
||||
Next Billing Date
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-ghost-100">
|
||||
{{ formatDate(memberData.nextBillingDate) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -595,15 +613,15 @@
|
|||
<!-- Change Contribution Level -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Change Contribution Level
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-ghost-800/50 border border-ghost-700 rounded-lg p-6"
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6"
|
||||
>
|
||||
<p class="text-ghost-300 mb-6">
|
||||
<p class="text-gray-700 dark:text-ghost-300 mb-6">
|
||||
Choose a new contribution level that works for you.
|
||||
Changes will take effect on your next billing cycle.
|
||||
</p>
|
||||
|
|
@ -617,13 +635,15 @@
|
|||
'w-full text-left p-4 rounded-lg border-2 transition-all',
|
||||
selectedContributionTier === tier.value
|
||||
? 'border-blue-400 bg-blue-500/20'
|
||||
: 'border-ghost-600 bg-ghost-900/30 hover:border-ghost-500',
|
||||
: 'border-gray-300 dark:border-ghost-600 bg-gray-50 dark:bg-ghost-900/30 hover:border-blue-300 dark:hover:border-ghost-500',
|
||||
]"
|
||||
@click="selectedContributionTier = tier.value"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-ghost-100">
|
||||
<p
|
||||
class="font-medium text-gray-900 dark:text-ghost-100"
|
||||
>
|
||||
{{ tier.label }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -669,20 +689,20 @@
|
|||
<!-- Cancel Membership -->
|
||||
<div>
|
||||
<h2
|
||||
class="text-2xl font-semibold mb-6 text-ghost-100 ethereal-text"
|
||||
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
|
||||
>
|
||||
Cancel Membership
|
||||
</h2>
|
||||
|
||||
<div
|
||||
class="backdrop-blur-sm bg-ghost-800/50 border border-ghost-700 rounded-lg p-6"
|
||||
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6"
|
||||
>
|
||||
<p class="text-ghost-300 mb-4">
|
||||
<p class="text-gray-700 dark:text-ghost-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-ghost-400 mb-6">
|
||||
<p class="text-sm text-gray-600 dark:text-ghost-400 mb-6">
|
||||
Need a break? Consider switching to the free tier instead.
|
||||
</p>
|
||||
|
||||
|
|
@ -1322,45 +1342,3 @@ useHead({
|
|||
title: "Your Profile - Ghost Guild",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Field labels - bright and readable */
|
||||
:deep(label) {
|
||||
color: rgb(231 229 228) !important; /* ghost-200 equivalent */
|
||||
font-weight: 500;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Field descriptions - lighter gray for readability */
|
||||
:deep([class*="description"]) {
|
||||
color: rgb(
|
||||
168 162 158
|
||||
) !important; /* ghost-400 equivalent - lighter than the dark background */
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Full width inputs */
|
||||
:deep(input),
|
||||
:deep(textarea) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Input fields - respect light/dark mode */
|
||||
:deep(input),
|
||||
:deep(textarea) {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-ghost-100) !important;
|
||||
border-color: var(--color-ghost-600) !important;
|
||||
}
|
||||
|
||||
:deep(input::placeholder),
|
||||
:deep(textarea::placeholder) {
|
||||
color: var(--color-ghost-500) !important;
|
||||
}
|
||||
|
||||
:deep(input:focus),
|
||||
:deep(textarea:focus) {
|
||||
border-color: rgb(147 197 253) !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue