diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index 0c9af9d..9324ea4 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -178,10 +178,21 @@ 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("v-if=\"sheet === 'trade' || sheet === 'send'\"")
expect(source).toContain('class="sheet-market-summary"')
})
+ it('uses a wide close-free settlement form with composed fields', () => {
+ expect(source).toContain(
+ "'sheet--settlement': sheet === 'deposit' || sheet === 'withdraw'",
+ )
+ expect(source).toContain('class="settlement-form"')
+ expect(source.match(/class="settlement-field"/g)).toHaveLength(2)
+ expect(source).toContain('class="settlement-submit"')
+ expect(source).toContain('.settlement-field :deep(.sky-field__border)')
+ expect(source).toContain('.sheet--settlement .sheet-heading')
+ })
+
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"')
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index 6e64029..8efcf38 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -1624,7 +1624,10 @@ onUnmounted(() => {
>
@@ -4414,6 +4436,153 @@ onUnmounted(() => {
font-size: 12px;
line-height: 1.5;
}
+.sheet--settlement {
+ gap: 14px;
+ padding-right: 12px;
+ padding-left: 12px;
+}
+.sheet--settlement .sheet-header {
+ min-height: 58px;
+ padding: 0 2px 12px;
+}
+.sheet--settlement .sheet-heading {
+ width: 100%;
+}
+.settlement-form {
+ display: grid;
+ width: 100%;
+ gap: 13px;
+}
+.settlement-intro {
+ display: flex;
+ gap: 11px;
+ align-items: flex-start;
+ padding: 12px 13px;
+ background:
+ radial-gradient(
+ circle at 0% 0%,
+ rgba(101, 251, 210, 0.08),
+ transparent 52%
+ ),
+ rgba(255, 255, 255, 0.025);
+ border: 1px solid rgba(255, 255, 255, 0.065);
+ border-radius: 16px;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
+}
+.settlement-intro > span {
+ display: grid;
+ width: 32px;
+ height: 32px;
+ flex: 0 0 auto;
+ place-items: center;
+ color: var(--vault-mint);
+ background: rgba(101, 251, 210, 0.08);
+ border: 1px solid rgba(101, 251, 210, 0.14);
+ border-radius: 11px;
+}
+.settlement-copy {
+ padding-top: 1px;
+ color: rgba(238, 245, 248, 0.66);
+ font-size: 11px;
+ line-height: 1.55;
+}
+.settlement-fields {
+ display: grid;
+ gap: 10px;
+}
+.settlement-field {
+ min-height: 64px;
+ margin: 0;
+ padding: 0 15px;
+ color: #f8fbfd;
+ background:
+ linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent), #090f16;
+ border-radius: 17px;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
+}
+.settlement-field:focus-within {
+ background:
+ linear-gradient(145deg, rgba(101, 251, 210, 0.07), transparent), #090f16;
+ box-shadow:
+ 0 0 0 3px rgba(101, 251, 210, 0.065),
+ inset 0 1px rgba(255, 255, 255, 0.05);
+}
+.settlement-field :deep(.sky-field__media) {
+ display: grid;
+ width: 36px;
+ height: 36px;
+ justify-content: center;
+ margin-right: 12px;
+ padding: 0;
+ place-items: center;
+ color: var(--vault-mint);
+ background: rgba(101, 251, 210, 0.07);
+ border: 1px solid rgba(101, 251, 210, 0.13);
+ border-radius: 12px;
+}
+.settlement-field :deep(.sky-field__inner) {
+ padding: 12px 0 10px;
+}
+.settlement-field :deep(.sky-field__label) {
+ margin-top: 0;
+ color: rgba(255, 255, 255, 0.55);
+ font-size: 10px;
+ font-weight: 750;
+}
+.settlement-field :deep(.sky-field__label-text) {
+ top: 0;
+ margin: 0;
+ padding: 0;
+ background: transparent;
+}
+.settlement-field :deep(.sky-field__control) {
+ margin: -2px 0 0;
+}
+.settlement-field :deep(.sky-field__input) {
+ height: 31px;
+ min-height: 31px;
+ color: #fff;
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 21px;
+}
+.settlement-field :deep(.sky-field__input::placeholder) {
+ color: rgba(255, 255, 255, 0.24);
+}
+.settlement-field :deep(.sky-field__border) {
+ inset: 0;
+ border-color: rgba(255, 255, 255, 0.12);
+ border-radius: 17px;
+}
+.settlement-field:focus-within :deep(.sky-field__border) {
+ border-color: rgba(101, 251, 210, 0.58);
+}
+.settlement-field.sky-field--error :deep(.sky-field__border) {
+ border-color: rgba(255, 117, 136, 0.6);
+}
+.settlement-error {
+ margin: -3px 2px 0;
+}
+.settlement-submit {
+ min-height: 54px;
+ gap: 8px;
+ color: #06110e;
+ font-size: 13px;
+ font-weight: 900;
+ background: linear-gradient(135deg, #78f8d5, #4fd9ba 55%, #5aa7ff);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 17px;
+ box-shadow: 0 14px 30px rgba(54, 220, 178, 0.18);
+}
+.settlement-submit:active {
+ box-shadow: 0 7px 18px rgba(54, 220, 178, 0.13);
+ transform: translateY(1px);
+}
+@media (hover: hover) {
+ .settlement-submit:hover {
+ filter: brightness(1.06);
+ }
+}
.sheet--profile {
gap: 14px;
padding-right: 12px;