Update logo

LICENSE

@@ -10,14 +10,14 @@ following conditions:
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
-The source code responsible for displaying the bpmn.io logo (two green cogwheels in
-a box) that links back to http://bpmn.io as part of rendered diagrams MUST NOT be
+The source code responsible for displaying the bpmn.io project watermark that
+links back to https://bpmn.io as part of rendered diagrams MUST NOT be
 removed or changed. When this software is being used in a website or application,
-the logo must stay fully visible and not visually overlapped by other elements.
+the watermark must stay fully visible and not visually overlapped by other elements.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
 INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
 PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
-OR OTHER DEALINGS IN THE SOFTWARE.
+OR OTHER DEALINGS IN THE SOFTWARE.

lib/BaseViewer.js

@@ -745,7 +745,8 @@ function findBPMNDiagram(definitions, diagramId) {
 
 import {
   open as openPoweredBy,
-  BPMNIO_IMG
+  BPMNIO_IMG,
+  LINK_STYLES as BPMNIO_LINK_STYLES
 } from './util/PoweredByUtil';
 
 import {
@@ -768,7 +769,7 @@ function addProjectLogo(container) {
        'target="_blank" ' +
        'class="bjs-powered-by" ' +
        'title="Powered by bpmn.io" ' +
-       'style="position: absolute; bottom: 15px; right: 15px; z-index: 100">' +
+       'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + BPMNIO_LINK_STYLES + '">' +
       img +
     '</a>';
 

lib/util/PoweredByUtil.js

@@ -11,16 +11,18 @@ import {
 
 
 // inlined ../../resources/logo.svg
-var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><path fill="#fff" d="M960 60v839c0 33-27 61-60 61H60c-33 0-60-27-60-60V60C0 27 27 0 60 0h839c34 0 61 27 61 60z"/><path fill="#52b415" d="M217 548a205 205 0 0 0-144 58 202 202 0 0 0-4 286 202 202 0 0 0 285 3 200 200 0 0 0 48-219 203 203 0 0 0-185-128zM752 6a206 206 0 0 0-192 285 206 206 0 0 0 269 111 207 207 0 0 0 111-260A204 204 0 0 0 752 6zM62 0A62 62 0 0 0 0 62v398l60 46a259 259 0 0 1 89-36c5-28 10-57 14-85l99 2 12 85a246 246 0 0 1 88 38l70-52 69 71-52 68c17 30 29 58 35 90l86 14-2 100-86 12a240 240 0 0 1-38 89l43 58h413c37 0 60-27 60-61V407a220 220 0 0 1-44 40l21 85-93 39-45-76a258 258 0 0 1-98 1l-45 76-94-39 22-85a298 298 0 0 1-70-69l-86 22-38-94 76-45a258 258 0 0 1-1-98l-76-45 40-94 85 22a271 271 0 0 1 41-47z"/></svg>';
+var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 21" width="53" height="21" style="vertical-align: middle"><path fill="currentColor" d="M49.3 0c-2.3 0-3.6 1.4-3.6 3.8v7.7c0 2.4 1.3 3.7 3.6 3.7s3.6-1.3 3.6-3.7V3.8c0-2.4-1.3-3.8-3.6-3.8zM0 0v15h3.7c2.4 0 3.6-1.2 3.6-3.5v-1.2c0-1.6-.5-2.8-1.7-3.3C6.6 6.5 7 5.5 7 4v-.6C7 1.2 6 0 3.6 0zm8.7 0v15h2.4V9.5h1.1c2.4 0 3.5-1.3 3.5-3.8v-2c0-2.3-1.1-3.6-3.4-3.6zM17 0v15H19V4.5L20.8 15H23l1.6-10.8V15H27V0h-3.3L22 10.6 20.2 0zm11.7 0v15h2.1V4.2l3 11H36V0H34V9l-2.5-9zm13.2 0v15h2.4V0zm7.5 2.1c.7 0 1.2.4 1.2 1.5v8c0 1-.5 1.5-1.2 1.5-.8 0-1.3-.4-1.3-1.5v-8c0-1 .5-1.5 1.3-1.5zm-47 0h1.2c.9 0 1.2.5 1.2 1.6v.8c0 1.2-.5 1.6-1.4 1.6h-1zm8.8 0h1.1c.8 0 1.2.4 1.2 1.5v2.2c0 1.1-.4 1.4-1.2 1.4h-1zM2.3 8.4h1.1c1 0 1.5.4 1.5 1.8v1.3c0 1.1-.4 1.5-1.2 1.5H2.3zm35.5 4.5V15H40v-2.3zM0 17V21h52.9v-4z"></path></svg>';
 
-var BPMNIO_LOGO_URL = 'data:image/svg+xml,' + encodeURIComponent(BPMNIO_LOGO_SVG);
-
-export var BPMNIO_IMG = '<img width="52" height="52" src="' + BPMNIO_LOGO_URL + '" />';
+export var BPMNIO_IMG = BPMNIO_LOGO_SVG;
 
 function css(attrs) {
   return attrs.join(';');
 }
 
+export var LINK_STYLES = css([
+  'color: #404040'
+]);
+
 var LIGHTBOX_STYLES = css([
   'z-index: 1001',
   'position: fixed',
@@ -33,33 +35,35 @@ var LIGHTBOX_STYLES = css([
 var BACKDROP_STYLES = css([
   'width: 100%',
   'height: 100%',
-  'background: rgba(0,0,0,0.2)'
+  'background: rgba(40,40,40,0.2)'
 ]);
 
 var NOTICE_STYLES = css([
   'position: absolute',
   'left: 50%',
   'top: 40%',
-  'margin: 0 -130px',
+  'transform: translate(-50%)',
   'width: 260px',
   'padding: 10px',
   'background: white',
-  'border: solid 1px #AAA',
-  'border-radius: 3px',
+  'box-shadow: 0 1px 4px rgba(0,0,0,0.3)',
   'font-family: Helvetica, Arial, sans-serif',
   'font-size: 14px',
-  'line-height: 1.2em'
+  'display: flex',
+  'line-height: 1.3'
 ]);
 
 var LIGHTBOX_MARKUP =
   '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
     '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
     '<div class="notice" style="' + NOTICE_STYLES + '">' +
-      '<a href="http://bpmn.io" target="_blank" style="float: left; margin-right: 10px">' +
+      '<a href="https://bpmn.io" target="_blank" rel="noopener" style="margin: 15px 20px 15px 10px; align-self: center;' + LINK_STYLES + '">' +
         BPMNIO_IMG +
       '</a>' +
-      'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
-      'powered by <a href="http://bpmn.io" target="_blank">bpmn.io</a>.' +
+      '<span>' +
+        'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
+        'powered by <a href="https://bpmn.io" target="_blank" rel="noopener">bpmn.io</a>.' +
+      '</span>' +
     '</div>' +
   '</div>';
 
@@ -77,4 +81,4 @@ export function open() {
   }
 
   document.body.appendChild(lightbox);
-}
+}