Redesign member dashboard with modern bento grid layout and animations
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
- Updated design philosophy to v2.0 with focus on beauty and interactivity - Added @vueuse/motion for advanced animations - Created reusable dashboard components: - BentoGrid: Flexible grid layout system - StatsCard: Animated statistics with sparklines - ProfileCard: Premium profile display with progress - ActivityTimeline: Beautiful timeline with staggered animations - EventsCard: Upcoming events display - PaymentCard: Payment status and history - QuickActionCard: Animated action buttons - Rebuilt member dashboard with bento grid layout - Added glass morphism effects throughout - Implemented micro-interactions and hover effects - Added gradient text effects and decorative elements 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,315 +1,182 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-h4 font-weight-bold">Member Dashboard</h1>
|
||||
<p class="text-body-1 text-medium-emphasis">Welcome back, {{ firstName }}</p>
|
||||
<div class="member-dashboard">
|
||||
<!-- Animated Header -->
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: -20 }"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 600,
|
||||
type: 'spring'
|
||||
}
|
||||
}"
|
||||
class="dashboard-header"
|
||||
>
|
||||
<div class="header-content">
|
||||
<h1 class="dashboard-title">
|
||||
<span class="title-gradient">Welcome back,</span>
|
||||
<span class="title-name">{{ firstName }}</span>
|
||||
</h1>
|
||||
<p class="dashboard-subtitle">Here's what's happening with your account today</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<v-btn
|
||||
color="white"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-bell"
|
||||
class="notification-btn"
|
||||
>
|
||||
<v-badge
|
||||
color="error"
|
||||
dot
|
||||
offset-x="-8"
|
||||
offset-y="-8"
|
||||
>
|
||||
Notifications
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="flat"
|
||||
prepend-icon="mdi-account-edit"
|
||||
@click="navigateTo('/member/profile')"
|
||||
>
|
||||
Edit Profile
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Profile Info Card -->
|
||||
<v-card class="mb-6" elevation="2">
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon color="error" class="mr-2">mdi-account</v-icon>
|
||||
Profile Information
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="auto">
|
||||
<ProfileAvatar
|
||||
:member-id="memberData?.member_id"
|
||||
:first-name="memberData?.first_name"
|
||||
:last-name="memberData?.last_name"
|
||||
size="large"
|
||||
:show-badge="false"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<div class="d-flex justify-space-between align-start mb-3">
|
||||
<div>
|
||||
<h3 class="text-h6 font-weight-bold">{{ fullName }}</h3>
|
||||
<p class="text-body-2 text-medium-emphasis">{{ email }}</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<v-chip
|
||||
color="error"
|
||||
variant="tonal"
|
||||
size="small"
|
||||
>
|
||||
{{ membershipType }}
|
||||
</v-chip>
|
||||
<v-chip
|
||||
variant="outlined"
|
||||
color="error"
|
||||
size="small"
|
||||
prepend-icon="mdi-star"
|
||||
>
|
||||
{{ memberLevel }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-row class="mt-4">
|
||||
<v-col cols="12" md="4">
|
||||
<div class="text-caption text-medium-emphasis">Member Since</div>
|
||||
<div class="font-weight-medium">{{ memberSince }}</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<div class="text-caption text-medium-emphasis">Points</div>
|
||||
<div class="font-weight-medium">{{ memberPoints.toLocaleString() }}</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<div class="text-caption text-medium-emphasis">Status</div>
|
||||
<div class="font-weight-medium text-success">Active</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<!-- Bento Grid Dashboard -->
|
||||
<BentoGrid gap="lg" class="dashboard-grid">
|
||||
<!-- Profile Card -->
|
||||
<div class="bento-item bento-item--medium bento-item--tall">
|
||||
<ProfileCard
|
||||
:member="memberData"
|
||||
:member-points="memberPoints"
|
||||
:events-attended="12"
|
||||
:connections="48"
|
||||
@edit-profile="navigateTo('/member/profile')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-row>
|
||||
<!-- Upcoming Events -->
|
||||
<v-col cols="12" lg="6">
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon color="error" class="mr-2">mdi-calendar</v-icon>
|
||||
Upcoming Events
|
||||
</v-card-title>
|
||||
<v-card-subtitle>Your registered events and activities</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-list lines="three" class="pa-0">
|
||||
<template v-for="(event, index) in upcomingEvents" :key="event.id">
|
||||
<v-list-item class="px-0">
|
||||
<v-card variant="outlined" class="w-100">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-start mb-2">
|
||||
<h4 class="text-body-1 font-weight-medium">{{ event.title }}</h4>
|
||||
<v-chip
|
||||
:color="event.status === 'confirmed' ? 'success' : 'warning'"
|
||||
size="x-small"
|
||||
variant="tonal"
|
||||
>
|
||||
<v-icon start size="x-small">
|
||||
{{ event.status === 'confirmed' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
|
||||
</v-icon>
|
||||
{{ event.status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap gap-3 text-caption text-medium-emphasis">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="x-small" class="mr-1">mdi-calendar</v-icon>
|
||||
{{ formatDate(event.date) }}
|
||||
</div>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="x-small" class="mr-1">mdi-clock-outline</v-icon>
|
||||
{{ event.time }}
|
||||
</div>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon size="x-small" class="mr-1">mdi-map-marker</v-icon>
|
||||
{{ event.location }}
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</v-list>
|
||||
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
block
|
||||
class="mt-4"
|
||||
@click="navigateTo('/member/events')"
|
||||
>
|
||||
View All Events
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<!-- Statistics Cards -->
|
||||
<div class="bento-item bento-item--small">
|
||||
<StatsCard
|
||||
label="Total Points"
|
||||
:value="memberPoints"
|
||||
icon="mdi-star"
|
||||
icon-color="warning"
|
||||
:icon-background="'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))'"
|
||||
:change="12"
|
||||
suffix="pts"
|
||||
:delay="100"
|
||||
decoration-color="#f59e0b"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Payment Status -->
|
||||
<v-col cols="12" lg="6">
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon color="error" class="mr-2">mdi-credit-card</v-icon>
|
||||
Payment Status
|
||||
</v-card-title>
|
||||
<v-card-subtitle>Membership and payment information</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<!-- Current Membership -->
|
||||
<v-card variant="outlined" class="mb-4">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center mb-3">
|
||||
<h4 class="text-body-1 font-weight-medium">Current Membership</h4>
|
||||
<v-chip
|
||||
color="success"
|
||||
size="x-small"
|
||||
variant="tonal"
|
||||
>
|
||||
<v-icon start size="x-small">mdi-check-circle</v-icon>
|
||||
Active
|
||||
</v-chip>
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
<div class="d-flex justify-space-between py-1">
|
||||
<span class="text-medium-emphasis">Plan:</span>
|
||||
<span class="font-weight-medium">{{ membershipType }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between py-1">
|
||||
<span class="text-medium-emphasis">Next Payment:</span>
|
||||
<span class="font-weight-medium">{{ nextPaymentDate }}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between py-1">
|
||||
<span class="text-medium-emphasis">Amount:</span>
|
||||
<span class="font-weight-medium">${{ membershipAmount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="bento-item bento-item--small">
|
||||
<StatsCard
|
||||
label="Events Attended"
|
||||
:value="upcomingEvents.length"
|
||||
icon="mdi-calendar-check"
|
||||
icon-color="success"
|
||||
:icon-background="'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))'"
|
||||
subtitle="This month"
|
||||
:delay="200"
|
||||
decoration-color="#22c55e"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Payment History -->
|
||||
<v-card variant="outlined" class="mb-4">
|
||||
<v-card-text>
|
||||
<h4 class="text-body-1 font-weight-medium mb-3">Payment History</h4>
|
||||
<div class="text-body-2">
|
||||
<div
|
||||
v-for="payment in paymentHistory"
|
||||
:key="payment.id"
|
||||
class="d-flex justify-space-between align-center py-1"
|
||||
>
|
||||
<span class="text-medium-emphasis">{{ payment.date }}</span>
|
||||
<div class="d-flex align-center gap-2">
|
||||
<span class="font-weight-medium">${{ payment.amount }}</span>
|
||||
<v-chip
|
||||
color="success"
|
||||
size="x-small"
|
||||
variant="outlined"
|
||||
>
|
||||
Paid
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<div class="bento-item bento-item--small">
|
||||
<StatsCard
|
||||
label="Active Membership"
|
||||
:value="membershipDays"
|
||||
icon="mdi-crown"
|
||||
icon-color="error"
|
||||
:change="100"
|
||||
suffix="days"
|
||||
subtitle="Premium member"
|
||||
:delay="300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="flat"
|
||||
block
|
||||
prepend-icon="mdi-credit-card"
|
||||
@click="navigateTo('/member/payments')"
|
||||
>
|
||||
Update Payment Method
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Upcoming Events Card -->
|
||||
<div class="bento-item bento-item--large">
|
||||
<EventsCard
|
||||
:events="upcomingEvents"
|
||||
@view-all="navigateTo('/member/events')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<v-card elevation="2" class="mt-6">
|
||||
<v-card-title class="d-flex align-center">
|
||||
<v-icon color="error" class="mr-2">mdi-history</v-icon>
|
||||
Recent Activity
|
||||
</v-card-title>
|
||||
<v-card-subtitle>Your latest actions and updates</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<v-timeline side="end" density="compact">
|
||||
<v-timeline-item
|
||||
v-for="activity in recentActivity"
|
||||
:key="activity.id"
|
||||
:dot-color="activity.color"
|
||||
size="small"
|
||||
<!-- Payment Status Card -->
|
||||
<div class="bento-item bento-item--medium">
|
||||
<PaymentCard
|
||||
:membership-type="membershipType"
|
||||
:next-payment-date="nextPaymentDate"
|
||||
:membership-amount="membershipAmount"
|
||||
:payment-history="paymentHistory"
|
||||
@update-payment="navigateTo('/member/payments')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Activity Timeline -->
|
||||
<div class="bento-item bento-item--medium bento-item--tall">
|
||||
<div class="glass-card activity-card">
|
||||
<div class="card-header">
|
||||
<v-icon color="error" size="20">mdi-history</v-icon>
|
||||
<h3 class="card-title">Recent Activity</h3>
|
||||
</div>
|
||||
<ActivityTimeline
|
||||
:activities="formattedActivities"
|
||||
:max-items="5"
|
||||
/>
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
block
|
||||
class="mt-4"
|
||||
@click="navigateTo('/member/activity')"
|
||||
>
|
||||
<template v-slot:icon>
|
||||
<v-icon size="x-small">{{ activity.icon }}</v-icon>
|
||||
</template>
|
||||
<div>
|
||||
<div class="text-body-2 font-weight-medium">{{ activity.description }}</div>
|
||||
<div class="text-caption text-medium-emphasis">{{ activity.timestamp }}</div>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
color="error"
|
||||
block
|
||||
class="mt-4"
|
||||
@click="navigateTo('/member/activity')"
|
||||
>
|
||||
View All Activity
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
View All Activity
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</BentoGrid>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<v-row class="mt-6">
|
||||
<v-col cols="12">
|
||||
<h3 class="text-h6 mb-3">Quick Actions</h3>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card
|
||||
elevation="1"
|
||||
class="text-center pa-4 cursor-pointer"
|
||||
hover
|
||||
@click="navigateTo('/member/events')"
|
||||
>
|
||||
<v-icon size="32" color="error" class="mb-2">mdi-calendar-plus</v-icon>
|
||||
<div class="text-body-2">Register for Event</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card
|
||||
elevation="1"
|
||||
class="text-center pa-4 cursor-pointer"
|
||||
hover
|
||||
@click="navigateTo('/member/directory')"
|
||||
>
|
||||
<v-icon size="32" color="error" class="mb-2">mdi-account-group</v-icon>
|
||||
<div class="text-body-2">Member Directory</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card
|
||||
elevation="1"
|
||||
class="text-center pa-4 cursor-pointer"
|
||||
hover
|
||||
@click="navigateTo('/member/resources')"
|
||||
>
|
||||
<v-icon size="32" color="error" class="mb-2">mdi-book-open-variant</v-icon>
|
||||
<div class="text-body-2">Resources</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card
|
||||
elevation="1"
|
||||
class="text-center pa-4 cursor-pointer"
|
||||
hover
|
||||
@click="navigateTo('/member/support')"
|
||||
>
|
||||
<v-icon size="32" color="error" class="mb-2">mdi-help-circle</v-icon>
|
||||
<div class="text-body-2">Get Support</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Quick Actions Section -->
|
||||
<div
|
||||
v-motion
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 800,
|
||||
duration: 600
|
||||
}
|
||||
}"
|
||||
class="quick-actions-section"
|
||||
>
|
||||
<h3 class="section-title">Quick Actions</h3>
|
||||
<div class="quick-actions-grid">
|
||||
<QuickActionCard
|
||||
v-for="(action, index) in quickActions"
|
||||
:key="action.title"
|
||||
:icon="action.icon"
|
||||
:title="action.title"
|
||||
:color="action.color"
|
||||
:delay="900 + (index * 100)"
|
||||
@click="navigateTo(action.route)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Member } from '~/utils/types';
|
||||
import BentoGrid from '~/components/dashboard/BentoGrid.vue';
|
||||
import StatsCard from '~/components/dashboard/StatsCard.vue';
|
||||
import ProfileCard from '~/components/dashboard/ProfileCard.vue';
|
||||
import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
|
||||
import EventsCard from '~/components/dashboard/EventsCard.vue';
|
||||
import PaymentCard from '~/components/dashboard/PaymentCard.vue';
|
||||
import QuickActionCard from '~/components/dashboard/QuickActionCard.vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'member',
|
||||
@@ -346,6 +213,17 @@ const memberPoints = ref(2450);
|
||||
const nextPaymentDate = ref('Feb 15, 2024');
|
||||
const membershipAmount = ref('99.00');
|
||||
|
||||
// Calculate membership days
|
||||
const membershipDays = computed(() => {
|
||||
if (memberData.value?.join_date) {
|
||||
const joinDate = new Date(memberData.value.join_date);
|
||||
const today = new Date();
|
||||
const diffTime = Math.abs(today.getTime() - joinDate.getTime());
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
}
|
||||
return 365;
|
||||
});
|
||||
|
||||
// Mock data - replace with actual API calls
|
||||
const upcomingEvents = ref([
|
||||
{
|
||||
@@ -415,6 +293,43 @@ const recentActivity = ref([
|
||||
}
|
||||
]);
|
||||
|
||||
// Format activities for the timeline component
|
||||
const formattedActivities = computed(() => {
|
||||
return recentActivity.value.map(activity => ({
|
||||
...activity,
|
||||
title: activity.description.split(' ').slice(0, 3).join(' '),
|
||||
description: activity.description
|
||||
}));
|
||||
});
|
||||
|
||||
// Quick actions data
|
||||
const quickActions = ref([
|
||||
{
|
||||
title: "View Events",
|
||||
icon: "mdi-calendar",
|
||||
color: "error",
|
||||
route: "/member/events"
|
||||
},
|
||||
{
|
||||
title: "Update Profile",
|
||||
icon: "mdi-account-edit",
|
||||
color: "primary",
|
||||
route: "/member/profile"
|
||||
},
|
||||
{
|
||||
title: "Payments",
|
||||
icon: "mdi-credit-card",
|
||||
color: "success",
|
||||
route: "/member/payments"
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
icon: "mdi-book-open-variant",
|
||||
color: "warning",
|
||||
route: "/member/resources"
|
||||
}
|
||||
]);
|
||||
|
||||
// Helper functions
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
@@ -450,24 +365,140 @@ onMounted(async () => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
<style scoped lang="scss">
|
||||
.member-dashboard {
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2.5rem;
|
||||
padding: 2rem;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 255, 255, 0.85)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 1.25rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
.header-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
.dashboard-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
margin: 0 0 0.5rem 0;
|
||||
line-height: 1.2;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title-gradient {
|
||||
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.title-name {
|
||||
color: rgb(31, 41, 55);
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: rgb(107, 114, 128);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.notification-btn {
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
// Glass card base styles
|
||||
.glass-card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.9),
|
||||
rgba(255, 255, 255, 0.7)
|
||||
);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
padding: 1.5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
.activity-card {
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: rgb(31, 41, 55);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: rgb(31, 41, 55);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.quick-actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.25rem;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user