Topbar uses extracted Logo component

src/components/Topbar/LogoIcon.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const LogoIcon = props => {
-  const { className } = props;
-
-  return (
-    <svg
-      className={className}
-      width="21"
-      height="25"
-      viewBox="0 0 21 25"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-        fill="#C0392B"
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};
-
-const { string } = PropTypes;
-
-LogoIcon.defaultProps = {
-  className: null,
-};
-
-LogoIcon.propTypes = {
-  className: string,
-};
-
-export default LogoIcon;

src/components/Topbar/Topbar.js

@@ -15,6 +15,7 @@ import {
   Button,
   IconEmailAttention,
   InlineTextButton,
+  Logo,
   Modal,
   NamedLink,
   TopbarDesktop,
@@ -23,7 +24,6 @@ import {
 import { TopbarSearchForm } from '../../containers';
 
 import MenuIcon from './MenuIcon';
-import LogoIcon from './LogoIcon';
 import SearchIcon from './SearchIcon';
 import css from './Topbar.css';
 
@@ -240,21 +240,27 @@ class TopbarComponent extends Component {
     return (
       <div className={classes}>
         <div className={classNames(mobileRootClassName || css.container, mobileClassName)}>
-          <Button rootClassName={css.menu} onClick={this.handleMobileMenuOpen}>
-            <MenuIcon
-              className={css.menuIcon}
-              title={intl.formatMessage({ id: 'Topbar.menuIcon' })}
-            />
+          <Button
+            rootClassName={css.menu}
+            onClick={this.handleMobileMenuOpen}
+            title={intl.formatMessage({ id: 'Topbar.menuIcon' })}
+          >
+            <MenuIcon className={css.menuIcon} />
             {notificationDot}
           </Button>
-          <NamedLink className={css.home} name="LandingPage">
-            <LogoIcon title={intl.formatMessage({ id: 'Topbar.logoIcon' })} />
+          <NamedLink
+            className={css.home}
+            name="LandingPage"
+            title={intl.formatMessage({ id: 'Topbar.logoIcon' })}
+          >
+            <Logo format="mobile" />
           </NamedLink>
-          <Button rootClassName={css.searchMenu} onClick={this.handleMobileSearchOpen}>
-            <SearchIcon
-              className={css.searchMenuIcon}
-              title={intl.formatMessage({ id: 'Topbar.searchIcon' })}
-            />
+          <Button
+            rootClassName={css.searchMenu}
+            onClick={this.handleMobileSearchOpen}
+            title={intl.formatMessage({ id: 'Topbar.searchIcon' })}
+          >
+            <SearchIcon className={css.searchMenuIcon} />
           </Button>
         </div>
         <div className={css.desktop}>

src/components/TopbarDesktop/TopbarDesktop.js

@@ -7,6 +7,7 @@ import * as propTypes from '../../util/propTypes';
 import {
   Avatar,
   InlineTextButton,
+  Logo,
   Menu,
   MenuLabel,
   MenuContent,
@@ -15,7 +16,6 @@ import {
 } from '../../components';
 import { TopbarSearchForm } from '../../containers';
 
-import logo from './images/saunatime-logo.png';
 import css from './TopbarDesktop.css';
 
 const TopbarDesktop = props => {
@@ -128,9 +128,9 @@ const TopbarDesktop = props => {
   return (
     <nav className={classes}>
       <NamedLink className={css.logoLink} name="LandingPage">
-        <img
+        <Logo
+          format="desktop"
           className={css.logo}
-          src={logo}
           alt={intl.formatMessage({ id: 'TopbarDesktop.logo' })}
         />
       </NamedLink>

src/components/TopbarDesktop/__snapshots__/TopbarDesktop.test.js.snap

@@ -13,7 +13,7 @@ exports[`TopbarDesktop data matches snapshot 1`] = `
   >
     <img
       alt="TopbarDesktop.logo"
-      className={undefined}
+      className={null}
       src="saunatime-logo.png"
     />
   </a>