diff --git a/src/request/connect/Connect.css b/src/request/connect/Connect.css index ac742f9be..78de9bbce 100644 --- a/src/request/connect/Connect.css +++ b/src/request/connect/Connect.css @@ -48,6 +48,32 @@ line-height: 1.375; } +.tooltip { + display: inline-block; + vertical-align: middle; +} + +.tooltip .nq-icon { + display: block; + opacity: 0.3; +} + +.tooltip-box { + width: 28rem; + text-align: left; + right: -2.5rem; +} + +.tooltip-box p { + margin: 0; + font-size: 2rem; + line-height: 1.3; +} + +.tooltip-box p + p { + margin-top: 1rem; +} + .password-box { margin-top: 1rem; } diff --git a/src/request/connect/index.html b/src/request/connect/index.html index cf74f43ec..2e673077b 100644 --- a/src/request/connect/index.html +++ b/src/request/connect/index.html @@ -56,6 +56,7 @@ <link rel="stylesheet" bundle-toplevel href="../../components/PasswordInput.css"> <link rel="stylesheet" bundle-toplevel href="../../components/PasswordBox.css"> + <link rel="stylesheet" href="../../components/Tooltip.css"> <link rel="stylesheet" href="../../components/LoginFileAccountIcon.css"> <link rel="stylesheet" href="Connect.css"> </head> @@ -87,10 +88,24 @@ <h1 class="nq-h1"> <div class="flex-grow"></div> - <p class="bottom-explainer"> + <div class="bottom-explainer"> The connection is for approving only.<br> Your funds remain unaffected. - </p> + <div class="tooltip top" tabindex="0"> + <svg class="nq-icon"><use xlink:href="../../../node_modules/@nimiq/style/nimiq-style.icons.svg#nq-info-circle-small"/></svg> + <div class="tooltip-box"> + <p data-i18n="connect-tooltip-multisig-1"> + Your account will be used to verify your identity only. + </p> + <p data-i18n="connect-tooltip-multisig-2"> + The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet. + </p> + <p data-i18n="connect-tooltip-multisig-3"> + The first address of your account will be visible to all participants in your shared wallet. + </p> + </div> + </div> + </div> </div> <div class="page-footer nq-card-footer"> diff --git a/src/translations/de.json b/src/translations/de.json index 0ac4a323e..7296218b7 100644 --- a/src/translations/de.json +++ b/src/translations/de.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Gebühren gesamt", "sign-swap-your-bank": "Deine Bank", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/en.json b/src/translations/en.json index 73e63fad3..9db41fa6b 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Total fees", "sign-swap-your-bank": "Your bank", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/es.json b/src/translations/es.json index 1bfb28e99..f0a2b56e6 100644 --- a/src/translations/es.json +++ b/src/translations/es.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Cuotas totales", "sign-swap-your-bank": "Su banco", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/fr.json b/src/translations/fr.json index e1cb9f44e..37f8711d1 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Total des frais", "sign-swap-your-bank": "Votre banque", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/nl.json b/src/translations/nl.json index 6a73b3071..60c0b1e30 100644 --- a/src/translations/nl.json +++ b/src/translations/nl.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Totale kosten", "sign-swap-your-bank": "Jouw bank", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/ru.json b/src/translations/ru.json index ffd29e20a..04197a95c 100644 --- a/src/translations/ru.json +++ b/src/translations/ru.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Итого", "sign-swap-your-bank": "Ваш банк", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/uk.json b/src/translations/uk.json index 0c601b755..fd1877fa2 100644 --- a/src/translations/uk.json +++ b/src/translations/uk.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "Сумарна комісія", "sign-swap-your-bank": "Ваш банк", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." } diff --git a/src/translations/zh.json b/src/translations/zh.json index a678f94aa..60e6de608 100644 --- a/src/translations/zh.json +++ b/src/translations/zh.json @@ -244,5 +244,8 @@ "sign-swap-total-fees": "总费用", "sign-swap-your-bank": "你的银行", - "connect-heading-prefix": "Log in to" + "connect-heading-prefix": "Log in to", + "connect-tooltip-multisig-1": "Your account will be used to verify your identity only.", + "connect-tooltip-multisig-2": "The shared wallet has its own address. It can receive transactions from anywhere just like a regular wallet.", + "connect-tooltip-multisig-3": "The first address of your account will be visible to all participants in your shared wallet." }