diff --git a/public/index.html b/public/index.html index 7dec87651..a6497f0eb 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,9 @@ - + + + Nimiq Wallet diff --git a/src/App.vue b/src/App.vue index f991a2f9f..faab8b53e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,7 +5,7 @@ -
+
@@ -32,14 +32,14 @@ + + diff --git a/src/components/modals/BtcActivationModal.vue b/src/components/modals/BtcActivationModal.vue index 35ed1d4e1..f7aa02b3d 100644 --- a/src/components/modals/BtcActivationModal.vue +++ b/src/components/modals/BtcActivationModal.vue @@ -49,7 +49,7 @@ export default defineComponent({ setup(props, context) { const { activeAccountId, setActiveCurrency } = useAccountStore(); - const { width } = useWindowSize(); + const { isMobile } = useWindowSize(); let activated = false; @@ -62,7 +62,7 @@ export default defineComponent({ } onUnmounted(() => { - if (activated && width.value <= 700) { // Full mobile breakpoint + if (activated && isMobile.value) { context.root.$router.push('/transactions'); } }); diff --git a/src/components/modals/BtcReceiveModal.vue b/src/components/modals/BtcReceiveModal.vue index ab2a28aef..f232174de 100644 --- a/src/components/modals/BtcReceiveModal.vue +++ b/src/components/modals/BtcReceiveModal.vue @@ -3,29 +3,31 @@ :showOverlay="addressQrCodeOverlayOpened || receiveLinkOverlayOpened" @close-overlay="closeOverlay" > - - -
-

{{ $t('With Bitcoin, a new address is used for every transaction to improve privacy.' - + ' Reuse of addresses does not result in a loss of funds.') }}

-
-
- -

{{ $t('Don’t reuse addresses and create a new one for every transaction.') }}

-
-
- -

{{ - $t('Use labels instead of contacts to easily identify transactions in your history.') - }}

+ + {{ $t('Receive BTC') }} +
+ {{ $t('Share a single-use address with the sender.') }} + + +
+

{{ $t('With Bitcoin, a new address is used for every transaction to improve privacy.' + + ' Reuse of addresses does not result in a loss of funds.') }}

+
+
+ +

{{ $t('Don’t reuse addresses and create a new one for every transaction.') }}

+
+
+ +

+ {{ $t('Use labels instead of contacts to easily ' + + 'identify transactions in your history.') }} +

+
+
-
+
- - - - {{ $t('Receive BTC') }} -
{{ $t('Share a single-use address with the sender.') }}
.info-tooltip { + margin-left: 1rem; + z-index: 4; + + ::v-deep .trigger svg { + height: 2rem; + color: var(--text-60); + transition: color var(--short-transition-duration) var(--nimiq-ease); + } + + & ::v-deep .trigger:hover svg, + & ::v-deep .trigger:focus svg, + &.shown ::v-deep .trigger svg { + color: var(--text-80); + } + + ::v-deep .tooltip-box { + width: 26.25rem; + font-size: var(--small-size); + font-weight: 600; + transform: translate(1rem, 2rem); + + @media (max-width: 700px) { // Full mobile breakpoint + transform: translate(0, 2rem); + } + + p { + margin: 0; + } + + p:first-child, + .flex-row:first-child { + margin-bottom: 1rem; + } + + .flex-row { + align-items: flex-start; + + p { + flex-basis: 80%; + margin-left: 1.25rem; + } + + svg { + opacity: 0.6; + } + + &:first-child svg { + width: 2.75rem; + height: 2.75rem; + margin-top: 0.25rem; + } + &:last-child svg { + width: 2.25rem; + height: 2.25rem; + margin: 0.25rem 0.25rem 0; + } + } + } + } } } @@ -397,6 +470,7 @@ export default defineComponent({ color: var(--text-100); height: calc(var(--body-size) + 4px + (var(--padding) * 2)); padding: 0; + overflow: hidden; transition: { property: background-color, color, font-size; @@ -592,75 +666,6 @@ footer { } } -.info-tooltip { - position: absolute; - top: 2rem; - left: 2rem; - z-index: 3; - - ::v-deep .trigger svg { - height: 2rem; - opacity: .3; - - transition: opacity var(--short-transition-duration) var(--nimiq-ease); - } - - & ::v-deep .trigger:hover svg, - & ::v-deep .trigger:focus svg, - &.shown ::v-deep .trigger svg { - opacity: .6; - } - - ::v-deep .tooltip-box { - width: 26.25rem; - font-size: var(--small-size); - font-weight: 600; - transform: translate(-2rem, 2rem); - - @media (max-width: 700px) { // Full mobile breakpoint - transform: translate(0.5rem, 2rem); - } - - p { - margin: 0; - } - - p:first-child, - .flex-row:first-child { - margin-bottom: 1rem; - } - - .flex-row { - align-items: flex-start; - - p { - flex-basis: 80%; - margin-left: 1.25rem; - } - - svg { - opacity: 0.6; - } - } - - .flex-row:first-child { - svg { - width: 2.75rem; - height: 2.75rem; - margin-top: 0.25rem; - } - } - - .flex-row:last-child { - svg { - width: 2.25rem; - height: 2.25rem; - margin: 0.25rem 0.25rem 0; - } - } - } -} - /* vue transition - translateY-fade-list */ .translateY-fade-list-enter-active, .translateY-fade-list-leave-active, diff --git a/src/components/modals/BtcSendModal.vue b/src/components/modals/BtcSendModal.vue index ddb1e4cb3..252beac7c 100644 --- a/src/components/modals/BtcSendModal.vue +++ b/src/components/modals/BtcSendModal.vue @@ -1,7 +1,9 @@