feat: design

3box · May 20, 2020 · b874f15 · b874f15
1 parent 910d1c4
commit b874f15
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 53 deletions.
diff --git a/iframe/assets/assets.js b/iframe/assets/assets.js
@@ -1,72 +1,65 @@
-export const Loading = `<svg class="lds-spin" width="90px"  height="90px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="translate(80,50)">
+import Logo from "./logo.svg";
+
+const Loading = `<svg class="lds-spin" width="90px"  height="90px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="translate(80,50)">
 <g transform="rotate(0)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="1" transform="scale(1.09585 1.09585)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="1" transform="scale(1.09585 1.09585)">
   <animateTransform attributeName="transform" type="scale" begin="-1.3125s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-1.3125s"></animate>
 </circle>
 </g>
 </g><g transform="translate(71.21320343559643,71.21320343559643)">
 <g transform="rotate(45)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.875" transform="scale(1.00835 1.00835)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.875" transform="scale(1.00835 1.00835)">
   <animateTransform attributeName="transform" type="scale" begin="-1.125s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-1.125s"></animate>
 </circle>
 </g>
 </g><g transform="translate(50,80)">
 <g transform="rotate(90)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.75" transform="scale(1.02085 1.02085)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.75" transform="scale(1.02085 1.02085)">
   <animateTransform attributeName="transform" type="scale" begin="-0.9375s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.9375s"></animate>
 </circle>
 </g>
 </g><g transform="translate(28.786796564403577,71.21320343559643)">
 <g transform="rotate(135)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.625" transform="scale(1.03335 1.03335)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.625" transform="scale(1.03335 1.03335)">
   <animateTransform attributeName="transform" type="scale" begin="-0.75s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.75s"></animate>
 </circle>
 </g>
 </g><g transform="translate(20,50.00000000000001)">
 <g transform="rotate(180)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.5" transform="scale(1.04585 1.04585)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.5" transform="scale(1.04585 1.04585)">
   <animateTransform attributeName="transform" type="scale" begin="-0.5625s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.5625s"></animate>
 </circle>
 </g>
 </g><g transform="translate(28.78679656440357,28.786796564403577)">
 <g transform="rotate(225)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.375" transform="scale(1.05835 1.05835)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.375" transform="scale(1.05835 1.05835)">
   <animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.375s"></animate>
 </circle>
 </g>
 </g><g transform="translate(49.99999999999999,20)">
 <g transform="rotate(270)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.25" transform="scale(1.07085 1.07085)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.25" transform="scale(1.07085 1.07085)">
   <animateTransform attributeName="transform" type="scale" begin="-0.1875s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.1875s"></animate>
 </circle>
 </g>
 </g><g transform="translate(71.21320343559643,28.78679656440357)">
 <g transform="rotate(315)">
