diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts index 1f32e13..332f0ab 100644 --- a/frontend/src/views/apps/CryptoApp.contract.test.ts +++ b/frontend/src/views/apps/CryptoApp.contract.test.ts @@ -170,9 +170,20 @@ describe('VaultX crypto app contracts', () => { expect(source).toContain('@keyframes vault-view-in') expect(source).toContain('class="sheet-header"') expect(source).toContain('class="sheet-close"') + expect(source).toContain('v-if="sheet !== \'profile\'"') expect(source).toContain('class="sheet-market-summary"') }) + it('gives profile editing a full-width field and save treatment', () => { + expect(source).toContain("'sheet--profile': sheet === 'profile'") + expect(source).toContain('class="profile-edit-fields"') + expect(source.match(/class="profile-edit-field"/g)).toHaveLength(3) + expect(source).toContain('autocomplete="current-password"') + expect(source).toContain('autocomplete="new-password"') + expect(source).toContain('class="profile-save-button"') + expect(source).toContain('.profile-edit-field :deep(.sky-field__border)') + }) + it('keeps app typography readable on the scaled phone surface', () => { expect(source).not.toMatch(/font-size:\s*[6-8]px/) expect(source).toContain(':content-wrap="false"') diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue index e59efe8..d9a8156 100644 --- a/frontend/src/views/apps/CryptoApp.vue +++ b/frontend/src/views/apps/CryptoApp.vue @@ -1611,7 +1611,11 @@ onUnmounted(() => { @backdropclick="closeSheet" @escape="closeSheet" @swipeclose="closeSheet" - >
{{ t('profile.editBody') }}
{ font-size: 12px; line-height: 1.5; } +.sheet--profile { + gap: 14px; + padding-right: 12px; + padding-left: 12px; +} +.sheet--profile .sheet-header { + min-height: 56px; +} +.sheet--profile .sheet-heading { + width: 100%; +} +.sheet--profile .sheet-copy { + padding: 0 3px; + font-size: 11px; + line-height: 1.55; +} .profile-edit-sheet { display: grid; - gap: 12px; + width: 100%; + gap: 13px; +} +.profile-edit-fields { + display: grid; + gap: 9px; +} +.profile-edit-field { + min-height: 62px; + margin: 0; + padding: 0 15px; + color: #f8fbfd; + background: + linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent), #0a1017; + border-radius: 16px; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.035); +} +.profile-edit-field:focus-within { + background: + linear-gradient(145deg, rgba(101, 251, 210, 0.07), transparent), #0a1017; + box-shadow: + 0 0 0 3px rgba(101, 251, 210, 0.06), + inset 0 1px rgba(255, 255, 255, 0.05); +} +.profile-edit-field :deep(.sky-field__media) { + width: 34px; + height: 34px; + justify-content: center; + margin-right: 11px; + padding: 0; + color: var(--vault-mint); + background: rgba(101, 251, 210, 0.07); + border: 1px solid rgba(101, 251, 210, 0.12); + border-radius: 11px; +} +.profile-edit-field :deep(.sky-field__inner) { + padding: 12px 0 10px; +} +.profile-edit-field :deep(.sky-field__label) { + margin-top: 0; + color: rgba(255, 255, 255, 0.56); + font-size: 10px; + font-weight: 750; + letter-spacing: 0.01em; +} +.profile-edit-field :deep(.sky-field__label-text) { + top: 0; + margin: 0; + padding: 0; + background: transparent; +} +.profile-edit-field :deep(.sky-field__control) { + margin: -2px 0 0; +} +.profile-edit-field :deep(.sky-field__input) { + height: 30px; + min-height: 30px; + font-size: 14px; + font-weight: 650; + line-height: 20px; +} +.profile-edit-field :deep(.sky-field__input::placeholder) { + color: rgba(255, 255, 255, 0.28); +} +.profile-edit-field :deep(.sky-field__border) { + inset: 0; + border-color: rgba(255, 255, 255, 0.11); + border-radius: 16px; +} +.profile-edit-field:focus-within :deep(.sky-field__border) { + border-color: rgba(101, 251, 210, 0.52); } .profile-edit-note { display: flex; @@ -4362,6 +4462,21 @@ onUnmounted(() => { flex: 0 0 auto; color: var(--vault-mint); } +.profile-save-button { + min-height: 52px; + gap: 8px; + color: #06110e; + font-size: 13px; + font-weight: 900; + background: linear-gradient(135deg, #70f7d2, #4fd9ba 58%, #4b9eff); + border: 1px solid rgba(255, 255, 255, 0.18); + border-radius: 16px; + box-shadow: 0 13px 30px rgba(54, 220, 178, 0.17); +} +.profile-save-button:active { + box-shadow: 0 6px 18px rgba(54, 220, 178, 0.13); + transform: translateY(1px); +} .quote { display: grid; gap: 0;