logo customization

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

@@ -0,0 +1,51 @@
+/**
+ * Logo component.
+ * @module components/theme/Logo/Logo
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { Image } from 'semantic-ui-react';
+import { useSelector } from 'react-redux';
+import { settings } from '~/config';
+
+import LogoImage from './Logo.png';
+
+const messages = defineMessages({
+  site: {
+    id: 'Site',
+    defaultMessage: 'Site',
+  },
+  plonesite: {
+    id: 'Plone Site',
+    defaultMessage: 'Plone Site',
+  },
+});
+
+/**
+ * Logo component class.
+ * @function Logo
+ * @param {Object} intl Intl object
+ * @returns {string} Markup of the component.
+ */
+const Logo = () => {
+  const lang = useSelector(state => state.intl.locale);
+  const intl = useIntl();
+
+  return (
+    <Link
+      to={settings.isMultilingual ? `/${lang}` : '/'}
+      title={intl.formatMessage(messages.site)}
+    >
+      <Image
+        src={LogoImage}
+        alt={intl.formatMessage(messages.plonesite)}
+        title={intl.formatMessage(messages.plonesite)}
+        height={64}
+      />
+    </Link>
+  );
+};
+
+export default Logo;

theme/themes/pastanaga/elements/header.overrides

@@ -4,6 +4,7 @@
 
 .ui.basic.segment.header-wrapper {
   margin-bottom: 0;
+  background-color: @primaryColor;
 }
 
 .ui.basic.segment .header {
@@ -36,9 +37,6 @@
       @media only screen and (max-width: @largestTabletScreen) {
         overflow-x: initial;
       }
-
-      .ui.secondary.pointing.menu {
-      }
     }
   }
 
@@ -65,9 +63,6 @@
       display: flex;
     }
 
-    .tools {
-    }
-
     .search {
       form {
         @media only screen and (min-width: @largestTabletScreen) {

theme/themes/pastanaga/globals/site.variables

@@ -24,6 +24,7 @@
 /*-------------------
     Brand Colors
 --------------------*/
+@primaryColor        : @darkBlue;
 
 @secondaryColor      : @brown;
 
@@ -131,6 +132,7 @@
 @brown            : #826A6A; // Palette: reddishGrey
 @grey             : #68778D; // Palette: blueishGrey
 @black            : #252525; // Palette: darkishGrey
+@darkBlue         : #005384;
 
 /*---  Light Colors  ---*/
 @lightOlive       : #C9EAB1; // Palette: lightSage
@@ -146,7 +148,7 @@
 /*--- Colored Backgrounds ---*/
 @redBackground    : #F5C1C1; // Palette: alertError
 @tealBackground   : #EDF1F2; // Palette: Breadcrumbs
-@blueBackground   : #F2F6F8;
+@blueBackground   : #005384;
 @purpleBackground : #B8C6C8; // Dublin Core Summary
 
 /*--- Colored Headers ---*/