@twreporter/universal-header - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3-beta-1

dist/components/channels.js

@@ -65,3 +65,3 @@ "use strict";
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n    padding: ", ";\n    margin: ", ";\n    a {\n      color: ", ";\n    }\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding: ", ";\n    margin: ", ";\n  "]);
 
@@ -197,5 +197,9 @@ _templateObject7 = function _templateObject7() {
   componentId: "nu2llv-3"
-})(["padding:", ";margin:", ";a{color:", ";&:hover{color:#7f7f7f !important;}}", " ", " position:relative;font-size:", ";font-weight:", ";letter-spacing:.5px;cursor:pointer;&::after{", "}"], (0, _styleUtils.arrayToCssShorthand)(styles.itemPadding.mobile), (0, _styleUtils.arrayToCssShorthand)(styles.itemMargin.mobile), _colors.default.gray15, _styleUtils.screen.tabletOnly(_templateObject6(), (0, _styleUtils.arrayToCssShorthand)(styles.itemPadding.tablet), (0, _styleUtils.arrayToCssShorthand)(styles.itemMargin.tablet)), _styleUtils.screen.desktopAbove(_templateObject7(), (0, _styleUtils.arrayToCssShorthand)(styles.itemPadding.desktop), (0, _styleUtils.arrayToCssShorthand)(styles.itemMargin.desktop), function (props) {
+})(["padding:", ";margin:", ";text-shadow:", ";a{color:", ";&:hover{color:", " !important;}}", " ", " position:relative;font-size:", ";font-weight:", ";letter-spacing:.5px;cursor:pointer;&::after{", "}"], (0, _styleUtils.arrayToCssShorthand)(styles.itemPadding.mobile), (0, _styleUtils.arrayToCssShorthand)(styles.itemMargin.mobile), function (props) {
+  return props.textShadow;
+}, function (props) {
   return props.fontColor;
-}), _fonts.default.size.medium, _fonts.default.weight.bold, function (props) {
+}, function (props) {
+  return props.hoverFontColor;
+}, _styleUtils.screen.tabletOnly(_templateObject6(), (0, _styleUtils.arrayToCssShorthand)(styles.itemPadding.tablet), (0, _styleUtils.arrayToCssShorthand)(styles.itemMargin.tablet)), _styleUtils.screen.desktopAbove(_templateObject7(), (0, _styleUtils.arrayToCssShorthand)(styles.itemPadding.desktop), (0, _styleUtils.arrayToCssShorthand)(styles.itemMargin.desktop)), _fonts.default.size.medium, _fonts.default.weight.bold, function (props) {
   return props.isActive ? _styleUtils.linkUnderline : '';
@@ -314,6 +318,12 @@ });
 
