apply hortonworks branding

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/about-dialog.jsp

@@ -17,11 +17,13 @@
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
 <div id="nf-about">
     <div id="nf-about-pic-container">
+        <img id="nf-about-hdf-icon" src="images/hdf-icon.svg">
+        <p id="nf-about-hdf-version-number" title="Version 3.1.0">Version 3.1.0</p>
         <div id="nf-about-pic"></div>
     </div>
     <div class="dialog-content">
         <div id="nf-about-content">
-            <span id="nf-version"></span>
+            <p id="nf-version"></p>
             <div id="nf-version-detail">
                 <p id="nf-version-detail-timestamp">
                     <span id="nf-about-build-timestamp"></span>
@@ -33,12 +35,14 @@
                     From <span id="nf-about-build-revision"></span> on branch <span id="nf-about-build-branch"></span>
                 </p>
             </div>
-            <p>
+            <div id="nf-about-description-container">
+                <img id="nf-about-nifi-drop" src="images/nifi-drop.svg">
+                <p id="nf-about-description">
                 Apache NiFi is a framework to support highly scalable and flexible dataflows.
                 It can be run on laptops up through clusters of enterprise class servers.
                 Instead of dictating a particular dataflow or behavior it empowers you to design your own
-                optimal dataflow tailored to your specific environment.
-            </p>
+                optimal dataflow tailored to your specific environment.</p>
+            </div>
         </div>
     </div>
 </div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp

@@ -16,7 +16,7 @@
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
 <md-toolbar id="header" layout-align="space-between center" layout="row" class="md-small md-accent md-hue-1">
-    <img id="nifi-logo" src="images/nifi-logo.svg">
+    <img id="nifi-logo" src="images/hdf-header.svg">
     <div flex layout="row" layout-align="space-between center">
         <div id="component-container">
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.processor}}"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/about.css

@@ -17,13 +17,17 @@
 #nf-about {
     overflow: hidden;
     width: 500px;
-    height: 500px;
-    max-height: 450px;
+    height: 543px;
+    max-height: 543px;
+}
+
+#nf-about .dialog-header {
+    background-color: #3fae2a;
 }
 
 #nf-about-pic {
     height: 60%;
-    background: url(../images/nifi-logo-about.svg) #000000 no-repeat center center;
+    background: url(../images/hwx-logo.svg) #000000 no-repeat center center;
     top: 20%;
     position: relative;
 }
@@ -37,13 +41,17 @@
     font-weight:500;
     font-size: 13px;
     cursor: pointer;
+    padding: 0px;
 }
 
 #nf-about-content p {
-    padding-top: 9px;
+    padding-top: 15px;
     padding-bottom: 9px;
     font-size: 15px;
     line-height: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #nf-about-content span.link {
@@ -52,8 +60,44 @@
     font-weight:900;
 }
 
+#nf-about-description {
+    margin-left: 68px;
+    white-space: normal !important;
+}
+
+#nf-about-description-container {
+    position: relative;
+}
+
+#nf-about-nifi-drop {
+    position: absolute;
+    top: 15px;
+    left: 0px;
+    width: 48px;
+}
+
+#nf-about-hdf-icon {
+    position: absolute;
+    top: 65px;
+    left: 20px;
+    width: 48px;
+    z-index: 1;
+}
+
+#nf-about-hdf-version-number {
+    position: absolute;
+    top: 85px;
+    left: 77px;
+    z-index: 1;
+    color: #fff;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    right: 5px;
+}
+
 #nf-version-detail {
-    padding: 5px 0 0 5px;
     display: none;
 }
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css

@@ -63,8 +63,8 @@ md-toolbar.md-small .md-toolbar-tools {
 }
 
 #nifi-logo {
-    height: 37px;
-    margin:0 20px 3px 15px;
+    height: 100%;
+    margin: 0 39px 0px 0px;
 }
 
 #global-menu-button {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css

@@ -299,7 +299,7 @@ span.breadcrumb-version-control-gray {
     position: absolute;
     left: 5px;
     top: 8px;
-    right: 5px;
+    right: 138px;
     z-index: 4;
 }