feat(hub): default email opt-outs and match Register to Login styling

- Invitation-by-email and recovery-key-by-email boxes now start unchecked;
  mailing a code/key is opt-in. The invite choice still remembers itself
  per account once set.
- Align the two invite-email checkboxes with their label (center, not
  flex-start).
- Register (and its verify/recovery/done steps) now sits on the same dark
  gradient backdrop and frosted card as Login, via a shared AuthShell.
- Make the gradient's top-left corner very slightly less bright
  (#86a3c4 -> #809cbc), on both auth pages.

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

1 files changed, 5 insertions, 4 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
index a510e63..fba8a0e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
@@ -417,7 +417,8 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
   // Whether the hub mails the invitation. Checked, the hub is handed the code
   // to write it into the mail — so it is the inviter's choice, remembered per
   // account (docs/MESHBAY_DESIGN.md §3.4). Unchecked, the hub never sees it.
-  const [inviteByEmail, setInviteByEmail] = useState(true);
+  // Off by default: mailing the code is opt-in, not something to do unasked.
+  const [inviteByEmail, setInviteByEmail] = useState(false);
   const [error, setError] = useState('');
 
   // Node loopback state (Electron-only)
@@ -811,7 +812,7 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
 
   useEffect(() => {
     hubFetch('/v1/users/me/preferences', { token })
-      .then(prefs => setInviteByEmail(prefs[INVITE_EMAIL_PREF] !== 'false'))
+      .then(prefs => setInviteByEmail(prefs[INVITE_EMAIL_PREF] === 'true'))
       .catch(() => {});
   }, [token]);
 
@@ -1059,7 +1060,7 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                 ${inviting ? '...' : t('members.invite_btn')}
               </button>
             </div>
-            <label style="display:flex; gap:8px; align-items:flex-start; margin:6px 0 0;
+            <label style="display:flex; gap:8px; align-items:center; margin:6px 0 0;
                           font-size:0.88em; color:var(--text-secondary)">
               <input type="checkbox" checked=${inviteByEmail}
                      onChange=${e => toggleInviteByEmail(e.target.checked)} />
@@ -1105,7 +1106,7 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                 ${linking ? '...' : t('members.link_btn')}
               </button>
             </div>
-            <label style="display:flex; gap:8px; align-items:flex-start; margin:6px 0 0;
+            <label style="display:flex; gap:8px; align-items:center; margin:6px 0 0;
                           font-size:0.88em; color:var(--text-secondary)">
               <input type="checkbox" checked=${inviteByEmail}
                      onChange=${e => toggleInviteByEmail(e.target.checked)} />