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
|
|
@ -64,7 +64,7 @@
|
|||
<UContainer>
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<!-- Event Meta Info -->
|
||||
<div class="bg-ghost-800 rounded-xl p-6 mb-8 border border-ghost-700">
|
||||
<div class="mb-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<p class="text-sm text-ghost-400">Date</p>
|
||||
|
|
@ -118,20 +118,72 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Series Badge -->
|
||||
<div v-if="event.series?.isSeriesEvent" class="mb-8">
|
||||
<div
|
||||
class="p-4 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-xl border border-purple-500/30"
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<div
|
||||
class="flex-shrink-0 w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold"
|
||||
>
|
||||
{{ event.series.position }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span
|
||||
class="text-sm font-semibold text-purple-700 dark:text-purple-300"
|
||||
>
|
||||
Part of a Series
|
||||
</span>
|
||||
<span
|
||||
v-if="event.series.totalEvents"
|
||||
class="text-xs text-purple-600 dark:text-purple-400"
|
||||
>
|
||||
({{ event.series.position }} of
|
||||
{{ event.series.totalEvents }})
|
||||
</span>
|
||||
</div>
|
||||
<NuxtLink
|
||||
:to="`/series/${event.series.id}`"
|
||||
class="text-base font-medium text-purple-800 dark:text-purple-200 hover:underline"
|
||||
>
|
||||
{{ event.series.title }}
|
||||
</NuxtLink>
|
||||
<p
|
||||
v-if="event.series.description"
|
||||
class="text-sm text-purple-600 dark:text-purple-400 mt-1"
|
||||
>
|
||||
{{ event.series.description }}
|
||||
</p>
|
||||
</div>
|
||||
<NuxtLink
|
||||
:to="`/series/${event.series.id}`"
|
||||
class="flex-shrink-0"
|
||||
>
|
||||
<UButton color="purple" variant="ghost" size="sm">
|
||||
View Series
|
||||
</UButton>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Target Circles -->
|
||||
<div
|
||||
v-if="event.targetCircles && event.targetCircles.length > 0"
|
||||
class="mb-8"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-sm font-medium text-ghost-200"
|
||||
<span
|
||||
class="text-sm font-medium text-gray-800 dark:text-ghost-200"
|
||||
>Recommended for:</span
|
||||
>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="circle in event.targetCircles"
|
||||
:key="circle"
|
||||
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-400"
|
||||
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border border-blue-300 dark:border-blue-800/50"
|
||||
>
|
||||
{{ formatCircleName(circle) }}
|
||||
</span>
|
||||
|
|
@ -198,28 +250,26 @@
|
|||
</div>
|
||||
|
||||
<!-- Registration Section -->
|
||||
<div
|
||||
v-if="!event.isCancelled"
|
||||
class="bg-ghost-800 rounded-xl p-8 border border-ghost-700"
|
||||
>
|
||||
<div v-if="!event.isCancelled">
|
||||
<!-- Already Registered Status -->
|
||||
<div v-if="registrationStatus === 'registered'">
|
||||
<div
|
||||
class="p-4 bg-green-900/20 rounded-lg border border-green-800 mb-6"
|
||||
class="p-4 bg-green-100 dark:bg-green-900/20 rounded-lg border border-green-400 dark:border-green-800 mb-6"
|
||||
>
|
||||
<div class="flex items-start justify-between">
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
|
||||
>
|
||||
<div>
|
||||
<p class="font-semibold text-green-300">
|
||||
<p class="font-semibold text-green-800 dark:text-green-300">
|
||||
You're registered!
|
||||
</p>
|
||||
<p class="text-sm text-green-400">
|
||||
<p class="text-sm text-green-700 dark:text-green-400">
|
||||
We've sent a confirmation to your email
|
||||
</p>
|
||||
</div>
|
||||
<UButton
|
||||
color="red"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
color="error"
|
||||
size="md"
|
||||
@click="handleCancelRegistration"
|
||||
:loading="isCancelling"
|
||||
>
|
||||
|
|
@ -361,7 +411,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Additional Information -->
|
||||
<div class="mt-8 p-6 bg-ghost-800 rounded-xl border border-ghost-700">
|
||||
<div class="mt-8 p-6 rounded-xl border border-ghost-700">
|
||||
<h4 class="font-semibold text-ghost-100 mb-3">Questions?</h4>
|
||||
<p class="text-sm text-ghost-200 mb-3">
|
||||
If you have any questions about this event please drop us a line.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue