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

Fix/backgrounds

src/blockcerts-verifier/BlockcertsVerifier.js

@@ -32,24 +32,26 @@ class BlockcertsVerifier extends LitElement {
   }
 
   _render (_props) {
-    const bodyClass = _props.hasCertificate ? 'buv-c-verifier-body--padded' : '';
+    const bodyClass = _props.hasCertificate ? 'buv-c-verifier-body  buv-c-verifier-body--padded' : '';
 
     return html`
       ${CSS}
       <section class='buv-c-verifier-main'>
         <buv-drag-and-drop>
-          <section class$='${bodyClass}'>
-            ${ErrorMessage(_props.errorMessage)}
-            <buv-certificate-input></buv-certificate-input>
-            <buv-action-menu></buv-action-menu>
-            ${_props.displayMode === DISPLAY_MODE.FULL
+          <div class='buv-c-verifier-layout'>
+            <section class$='${bodyClass}'>
+              ${ErrorMessage(_props.errorMessage, true)}
+              <buv-certificate-input></buv-certificate-input>
+              <buv-action-menu></buv-action-menu>
+              ${_props.displayMode === DISPLAY_MODE.FULL
     ? html`<buv-full-certificate></buv-full-certificate>`
     : html`<buv-card-certificate></buv-card-certificate>`
 }
-            <buv-verify-other-certificate></buv-verify-other-certificate>
-            <buv-verification-modal></buv-verification-modal>
-          </section>
-          ${Footer()}
+              <buv-verify-other-certificate></buv-verify-other-certificate>
+              <buv-verification-modal></buv-verification-modal>
+            </section>
+            ${Footer()}
+          </div>
         </buv-drag-and-drop>
       </section>
     `;

src/components/atoms/CardCertificate/_components.card.scss

@@ -62,7 +62,6 @@
 
 .buv-c-card__verify-button {
   float: right;
-  margin-bottom: 20px;
 }
 
 @media only screen and (max-width: $modalMaxDimension) {

src/components/atoms/ErrorMessage/ErrorMessage.js

@@ -1,14 +1,20 @@
 import { html } from '@polymer/lit-element';
 import CSS from './_components.error-message-css';
 
-export default function ErrorMessage (message) {
+export default function ErrorMessage (message, solidBackground = false) {
   if (message == null) {
     return null;
   }
 
+  const classes = [
+    'buv-c-error-message',
+    'buv-qa-error-message',
+    solidBackground ? 'buv-c-error-message--solid' : ''
+  ].join(' ');
+
   return html`
     ${CSS}
-    <p class='buv-c-error-message  buv-qa-error-message'>
+    <p class$='${classes}'>
       <span class='buv-c-error-message-title'>Error</span>
       ${message}
     </p>`;

src/components/atoms/ErrorMessage/_components.error-message-css.js

@@ -1,3 +1,3 @@
 import {html} from '@polymer/lit-element';
-export default html`<style>.buv-c-error-message{background:rgba(208,2,27,0.05);border-radius:2px;letter-spacing:.05px;padding:10px}.buv-c-error-message-title{color:#d0021b;font-weight:bold;display:block;margin-bottom:5px;font-size:15px}
+export default html`<style>.buv-c-error-message{background:rgba(208,2,27,0.05);border-radius:2px;letter-spacing:.05px;padding:10px}.buv-c-error-message--solid{background:#fff;border-radius:2px 2px 0 0;margin:0}.buv-c-error-message-title{color:#d0021b;font-weight:bold;display:block;margin-bottom:5px;font-size:15px}
 </style>`;

src/components/atoms/ErrorMessage/_components.error-message.scss

@@ -7,6 +7,13 @@
   padding: 10px;
 }
 
+.buv-c-error-message--solid {
+  // TODO: this class does a little bit too much
+  background: #fff;
+  border-radius: 2px 2px 0 0;
+  margin: 0;
+}
+
 .buv-c-error-message-title {
   color: $errorColor;
   font-weight: bold;

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;background-color:#fff}.buv-c-verifier-body--padded{padding:20px}
+export default html`<style>.buv-c-verifier-main{font-family:'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;color:#031532;position:relative}.buv-c-verifier-layout{display:flex;flex-direction:column}.buv-c-verifier-body{background-color:#fff;flex-grow:1}.buv-c-verifier-body--padded{padding:20px}
 </style>`;

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

@@ -2,7 +2,16 @@
   font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
   color: rgb(3, 21, 50);
   position: relative;
+}
+
+.buv-c-verifier-layout {
+  display: flex;
+  flex-direction: column;
+}
+
+.buv-c-verifier-body {
   background-color: #fff;
+  flex-grow: 1;
 }
 
 .buv-c-verifier-body--padded {

src/components/atoms/Input/_components.input.scss

@@ -3,7 +3,7 @@
 .buv-c-input {
   font-size: 15px;
   color: $fontColor;
-  border-radius: 2px;
+  border-radius: 2px 0 0 2px;
   padding: 12px 15px;
   background-color: rgba(243, 244, 245, 6);
   border: solid 1px rgba(3, 21, 50, .13);

src/components/molecules/Modal/Modal.js

@@ -39,8 +39,8 @@ class Modal extends LitElement {
 
     return html`
       ${CSS}
-      <div class$='${classes}'>
-        <div class='buv-c-modal__content  buv-o-overlay'>
+      <div class$='${classes}' onclick='${this.handleClick}'>
+        <div class='buv-c-modal__content  buv-o-overlay' onclick='${e => { e.stopPropagation(); }}'>
           ${CloseButton({
     className: 'buv-c-modal__close-button',
     onClick: this.handleClick

src/components/molecules/VerifyButton/_components.verify-button.scss

@@ -36,9 +36,5 @@ $secondaryColor: #fff;
 }
 
 .buv-c-verify-button.is-disabled {
-  cursor: default;
-
-  .buv-c-verify-button__label {
-    cursor: default;
-  }
+  pointer-events: none;
 }