Merge pull request #6 from blockchain-certificates/fix/backgrounds

Fix/backgrounds

.travis.yml

@@ -1,7 +1,4 @@
 language: node_js
-cache:
-  directories:
-    - "node_modules"
 branches:
   only:
     - master

src/blockcerts-verifier/BlockcertsVerifier.js

@@ -17,6 +17,7 @@ class BlockcertsVerifier extends LitElement {
     return {
       onLoad: Function,
       errorMessage: String,
+      hasCertificate: Boolean,
       ...APICamelCase
     };
   }
@@ -31,11 +32,13 @@ class BlockcertsVerifier extends LitElement {
   }
 
   _render (_props) {
+    const bodyClass = _props.hasCertificate ? 'buv-c-verifier-body--padded' : '';
+
     return html`
       ${CSS}
       <section class='buv-c-verifier-main'>
         <buv-drag-and-drop>
-          <section class='buv-c-verifier-body'>
+          <section class$='${bodyClass}'>
             ${ErrorMessage(_props.errorMessage)}
             <buv-certificate-input></buv-certificate-input>
             <buv-action-menu></buv-action-menu>
@@ -62,6 +65,7 @@ function BUVWrapper (props) {
           src='${props.src}'
           onLoad='${props.onLoad}'
           errorMessage='${props.errorMessage}'
+          hasCertificate='${props.hasCertificate}'
           disableAutoVerify='${props['disable-auto-verify']}'
           disableVerify='${props['disable-verify']}'
           allowDownload='${props['allow-download']}'

src/blockcerts-verifier/BlockcertsVerifierContainer.js

@@ -3,14 +3,16 @@ import initialize from '../actions/initialize';
 import { BlockcertsVerifier, SourceComponent } from './BlockcertsVerifier';
 import { getErrorMessage } from '../selectors/error';
 import { APIKeys } from '../models/API';
+import { getCertificateDefinition } from '../selectors/certificate';
 
 const mapDispatchToProps = {
   onLoad: initialize
 };
 
 const mapStateToProps = (state) => {
   return {
-    errorMessage: getErrorMessage(state)
+    errorMessage: getErrorMessage(state),
+    hasCertificate: !!getCertificateDefinition(state)
   };
 };
 

src/components/atoms/GlobalStylesheet/_generic.global-css.js

@@ -1,3 +1,3 @@
 import {html} from '@polymer/lit-element';
-export default html`<style>.buv-c-verifier-main{font-family:'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;color:#031532;position:relative}.buv-c-verifier-body{padding:20px}
+export default html`<style>.buv-c-verifier-main{font-family:'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;color:#031532;position:relative;background-color:#fff}.buv-c-verifier-body--padded{padding:20px}
 </style>`;

src/components/atoms/GlobalStylesheet/_generic.global.scss

@@ -2,8 +2,9 @@
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
   color: rgb(3, 21, 50);
   position: relative;
+  background-color: #fff;
 }
 
-.buv-c-verifier-body {
+.buv-c-verifier-body--padded {
   padding: 20px;
 }

src/components/molecules/Modal/_components.modal.scss

@@ -5,7 +5,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.35);
+  background-color: rgba(3, 21, 50, 0.7);
   top: 0;
   left: 0;
 }

src/components/organisms/CertificateInput/_components.certificate-input-css.js

@@ -1,3 +1,3 @@
 import {html} from '@polymer/lit-element';
-export default html`<style>.buv-c-certificate-input{display:flex;width:100%}.buv-c-certificate-input__input{width:100%}
+export default html`<style>.buv-c-certificate-input{display:flex;width:100%;padding:20px;background-color:rgba(3,21,50,0.7);box-sizing:border-box}.buv-c-certificate-input__input{width:100%}
 </style>`;

src/components/organisms/CertificateInput/_components.certificate-input.scss

@@ -1,6 +1,9 @@
 .buv-c-certificate-input {
   display: flex;
   width: 100%;
+  padding: 20px;
+  background-color: rgba(3, 21, 50, 0.7);
+  box-sizing: border-box;
 }
 
 .buv-c-certificate-input__input {