diff --git a/frontend/src/views/apps/FeatherApp.contract.test.ts b/frontend/src/views/apps/FeatherApp.contract.test.ts index 22dea9d..3c96d4a 100644 --- a/frontend/src/views/apps/FeatherApp.contract.test.ts +++ b/frontend/src/views/apps/FeatherApp.contract.test.ts @@ -75,20 +75,27 @@ describe('FeatherApp Sky UI contract', () => { /v-if="screen === 'composer'"[\s\S]*?variant="secondary"[\s\S]*?class="feather-composer-publish"/, ) expect(source).toMatch( - /v-else-if="screen === 'edit'"[\s\S]*?variant="secondary"[\s\S]*?class="feather-edit__navbar-save"/, + /v-else-if="screen === 'edit'"[\s\S]*?variant="plain"[\s\S]*?class="feather-edit__navbar-save"/, ) }) - it('uses the shared phone action sheet for every post more menu', () => { - expect(source).toContain(' { + expect(source).toContain('\s* { @@ -153,7 +160,11 @@ describe('FeatherApp Sky UI contract', () => { /v-else-if="screen === 'edit'"[\s\S]*?icon-only[\s\S]*?class="feather-edit__navbar-save"[\s\S]*? { { v-else-if="screen === 'edit'" icon-only rounded - small - variant="secondary" + variant="plain" :disabled="!canSaveProfile" class="feather-edit__navbar-save" :aria-label="busy ? t('loading') : t('saveProfile')" @@ -2220,44 +2216,60 @@ onMounted(async () => { - - - - @{{ menuPost.handle }} - - - - {{ t('delete') }} - - - - - - {{ t('cancel') }} - - - +
+ +
+
+ @{{ menuPost.handle }} +

{{ t('moreActions') }}

+
+
+ + + {{ t('delete') }} + + +
+
+
+
@@ -4799,15 +4811,25 @@ onMounted(async () => { font-weight: 800; } .feather-edit__navbar-save { - --sky-surface-muted: #2c3035; - width: 32px; - min-width: 32px; - height: 32px; - min-height: 32px; - border-color: rgb(255 255 255 / 14%); + display: grid; + width: 44px !important; + min-width: 44px; + height: 44px !important; + min-height: 44px; + flex: 0 0 44px; + place-items: center; + border-color: transparent; + border-radius: 50% !important; padding: 0; + background: transparent !important; color: #fff; - box-shadow: 0 5px 14px rgb(0 0 0 / 18%); + box-shadow: none; +} +.feather-edit__navbar-save :deep(svg) { + display: block; +} +.feather-edit__navbar-back :deep(.sky-navbar-back-link__icon) { + transform: translateX(2px); } .feather-composer-card { flex: none; @@ -5252,13 +5274,48 @@ onMounted(async () => { color: inherit; background: var(--feather-panel); } -.feather-post-actions__danger { +.feather-post-menu__content { + padding: 0 14px calc(var(--sky-safe-area-bottom) + 14px); +} +.feather-post-menu__header { + padding: 0 2px 11px; + touch-action: none; +} +.feather-post-menu__header span { + display: block; + color: var(--feather-muted); + font-size: 10px; + font-weight: 700; +} +.feather-post-menu__header h2 { + margin: 2px 0 0; + font-size: 17px; + letter-spacing: -0.25px; +} +.feather-post-menu__group { + overflow: hidden; + border: 1px solid var(--feather-border); + border-radius: 16px; + background: color-mix(in srgb, currentColor 5%, transparent); +} +.feather-post-menu__action { + min-height: 46px; + justify-content: flex-start; + gap: 9px; + border-radius: 0; + padding: 9px 13px; + color: inherit; + font-size: 12px; + font-weight: 700; + line-height: 18px; +} +.feather-post-menu__action + .feather-post-menu__action { + border-top: 1px solid var(--feather-border); +} +.feather-post-menu__action--danger { color: var(--sky-danger); } -.feather-post-actions :deep(.sky-action-button) { - gap: 8px; -} -.feather-post-actions__danger svg { +.feather-post-menu__action svg { flex: none; } @supports not (color: color-mix(in srgb, white, black)) {