fix: whiteLabeling should support component creation by passing React to defined fn (#1659)

platform/viewer/src/components/Header/Header.css

@@ -4,8 +4,16 @@
   height: var(--top-bar-height);
 }
 
-.dd-item {
-  width: 100%;
+.header-left-box {
+  display: inline-block;
+  position: relative;
+}
+
+.header-brand {
+  text-decoration: none;
+  height: 30px;
+  float: left;
+  clear: both;
 }
 
 /* Home Page */
@@ -17,35 +25,11 @@
   width: 100%;
 }
 
-.header-left-box {
-  display: inline-block;
-  position: relative;
-}
-
-.header-viewerLink {
-  float: left;
-}
-
-.header-brand {
-  height: 30px;
-  text-decoration: none;
-  float: left;
-  clear: both;
-}
-
 .entry-header.header-big .header-brand {
-  height: auto;
+  height: 50px;
   padding: 0;
 }
 
-.header-logo-image {
-  fill: transparent;
-  height: 100%;
-  margin: 0 8px 0 0;
-  width: 30px;
-  float: left;
-}
-
 .entry-header.header-big .header-logo-image {
   margin-right: 20px;
   width: 50px;
@@ -57,6 +41,24 @@
   height: auto;
 }
 
+/** OTHER STYLES **/
+
+.dd-item {
+  width: 100%;
+}
+
+.header-viewerLink {
+  float: left;
+}
+
+.header-logo-image {
+  fill: transparent;
+  height: 100%;
+  margin: 0 8px 0 0;
+  width: 30px;
+  float: left;
+}
+
 .header-btn {
   color: var(--text-secondary-color);
   cursor: pointer;
@@ -130,13 +132,6 @@
     width: 40%;
   }
 
-  /* Account for notification bar height */
-  .entry-header.header-big .header-brand {
-  }
-
-  .dd-menu {
-  }
-
   /* Toggle Notification Bar */
   .notification-bar {
     display: block;