diff --git a/iframe/assets/assets.js b/iframe/assets/assets.js index d7e5640..8771a3e 100644 --- a/iframe/assets/assets.js +++ b/iframe/assets/assets.js @@ -1,72 +1,65 @@ -export const Loading = ` +import Logo from "./logo.svg"; + +const Loading = ` - + - + - + - + - + - + - + - + ` -export const Logo = ` - - - - - -` -export const EmptyFavicon = ` - - - - -` +export { + Logo, + Loading +} diff --git a/iframe/assets/logo.svg b/iframe/assets/logo.svg new file mode 100644 index 0000000..bd28eea --- /dev/null +++ b/iframe/assets/logo.svg @@ -0,0 +1,22 @@ + + + + Group 6 + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/iframe/css/style.scss b/iframe/css/style.scss index 62d430d..c27ab05 100644 --- a/iframe/css/style.scss +++ b/iframe/css/style.scss @@ -16,7 +16,8 @@ h3, h4, h5, h6, -button { +button, +p, { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } @@ -31,9 +32,9 @@ p { margin: 0; } -p, span { - font-family: 'JetBrains'; -} +// p, span { +// font-family: 'JetBrains'; +// } button { width: 100%; @@ -43,6 +44,18 @@ button { display: flex; justify-content: center; align-items: center; + border: none; + box-shadow: 2px 3px 8px 0px #00000025; +} + +.button:active:focus { + outline: none !important; + box-shadow: none; +} + +.button:focus { + outline: none !important; + box-shadow: none; } button { @@ -87,7 +100,7 @@ button { .controls { width: 100%; - height: 52px; + height: 55px; // border-bottom: 1px solid $borderColor; display: flex; justify-content: space-between; @@ -108,9 +121,8 @@ button { align-items: center; svg { - height: 24px; - width: 24px; - opacity: .3; + height: 30px; + width: 30px; cursor: pointer; // transition: $transition; @@ -121,14 +133,14 @@ button { span { margin-left: 15px; - font-weight: 400; - color: #b9bbbc; - font-size: 13px; + font-weight: 600; + color: $textColor; + font-size: 14px; } } .close { - padding: 10px; + padding: 0 10px; display: flex; justify-content: center; align-items: center; @@ -143,7 +155,7 @@ button { .close_line { width: 2px; - height: 20px; + height: 16px; background-color: $symbolGrey; transform: rotate(45deg); } @@ -182,11 +194,10 @@ button { .walletSelect_error { color: $threeBoxRed; - position: absolute; - left: 0; - bottom: -38px; - font-size: 12px; - line-height: 14px; + font-size: 13px; + font-weight: 600; + height: 40px; + padding-top: 11px; } .headerText { @@ -279,9 +290,9 @@ button { flex-direction: column; align-items: center; justify-content: flex-start; - width: 344px; + width: 100%; + padding: 0 30px 0px 30px; position: relative; - padding-bottom: 20px; } .promptBox { @@ -314,7 +325,7 @@ button { } .promptText { - padding: 15px 45px 35px 45px; + padding: 15px 30px 25px 30px; .primaryText { color: #63686d; @@ -328,7 +339,7 @@ button { .subText { font-weight: 400; - color: #b9bbbc; + color: $textColor; font-size: 13px; } } @@ -428,6 +439,13 @@ button { } } +.footerText { + font-size: 9px; + padding: 25px 30px 20px 30px; + color: #817972a6; + text-align: center; +} + .buttonFooter { width: 100%; float: left; diff --git a/iframe/css/variables.scss b/iframe/css/variables.scss index 99ca1b6..a9acdac 100644 --- a/iframe/css/variables.scss +++ b/iframe/css/variables.scss @@ -7,7 +7,8 @@ $inputPadding: 12px 14px; $threeBoxBlue: #1168df; $threeBoxBlueHover: #0950b0; -$threeIdOrange: orange; +$threeIdOrange: #F76837; +$textColor: #817972; $symbolGrey: #D8D8D8; diff --git a/iframe/html/template.js b/iframe/html/template.js index 5408753..fc23d31 100644 --- a/iframe/html/template.js +++ b/iframe/html/template.js @@ -30,17 +30,20 @@ const template = (data,isMobile) => `

- This site wants to access your profile${data.request.spaces.length === 0 ? '. ' : ' and ' + data.request.spaces.length + 'data sources.'} + This site wants to access your profile${data.request.spaces.length === 0 ? '. ' : ' and ' + data.request.spaces.length + ' data sources.'}

- ${data.error ? error(data) : ``}
- + ${data.error ? error(data) :''}
+
+

This site uses 3ID to give you more control of your data. What is this?

+
` diff --git a/iframe/index.js b/iframe/index.js index fd4bd35..4422b32 100644 --- a/iframe/index.js +++ b/iframe/index.js @@ -40,8 +40,8 @@ const getConsent = async (req) => { const result = await new Promise((resolve, reject) => { accept.addEventListener('click', () => { - accept.innerHTML = `Approve in wallet ${assets.Loading}`; - document.getElementById("accept").style.opacity = .5; + accept.innerHTML = `Confirm in your wallet ${assets.Loading}`; + document.getElementById("accept").style.boxShadow = 'none'; resolve(true) }) }) @@ -52,7 +52,7 @@ const getConsent = async (req) => { // Service calls on error, renders error to UI const errorCb = (err, msg) => { if (!msg) msg = err.toString() - if (err.toString().includes('Must select provider')) msg = 'Must select a wallet to continue.' + msg = 'Error: Unable to connect' console.log(err) store.set('error', msg) } diff --git a/public/index.html b/public/index.html index 9c3eeab..50a46c3 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ 3Box Account - +