-<circle cx="0" cy="0" r="10" fill="#ffffff" fill-opacity="0.125" transform="scale(1.08335 1.08335)">
+<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.125" transform="scale(1.08335 1.08335)">
   <animateTransform attributeName="transform" type="scale" begin="0s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
   <animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
 </circle>
 </g>
 </g></svg>`
 
-export const Logo = `<svg width="290px" height="289px" viewBox="0 0 290 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-    <g id="ThreeBoxLogoBlack" fill="#181F21" fill-rule="nonzero">
-        <path d="M42,0 L248,0 C271.195959,0 290,18.8040405 290,42 L290,247 C290,270.195959 271.195959,289 248,289 L42,289 C18.8040405,289 2.84068575e-15,270.195959 0,247 L0,42 C-2.84068575e-15,18.8040405 18.8040405,0 42,0 Z M146.4375,47.823 C137.893457,47.823 129.905787,49.0022382 122.47425,51.36075 C115.042713,53.7192618 108.456779,57.2347266 102.71625,61.90725 C96.9757213,66.5797734 92.1920191,72.4092151 88.365,79.39575 C84.5379809,86.382285 81.9570067,94.503454 80.622,103.7595 L97.977,106.83 C99.579008,107.097001 101.091993,107.2305 102.516,107.2305 C105.542015,107.2305 107.989491,106.496257 109.8585,105.02775 C111.727509,103.559243 113.195995,101.134017 114.264,97.752 C116.31101,91.254968 119.915474,85.937271 125.0775,81.79875 C130.239526,77.6602293 136.736461,75.591 144.5685,75.591 C153.201543,75.591 160.009975,77.9272266 164.994,82.59975 C169.978025,87.272273 172.47,94.191954 172.47,103.359 C172.47,107.631021 171.847006,111.546982 170.601,115.107 C169.354994,118.667018 167.152266,121.715237 163.99275,124.25175 C160.833234,126.788263 156.583527,128.768493 151.2435,130.1925 C145.903473,131.616507 139.18404,132.373 131.085,132.462 L131.085,155.958 C140.875049,155.958 148.684721,156.714492 154.51425,158.2275 C160.343779,159.740508 164.815984,161.831987 167.931,164.502 C171.046016,167.172013 173.092995,170.398231 174.072,174.18075 C175.051005,177.963269 175.5405,182.168477 175.5405,186.7965 C175.5405,190.445518 174.850757,194.072232 173.47125,197.67675 C172.091743,201.281268 170.000264,204.551985 167.19675,207.489 C164.393236,210.426015 160.900021,212.806741 156.717,214.63125 C152.533979,216.455759 147.639028,217.368 142.032,217.368 C137.047975,217.368 132.753768,216.633757 129.14925,215.16525 C125.544732,213.696743 122.407513,211.783262 119.7375,209.42475 C117.067487,207.066238 114.77576,204.374015 112.86225,201.348 C110.94874,198.321985 109.191008,195.251516 107.589,192.1365 C106.609995,190.267491 105.208259,188.843505 103.38375,187.8645 C101.559241,186.885495 99.4900116,186.396 97.176,186.396 C94.5949871,186.396 92.0585125,186.929995 89.5665,187.998 L75.015,194.0055 C77.6850133,202.282541 80.8889813,209.580468 84.627,215.8995 C88.3650187,222.218532 92.9039733,227.558478 98.244,231.9195 C103.584027,236.280522 109.858464,239.573489 117.0675,241.7985 C124.276536,244.023511 132.731451,245.136 142.4325,245.136 C151.332544,245.136 159.76521,243.845513 167.73075,241.2645 C175.69629,238.683487 182.70497,234.878775 188.757,229.85025 C194.80903,224.821725 199.614982,218.614037 203.175,211.227 C206.735018,203.839963 208.515,195.340548 208.515,185.7285 C208.515,174.425443 205.667028,165.036037 199.971,157.56 C194.274972,150.083963 185.642058,144.521518 174.072,140.8725 C178.878024,139.270492 183.172231,137.268012 186.95475,134.865 C190.737269,132.461988 193.941237,129.525017 196.56675,126.054 C199.192263,122.582983 201.194743,118.511273 202.57425,113.83875 C203.953757,109.166227 204.6435,103.759531 204.6435,97.6185 C204.6435,90.587465 203.286264,84.04603 200.57175,77.994 C197.857236,71.9419697 193.963525,66.6687725 188.8905,62.17425 C183.817475,57.6797275 177.698786,54.1642627 170.53425,51.62775 C163.369714,49.0912373 155.337544,47.823 146.4375,47.823 Z" id="Combined-Shape"></path>
-    </g>
-</g>
-</svg>`
 
-export const EmptyFavicon = `<?xml version="1.0" encoding="UTF-8"?>
-<svg width="108px" height="108px" viewBox="0 0 108 108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" fill="#1168DF" x="0" y="0" width="108" height="108"></rect>
-    </g>
-</svg>`
+export {
+  Logo,
+  Loading
+}
diff --git a/iframe/assets/logo.svg b/iframe/assets/logo.svg
diff --git 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
@@ -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
@@ -30,17 +30,20 @@ const template = (data,isMobile) => `
         <div class='${style.promptText}'>
           <div class='${style.subText}'>
             <p>
-            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.'}
             </p>
-            ${data.error ? error(data) : ``}
           </div>
         </div>
         <div class='${style.actions}'>
-          <button id='accept' class='${style.primaryButton}'>
+          <button id='accept' class='${style.primaryButton}' ${data.error ? 'style="display:none;"' : ''} >
             Continue
           </button>
+          ${data.error ? error(data) :''}
         </div>
       </div>
+      <div class='${style.footerText}'>
+        <p> This site uses 3ID to give you more control of your data. <span> What is this? </span></p>
+      </div>
     </div>
   </div>
 `

diff --git 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
@@ -7,7 +7,7 @@
   <title>3Box Account</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <style>
     body {
       background: none transparent;

diff --git a/src/threeIdConnect.js b/src/threeIdConnect.js
@@ -12,7 +12,7 @@ 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) => (mobile = false, height = '210px', width = '440px') => iframe.style = `${DISPLAY_IFRAME_STYLE} width: ${width}; height: ${height}; ${mobile ? IFRAME_BOTTOM: IFRAME_TOP}`
+const display = (iframe) => (mobile = false, height = '240px', 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
 
 /**