From f2769d56c9851f0313745bd0048c3444bcd250d3 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 28 Sep 2020 13:06:31 -0230 Subject: [PATCH] Add full screen styles for intro popup and update svg (#57) * Add full screen styles for intro popup and update svg * Visual and copy tweaks to intro-popup component --- app/_locales/en/messages.json | 2 +- app/images/source-logos-all.svg | 241 ++++++++++-------- ui/app/pages/swaps/intro-popup/index.scss | 21 +- ui/app/pages/swaps/intro-popup/intro-popup.js | 1 + 4 files changed, 153 insertions(+), 112 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index bdc847398f63..e7e1ab97b2ba 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1582,7 +1582,7 @@ "message": "Liquidity sources include:" }, "swapIntroPopupSubTitle": { - "message": "MetaMask now aggregates multiple decentralized exchange aggregators and professional market makers to ensure you always get the best swap price with with the lowest network fees." + "message": "Get the best prices on token swaps right inside your wallet. MetaMask now connects you to multiple decentralized exchange aggregators and professional market makers." }, "swapIntroPopupTitle": { "message": "Swap tokens in MetaMask! 🎉" diff --git a/app/images/source-logos-all.svg b/app/images/source-logos-all.svg index 3a23acb20e08..22006c179fd0 100644 --- a/app/images/source-logos-all.svg +++ b/app/images/source-logos-all.svg @@ -1,111 +1,132 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/app/pages/swaps/intro-popup/index.scss b/ui/app/pages/swaps/intro-popup/index.scss index 3c105e10cee4..e5f243f4b095 100644 --- a/ui/app/pages/swaps/intro-popup/index.scss +++ b/ui/app/pages/swaps/intro-popup/index.scss @@ -3,7 +3,12 @@ @include H7; font-weight: bold; - margin-bottom: 2px; + margin-bottom: 6px; + color: $Black-100; + + @media screen and (min-width: 576px) { + @include H6; + } } &__learn-more-header { @@ -47,5 +52,19 @@ padding: 20px 16px; background: $Grey-000; border-radius: 8px; + + @media screen and (min-width: 576px) { + width: 412px; + + img { + width: 364px; + } + } + } + + &__popover { + @media screen and (min-width: 576px) { + width: 460px; + } } } diff --git a/ui/app/pages/swaps/intro-popup/intro-popup.js b/ui/app/pages/swaps/intro-popup/intro-popup.js index dfe7bf85d862..305f413f38ce 100644 --- a/ui/app/pages/swaps/intro-popup/intro-popup.js +++ b/ui/app/pages/swaps/intro-popup/intro-popup.js @@ -21,6 +21,7 @@ export default function IntroPopup ({ onClose }) { return (