Skip to content

Commit 528df68

Browse files
markgohoclaude
markgoho
and
claude
committed
Redesign membership page with card-based layout and improved visual hierarchy
- Restructure template with semantic sections, definition lists, and ARIA attributes - Add card treatments with subtle depth, staggered entrance animations - Custom toggle switch for newsletter preference - Decorative section heading accents with left border and icons - Active membership badge (teal pill) - Demote sign out to secondary button style - Fix contrast ratios for labels and muted text - Add prefers-reduced-motion support - Style create-profile-banner (previously unstyled) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent a6c4a8d commit 528df68

2 files changed

Lines changed: 344 additions & 166 deletions

File tree

‎members/src/app/membership/membership.html‎

Lines changed: 82 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<h1>Membership</h1>
2-
31
@if (user(); as user) {
42
<!-- Authenticated User View -->
53
<div class="authenticated-view">
@@ -79,116 +77,112 @@ <h3>Create Your Doula Profile</h3>
7977
}
8078

8179
<div class="welcome-section">
82-
<p>Welcome back, {{ userDisplayName() }}!</p>
80+
<h1 class="welcome-greeting">Welcome back, {{ userDisplayName() }}!</h1>
8381

84-
<!-- User Membership Information -->
8582
@if (userDocument(); as userDoc) {
86-
<div class="membership-info-section">
87-
<h3>Your Account Details</h3>
88-
<div class="membership-details">
83+
@if (userDoc.membershipActive) {
84+
<span class="membership-badge">Active Member</span>
85+
}
86+
}
87+
</div>
88+
89+
@if (userDocument(); as userDoc) {
90+
<div class="membership-cards">
91+
<!-- Account Details Card -->
92+
<section class="membership-card card-1" aria-labelledby="account-heading">
93+
<h2 id="account-heading" class="section-heading">Your Account Details</h2>
94+
<dl class="details-list">
8995
@if (userFullName(); as fullName) {
90-
<div class="detail-item">
91-
<span class="detail-label">Full Name:</span>
92-
<span class="detail-value">{{ fullName }}</span>
93-
</div>
96+
<dt>Full Name</dt>
97+
<dd>{{ fullName }}</dd>
9498
}
9599

96100
@if (membershipCreated(); as createdDate) {
97-
<div class="detail-item">
98-
<span class="detail-label">Account Created:</span>
99-
<span class="detail-value">{{ createdDate | date: 'MMMM d, yyyy' }}</span>
100-
</div>
101+
<dt>Account Created</dt>
102+
<dd>{{ createdDate | date: 'MMMM d, yyyy' }}</dd>
101103
}
102104

103105
@if (subscriptionStarted(); as subscriptionDate) {
104-
<div class="detail-item">
105-
<span class="detail-label">Doula Cooperative Subscription:</span>
106-
<span class="detail-value">{{ subscriptionDate | date: 'MMMM d, yyyy' }}</span>
107-
</div>
106+
<dt>Subscription Started</dt>
107+
<dd>{{ subscriptionDate | date: 'MMMM d, yyyy' }}</dd>
108108
}
109109

110-
<div class="detail-item">
111-
<span class="detail-label">Email:</span>
112-
<span class="detail-value">{{ userDoc.email }}</span>
113-
</div>
114-
115-
<div class="detail-item">
116-
<span class="detail-label">Email Verified:</span>
117-
<span class="detail-value">{{ user.emailVerified ? 'Yes' : 'No' }}</span>
118-
</div>
119-
</div>
120-
121-
@if (!hasClaimableProfile()) {
122-
<h3>Newsletter Preferences</h3>
123-
<div class="membership-details">
124-
<div class="detail-item newsletter-preference">
125-
<span class="detail-label">Monthly Newsletter:</span>
126-
<div class="newsletter-controls">
127-
<label class="toggle-label">
128-
<input
129-
type="checkbox"
130-
[checked]="newsletterSubscribed()"
131-
(change)="onUpdateNewsletterPreference(!newsletterSubscribed())"
132-
[disabled]="newsletterUpdateInProgress()"
133-
/>
134-
<span class="toggle-text">
135-
@if (newsletterSubscribed()) {
136-
Subscribed
137-
} @else {
138-
Not subscribed
139-
}
140-
</span>
141-
</label>
142-
@if (newsletterUpdateInProgress()) {
143-
<span class="update-status">Updating...</span>
110+
<dt>Email</dt>
111+
<dd>{{ userDoc.email }}</dd>
112+
113+
<dt>Email Verified</dt>
114+
<dd>{{ user.emailVerified ? 'Yes' : 'No' }}</dd>
115+
</dl>
116+
</section>
117+
118+
<!-- Newsletter Preferences Card -->
119+
@if (!hasClaimableProfile()) {
120+
<section class="membership-card card-2" aria-labelledby="newsletter-heading">
121+
<h2 id="newsletter-heading" class="section-heading">Newsletter Preferences</h2>
122+
<div class="newsletter-content">
123+
<label class="toggle-switch">
124+
<input
125+
type="checkbox"
126+
[checked]="newsletterSubscribed()"
127+
(change)="onUpdateNewsletterPreference(!newsletterSubscribed())"
128+
[disabled]="newsletterUpdateInProgress()"
129+
/>
130+
<span class="toggle-track" aria-hidden="true"></span>
131+
<span class="toggle-text">
132+
@if (newsletterSubscribed()) {
133+
Subscribed
134+
} @else {
135+
Not subscribed
144136
}
145-
</div>
146-
<p class="newsletter-description">
147-
Receive monthly updates about cooperative news, events, and resources for birth
148-
workers.
149-
</p>
150-
@if (newsletterUpdateError(); as error) {
151-
<p class="error-message">{{ error }}</p>
152-
}
153-
</div>
137+
</span>
138+
</label>
139+
@if (newsletterUpdateInProgress()) {
140+
<span class="update-status">Updating...</span>
141+
}
142+
<p class="newsletter-description">
143+
Receive monthly updates about cooperative news, events, and resources for birth
144+
workers.
145+
</p>
146+
@if (newsletterUpdateError(); as error) {
147+
<p class="error-message">{{ error }}</p>
148+
}
154149
</div>
155-
}
150+
</section>
151+
}
156152

157-
@if (lastPaymentDate() || nextPaymentDate() || membershipExpiresDate()) {
158-
<h3>Payment Information</h3>
159-
<div class="membership-details">
153+
<!-- Payment Information Card -->
154+
@if (lastPaymentDate() || nextPaymentDate() || membershipExpiresDate()) {
155+
<section class="membership-card card-3" aria-labelledby="payment-heading">
156+
<h2 id="payment-heading" class="section-heading">Payment Information</h2>
157+
<dl class="details-list">
160158
@if (lastPaymentDate(); as lastPayment) {
161-
<div class="detail-item">
162-
<span class="detail-label">Last Payment:</span>
163-
<span class="detail-value">{{ lastPayment | date: 'MMMM d, yyyy' }}</span>
164-
</div>
159+
<dt>Last Payment</dt>
160+
<dd>{{ lastPayment | date: 'MMMM d, yyyy' }}</dd>
165161
}
166162

167163
@if (nextPaymentDate(); as nextPayment) {
168-
<div class="detail-item">
169-
<span class="detail-label">Next Payment:</span>
170-
<span class="detail-value">{{ nextPayment | date: 'MMMM d, yyyy' }}</span>
171-
</div>
164+
<dt>Next Payment</dt>
165+
<dd>{{ nextPayment | date: 'MMMM d, yyyy' }}</dd>
172166
}
173167

174168
@if (membershipExpiresDate(); as expiresDate) {
175-
<div class="detail-item">
176-
<span class="detail-label">Membership Expires:</span>
177-
<span class="detail-value">{{ expiresDate | date: 'MMMM d, yyyy' }}</span>
178-
</div>
169+
<dt>Membership Expires</dt>
170+
<dd>{{ expiresDate | date: 'MMMM d, yyyy' }}</dd>
179171
}
180-
</div>
181-
}
182-
</div>
183-
} @else {
184-
<div class="loading-info">
185-
<p>Loading membership information...</p>
186-
</div>
187-
}
188-
</div>
172+
</dl>
173+
</section>
174+
}
175+
</div>
176+
} @else {
177+
<div class="loading-info">
178+
<p>Loading membership information...</p>
179+
</div>
180+
}
189181

190182
<div class="membership-actions">
191-
<button type="button" class="button" (click)="onSignOut()">Sign Out</button>
183+
<button type="button" class="button button--secondary sign-out-button" (click)="onSignOut()">
184+
Sign Out
185+
</button>
192186
</div>
193187
</div>
194188
}

0 commit comments

Comments
 (0)