diff --git a/iframe/css/style.scss b/iframe/css/style.scss index 183853f..62d430d 100644 --- a/iframe/css/style.scss +++ b/iframe/css/style.scss @@ -31,7 +31,7 @@ p { margin: 0; } -p { +p, span { font-family: 'JetBrains'; } @@ -55,32 +55,31 @@ button { .card { width: 420px; - // height: 565px; border: 1px solid $borderColor; border-radius: $radius; display: flex; flex-direction: column; justify-content: space-between; - align-items: center; background-color: white; + box-shadow: 0px 4px 10px 1px #00000025; + margin-top: 10px; + margin-left: 10px; } .cardMobile { - width: 100vw !important; + width: 85vw !important; height: 100vh !important; - border: none !important; justify-content: flex-start !important; + margin-top: 0px !important; + margin-left: 0px !important; } .content { width: 100%; - padding-top: 20px; + padding-top: 5px; } .contentMobile { - width: 100% !important; - height: 80% !important; - padding-top: 125px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; @@ -89,7 +88,7 @@ button { .controls { width: 100%; height: 52px; - border-bottom: 1px solid $borderColor; + // border-bottom: 1px solid $borderColor; display: flex; justify-content: space-between; align-items: center; @@ -119,6 +118,13 @@ button { opacity: 1; } } + + span { + margin-left: 15px; + font-weight: 400; + color: #b9bbbc; + font-size: 13px; + } } .close { @@ -451,8 +457,7 @@ button { } .primaryButton { - background-color: $threeBoxBlue; - color: white; + color: $threeIdOrange; } .secondaryButton { diff --git a/iframe/css/variables.scss b/iframe/css/variables.scss index 324d5c0..99ca1b6 100644 --- a/iframe/css/variables.scss +++ b/iframe/css/variables.scss @@ -7,6 +7,8 @@ $inputPadding: 12px 14px; $threeBoxBlue: #1168df; $threeBoxBlueHover: #0950b0; +$threeIdOrange: orange; + $symbolGrey: #D8D8D8; $indexModalPreviewImageHeight: 100px; @@ -88,4 +90,4 @@ $dropShadow: 0px 4px 10px 4px #00000025, // $commentPictureDimension: 40px; -// $commentPictureDimension-mobile: 50px; \ No newline at end of file +// $commentPictureDimension-mobile: 50px; diff --git a/iframe/html/template.js b/iframe/html/template.js index eff0ea4..5408753 100644 --- a/iframe/html/template.js +++ b/iframe/html/template.js @@ -7,14 +7,17 @@ const spaceString = (spaces) => spaces.join(', ') const template = (data,isMobile) => `
- - ${assets.Logo} - +
+ + ${assets.Logo} + + Connect your data +
@@ -24,25 +27,10 @@ const template = (data,isMobile) => `
- - -
-
- ${data.request.origin} -
-

wants to access your data

-
-

- ${capitalizeFirst(data.request.origin)} uses 3ID to give you privacy and control over your data. - This app wants to access: ${spaceString(data.request.spaces)}. + This site wants to access your profile${data.request.spaces.length === 0 ? '. ' : ' and ' + data.request.spaces.length + 'data sources.'}

${data.error ? error(data) : ``}
@@ -51,14 +39,10 @@ const template = (data,isMobile) => ` -
-
` export default template diff --git a/iframe/index.js b/iframe/index.js index 2099354..fd4bd35 100644 --- a/iframe/index.js +++ b/iframe/index.js @@ -24,7 +24,6 @@ const render = async (request) => { request } if (errorMessage) data.error = errorMessage - if (request.type === 'authenticate' && request.spaces.length === 0) data.request.spaces = ['3Box'] root.innerHTML = template(data, checkIsMobile()) } @@ -45,9 +44,6 @@ const getConsent = async (req) => { document.getElementById("accept").style.opacity = .5; resolve(true) }) - decline.addEventListener('click', () => { - resolve(false) - }) }) return result diff --git a/public/index.html b/public/index.html index 055ab4e..9c3eeab 100644 --- a/public/index.html +++ b/public/index.html @@ -10,10 +10,8 @@ @@ -24,4 +22,4 @@ - \ No newline at end of file + diff --git a/src/threeIdConnect.js b/src/threeIdConnect.js index e93d53f..f44b90c 100644 --- a/src/threeIdConnect.js +++ b/src/threeIdConnect.js @@ -8,9 +8,11 @@ const IDENTITY_WALLET_IFRAME_URL = ' http://127.0.0.1:30001' const HIDE_IFRAME_STYLE = 'position: fixed; width:0; height:0; border:0; border:none !important' const DISPLAY_IFRAME_STYLE = 'border:none border:0; z-index: 500; position: fixed;' +const IFRAME_TOP = `top: 10px; right: 10px` +const IFRAME_BOTTOM = `bottom: 0px; left: 0px;` const hide = (iframe) => () => iframe.style = HIDE_IFRAME_STYLE -const display = (iframe) => (height = '100%', width = '100%', top = '0', left= '0') => iframe.style = `${DISPLAY_IFRAME_STYLE} width: ${width}; height: ${height}; top: ${top}; left: ${left};` +const display = (iframe) => (mobile = false, height = '210px', width = '440px') => iframe.style = `${DISPLAY_IFRAME_STYLE} width: ${width}; height: ${height}; ${mobile ? IFRAME_BOTTOM: IFRAME_TOP}` // TODO maybe have some more ui options here, because these can change after iframe loads /** @@ -34,6 +36,7 @@ class ThreeIdConnect { this.iframe = document.createElement('iframe') this.iframe.src = ' http://127.0.0.1:30001' || IDENTITY_WALLET_IFRAME_URL this.iframe.style = HIDE_IFRAME_STYLE + this.iframe.allowTransparency = true this.iframe.frameBorder = 0 this.iframeLoadedPromise = new Promise((resolve, reject) => { diff --git a/src/threeIdConnectService.js b/src/threeIdConnectService.js index c692675..368b185 100644 --- a/src/threeIdConnectService.js +++ b/src/threeIdConnectService.js @@ -9,6 +9,9 @@ const store = require('store') const consentKey = (address, domain, space) => `3id_consent_${address}_${domain}_${space}` const serializedKey = (address) => `serialized3id_${address}` +const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i +const checkIsMobile = () => mobileRegex.test(navigator.userAgent) + async function getLinkedData(address) { try { return API.getRootStoreAddress(address) @@ -125,7 +128,7 @@ class ThreeIdConnectService { * Tells parent window to display iframe */ async displayIframe() { - return this.display() + return this.display(checkIsMobile()) } /**