@eeacms/volto-bise-policy 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.10](https://github.com/eea/volto-bise-policy/compare/1.0.9...1.0.10) - 7 June 2023
+
+#### :hammer_and_wrench: Others
+
+- add light-green contentbox + separate custom blocks [Miu Razvan - [`bd959d4`](https://github.com/eea/volto-bise-policy/commit/bd959d492e6c30f4f892bf37729b5dbe137f78dc)]
+### [1.0.9](https://github.com/eea/volto-bise-policy/compare/1.0.8...1.0.9) - 6 June 2023
+
+#### :nail_care: Enhancements
+
+- change(inline-styles): enabled only primary secondary and tertiary inline styles [David Ichim - [`b9392ba`](https://github.com/eea/volto-bise-policy/commit/b9392baba2bd7255d7afe07fd7c82d43543bd7ec)]
+
+#### :hammer_and_wrench: Others
+
+- update slate inline styles [Miu Razvan - [`ad5f9db`](https://github.com/eea/volto-bise-policy/commit/ad5f9db710ca50586aba1ba96e04dc8f84b33ac9)]
+- fixes [Miu Razvan - [`cb680f2`](https://github.com/eea/volto-bise-policy/commit/cb680f268f297f7ed577081a00b358f60cc627ad)]
+- update [Miu Razvan - [`4c0d4f2`](https://github.com/eea/volto-bise-policy/commit/4c0d4f269c7b05976a4de5dc915fdb3338c976a6)]
 ### [1.0.8](https://github.com/eea/volto-bise-policy/compare/1.0.7...1.0.8) - 29 May 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderMenuPopUp.js

@@ -239,39 +239,54 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
     if (pathName.indexOf(element.url) !== -1) {
       defaultIndex = index;
     }
+    const hasItems = element.items?.length > 0;
+    let overview = cloneDeep(element);
+
     x.title = (
-      <Accordion.Title key={`title-${index}`} index={index} as="button">
-        {element.title}
-        <Icon className="ri-arrow-down-s-line" size="small" />
+      <Accordion.Title
+        key={`title-${index}`}
+        index={index}
+        as="button"
+        active={hasItems ? false : undefined}
+      >
+        {hasItems ? (
+          <>
+            {element.title}
+            <Icon className="ri-arrow-down-s-line" size="small" />
+          </>
+        ) : (
+          renderMenuItem(overview)
+        )}
       </Accordion.Title>
     );
-    let overview = cloneDeep(element);
-    x.content = (
-      <Accordion.Content key={index}>
-        <div className="mega-menu-title">
-          {/* Inverted right labeled button as a category title - Mobile */}
-          {renderMenuItem(
-            overview,
-            { className: 'ui button inverted icon right labeled' },
-            {
-              iconPosition: 'right',
-              children: (
-                <>
-                  {/* Add word overview to titles */}
-                  <span> overview</span>
-                  <Icon className={'arrow right icon'} alt={'Title icon'} />
-                </>
-              ),
-            },
-          )}
-        </div>
-        <FirstLevelContent
-          element={element}
-          renderMenuItem={renderMenuItem}
-          pathName={pathName}
-        />
-      </Accordion.Content>
-    );
+    if (hasItems) {
+      x.content = (
+        <Accordion.Content key={index}>
+          <div className="mega-menu-title">
+            {/* Inverted right labeled button as a category title - Mobile */}
+            {renderMenuItem(
+              overview,
+              { className: 'ui button inverted icon right labeled' },
+              {
+                iconPosition: 'right',
+                children: (
+                  <>
+                    {/* Add word overview to titles */}
+                    <span> overview</span>
+                    <Icon className={'arrow right icon'} alt={'Title icon'} />
+                  </>
+                ),
+              },
+            )}
+          </div>
+          <FirstLevelContent
+            element={element}
+            renderMenuItem={renderMenuItem}
+            pathName={pathName}
+          />
+        </Accordion.Content>
+      );
+    }
     rootPanels.push(x);
   });
 

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { Container, Dropdown, Grid, Image, Sticky } from 'semantic-ui-react';
+import { Dropdown, Image, Sticky } from 'semantic-ui-react';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import Cookies from 'universal-cookie';
 
@@ -62,6 +62,8 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
 
   const pathname = removeTrailingSlash(props.pathname);
 
+  const _pathname = removeTrailingSlash(history.location.pathname);
+
   const content_pathname = useMemo(
     () => flattenToAppURL(content.data?.['@id']),
     [content],
@@ -90,8 +92,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
     });
   }, [pathname]);
 
-  const isHomePageInverse =
-    content_pathname === '' && ['', '/'].includes(pathname);
+  const isHomePageInverse = content_pathname === '' && _pathname === '';
 
   const isMultilingual =
     config.settings.isMultilingual || (isSubsite && subsite.isMultilingual);
@@ -143,6 +144,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
       {isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat && (
         <BodyClass className="with-n2k-navigation" />
       )}
+      {isSubsite && isN2KSite && <BodyClass className="is-n2k-site" />}
 
       <Header.TopHeader>
         <Header.TopItem className="official-union">
@@ -280,87 +282,89 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
         active={isSubsite && subsite['@id'] === '/natura2000'}
         context={__CLIENT__ && document.querySelector('.content-area')}
       >
-        {!isN2KSite ? (
-          <Header.Main
-            pathname={pathname}
-            headerSearchBox={headerSearchBox}
-            inverted={isHomePageInverse ? true : false}
-            transparency={isHomePageInverse ? true : false}
-            hideSearch={isSubsite}
-            logo={
-              <Logo
-                src={isHomePageInverse ? logoWhite : logo}
-                title={eea.websiteTitle}
-                alt={eea.organisationName}
-                url={eea.logoTargetUrl}
-              />
-            }
-            menuItems={
-              isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat
-                ? getSubsiteItems()
-                : items.filter((item) => item.url !== '/natura2000')
-            }
-            renderGlobalMenuItem={(item, { onClick }) => (
-              <a
-                href={item.url || '/'}
-                title={item.title}
-                onClick={(e) => {
-                  e.preventDefault();
-                  onClick(e, item);
-                }}
-              >
-                {item.title}
-              </a>
-            )}
-            renderMenuItem={(item, options, props) => (
-              <UniversalLink
-                href={item.url || '/'}
-                title={item.nav_title || item.title}
-                {...(options || {})}
-                className={cx(options?.className, {
-                  active: item.url === pathname,
-                })}
-              >
-                {props?.iconPosition !== 'right' && props?.children}
-                <span>{item.nav_title || item.title}</span>
-                {props?.iconPosition === 'right' && props?.children}
-              </UniversalLink>
-            )}
-          />
-        ) : (
-          <div className="main bar transparency n2k-site">
-            <Container>
-              <Grid>
-                <Grid.Column>
-                  <button
-                    title="At a glance"
-                    className="item firstLevel at-glance"
-                    onClick={() => {
+        <Header.Main
+          pathname={pathname}
+          headerSearchBox={headerSearchBox}
+          inverted={isHomePageInverse ? true : false}
+          transparency={isHomePageInverse ? true : false}
+          hideSearch={isSubsite}
+          logo={
+            <Logo
+              src={isHomePageInverse ? logoWhite : logo}
+              title={eea.websiteTitle}
+              alt={eea.organisationName}
+              url={eea.logoTargetUrl}
+            />
+          }
+          menuItems={
+            isN2KSite
+              ? [
+                  {
+                    title: 'AT A GLANCE',
+                    url: '#',
+                    items: [],
+                    className: 'at-glance',
+                    onClick: (e) => {
+                      e.preventDefault();
                       window.scrollTo({
                         top: document.body.scrollHeight,
                         behavior: 'smooth',
                       });
-                    }}
-                  >
-                    AT A GLANCE
-                  </button>
-                  <UniversalLink
-                    href={
-                      params.site_code
-                        ? `https://natura2000.eea.europa.eu/Natura2000/SDF.aspx?site=${params.site_code}`
-                        : '#'
-                    }
-                    openLinkInNewTab={true}
-                    title="Go to expert view"
-                    className="item firstLevel deep-dive"
-                  >
-                    GO TO EXPERT VIEW
-                  </UniversalLink>
-                </Grid.Column>
-              </Grid>
-            </Container>
-          </div>
-        )}
+                    },
+                  },
+                  {
+                    title: 'GO TO EXPERT VIEW',
+                    url: params.site_code
+                      ? `https://natura2000.eea.europa.eu/Natura2000/SDF.aspx?site=${params.site_code}`
+                      : '#',
+                    items: [],
+                    className: 'deep-dive',
+                    target: params.site_code ? '_blank' : null,
+                  },
+                ]
+              : isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat
+              ? getSubsiteItems()
+              : items.filter((item) => item.url !== '/natura2000')
+          }
+          renderGlobalMenuItem={(item, { onClick }) => (
+            <a
+              href={item.url || '/'}
+              title={item.title}
+              target={item.target || '_self'}
+              className={item.className}
+              onClick={(e) => {
+                if (!isN2KSite) {
+                  e.preventDefault();
+                  onClick(e, item);
+                }
+                if (item.onClick) {
+                  item.onClick(e, item);
+                }
+              }}
+            >
+              {item.title}
+            </a>
+          )}
+          renderMenuItem={(item, options, props) => (
+            <UniversalLink
+              href={item.url || '/'}
+              title={item.nav_title || item.title}
+              {...(options || {})}
+              className={cx(options?.className, {
+                active: item.url === pathname,
+              })}
+              onClick={(e) => {
+                if (item.onClick) {
+                  item.onClick(e);
+                }
+              }}
+            >
+              {props?.iconPosition !== 'right' && props?.children}
+              <span>{item.nav_title || item.title}</span>
+              {props?.iconPosition === 'right' && props?.children}
+            </UniversalLink>
+          )}
+        />
       </Sticky>
     </Header>
   );

package/src/icons/content-box.svg

@@ -0,0 +1,14 @@
+<svg width="90mm" height="90mm" version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
+ <g stroke-width=".26458" aria-label="ContentBox">
+  <path d="m21.961 27.071v1.7611q-0.84334-0.78547-1.8024-1.1741-0.95083-0.3886-2.0257-0.3886-2.1166 0-3.2411 1.2981-1.1245 1.2898-1.1245 3.7372 0 2.4391 1.1245 3.7372 1.1245 1.2898 3.2411 1.2898 1.0748 0 2.0257-0.3886 0.9591-0.3886 1.8024-1.1741v1.7446q-0.87642 0.5953-1.8603 0.89295-0.97563 0.29765-2.067 0.29765-2.8029 0-4.4151-1.7115-1.6123-1.7198-1.6123-4.688 0-2.9765 1.6123-4.688 1.6123-1.7198 4.4151-1.7198 1.1079 0 2.0836 0.29765 0.9839 0.28938 1.8438 0.87642z"/>
+  <path d="m28.063 30.27q-1.2237 0-1.9347 0.9591-0.71105 0.95083-0.71105 2.6127 0 1.6619 0.70278 2.621 0.71105 0.95083 1.943 0.95083 1.2154 0 1.9265-0.9591 0.71105-0.9591 0.71105-2.6127 0-1.6453-0.71105-2.6044-0.71105-0.96736-1.9265-0.96736zm0-1.2898q1.9843 0 3.1171 1.2898 1.1327 1.2898 1.1327 3.5718 0 2.2737-1.1327 3.5718-1.1327 1.2898-3.1171 1.2898-1.9926 0-3.1253-1.2898-1.1245-1.2981-1.1245-3.5718 0-2.282 1.1245-3.5718 1.1327-1.2898 3.1253-1.2898z"/>
+  <path d="m42.532 32.875v5.5892h-1.5213v-5.5396q0-1.3146-0.51262-1.9678-0.51262-0.65318-1.5379-0.65318-1.2319 0-1.943 0.78547-0.71105 0.78547-0.71105 2.1414v5.2337h-1.5296v-9.2602h1.5296v1.4386q0.54569-0.83508 1.2816-1.2485 0.74413-0.4134 1.7115-0.4134 1.5957 0 2.4143 0.99217 0.81854 0.9839 0.81854 2.9021z"/>
+  <path d="m47.071 26.574v2.6292h3.1336v1.1823h-3.1336v5.027q0 1.1327 0.30592 1.4552 0.31419 0.32246 1.265 0.32246h1.5627v1.2733h-1.5627q-1.7611 0-2.4308-0.65318-0.66971-0.66145-0.66971-2.3977v-5.027h-1.1162v-1.1823h1.1162v-2.6292z"/>
+  <path d="m60.126 33.454v0.74413h-6.9948q0.09922 1.5709 0.94256 2.3977 0.85161 0.81854 2.3647 0.81854 0.87642 0 1.695-0.21497 0.82681-0.21497 1.6371-0.64491v1.4386q-0.81854 0.34726-1.6784 0.52916-0.85988 0.1819-1.7446 0.1819-2.2158 0-3.5139-1.2898-1.2898-1.2898-1.2898-3.4891 0-2.2737 1.2237-3.6049 1.2319-1.3394 3.3155-1.3394 1.8686 0 2.9517 1.2071 1.0914 1.1989 1.0914 3.2659zm-1.5213-0.44648q-0.01654-1.2485-0.70279-1.9926-0.67798-0.74413-1.8024-0.74413-1.2733 0-2.0422 0.71932-0.76066 0.71932-0.87642 2.0257z"/>
+  <path d="m70.321 32.875v5.5892h-1.5213v-5.5396q0-1.3146-0.51262-1.9678-0.51262-0.65318-1.5379-0.65318-1.2319 0-1.943 0.78547-0.71105 0.78547-0.71105 2.1414v5.2337h-1.5296v-9.2602h1.5296v1.4386q0.54569-0.83508 1.2816-1.2485 0.74413-0.4134 1.7115-0.4134 1.5957 0 2.4143 0.99217 0.81854 0.9839 0.81854 2.9021z"/>
+  <path d="m74.86 26.574v2.6292h3.1336v1.1823h-3.1336v5.027q0 1.1327 0.30592 1.4552 0.31419 0.32246 1.265 0.32246h1.5627v1.2733h-1.5627q-1.7611 0-2.4308-0.65318-0.66971-0.66145-0.66971-2.3977v-5.027h-1.1162v-1.1823h1.1162v-2.6292z"/>
+  <path d="m32.321 57.969v4.5226h2.6789q1.3477 0 1.9926-0.55396 0.65318-0.56223 0.65318-1.7115 0-1.1575-0.65318-1.7032-0.64491-0.55396-1.9926-0.55396zm0-5.0766v3.7206h2.4722q1.2237 0 1.819-0.45474 0.60357-0.46301 0.60357-1.4056 0-0.93429-0.60357-1.3973-0.5953-0.46301-1.819-0.46301zm-1.6702-1.3725h4.2663q1.9099 0 2.9434 0.79374 1.0335 0.79373 1.0335 2.2572 0 1.1327-0.52916 1.8024-0.52916 0.66971-1.5544 0.83507 1.2319 0.26458 1.9099 1.1079 0.68625 0.83508 0.68625 2.0918 0 1.6536-1.1245 2.5548-1.1245 0.90122-3.1997 0.90122h-4.4317z"/>
+  <path d="m45.79 55.67q-1.2237 0-1.9347 0.9591-0.71105 0.95083-0.71105 2.6127 0 1.6619 0.70279 2.621 0.71105 0.95083 1.943 0.95083 1.2154 0 1.9265-0.9591 0.71105-0.9591 0.71105-2.6127 0-1.6453-0.71105-2.6044-0.71105-0.96736-1.9265-0.96736zm0-1.2898q1.9843 0 3.1171 1.2898 1.1327 1.2898 1.1327 3.5718 0 2.2737-1.1327 3.5718-1.1327 1.2898-3.1171 1.2898-1.9926 0-3.1253-1.2898-1.1245-1.2981-1.1245-3.5718 0-2.282 1.1245-3.5718 1.1327-1.2898 3.1253-1.2898z"/>
+  <path d="m59.738 54.604-3.3486 4.5061 3.5222 4.7541h-1.7942l-2.6954-3.6379-2.6954 3.6379h-1.7942l3.5966-4.8451-3.2907-4.4151h1.7942l2.4556 3.299 2.4556-3.299z"/>
+ </g>
+</svg>

package/src/index.js

@@ -3,7 +3,7 @@ import installLink from '@plone/volto-slate/editor/plugins/AdvancedLink';
 import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-bise-policy/components/manage/Blocks/schema';
 
 import installBlocks from './components/manage/Blocks';
-import installStyles from './components/manage/Styles';
+import installStyles from './styles-config';
 
 import biseLogo from '@eeacms/volto-bise-policy/../theme//assets/images/Header/bise-logo.svg';
 import biseWhiteLogo from '@eeacms/volto-bise-policy/../theme//assets/images/Header/bise-logo-white.svg';
@@ -14,6 +14,15 @@ const restrictedBlocks = [
   'embed_eea_map_block',
 ];
 
+const customBlocks = [
+  'html',
+  'countryFlag',
+  'tableau_block',
+  'body_classname',
+  'redirect',
+  'navigationBlock',
+];
+
 const applyConfig = (config) => {
   // Volto specific settings
   config.settings = {
@@ -120,25 +129,10 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.hero_image_left.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
   }
 
-  // Plotly bise color
-  config.settings.plotlyCustomColors = [
-    {
-      title: 'A2',
-      colorscale: [
-        '#3D2201',
-        '#603808',
-        '#8B5E34',
-        '#BC8A5F',
-        '#E7BC91',
-        '#FFEDD8',
-        '#FFF6EC',
-      ],
-    },
-    {
-      title: 'A1',
-      colorscale: ['#12957D', '#F9EA8A', '#DD552B', '#AEB0B3'],
-    },
-  ];
+  config = [installBlocks, installStyles].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
 
   // Disable some blocks
   restrictedBlocks.forEach((block) => {
@@ -147,10 +141,18 @@ const applyConfig = (config) => {
     }
   });
 
-  return [installBlocks, installStyles].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  // Set custom blocks
+  config.blocks.groupBlocksOrder = [
+    ...config.blocks.groupBlocksOrder,
+    { id: 'custom_blocks', title: 'Custom blocks' },
+  ];
+  customBlocks.forEach((block) => {
+    if (config.blocks.blocksConfig[block]) {
+      config.blocks.blocksConfig[block].group = 'custom_blocks';
+    }
+  });
+
+  return config;
 };
 
 export default applyConfig;

package/src/{components/manage/Styles/index.js → styles-config.js}

@@ -1,14 +1,7 @@
-export default (config) => {
-  // config.settings.plotlyChartsColorScale = [
-  //   '#ee252c',
-  //   '#d5e843',
-  //   '#33b540',
-  //   '#352d4e',
-  //   '#f9ae79',
-  //   '#87d6cb',
-  //   ...(config.settings.plotlyChartsColorScale || []),
-  // ];
+import { Icon } from '@plone/volto/components';
+import contentBoxSVG from '@eeacms/volto-bise-policy/icons/content-box.svg';
 
+export default (config) => {
   config.settings.available_colors = [
     '#005248', // primary color
     '#00A390', // secondary color
@@ -83,20 +76,30 @@ export default (config) => {
     { cssClass: 'white-text', label: 'White text' },
     { cssClass: 'primary-text', label: 'Primary text' },
     { cssClass: 'secondary-text', label: 'Secondary text' },
+    { cssClass: 'tertiary-text', label: 'Tertiary text' },
     { cssClass: 'dark-green-text', label: 'Dark green text' },
     { cssClass: 'blue-text', label: 'Blue text' },
     { cssClass: 'red-text', label: 'Red text' },
     { cssClass: 'yellow-text', label: 'Yellow text' },
     { cssClass: 'grey-text', label: 'Grey text' },
   ];
-  // config.settings.slate.styleMenu.blockStyles = [
-  //   ...config.settings.slate.styleMenu.blockStyles,
-  //   { cssClass: 'green-block-text', label: 'Green Text' },
-  //   { cssClass: 'underline-block-text', label: 'Underline Text' },
-  // ];
 
   config.settings.pluggableStyles = [
     ...(config.settings.pluggableStyles || []),
+    {
+      id: 'content-box-light-green',
+      title: 'Light green',
+      previewComponent: () => (
+        <Icon name={contentBoxSVG} size="88px" className="light-green" />
+      ),
+      viewComponent: (props) => {
+        return (
+          <div className="content-box light-green">
+            <div className="content-box-inner">{props.children}</div>
+          </div>
+        );
+      },
+    },
     {
       id: 'borderBlock',
       title: 'Border',
@@ -159,5 +162,25 @@ export default (config) => {
     },
   ];
 
+  // Plotly bise color
+  config.settings.plotlyCustomColors = [
+    {
+      title: 'A2',
+      colorscale: [
+        '#3D2201',
+        '#603808',
+        '#8B5E34',
+        '#BC8A5F',
+        '#E7BC91',
+        '#FFEDD8',
+        '#FFF6EC',
+      ],
+    },
+    {
+      title: 'A1',
+      colorscale: ['#12957D', '#F9EA8A', '#DD552B', '#AEB0B3'],
+    },
+  ];
+
   return config;
 };

package/theme/extras/stylemenu.less

@@ -1,16 +1,13 @@
 .primary-big-text {
-  font-size: 45px;
-  line-height: 45px;
+  font-size: 1.625rem;
 }
 
 .medium-text {
-  font-size: 30px;
-  line-height: 30px;
+  font-size: 1.25rem;
 }
 
 .small-text {
-  font-size: 20px;
-  line-height: 20px;
+  font-size: 0.8rem;
 }
 
 .white-text {
@@ -27,6 +24,10 @@
   color: @secondaryColor;
 }
 
+.tertiary-text {
+  color: @tertiaryColor;
+}
+
 .dark-green-text {
   color: @bottleGreen;
 }
@@ -45,4 +46,4 @@
 
 .grey-text {
   color: @tertiaryColor;
-}
+}

package/theme/globals/natura2000.less

@@ -52,37 +52,69 @@
   }
 }
 
-.eea.header .main.bar.n2k-site {
-  .ui.grid {
-    height: 100%;
+.is-n2k-site {
+  .eea.header .main.bar {
+    .ui.grid, .main-menu, .main-menu > ul, .main-menu > ul > li {
+      height: 100%;
+    }
+  }
 
-    .column {
-      justify-content: center;
+  .eea.header .main.bar .main-menu > ul > li {
+    padding: 0 0.5rem !important;
 
-      > * {
-        flex: unset !important;
+    > a {
+      align-self: center;
+    }
+  }
 
-        &:not(:last-child) {
-          margin-right: 1rem;
-        }
-      }
+  #mega-menu {
+    display: grid !important;
+    align-content: center;
+
+
+    .ui.container {
+      width: 100%;
+      padding-bottom: 0;
+    }
+
+    .ui.accordion > button > a {
+      color: #fff !important;
     }
   }
 }
 
+
 .at-glance {
   height: 100%;
   padding: 0 2rem;
-  background: #00a390 0% 0% no-repeat padding-box;
-  border: none;
+  background: @secondaryColor 0% 0% no-repeat padding-box;
+  border-bottom: 4px solid @secondaryColor !important;
+  margin-bottom: -16px;
+  padding-bottom: 16px;
+  height: calc(100% + 16px);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
   color: #fff !important;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 
   &:hover {
     color: #fff !important;
+    border-bottom: 4px solid @secondaryColor !important;
+  }
+}
+
+.deep-dive {
+  color: @secondaryColor !important;
+  border-bottom: 4px solid transparent !important;
+
+  &:hover {
+    border-bottom: 4px solid transparent !important;
   }
 }
 
+.at-glance,
 .deep-dive {
   font-weight: bold;
 }
@@ -90,7 +122,7 @@
 .with-n2k-navigation {
   .eea.header {
     .main.bar .ui.grid {
-      > :first-child {
+      > :first-child:not(:last-child) {
         width: 200px !important;
 
         img {
@@ -98,7 +130,7 @@
         }
       }
 
-      > :last-child {
+      > :last-child:not(:first-child) {
         width: calc(100% - 200px) !important;
       }
 

package/theme/globals/site.overrides

@@ -272,4 +272,26 @@ p.has--clear--both:empty {
 
 .simple-data-table {
   padding: 0;
+}
+
+.content-box {
+  &.light-green {
+    background-color: @green-1;
+    color: @tertiaryColor;
+  }
+}
+
+.style-select-widget {
+  svg.light-green {
+    background-color:@green-1;
+    fill: @tertiaryColor !important;
+  }
+}
+
+#sidebar > .sidebar-container > .tabs-wrapper > .ui.menu {
+  flex-wrap: nowrap;
+}
+
+.ui.button.full-size-sidenav-btn {
+  padding: 6px !important;
 }

package/theme/modules/sticky.overrides

@@ -1,7 +1,21 @@
+.eea.header {
+  z-index: @zIndex;
+}
+
 .eea.header .ui.sticky {
   z-index: @zIndex;
 }
 
-.sticky-navigation-anchors.full-width {
+.sticky-navigation-anchors.full-width:not(.sticky-broken) {
   z-index: @zIndex;
-}
+}
+
+.sticky-broken {
+  .ui.sticky {
+    z-index: unset !important;
+  }
+}
+
+// #toolbar {
+//   z-index: @zIndex + 1;
+// }

package/theme/theme.config

@@ -83,7 +83,7 @@
 @banner              : 'eea';
 @timeline            : 'eea';
 @footer              : 'eea';
-@header              : 'eea';
+@header              : 'mirage';
 @tag                 : 'eea';
 @tags                : 'eea';
 @tagList             : 'eea';

package/theme/tokens/colors.less

@@ -1,9 +1,9 @@
 @green-0: #C8FFF8;
-@green-1: #85FFF1;
-@green-2: #00F5D8;
-@green-3: #00CCB4;
-@green-4: #00A390; // @secondaryColor
-@green-5: #007B6C;
+@green-1: #A0E5DC;
+@green-2: #78CAC0;
+@green-3: #50B0A4;
+@green-4: #289588; // @secondaryColor
+@green-5: #007B6C; 
 @green-6: #005248; // @primaryColor
 
 @yellow-0: #FEF6CD;