Improve cancel button UX on profile page and fix secondary button focus contrast

Cancel button now shows "No changes to discard." when clicked with no pending
changes, instead of silently doing nothing. Also fixes a contrast issue where
secondary buttons got a teal background on focus (via .button:focus) without
changing text color, resulting in teal-on-teal.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: markgoho

members/src/app/edit-profile/edit-profile.html

@@ -24,6 +24,13 @@ <h2>Profile Setup Required</h2>
 } @else if (profileResource.hasValue()) {
   @let profile = profileResource.value();
   <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" class="profile-form">
+    <!-- Info Message -->
+    @if (infoMessage()) {
+      <div class="form__info-message">
+        {{ infoMessage() }}
+      </div>
+    }
+
     <!-- Success Message -->
     @if (successMessage()) {
       <div class="form__success-message">
@@ -213,14 +220,7 @@ <h2>Profile Setup Required</h2>
 
     <!-- Form Actions -->
     <div class="form-actions">
-      <button
-        type="button"
-        class="button button--secondary"
-        (click)="onCancel()"
-        [disabled]="loading()"
-      >
-        Cancel
-      </button>
+      <button type="button" class="button button--secondary" (click)="onCancel()">Cancel</button>
       <button
         type="submit"
         class="button button--primary"

members/src/app/edit-profile/edit-profile.spec.ts

@@ -230,7 +230,7 @@ describe('EditProfile', () => {
   });
 
   describe('cancel functionality', () => {
-    it('should reset form to original values when cancel is clicked', async () => {
+    it('should reset form to original values when cancel is clicked after changes', async () => {
       const { user } = await setup();
 
       const titleInput = screen.getByLabelText('Name *') as HTMLInputElement;
@@ -243,19 +243,32 @@ describe('EditProfile', () => {
       expect(titleInput.value).toBe('Jane Doe');
     });
 
-    it('should clear error messages when cancel is clicked', async () => {
+    it('should clear error messages when cancel is clicked after changes', async () => {
       const { user } = await setup({ updateShouldFail: true });
 
       const submitButton = screen.getByRole('button', { name: 'Save Profile' });
       await user.click(submitButton);
 
       expect(await screen.findByText(/failed to update profile/i)).toBeVisible();
 
+      // Make a change so the form is dirty, then cancel
+      const titleInput = screen.getByLabelText('Name *');
+      await user.type(titleInput, 'x');
+
       const cancelButton = screen.getByRole('button', { name: 'Cancel' });
       await user.click(cancelButton);
 
       expect(screen.queryByText(/failed to update profile/i)).not.toBeInTheDocument();
     });
+
+    it('should show info message when cancel is clicked with no changes', async () => {
+      const { user } = await setup();
+
+      const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+      await user.click(cancelButton);
+
+      expect(screen.getByText('No changes to discard.')).toBeVisible();
+    });
   });
 
   describe('profile image', () => {

members/src/app/edit-profile/edit-profile.ts

@@ -30,6 +30,7 @@ export class EditProfile {
   protected loading = signal(false);
   protected errorMessage = signal('');
   protected successMessage = signal('');
+  protected infoMessage = signal('');
 
   private autoRetryCount = 0;
 
@@ -66,6 +67,7 @@ export class EditProfile {
     this.loading.set(true);
     this.errorMessage.set('');
     this.successMessage.set('');
+    this.infoMessage.set('');
 
     try {
       const profileData = extractProfileData(this.profileForm);
@@ -81,13 +83,18 @@ export class EditProfile {
     }
   }
 
-  protected onCancel() {
+  protected onCancel(): void {
+    if (!this.profileForm.dirty) {
+      this.infoMessage.set('No changes to discard.');
+      return;
+    }
     const profile = this.profile();
     if (profile) {
       initializeEditProfileForm(this.profileForm, profile);
     }
     this.errorMessage.set('');
     this.successMessage.set('');
+    this.infoMessage.set('');
   }
 
   protected getTagUrl(tag: string): string {

members/src/styles.scss

@@ -311,6 +311,9 @@ main h1 {
 .button:focus {
   background: var(--teal-600);
 }
+.button--secondary:focus:not(:focus-visible) {
+  background-color: transparent;
+}
 .button-small {
   font-size: var(--step-0);
 }