+          var hoverFontColor = _theme.default.selectHoverFontColor(theme);
+
+          var textShadow = _theme.default.selectChannelTextShadow(theme);
+
           return _react.default.createElement(ListItem, {
             isActive: isActive,
             onClick: _this2.handleClickChannel,
-            fontColor: fontColor
+            fontColor: fontColor,
+            textShadow: textShadow,
+            hoverFontColor: hoverFontColor
           }, _react.default.createElement(_customizedLink.default, _extends({
@@ -320,0 +330,0 @@ onClick: channelType === _channels.default.channelDropDownType ? function (e) {

dist/components/icons.js

@@ -26,2 +26,4 @@ "use strict";
 
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
 var _styleUtils = require("../utils/style-utils");
@@ -70,3 +72,3 @@
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    svg {\n      opacity: 1;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      position: absolute;\n      height: 100%;\n      top: 0;\n      left: 30%;\n      z-index: 1;\n    }\n    span {\n      display: inline;\n      white-space: nowrap;\n      overflow: hidden;\n      color: #e60013;\n      font-weight: ", ";\n      opacity: 0;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      transform: scale(.4, 1.2);\n      position: absolute;\n      height: 100%;\n      width: 2em;\n      line-height: ", ";\n      vertical-align: middle;\n      top: 0;\n      left: 17%;\n      z-index: 2;\n    }\n    &:hover {\n      svg {\n        transform: scale(1.7, .5);\n        opacity: 0;\n      }\n      span {\n        transform: scale(1, 1);\n        opacity: 1;\n      }\n    }\n  "]);
+  var data = _taggedTemplateLiteral(["\n    svg {\n      opacity: 1;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      position: absolute;\n      height: 100%;\n      top: 0;\n      left: 30%;\n      z-index: 1;\n    }\n    span {\n      display: inline;\n      white-space: nowrap;\n      overflow: hidden;\n      color: #808080;\n      font-weight: ", ";\n      opacity: 0;\n      transition: transform .3s ease-in-out, opacity .3s ease-in-out;\n      transform: scale(.4, 1.2);\n      position: absolute;\n      height: 100%;\n      width: 2em;\n      line-height: ", ";\n      vertical-align: middle;\n      top: 0;\n      left: 17%;\n      z-index: 2;\n    }\n    &:hover {\n      svg {\n        transform: scale(1.7, .5);\n        opacity: 0;\n      }\n      span {\n        transform: scale(1, 1);\n        opacity: 1;\n      }\n    }\n  "]);
 
@@ -92,110 +94,2 @@ _templateObject2 = function _templateObject2() {
 
-var BookmarkIcon = function BookmarkIcon(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "bookmark_red"), _react.default.createElement("g", {
-    id: "Header",
-    fill: "none",
-    fillRule: "evenodd"
-  }, _react.default.createElement("g", {
-    id: "bookmark",
-    transform: "translate(-1)"
-  }, _react.default.createElement("path", {
-    id: "Rectangle-2-Copy-3",
-    fill: "#E60013",
-    d: "M0 0h6.5v14.02L0 19.5z"
-  }), _react.default.createElement("path", {
-    id: "Rectangle-2-Copy-3",
-    fill: "#C7000A",
-    transform: "matrix(-1 0 0 1 18.5 0)",
-    d: "M6 0h6.5v14.02L6 19.5z"
-  }))));
-};
-
-BookmarkIcon.defaultProps = {
-  width: "13",
-  height: "20",
-  viewBox: "0 0 13 20",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-
-var LogInIcon = function LogInIcon(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "signin"), _react.default.createElement("g", {
-    id: "Header",
-    fill: "none",
-    fillRule: "evenodd"
-  }, _react.default.createElement("g", {
-    id: "signin",
-    transform: "translate(0 .272)"
-  }, _react.default.createElement("circle", {
-    id: "Oval-2-Copy",
-    fill: "#E60013",
-    cx: "9.287",
-    cy: "3.844",
-    r: "3.608"
-  }), _react.default.createElement("path", {
-    d: "M9.374 9.907H4.552L.9 19.957H17.847l-3.652-10.05H9.374z",
-    id: "Combined-Shape",
-    fill: "#C7000A"
-  }))));
-};
-
-LogInIcon.defaultProps = {
-  width: "18",
-  height: "21",
-  viewBox: "0 0 18 21",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-
-var LogOutIcon = function LogOutIcon(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "logout"), _react.default.createElement("g", {
-    id: "Mobile-Header-style-test",
-    fill: "none",
-    fillRule: "evenodd"
-  }, _react.default.createElement("g", {
-    id: "Page-1-Copy"
-  }, _react.default.createElement("path", {
-    d: "M10.125 18.271C4.542 18.271 0 13.73 0 8.146c0-2.21.701-4.313 2.027-6.077l3.197 2.404A6.07 6.07 0 0 0 4 8.146a6.132 6.132 0 0 0 6.125 6.125 6.132 6.132 0 0 0 6.125-6.125 6.07 6.07 0 0 0-1.227-3.678l3.196-2.405a10.04 10.04 0 0 1 2.031 6.083c0 5.583-4.542 10.125-10.125 10.125z",
-    id: "Fill-1",
-    fill: "#E60013"
-  }), _react.default.createElement("path", {
-    id: "Fill-3",
-    fill: "#C7000A",
-    d: "M8.125 8.255h4V-.002h-4z"
-  }))));
-};
-
-LogOutIcon.defaultProps = {
-  width: "21",
-  height: "19",
-  viewBox: "0 0 21 19",
-  xmlns: "http://www.w3.org/2000/svg"
-};
-
-var SearchIcon = function SearchIcon(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "Search"), _react.default.createElement("g", {
-    id: "Header_phase1_Search",
-    fill: "none",
-    fillRule: "evenodd"
-  }, _react.default.createElement("g", {
-    id: "Icon-Export",
-    transform: "translate(-65 -76)"
-  }, _react.default.createElement("g", {
-    id: "Search",
-    transform: "translate(65 76)"
-  }, _react.default.createElement("path", {
-    d: "M12.919 2.216a7.568 7.568 0 0 0-10.702 0l2.66 2.66a3.806 3.806 0 0 1 5.382 5.382l1.01 1.01 1.65 1.65 5.857 5.857 1.237-1.237-6.007-6.007c1.799-2.916 1.44-6.786-1.087-9.315",
-    id: "Fill-1",
-    fill: "#C7000A"
-  }), _react.default.createElement("path", {
-    d: "M4.876 4.877l-2.66-2.66a7.568 7.568 0 0 0 0 10.702c2.53 2.528 6.4 2.886 9.315 1.087l6.007 6.006 1.237-1.237-5.857-5.856-1.65-1.65-1.01-1.01a3.805 3.805 0 0 1-5.382-5.382",
-    id: "Fill-4",
-    fill: "#E60013"
-  })))));
-};
-
-SearchIcon.defaultProps = {
-  width: "20",
-  height: "20",
-  viewBox: "0 0 20 20",
-  xmlns: "http://www.w3.org/2000/svg"
-};
 var styles = {
@@ -287,3 +181,9 @@ iconContainerSize: 3 // em
         var isAuthed = _ref.isAuthed,
-            branch = _ref.branch;
+            branch = _ref.branch,
+            theme = _ref.theme;
+
+        var LogInIcon = _theme.default.selectServiceIcons(theme).member;
+
+        var LogOutIcon = _theme.default.selectServiceIcons(theme).logout;
+
         return _react.default.createElement("a", {
@@ -299,9 +199,18 @@ onClick: function onClick(e) {
         isSearchOpened: isSearchOpened
-      }, _react.default.createElement(SearchIcon, null), _react.default.createElement("span", null, _services.default.serviceLabels.search)), _react.default.createElement(_searchBox.default, {
+      }, _react.default.createElement(_headerContext.default.Consumer, null, function (_ref2) {
+        var theme = _ref2.theme;
+
+        var SearchIcon = _theme.default.selectServiceIcons(theme).search;
+
+        return _react.default.createElement(SearchIcon, null);
+      }), _react.default.createElement("span", null, _services.default.serviceLabels.search)), _react.default.createElement(_searchBox.default, {
         isSearchOpened: isSearchOpened,
         closeSearchBox: this._closeSearchBox
-      }), _react.default.createElement(HideOnDesktop, null, _react.default.createElement(_headerContext.default.Consumer, null, function (_ref2) {
-        var branch = _ref2.branch,
-            isLinkExternal = _ref2.isLinkExternal;
+      }), _react.default.createElement(HideOnDesktop, null, _react.default.createElement(_headerContext.default.Consumer, null, function (_ref3) {
+        var branch = _ref3.branch,
+            isLinkExternal = _ref3.isLinkExternal,
+            theme = _ref3.theme;
 
+        var SearchIcon = _theme.default.selectServiceIcons(theme).search;
+
         var link = _links.default.getSearchLink(isLinkExternal, branch);
@@ -312,6 +221,9 @@
         isSearchOpened: isSearchOpened
-      }, _react.default.createElement(_headerContext.default.Consumer, null, function (_ref3) {
-        var branch = _ref3.branch,
-            isLinkExternal = _ref3.isLinkExternal;
+      }, _react.default.createElement(_headerContext.default.Consumer, null, function (_ref4) {
+        var branch = _ref4.branch,
+            isLinkExternal = _ref4.isLinkExternal,
+            theme = _ref4.theme;
 
+        var BookmarkIcon = _theme.default.selectServiceIcons(theme).bookmark;
+
         var link = _links.default.getBookmarksLink(isLinkExternal, branch);
@@ -318,0 +230,0 @@

dist/components/mobile-header.js

@@ -49,3 +49,3 @@ "use strict";
   componentId: "sc-1vxvz2u-0"
-})(["background-color:", ";display:flex;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:34px 10px 35px 24px;"], function (props) {
+})(["background-color:", ";display:flex;box-sizing:border-box;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding:30px 10px 35px 24px;"], function (props) {
   return props.bgColor;
@@ -52,0 +52,0 @@ });

dist/constants/colors.js

@@ -8,3 +8,2 @@ "use strict";
 var _default = {
-  transparent: 'transparent',
   black: '#000000',
@@ -11,0 +10,0 @@ gray15: '#262626',

dist/utils/theme.js

@@ -16,13 +16,47 @@ "use strict";
 
-var LogoForDarkBg = function LogoForDarkBg(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "Logo_white"), _react.default.createElement("g", {
-    id: "Listing-Final",
+var LogoLightGray = function LogoLightGray(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("defs", null, _react.default.createElement("style", null, ".cls-1,.cls-2", "{", "fill:#fff", "}", ".cls-2", "{", "opacity:.8", "}")), _react.default.createElement("title", null, "logo-horizontal01-white"), _react.default.createElement("g", {
+    id: "Layer_2",
+    "'data-name'": "Layer 2"
+  }, _react.default.createElement("g", {
+    id: "logo"
+  }, _react.default.createElement("path", {
+    className: "cls-1",
+    d: "M29.85 25.61L18.2 22.88V8.32L29.85 5.1v20.51z"
+  }), _react.default.createElement("path", {
+    className: "cls-2",
+    d: "M0 31.2l18.2-8.32V8.32L0 0v31.2z"
+  }), _react.default.createElement("path", {
+    className: "cls-1",
+    d: "M140.73 11.42h1.08V4.86h-2v1.32h-1.05V3.87h7.29v2.31H145V4.86h-2v6.56h1.07v.94h-3.35zM149.44 11.42h1.06V4.8h-1.06v-.93h3.33v.93h-1.07v2.82h4.4V4.8H155v-.93h3.33v.93h-1.05v6.62h1.05v.94H155v-.94h1.07V8.61h-4.4v2.81h1.07v.94h-3.33zM162 11.42h1.06V4.8H162v-.93h6.15v2h-1.05v-1h-2.8v2.72h3v1h-3v2.81h3v-1h1v2H162zM138.71 27.43h1.06v-6.62h-1.06v-.93h3.68a4.75 4.75 0 0 1 1.56.18 2.15 2.15 0 0 1 1.48 2.2 2.3 2.3 0 0 1-1.75 2.38 1.08 1.08 0 0 1 .36.39l1.2 2.1c.13.23.29.27.59.27h.25v.94h-.72c-.72 0-.89-.13-1.18-.64l-1.31-2.32c-.21-.36-.37-.47-.89-.47h-1v2.49H142v.94h-3.31zm4-3.47a1.46 1.46 0 0 0 1.54-1.6 1.32 1.32 0 0 0-.8-1.34 2.86 2.86 0 0 0-1-.15H141V24zM149.45 27.43h1.06v-6.62h-1.06v-.93h6.15v2h-1v-1h-2.84v2.72h3v1h-3v2.81h3v-1h1v2h-6.35zM159.18 27.43h1v-6.62h-1v-.93h3.95a3.62 3.62 0 0 1 1.46.23 2.49 2.49 0 0 1 1.44 2.4 2.52 2.52 0 0 1-1.6 2.49 3.49 3.49 0 0 1-1.27.18h-1.72v2.25h1.07v.94h-3.33zM163 24.2a2.37 2.37 0 0 0 1-.17 1.55 1.55 0 0 0 .86-1.52 1.52 1.52 0 0 0-.76-1.44 2.3 2.3 0 0 0-1-.2h-1.58v3.33zM173.77 19.74a4.28 4.28 0 0 1 4.36 4.32 4.37 4.37 0 1 1-8.73 0 4.28 4.28 0 0 1 4.37-4.32zm0 7.7a3.22 3.22 0 0 0 3.11-3.38 3.12 3.12 0 1 0-6.24 0 3.23 3.23 0 0 0 3.13 3.38zM181.5 27.43h1.06v-6.62h-1.06v-.93h3.68a4.78 4.78 0 0 1 1.57.18 2.15 2.15 0 0 1 1.48 2.2 2.31 2.31 0 0 1-1.76 2.38 1 1 0 0 1 .36.39l1.2 2.1c.14.23.29.27.59.27h.26v.94h-.72c-.73 0-.9-.13-1.18-.64l-1.31-2.32a.83.83 0 0 0-.89-.47h-1v2.49h1v.94h-3.28zm4-3.47a1.46 1.46 0 0 0 1.54-1.6 1.31 1.31 0 0 0-.79-1.34 3 3 0 0 0-1.05-.15h-1.4V24zM194.22 27.43h1.07v-6.56h-2v1.32h-1v-2.31h7.29v2.31h-1v-1.32h-2v6.56h1.07v.94h-3.34zM202.91 27.43H204v-6.62h-1.05v-.93h6.14v2h-1v-1h-2.84v2.72h3v1h-3v2.81h3v-1h1v2h-6.35zM212.63 27.43h1.06v-6.62h-1.06v-.93h3.68a4.75 4.75 0 0 1 1.56.18 2.15 2.15 0 0 1 1.48 2.2 2.3 2.3 0 0 1-1.76 2.38 1.05 1.05 0 0 1 .37.39l1.2 2.1c.13.23.29.27.59.27h.25v.94h-.72c-.72 0-.89-.13-1.18-.64l-1.31-2.32a.82.82 0 0 0-.89-.47h-1v2.49h1.05v.94h-3.31zm4-3.47a1.47 1.47 0 0 0 1.54-1.6 1.32 1.32 0 0 0-.8-1.34 2.89 2.89 0 0 0-1-.15h-1.41V24zM54.81 9.55h-2.13a2.3 2.3 0 0 1-1.2 1.45h-3V6.7h5.12V4.56h-2.09A2.3 2.3 0 0 1 50.31 6h-1.8V1.53h-2.18V6h-4.56v.7h4.56V11h-5.42v.66H54.8zM51.57 16.17H48.9c.86-.7 3.16-3.16 3.16-3.16l-2.59-1a29.76 29.76 0 0 1-1 4.05l.25.15h-3.81l1.74-.73a7.63 7.63 0 0 0-2.84-3.26l-.46.28a16.45 16.45 0 0 1 1.25 3.71H41v.66h5.33v4.41h-4.78v.67h4.78v7.76h2.18v-7.8h5.79v-2h-2.14a2.16 2.16 0 0 1-1 1.34h-2.65v-4.42h6.33v-2.11h-2.12a2.28 2.28 0 0 1-1.15 1.45zM63.65 23.78l-.2-.23c.08-.11.15-.22.2-.3A26.13 26.13 0 0 0 67 14.08v-.62h-8.86V4.05h6.11v4.78s.11 1-.72 1l-1.93-.2v.49s1.94.05 2 .76c.15.9 2.72 1.47 2.72-2.05V2h-2.08a2.3 2.3 0 0 1-1.07 1.4h-5V1.84H56v27.83h2.17V14.08h6.61c-.09.47-.49 2.82-.69 3.65s-.41 1.36-.67 2.1-.63 1.64-1 2.44a17.78 17.78 0 0 1-3-6.49l-.47.09A21.76 21.76 0 0 0 61.56 24a24.53 24.53 0 0 1-3.3 4.86l.2.39a29.07 29.07 0 0 0 3.86-4.07l.21.32a12.92 12.92 0 0 0 4.14 3.87l1.71-2.18a14.84 14.84 0 0 1-4.73-3.41zM81 23.31l-.41.49c1.27.67 3.46 4.32 3.46 4.32L86 26.57a10.69 10.69 0 0 0-5-3.26z"
+  }), _react.default.createElement("path", {
+    className: "cls-1",
+    d: "M97.94 20.45a2.23 2.23 0 0 1-1 1.35h-2.63v-1.65h-2.16v1.65H73.5v.84h18.66v4.15c0 .91-1.57.72-1.57.72H88.4v.46c.46 0 2.65.27 3 .66s.26.95.81 1.11a2 2 0 0 0 1.4-.44 2.15 2.15 0 0 0 .75-1.83v-4.83h5.78v-2.19zM78.91 7.05l1.56-1.31A6.13 6.13 0 0 0 75.6 3.1l-.26.48c1.56.61 3.57 3.47 3.57 3.47zM99.46 4.1h-2.15a2.3 2.3 0 0 1-1.21 1.48h-3.52C93.15 5 94.64 3 95.72 1.52L93 1.45s-.83 3.16-1.27 4.14h-3.96l1.78-1.09a9.28 9.28 0 0 0-4.42-3l-.38.46a11.17 11.17 0 0 1 2.78 3.68h-5.68v.67h17.6zM97.92 16.65v-10h-2.41a4.19 4.19 0 0 1-.19.46 1.87 1.87 0 0 1-.32.42 2.05 2.05 0 0 1-.41.3h-8.54V6.68h-2.14v9.94h2.14v-1.21h9.48v1.24zM86.05 8.59h9.48v1.77h-9.48zm0 2.33h9.48v1.67h-9.48zm0 3.82v-1.59h9.48v1.59z"
+  }), _react.default.createElement("path", {
+    className: "cls-1",
+    d: "M77.87 10.58h.51v4.93l-4.7 1.86L75 19.55l3.91-3.29h1.83c3.53 4.62 19.16 3.08 19.16 3.08v-2c-4.1.73-12.41.31-12.41.31-5.14-.12-6.36-1.82-6.75-2.41V8.71h-2.37a1.86 1.86 0 0 1-1 1.19H73.5v.68h4.37zM114.16 22.12h10.53v.01h-10.53z"
+  }), _react.default.createElement("path", {
+    className: "cls-1",
+    d: "M127.08 27.42V14.75h-2.15a2.27 2.27 0 0 1-1.09 1.42h-7.49a44.29 44.29 0 0 0 6-4.41h9.08V9.64h-2.16a2.28 2.28 0 0 1-1.14 1.45h-5a44.44 44.44 0 0 0 6.51-8l-2-1.23a40.79 40.79 0 0 1-7.33 9.27h-1.91V6h6V3.87h-2.15a2.26 2.26 0 0 1-1.17 1.46h-2.68v-3.8h-2.2v3.8h-8.27V6h8.27v5.09L105.28 11v.68l14.26.1a46 46 0 0 1-14.38 9.14l.21.59a61.85 61.85 0 0 0 6.68-2.94v11.05h2.11v-2.1h10.53v2.15h2.39v-2.25zm-2.39-5.3v4.72h-10.53v-4.72h10.53zm0-.68h-10.53v-4c.32-.17.64-.36 1-.55h9.56z"
+  }))));
+};
+
+LogoLightGray.defaultProps = {
+  width: "219",
+  height: "32",
+  viewBox: "0 0 219 32",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var Logo = function Logo(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "Logo"), _react.default.createElement("g", {
+    id: "Header",
     fill: "none",
     fillRule: "evenodd"
   }, _react.default.createElement("g", {
-    id: "Logo_white"
+    id: "Logo"
   }, _react.default.createElement("g", {
     id: "Typography",
     transform: "translate(44.992 6.153)",
-    fill: "#FFF"
+    fill: "#231916"
   }, _react.default.createElement("g", {
@@ -247,3 +281,3 @@ id: "Group"
 
-LogoForDarkBg.defaultProps = {
+Logo.defaultProps = {
   width: "219",
@@ -255,4 +289,4 @@ height: "40",
 
-var Logo = function Logo(props) {
-  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "Logo"), _react.default.createElement("g", {
+var BookmarkIcon = function BookmarkIcon(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "bookmark_red"), _react.default.createElement("g", {
     id: "Header",
@@ -262,232 +296,204 @@ fill: "none",
   }, _react.default.createElement("g", {
-    id: "Logo"
+    id: "bookmark",
+    transform: "translate(-1)"
+  }, _react.default.createElement("path", {
+    id: "Rectangle-2-Copy-3",
+    fill: "#E60013",
+    d: "M0 0h6.5v14.02L0 19.5z"
+  }), _react.default.createElement("path", {
+    id: "Rectangle-2-Copy-3",
+    fill: "#C7000A",
+    transform: "matrix(-1 0 0 1 18.5 0)",
+    d: "M6 0h6.5v14.02L6 19.5z"
+  }))));
+};
+
+BookmarkIcon.defaultProps = {
+  width: "13",
+  height: "20",
+  viewBox: "0 0 13 20",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var BookmarkIconLightGray = function BookmarkIconLightGray(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "icon-bookmark1.0-default"), _react.default.createElement("g", {
+    id: "Header-2.0",
+    fill: "none",
+    fillRule: "evenodd"
   }, _react.default.createElement("g", {
-    id: "Typography",
-    transform: "translate(44.992 6.153)",
-    fill: "#231916"
-  }, _react.default.createElement("g", {
-    id: "Group"
+    id: "icon-bookmark1.0-default"
   }, _react.default.createElement("path", {
-    d: "M78.87 4.133s.896-.398 1.12-1.366h1.986V4.43h-3.205l.1-.298z",
-    id: "Fill-8"
+    id: "Fill-1",
+    fill: "#FFF",
+    d: "M.563.11h6.5v14.02l-6.5 5.48z"
   }), _react.default.createElement("path", {
-    d: "M85.111 9.461s.894-.398 1.118-1.367h1.988v1.665h-3.205l.099-.298z",
-    id: "Fill-10"
+    id: "Fill-3",
+    fill: "#EAEAEA",
+    d: "M13.5 0H7v14.02l6.5 5.48z"
+  }))));
+};
+
+BookmarkIconLightGray.defaultProps = {
+  width: "14",
+  height: "20",
+  viewBox: "0 0 14 20",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var MemberIcon = function MemberIcon(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "signin"), _react.default.createElement("g", {
+    id: "Header",
+    fill: "none",
+    fillRule: "evenodd"
+  }, _react.default.createElement("g", {
+    id: "signin",
+    transform: "translate(0 .272)"
+  }, _react.default.createElement("circle", {
+    id: "Oval-2-Copy",
+    fill: "#E60013",
+    cx: "9.287",
+    cy: "3.844",
+    r: "3.608"
   }), _react.default.createElement("path", {
-    d: "M81.356 14.175s.894-.399 1.118-1.367h1.988v1.665h-3.206l.1-.298z",
-    id: "Fill-12"
+    d: "M9.374 9.907H4.552L.9 19.957H17.847l-3.652-10.05H9.374z",
+    id: "Combined-Shape",
+    fill: "#C7000A"
+  }))));
+};
+
+MemberIcon.defaultProps = {
+  width: "18",
+  height: "21",
+  viewBox: "0 0 18 21",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var MemberIconLightGray = function MemberIconLightGray(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "icon-profile1.0-default"), _react.default.createElement("g", {
+    id: "Header-2.0",
+    fill: "none",
+    fillRule: "evenodd"
+  }, _react.default.createElement("g", {
+    id: "icon-profile1.0-default"
+  }, _react.default.createElement("path", {
+    d: "M8.608 7.216a3.608 3.608 0 1 0 0-7.215 3.608 3.608 0 0 0 0 7.215",
+    id: "Fill-5",
+    fill: "#FFF"
   }), _react.default.createElement("path", {
-    id: "Fill-14",
-    d: "M68.11 4.737h13.86v-.622H68.11z"
+    id: "Fill-10",
+    fill: "#EAEAEA",
+    d: "M8.474 9H3.653L0 19.049h16.948L13.295 9z"
+  }))));
+};
+
+MemberIconLightGray.defaultProps = {
+  width: "17",
+  height: "20",
+  viewBox: "0 0 17 20",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var LogoutIcon = function LogoutIcon(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "logout"), _react.default.createElement("g", {
+    id: "Mobile-Header-style-test",
+    fill: "none",
+    fillRule: "evenodd"
+  }, _react.default.createElement("g", {
+    id: "Page-1-Copy"
+  }, _react.default.createElement("path", {
+    d: "M10.125 18.271C4.542 18.271 0 13.73 0 8.146c0-2.21.701-4.313 2.027-6.077l3.197 2.404A6.07 6.07 0 0 0 4 8.146a6.132 6.132 0 0 0 6.125 6.125 6.132 6.132 0 0 0 6.125-6.125 6.07 6.07 0 0 0-1.227-3.678l3.196-2.405a10.04 10.04 0 0 1 2.031 6.083c0 5.583-4.542 10.125-10.125 10.125z",
+    id: "Fill-1",
+    fill: "#E60013"
   }), _react.default.createElement("path", {
-    id: "Fill-16",
-    d: "M65.343 10.049h22.882v-.622H65.343z"
-  }), _react.default.createElement("path", {
-    id: "Fill-17",
-    d: "M72.756 14.786h10.788v-.67H72.756z"
-  }), _react.default.createElement("path", {
-    id: "Fill-18",
-    d: "M71.573 19.474h12.059v-.622H71.573z"
-  }), _react.default.createElement("path", {
-    id: "Fill-19",
-    d: "M71.573 23.742h12.059v-.623H71.573z"
-  }), _react.default.createElement("path", {
-    id: "Fill-20",
-    d: "M70.596 26.31h1.944V15.205h-1.944z"
-  }), _react.default.createElement("path", {
-    id: "Fill-21",
-    d: "M82.47 26.354h2.001v-12.1H82.47z"
-  }), _react.default.createElement("path", {
-    id: "Fill-22",
-    d: "M74.429 10.026h2.03V.462h-2.03z"
-  }), _react.default.createElement("path", {
-    d: "M84.218 2.013s-5.225 10.372-20.704 16.54l.198.55s15.083-4.282 22.352-15.95l-1.846-1.14z",
-    id: "Fill-23"
-  }), _react.default.createElement("path", {
-    d: "M54.651 4.254s.894-.397 1.118-1.366h1.988v1.665H54.55l.1-.299z",
-    id: "Fill-36"
-  }), _react.default.createElement("path", {
-    d: "M53.956 19.659s.894-.399 1.119-1.367h1.987v1.664h-3.206l.1-.297z",
-    id: "Fill-37"
-  }), _react.default.createElement("path", {
-    id: "Fill-38",
-    d: "M41.501 4.885h16.245v-.621H41.5z"
-  }), _react.default.createElement("path", {
-    id: "Fill-39",
-    d: "M43.26 7.14h12.142v-.67H43.261z"
-  }), _react.default.createElement("path", {
-    id: "Fill-40",
-    d: "M43.29 9.48h12.142v-.623H43.29z"
-  }), _react.default.createElement("path", {
-    id: "Fill-41",
-    d: "M43.26 11.688h12.142v-.623H43.261z"
-  }), _react.default.createElement("path", {
-    id: "Fill-42",
-    d: "M43.26 13.955h12.142v-.622H43.261z"
-  }), _react.default.createElement("path", {
-    id: "Fill-43",
-    d: "M32.514 9.76h6.204v-.623h-6.204z"
-  }), _react.default.createElement("path", {
-    id: "Fill-44",
-    d: "M37.02 14.497h2.032v-5.4h-2.033z"
-  }), _react.default.createElement("path", {
-    d: "M55.291 4.26s.707-.314.884-1.08h1.57v1.316h-2.533l.08-.236z",
-    id: "Fill-45"
-  }), _react.default.createElement("path", {
-    d: "M36.596 9.114s.707-.315.884-1.08h1.57v1.315h-2.533l.08-.235z",
-    id: "Fill-46"
-  }), _react.default.createElement("path", {
-    id: "Fill-47",
-    d: "M34.056 20.166h23.006v-.623H34.056z"
-  }), _react.default.createElement("path", {
-    d: "M54.586 19.54s.707-.313.884-1.08h1.571v1.317h-2.534l.079-.237z",
-    id: "Fill-48"
-  }), _react.default.createElement("path", {
-    d: "M53.419 6.509s.74-.33.926-1.131h1.645v1.378h-2.654l.083-.247z",
-    id: "Fill-49"
-  }), _react.default.createElement("path", {
-    d: "M36.993 9.132s.592-.264.741-.907h1.318V9.33h-2.126l.067-.198z",
-    id: "Fill-50"
-  }), _react.default.createElement("path", {
-    d: "M34.468 2.292l.324-.5s2.946.707 4.272 3.27l-1.532 1.09s-1.68-3.182-3.064-3.86",
-    id: "Fill-51"
-  }), _react.default.createElement("path", {
-    d: "M43.748.566l.283-.345s1.944.22 3.324 2.29l-1.693.909s-.627-1.881-1.914-2.854",
-    id: "Fill-52"
-  }), _react.default.createElement("path", {
-    d: "M51.118.827s-.933 3.087-1.287 3.665h.546s1.866-1.929 3.12-3.601l-2.38-.064z",
-    id: "Fill-53"
-  }), _react.default.createElement("path", {
-    id: "Fill-54",
-    d: "M33.172 15.703l4.006-1.827.295.502-3.005 3.535z"
-  }), _react.default.createElement("path", {
-    d: "M38.946 13.35s.933 2.288 6.668 2.426c0 0 7.494.393 11.275-.276v1.62s-15.91 1.768-18.208-3.24l.265-.53z",
-    id: "Fill-55"
-  }), _react.default.createElement("path", {
-    id: "Fill-56",
-    d: "M42.381 14.744h1.974V5.601H42.38z"
-  }), _react.default.createElement("path", {
-    id: "Fill-57",
-    d: "M53.983 14.777h2.002V6.502h-2.002z"
-  }), _react.default.createElement("path", {
-    d: "M40.85 21.842l.324-.324s2.299.53 3.653 2.534l-1.53 1.325s-1.829-3.33-2.447-3.535",
-    id: "Fill-58"
-  }), _react.default.createElement("path", {
-    d: "M49.724 18.02h2v6.634c0 .656-.158 1.291-.694 1.684-.301.222-.905.523-1.293.41-.509-.147-.414-.796-.687-1.135-.288-.357-.976-.444-1.405-.444l.016-.418h1.226s.861.129.861-.71c0-.837-.024-6.02-.024-6.02",
-    id: "Fill-59"
-  }), _react.default.createElement("path", {
-    id: "Fill-84",
-    d: "M1.036 5.7H13.57v-.616H1.036z"
-  }), _react.default.createElement("path", {
-    id: "Fill-85",
-    d: "M15.584 3.257h7.643V2.64h-7.643z"
-  }), _react.default.createElement("path", {
-    id: "Fill-86",
-    d: "M16.051 13.484h8.85v-.569h-8.85z"
-  }), _react.default.createElement("path", {
-    id: "Fill-87",
-    d: "M5.8 10.057h2.014V.93H5.8z"
-  }), _react.default.createElement("path", {
-    id: "Fill-88",
-    d: "M14.834 26.396h1.87V1.209h-1.87z"
-  }), _react.default.createElement("path", {
-    id: "Fill-89",
-    d: "M5.8 26.545h2.014V14.78H5.8z"
-  }), _react.default.createElement("path", {
-    d: "M10.5 5.078s.885-.394 1.106-1.353h1.968v1.648h-3.173l.098-.295z",
-    id: "Fill-90"
-  }), _react.default.createElement("path", {
-    d: "M10.5 19.223s.885-.394 1.106-1.354h1.968v1.65h-3.173l.098-.296z",
-    id: "Fill-91"
-  }), _react.default.createElement("path", {
-    d: "M21.222 2.705s.886-.394 1.108-1.353h1.968V3h-3.175l.1-.295z",
-    id: "Fill-92"
-  }), _react.default.createElement("path", {
-    d: "M10.594 14.445s.886-.394 1.107-1.354h1.968v1.65h-3.173l.098-.296z",
-    id: "Fill-93"
-  }), _react.default.createElement("path", {
-    d: "M10.554 9.683s.885-.394 1.107-1.353h1.967v1.647h-3.173l.099-.294z",
-    id: "Fill-94"
-  }), _react.default.createElement("path", {
-    id: "Fill-95",
-    d: "M.04 10.308h13.586V9.69H.039z"
-  }), _react.default.createElement("path", {
-    id: "Fill-96",
-    d: "M.116 15.04h13.542v-.616H.116z"
-  }), _react.default.createElement("path", {
-    d: "M11.224 14.394s.7-.313.874-1.07h1.556v1.302h-2.509l.079-.232z",
-    id: "Fill-97"
-  }), _react.default.createElement("path", {
-    id: "Fill-98",
-    d: "M1.044 19.724h12.533v-.617H1.044z"
-  }), _react.default.createElement("path", {
-    d: "M2.913 10.994l.428-.252s1.614 1.633 2.333 3.111l-1.575.681s-.796-3.13-1.186-3.54",
-    id: "Fill-99"
-  }), _react.default.createElement("path", {
-    d: "M8.904 10.546l2.392.955S9.06 13.893 8.32 14.475l-.311-.194s.622-1.907.895-3.735",
-    id: "Fill-100"
-  }), _react.default.createElement("path", {
-    d: "M22.344 2.637V9.458s.105.908-.663.908h-.802v.452s1.15.071 1.15.734c0 .662 2.269 1.15 2.269-2.094v-6.89l-1.954.07z",
-    id: "Fill-101"
-  }), _react.default.createElement("path", {
-    d: "M22.887 12.893s-.682 8.08-5.643 13.7l.208.341s6.451-5.566 7.497-13.865l-2.062-.176z",
-    id: "Fill-102"
-  }), _react.default.createElement("path", {
-    d: "M17.868 14.242s1.4 7.43 8.285 10.493l-1.575 2.013s-5.864-2.88-7.148-12.42l.438-.086z",
-    id: "Fill-103"
-  })), _react.default.createElement("g", {
-    id: "Group",
-    transform: "translate(96.137 3.076)"
+    id: "Fill-3",
+    fill: "#C7000A",
+    d: "M8.125 8.255h4V-.002h-4z"
+  }))));
+};
+
+LogoutIcon.defaultProps = {
+  width: "21",
+  height: "19",
+  viewBox: "0 0 21 19",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var LogoutIconLightGray = function LogoutIconLightGray(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "icon-logout1.0-default"), _react.default.createElement("g", {
+    id: "Header-2.0",
+    fill: "none",
+    fillRule: "evenodd"
+  }, _react.default.createElement("g", {
+    id: "icon-logout1.0-default"
   }, _react.default.createElement("path", {
-    id: "Fill-305",
-    d: "M2.185 7.168h1.01V.969H1.31v1.249H.323V.038h6.88v2.18h-.988V.969H4.33v6.199h1.01v.885H2.185z"
+    d: "M10.125 18.271C4.542 18.271 0 13.73 0 8.146c0-2.21.701-4.313 2.027-6.077l3.197 2.404A6.07 6.07 0 0 0 4 8.146a6.132 6.132 0 0 0 6.125 6.125 6.132 6.132 0 0 0 6.125-6.125 6.07 6.07 0 0 0-1.227-3.678l3.196-2.405a10.04 10.04 0 0 1 2.031 6.083c0 5.583-4.542 10.125-10.125 10.125",
+    id: "Fill-1",
+    fill: "#EAEAEA"
   }), _react.default.createElement("path", {
-    id: "Fill-306",
-    d: "M10.402 7.168h.999V.913h-1V.038h3.145v.875h-1.01V3.58h4.155V.913h-1.01V.038h3.144v.875h-1v6.255h1v.885H15.68v-.885h1.01V4.51h-4.156v2.657h1.011v.885h-3.144z"
-  }), _react.default.createElement("path", {
-    id: "Fill-307",
-    d: "M22.296 7.168h1V.913h-1V.038h5.8V1.9h-.986V.97h-2.68v2.576h2.838v.93H24.43v2.647h2.872v-.966h.988v1.896h-5.994z"
-  }), _react.default.createElement("path", {
-    d: "M4.02 17.73c.874 0 1.453-.567 1.453-1.51 0-.623-.25-1.055-.749-1.259-.261-.102-.602-.148-.988-.148H2.408v2.917H4.02zM.274 21.012h1v-6.256h-1v-.874h3.474c.567 0 1.033.023 1.475.17.84.285 1.396.989 1.396 2.078 0 1.158-.635 1.986-1.657 2.248v.022s.204.114.34.375l1.136 1.975c.125.217.273.262.556.262h.239v.885h-.681c-.681 0-.84-.124-1.113-.602l-1.237-2.19c-.205-.341-.352-.443-.84-.443h-.954v2.35h.988v.885H.274v-.885z",
-    id: "Fill-308"
-  }), _react.default.createElement("path", {
-    id: "Fill-309",
-    d: "M10.455 21.012h.999v-6.255h-1v-.875h5.801v1.862h-.987v-.93h-2.68v2.576h2.839v.93h-2.838v2.647h2.872V20h.988v1.896h-5.994z"
-  }), _react.default.createElement("path", {
-    d: "M23.519 17.958c.363 0 .647-.058.897-.159.51-.227.806-.738.806-1.43 0-.648-.262-1.124-.716-1.362-.249-.137-.59-.194-.975-.194h-1.5v3.145h1.488zm-3.622 3.053h1v-6.254h-1v-.875h3.736c.488 0 .976.035 1.373.216.829.352 1.362 1.204 1.362 2.27 0 1.124-.59 2.032-1.51 2.35-.374.137-.76.17-1.203.17h-1.623v2.123h1.01v.886h-3.145v-.886z",
-    id: "Fill-310"
-  }), _react.default.createElement("path", {
-    d: "M33.643 21.022c1.623 0 2.94-1.384 2.94-3.19 0-1.748-1.317-3.087-2.94-3.087-1.635 0-2.952 1.34-2.952 3.088 0 1.805 1.317 3.19 2.952 3.19m0-7.277c2.316 0 4.12 1.782 4.12 4.087 0 2.361-1.804 4.2-4.12 4.2-2.327 0-4.121-1.839-4.121-4.2 0-2.305 1.794-4.087 4.12-4.087",
-    id: "Fill-311"
-  }), _react.default.createElement("path", {
-    d: "M44.845 17.73c.874 0 1.453-.567 1.453-1.51 0-.623-.25-1.055-.749-1.259-.261-.102-.602-.148-.988-.148h-1.328v2.917h1.612zm-3.746 3.282h.999v-6.256h-.999v-.874h3.474c.567 0 1.032.023 1.475.17.84.285 1.397.989 1.397 2.078 0 1.158-.636 1.986-1.658 2.248v.022s.204.114.34.375l1.136 1.975c.125.217.273.262.556.262h.238v.885h-.68c-.682 0-.841-.124-1.113-.602l-1.237-2.19c-.205-.341-.352-.443-.84-.443h-.954v2.35h.987v.885H41.1v-.885z",
-    id: "Fill-312"
-  }), _react.default.createElement("path", {
-    id: "Fill-313",
-    d: "M52.823 21.012h1.01v-6.199H51.95v1.249h-.987v-2.18h6.879v2.18h-.988v-1.249H54.97v6.199h1.01v.885h-3.156z"
-  }), _react.default.createElement("path", {
-    id: "Fill-314",
-    d: "M61.04 21.012h1v-6.255h-1v-.875h5.801v1.862h-.988v-.93h-2.679v2.576h2.838v.93h-2.838v2.647h2.873V20h.987v1.896H61.04z"
-  }), _react.default.createElement("path", {
-    d: "M74.229 17.73c.874 0 1.453-.567 1.453-1.51 0-.623-.25-1.055-.75-1.259-.26-.102-.6-.148-.987-.148h-1.328v2.917h1.612zm-3.746 3.282h.999v-6.256h-.999v-.874h3.473c.568 0 1.033.023 1.476.17.84.285 1.397.989 1.397 2.078 0 1.158-.636 1.986-1.658 2.248v.022s.204.114.34.375l1.136 1.975c.125.217.272.262.556.262h.238v.885h-.68c-.682 0-.841-.124-1.113-.602l-1.237-2.19c-.205-.341-.352-.443-.84-.443h-.954v2.35h.988v.885h-3.122v-.885z",
-    id: "Fill-315"
-  }))), _react.default.createElement("g", {
-    id: "Icon"
+    id: "Fill-3",
+    fill: "#FFF",
+    d: "M8.125 8.255h4V-.002h-4z"
+  }))));
+};
+
+LogoutIconLightGray.defaultProps = {
+  width: "21",
+  height: "19",
+  viewBox: "0 0 21 19",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var SearchIcon = function SearchIcon(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "Search"), _react.default.createElement("g", {
+    id: "Header_phase1_Search",
+    fill: "none",
+    fillRule: "evenodd"
+  }, _react.default.createElement("g", {
+    id: "Icon-Export",
+    transform: "translate(-65 -76)"
+  }, _react.default.createElement("g", {
+    id: "Search",
+    transform: "translate(65 76)"
   }, _react.default.createElement("path", {
+    d: "M12.919 2.216a7.568 7.568 0 0 0-10.702 0l2.66 2.66a3.806 3.806 0 0 1 5.382 5.382l1.01 1.01 1.65 1.65 5.857 5.857 1.237-1.237-6.007-6.007c1.799-2.916 1.44-6.786-1.087-9.315",
     id: "Fill-1",
-    fill: "#C7000D",
-    d: "M37.301 32.302l-14.613-3.46V10.766l14.613-4.23z"
+    fill: "#C7000A"
   }), _react.default.createElement("path", {
-    id: "Fill-2",
-    fill: "#E60013",
-    d: "M0 39.609L23.073 28.84V10.767L0 0z"
+    d: "M4.876 4.877l-2.66-2.66a7.568 7.568 0 0 0 0 10.702c2.53 2.528 6.4 2.886 9.315 1.087l6.007 6.006 1.237-1.237-5.857-5.856-1.65-1.65-1.01-1.01a3.805 3.805 0 0 1-5.382-5.382",
+    id: "Fill-4",
+    fill: "#E60013"
   })))));
 };
 
-Logo.defaultProps = {
-  width: "219",
-  height: "40",
-  viewBox: "0 0 219 40",
+SearchIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
   xmlns: "http://www.w3.org/2000/svg"
 };
+
+var SearchIconLightGray = function SearchIconLightGray(props) {
+  return _react.default.createElement("svg", props, _react.default.createElement("title", null, "icon-search1.0-default"), _react.default.createElement("g", {
+    id: "Header-2.0",
+    fill: "none",
+    fillRule: "evenodd"
+  }, _react.default.createElement("g", {
+    id: "icon-search1.0-default"
+  }, _react.default.createElement("path", {
+    d: "M12.919 3.07a7.568 7.568 0 0 0-10.702 0l2.66 2.66a3.806 3.806 0 0 1 5.382 5.383l1.01 1.01 1.65 1.65 5.857 5.857 1.237-1.237-6.007-6.007c1.799-2.916 1.44-6.786-1.087-9.315",
+    id: "Fill-15",
+    fill: "#EAEAEA"
+  }), _react.default.createElement("path", {
+    d: "M4.876 5.731l-2.66-2.66a7.568 7.568 0 0 0 0 10.703c2.53 2.528 6.4 2.886 9.315 1.087l6.007 6.005 1.237-1.236-5.857-5.856-1.65-1.65-1.01-1.01A3.805 3.805 0 0 1 4.876 5.73",
+    id: "Fill-20",
+    fill: "#FFF"
+  }))));
+};
+
+SearchIconLightGray.defaultProps = {
+  width: "20",
+  height: "21",
+  viewBox: "0 0 20 21",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 var lightGrayBgColor = _colors.default.grayBg;
@@ -497,10 +503,8 @@
   switch (theme) {
+    case _theme.default.photography:
     case _theme.default.transparent:
-    case _theme.default.photography:
       {
-        return LogoForDarkBg;
+        return LogoLightGray;
       }
 
-    case _theme.default.index:
-    case _theme.default.normal:
     default:
@@ -513,6 +517,30 @@ {
 
+function selectServiceIcons(theme) {
+  switch (theme) {
+    case _theme.default.photography:
+    case _theme.default.transparent:
+      {
+        return {
+          bookmark: BookmarkIconLightGray,
+          member: MemberIconLightGray,
+          search: SearchIconLightGray,
+          logout: LogoutIconLightGray
+        };
+      }
+
+    default:
+      {
+        return {
+          bookmark: BookmarkIcon,
+          member: MemberIcon,
+          search: SearchIcon,
+          logout: LogoutIcon
+        };
+      }
+  }
+}
+
 function selectFontColor(theme) {
   switch (theme) {
     case _theme.default.transparent:
-    case _theme.default.photography:
       {
@@ -522,2 +550,7 @@ return _colors.default.white;
 
+    case _theme.default.photography:
+      {
+        return '#808080';
+      }
+
     case _theme.default.index:
@@ -532,2 +565,37 @@ case _theme.default.normal:
 
+function selectHoverFontColor(theme) {
+  switch (theme) {
+    case _theme.default.transparent:
+      {
+        return '#808080';
+      }
+
+    case _theme.default.photography:
+      {
+        return _colors.default.secondary;
+      }
+
+    case _theme.default.index:
+    case _theme.default.normal:
+    default:
+      {
+        return '#808080';
+      }
+  }
+}
+
+function selectChannelTextShadow(theme) {
+  switch (theme) {
+    case _theme.default.transparent:
+      {
+        return '0 2px 2px rgba(0, 0, 0, 0.22)';
+      }
+
+    default:
+      {
+        return 'none';
+      }
+  }
+}
+
 function selectBgColor(theme) {
@@ -542,3 +610,3 @@ switch (theme) {
       {
-        return _colors.default.transparent;
+        return 'rgba(0, 0, 0, 0.1)';
       }
@@ -578,6 +646,9 @@
   selectBgColor: selectBgColor,
+  selectChannelTextShadow: selectChannelTextShadow,
   selectFontColor: selectFontColor,
+  selectHoverFontColor: selectHoverFontColor,
   selectLogoComponent: selectLogoComponent,
-  selectMobileSlideDownMenuBgColor: selectMobileSlideDownMenuBgColor
+  selectMobileSlideDownMenuBgColor: selectMobileSlideDownMenuBgColor,
+  selectServiceIcons: selectServiceIcons
 };
 exports.default = _default;

package.json

 {
   "name": "@twreporter/universal-header",
-  "version": "2.0.2",
+  "version": "2.0.3-beta-1",
   "description": "Universal header of TWReporter sites",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162921

increased by0.37%

Number of package files

40

increased by5.26%

Worsened metrics

Lines of code

3189

decreased by-0.06%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

1

increased byInfinity%

No dependency changes