feat(ui): add small logo

frontend/src/components/theme/Footer/FooterColumns.jsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
+import NewsletterSubscribe from '@package/components/theme/Footer/NewsletterSubscribe';
+import { ConditionalLink, Logo } from '@plone/volto/components';
+import { flattenHTMLToAppURL, flattenToAppURL } from '@plone/volto/helpers';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { flattenHTMLToAppURL, flattenToAppURL } from '@plone/volto/helpers';
-import { ConditionalLink, Logo } from '@plone/volto/components';
-import NewsletterSubscribe from '@package/components/theme/Footer/NewsletterSubscribe';
-import { SocialLinks } from 'volto-social-settings';
 import { getEditableFooterColumns } from 'volto-editablefooter/actions';
 import { getItemsByPath } from 'volto-editablefooter/utils';
+import { SocialLinks } from 'volto-social-settings';
 
 const FooterColumns = ({ footer }) => {
   const location = useLocation();
@@ -29,7 +29,7 @@ const FooterColumns = ({ footer }) => {
   return (
     <div className="footer-columns">
       <div className="column">
-        <Logo />
+        <Logo smallLogo={false} />
       </div>
       {footerColumns
         .filter((c) => c.visible)

frontend/src/components/theme/Logo/LogoSVG.jsx

@@ -1,13 +1,11 @@
-function Logo(props) {
+export function LogoSVG(props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       version="1.1"
       id="logo"
       x="0"
       y="0"
-      // viewBox="30 15 300 90"
-      // viewBox="15 10 320 70"
       viewBox="0 0 350 90"
       xmlSpace="preserve"
       {...props}
@@ -31,5 +29,3 @@ function Logo(props) {
     </svg>
   );
 }
-
-export default Logo;

frontend/src/components/theme/SmallLogo/SmallLogoSVG.jsx

@@ -0,0 +1,27 @@
+export function SmallLogoSVG(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      id="smalllogo"
+      x="0"
+      y="0"
+      viewBox="0 0 70 70"
+      xmlSpace="preserve"
+      {...props}
+    >
+      <style type="text/css">
+        {`.st0{fill:#008DA9;}
+        .st1{fill:#FFFFFF;}`}
+      </style>
+      <path
+        className="st0"
+        d="M48.06 28.91l-4.2 4.2 4.2 4.2 4.2-4.2L48.06 28.91zM46.58 33.1l1.48-1.48 1.48 1.48 -1.48 1.48L46.58 33.1zM21.94 28.91l-4.2 4.2 4.2 4.2 4.2-4.2L21.94 28.91zM20.46 33.1l1.48-1.48 1.48 1.48 -1.48 1.48L20.46 33.1zM48.06 39.23l-4.2 4.2 4.2 4.2 4.2-4.2L48.06 39.23zM46.58 43.43l1.48-1.48 1.48 1.48 -1.48 1.48L46.58 43.43zM21.94 39.23l-4.2 4.2 4.2 4.2 4.2-4.2L21.94 39.23zM20.46 43.43l1.48-1.48 1.48 1.48 -1.48 1.48L20.46 43.43z"
+      />
+      <path
+        className="st1"
+        d="M41.53 22.37l-4.2 4.2 4.2 4.2 4.2-4.2L41.53 22.37zM40.05 26.57l1.48-1.48L43 26.57l-1.48 1.48L40.05 26.57zM28.47 22.37l-4.2 4.2 4.2 4.2 4.2-4.2L28.47 22.37zM27 26.57l1.48-1.48 1.48 1.48 -1.48 1.48L27 26.57zM35 28.9l-4.2 4.2 4.2 4.2 4.2-4.2L35 28.9zM33.52 33.1L35 31.62l1.48 1.48L35 34.57 33.52 33.1z"
+      />
+    </svg>
+  );
+}

frontend/src/customizations/components/theme/Header/Header.jsx

@@ -1,16 +1,15 @@
 // Customized to use the HeroSection
-
-import React from 'react';
-import { InView } from 'react-intersection-observer';
-import { useSelector } from 'react-redux';
+import HeroSection from '@package/components/theme/Header/HeroSection'; // , StickyHeader
 import { Logo, Navigation } from '@plone/volto/components';
 import { BodyClass, isCmsUi } from '@plone/volto/helpers';
-import HeroSection from '@package/components/theme/Header/HeroSection'; // , StickyHeader
 import cx from 'classnames';
+import qs from 'query-string';
+import React, { useEffect, useState } from 'react';
+import { InView } from 'react-intersection-observer';
 import { useIntl } from 'react-intl';
-import usePreviewImage from './usePreviewImage';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import qs from 'query-string';
+import usePreviewImage from './usePreviewImage';
 
 const Header = (props) => {
   const { navigationItems } = props;
@@ -30,6 +29,19 @@ const Header = (props) => {
   const cmsView = isCmsUi(pathname);
   const homePageView = isHomePage && !cmsView && !isSearch;
   const [inView, setInView] = React.useState();
+  const [smallLogo, setSmallLogo] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const mediaQuery = window.matchMedia('(min-width: 768px)');
+      const handler = (e) => setSmallLogo(e.matches);
+
+      setSmallLogo(mediaQuery.matches);
+      mediaQuery.addEventListener('change', handler);
+
+      return () => mediaQuery.removeEventListener('change', handler);
+    }
+  }, []);
 
   return (
     <div className="portal-top">
@@ -54,7 +66,7 @@ const Header = (props) => {
             }`}
           >
             <div className="logo">
-              <Logo />
+              <Logo smallLogo={!smallLogo} />
             </div>
 
             <div className="right-section">

frontend/src/customizations/components/theme/Logo/Logo.jsx

@@ -3,11 +3,12 @@
  * @module components/theme/Logo/Logo
  */
 
+import { LogoSVG } from '@package/components/theme/Logo/LogoSVG';
+import { SmallLogoSVG } from '@package/components/theme/SmallLogo/SmallLogoSVG';
+import { UniversalLink } from '@plone/volto/components';
+import config from '@plone/volto/registry';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import config from '@plone/volto/registry';
-import { UniversalLink } from '@plone/volto/components';
-import LogoSVG from '@package/components/theme/Logo/LogoSVG';
 
 const messages = defineMessages({
   site: {
@@ -26,12 +27,21 @@ const messages = defineMessages({
  * @param {Object} intl Intl object
  * @returns {string} Markup of the component.
  */
-const Logo = () => {
+const Logo = (props) => {
+  const { smallLogo } = props || false;
   const { settings } = config;
   const lang = useSelector((state) => state.intl.locale);
   const intl = useIntl();
 
-  return (
+  return smallLogo === true ? (
+    <UniversalLink
+      className="site-logo small-logo"
+      href={settings.isMultilingual ? `/${lang}` : '/'}
+      title={intl.formatMessage(messages.site)}
+    >
+      <SmallLogoSVG title={intl.formatMessage(messages.plonesite)} />
+    </UniversalLink>
+  ) : (
     <UniversalLink
       className="site-logo"
       href={settings.isMultilingual ? `/${lang}` : '/'}

frontend/theme/extras/footer.less

@@ -56,6 +56,7 @@ footer.site-footer {
     svg {
       margin-left: -25px;
       height: auto;
+      min-width: 260px;
       width: 20rem;
       max-width: 90%;
       height: auto;

frontend/theme/extras/header.less

@@ -34,6 +34,12 @@
         height: auto;
       }
 
+      a.small-logo svg,
+      img {
+        width: 4.1565rem;
+        height: auto;
+      }
+
       svg {
         background-color: @theme-color-red;
         color: @theme-color-black;