diff --git a/src/icons/circle-check-outlined.svg b/src/icons/check-mark-circle.svg similarity index 100% rename from src/icons/circle-check-outlined.svg rename to src/icons/check-mark-circle.svg diff --git a/src/popup/App.vue b/src/popup/App.vue index 953dcca3c..c4bd76a6e 100644 --- a/src/popup/App.vue +++ b/src/popup/App.vue @@ -14,8 +14,6 @@ class="app-inner" :class="{ 'styled-scrollbar': showScrollbar }" > - - @@ -32,8 +30,8 @@ { - const enteringAnimation = createAnimation() - .addElement(opts.enteringEl) - .fromTo('opacity', 0, 1) - .fromTo('transform', 'translateY(70%)', 'translateY(0px)') - .duration(PAGE_TRANSITION_DURATION); - - const leavingAnimation = createAnimation() - .addElement(opts.leavingEl) - .addElement(document.querySelector('#header') as HTMLElement) - .fromTo('opacity', 1, 0) - .beforeStyles({ filter: 'blur(5px)' }) - .afterClearStyles(['filter']) - .duration(PAGE_TRANSITION_DURATION); - - const animation = createAnimation() - .addAnimation(enteringAnimation) - .addAnimation(leavingAnimation); - - return animation; -}; diff --git a/src/popup/animations/popOut.ts b/src/popup/animations/popOut.ts deleted file mode 100644 index b04197deb..000000000 --- a/src/popup/animations/popOut.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { createAnimation } from '@ionic/vue'; -import type { IonAnimationBuilder } from '@/types'; -import { PAGE_TRANSITION_DURATION } from '@/constants'; - -export const popOutAnimation: IonAnimationBuilder = ( - baseEl: Element, - opts: { enteringEl: Element; leavingEl: Element }, -) => { - const enteringAnimation = createAnimation() - .addElement(opts.enteringEl) - .addElement(document.querySelector('#header') as HTMLElement) - .fromTo('opacity', 0, 1) - .beforeStyles({ filter: 'blur(5px)' }) - .afterClearStyles(['filter']) - .duration(PAGE_TRANSITION_DURATION); - - const leavingAnimation = createAnimation() - .addElement(opts.leavingEl) - .fromTo('opacity', 1, 0) - .fromTo('transform', 'translateY(0)', 'translateY(70%)') - .duration(PAGE_TRANSITION_DURATION); - - const animation = createAnimation() - .addAnimation(enteringAnimation) - .addAnimation(leavingAnimation); - - return animation; -}; diff --git a/src/popup/components/AccountDetailsBase.vue b/src/popup/components/AccountDetailsBase.vue index 1c266c436..ed376d9ae 100644 --- a/src/popup/components/AccountDetailsBase.vue +++ b/src/popup/components/AccountDetailsBase.vue @@ -1,87 +1,88 @@ - - - - - - - - - - - - - - - - + + + + - - - - - - - - + + - - - + + + + + + + + + + + + + + + + + + + + + + + - + + + diff --git a/src/popup/components/DefaultPagesRouter.vue b/src/popup/components/DefaultPagesRouter.vue index 53d980886..97777b03c 100644 --- a/src/popup/components/DefaultPagesRouter.vue +++ b/src/popup/components/DefaultPagesRouter.vue @@ -1,11 +1,10 @@ - + @@ -16,9 +15,9 @@ import { IonRouterOutlet, IonPage } from '@ionic/vue'; import { useRoute } from 'vue-router'; import { useUi } from '@/composables'; import { RUNNING_IN_TESTS, IS_FIREFOX } from '@/constants'; -import { popInAnimation } from '@/popup/animations'; import { ROUTE_ACCOUNT, ROUTE_MULTISIG_ACCOUNT } from '../router/routeNames'; +// TODO remove? export default defineComponent({ components: { IonRouterOutlet, @@ -50,7 +49,6 @@ export default defineComponent({ return { RUNNING_IN_TESTS, IS_FIREFOX, - popInAnimation, }; }, }); diff --git a/src/popup/components/Header.vue b/src/popup/components/Header.vue index 981bcad7a..21b05fe10 100644 --- a/src/popup/components/Header.vue +++ b/src/popup/components/Header.vue @@ -1,95 +1,44 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/src/popup/components/ProtocolSpecificView.vue b/src/popup/components/ProtocolSpecificView.vue index dca17aa30..0f13c3f10 100644 --- a/src/popup/components/ProtocolSpecificView.vue +++ b/src/popup/components/ProtocolSpecificView.vue @@ -72,6 +72,8 @@ export default defineComponent({ }, }, setup(props) { + console.log('ProtocolSpecificView', props); + const route = useRoute(); const routeMeta = route.meta as WalletRouteMeta; const routeParams = route.params; diff --git a/src/popup/components/TransactionDetailsBase.vue b/src/popup/components/TransactionDetailsBase.vue index 8009129e7..7c1fdd8b4 100644 --- a/src/popup/components/TransactionDetailsBase.vue +++ b/src/popup/components/TransactionDetailsBase.vue @@ -1,172 +1,173 @@ - - - - - - - - - - - - - - - + + + - - - - - - {{ splitAddress(contractId) }} - - - - - - - - {{ splitAddress(hash) }} - - - - - + + - + + + + + + + + + + - - - {{ $t('common.pending') }} + + {{ splitAddress(contractId) }} + + - - - + :label="$t('pages.transactionDetails.hash')" + data-cy="hash" + small + > + + + {{ splitAddress(hash) }} + + + - + + + - - - + + + + {{ $t('common.pending') }} + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - + diff --git a/src/popup/pages/NotificationSettings.vue b/src/popup/pages/NotificationSettings.vue index 540ca7bd3..4e8e94b02 100644 --- a/src/popup/pages/NotificationSettings.vue +++ b/src/popup/pages/NotificationSettings.vue @@ -1,44 +1,41 @@ - - - - - {{ $t('pages.notificationSettings.description') }} - - - {{ $t('pages.notificationSettings.description2') }} - + + + + {{ $t('pages.notificationSettings.description') }} + + + {{ $t('pages.notificationSettings.description2') }} + - - - + + - - + + - - diff --git a/src/protocols/aeternity/views/TransactionDetails.vue b/src/protocols/aeternity/views/TransactionDetails.vue index 3891b99de..2e9cb68a4 100644 --- a/src/protocols/aeternity/views/TransactionDetails.vue +++ b/src/protocols/aeternity/views/TransactionDetails.vue @@ -1,166 +1,162 @@ - - - - - + + + + - - - + icon-size="rg" + multiple-rows + /> + + + + + + - - - + + + + + + + + + + + + - - + + + - - + + {{ $t('common.you') }} + + + + {{ splitAddress(multisigTransactionFeePaidBy) }} + + + + + + + + + + - - - - - - - - - + + {{ splitAddress(multisigContractId) }} + + + + + - - - - - - - {{ $t('common.you') }} - - - - {{ splitAddress(multisigTransactionFeePaidBy) }} - - - - - - - - - - - - {{ splitAddress(multisigContractId) }} - - - - + + + + + - - - + + + - - - - - - - - - - - + - - - + + + - - diff --git a/src/protocols/bitcoin/views/TransactionDetails.vue b/src/protocols/bitcoin/views/TransactionDetails.vue index 3d2ea531d..4b0c2d263 100644 --- a/src/protocols/bitcoin/views/TransactionDetails.vue +++ b/src/protocols/bitcoin/views/TransactionDetails.vue @@ -1,31 +1,27 @@ - - - - - + + + + - - - - + icon-size="rg" + multiple-rows + /> - - - + + + - - diff --git a/src/styles/global.scss b/src/styles/global.scss index 40bfbd8c7..a590abe5e 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -112,22 +112,25 @@ body { } } -ion-content { - /** hide scrollbar **/ - --offset-bottom: auto !important; - --overflow: hidden; +ion-router-outlet { + ion-content { + /** hide scrollbar **/ + --offset-bottom: auto !important; + --overflow: hidden; - overflow: auto; + overflow: auto; + transition: padding-top 10s; - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { + display: none; + } - /** remove left-right padding **/ - &::part(scroll) { - --padding-end: 0; - --padding-start: 0; - --padding-top: 0; + /** remove left-right padding **/ + &::part(scroll) { + --padding-end: 0; + --padding-start: 0; + --padding-top: env(safe-area-inset-top); + } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9814a6724..56409d363 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,6 +1,7 @@ $extension-width: 360px; $extension-height: 600px; $phone-width: 480px; +$header-default-height: 40px; $border-radius-app: 10px; $border-radius-interactive: 10px; diff --git a/src/types/router.ts b/src/types/router.ts index 2316dda83..4c6668271 100644 --- a/src/types/router.ts +++ b/src/types/router.ts @@ -32,16 +32,6 @@ export interface WalletRouteMeta { * See the `RouteLastUsedRoutes` for the reference. */ notPersist?: boolean; - /** - * Part of the translation string that point to the translated page title - * 'pages.title[title]` - */ - title?: string; - /** - * Decide if the header should display the logo and more button - * or the back and close buttons. - */ - showHeaderNavigation?: boolean; /** * Decide if the header should hide back button */
- {{ $t('pages.notificationSettings.description') }} -
- {{ $t('pages.notificationSettings.description2') }} -
+ {{ $t('pages.notificationSettings.description') }} +
+ {{ $t('pages.notificationSettings.description2') }} +