Merge pull request #854 from sharetribe/logo-customization-improvements

Logo customization improvements

CHANGELOG.md

@@ -22,6 +22,9 @@ way to update this template, but currently, we follow a pattern:
 * [change] Footer styles changed to more generic (no disappearing columns etc.)
   If you have made changes to Footer, consider extracting it to different component before update.
   [#853](https://github.com/sharetribe/flex-template-web/pull/853)
+* [change] Logo customization refactored to be easier. Check CheckoutPage, TopbarDesktop and Footer
+  after update.
+  [#854](https://github.com/sharetribe/flex-template-web/pull/854)
 
 ## v1.0.0
 

docs/customization-checklist.md

@@ -11,8 +11,7 @@ Some generic things to update and check when starting to customize the template.
 * [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service)
 * [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy)
 * [Social media sharing graphics](../src/components/Page/Page.js);
-* [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar and Footer
-* [Logo in CheckoutPage](../src/containers/CheckoutPage/LogoIcon.js)
+* [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and CheckoutPage
 * [Default background image](../src/assets/background-1440.jpg)
 * [Maps Marker icon](../src/components/Map/images/marker-32x32.png)
 * [Config: update environment variables](../src/config.js)

src/components/Footer/Footer.css

@@ -100,14 +100,14 @@
 
 .logoLink {
   display: block;
-  width: 156px;
-  height: 27px;
   margin-bottom: 14px;
 }
 
 .logo {
+  object-fit: contain;
+  object-position: left center;
   width: 100%;
-  height: 100%;
+  height: 27px;
 }
 
 .organizationInfo {

src/components/TopbarDesktop/TopbarDesktop.css

@@ -73,8 +73,15 @@
 }
 
 .logo {
-  width: 155px;
+  /* If height is increased, change link paddings accordingly */
   height: 27px;
+
+  /* Good aspect ratio should be less than 160/27 (width/height) */
+  /* NOTE: extremely wide logos, need special handling. */
+  width: auto;
+  max-width: 220px;
+  object-fit: contain;
+  object-position: left center;
 }
 
 /* Search */

src/containers/CheckoutPage/CheckoutPage.css

@@ -65,7 +65,7 @@
 
 .logoDesktop {
   display: none;
-  width: 155px;
+  width: auto;
   height: 27px;
 
   @media (--viewportLarge) {

src/containers/CheckoutPage/CheckoutPage.js

@@ -19,6 +19,7 @@ import {
 import {
   AvatarMedium,
   BookingBreakdown,
+  Logo,
   NamedLink,
   NamedRedirect,
   Page,
@@ -30,7 +31,6 @@ import { initiateOrder, setInitialValues, speculateTransaction } from './Checkou
 import config from '../../config';
 
 import { storeData, storedData, clearData } from './CheckoutPageSessionHelpers';
-import LogoIcon from './LogoIcon';
 import css from './CheckoutPage.css';
 
 const STORAGE_KEY = 'CheckoutPage';
@@ -309,14 +309,15 @@ export class CheckoutPageComponent extends Component {
     const topbar = (
       <div className={css.topbar}>
         <NamedLink className={css.home} name="LandingPage">
-          <LogoIcon
+          <Logo
             className={css.logoMobile}
             title={intl.formatMessage({ id: 'CheckoutPage.goToLandingPage' })}
+            format="mobile"
           />
-          <LogoIcon
+          <Logo
             className={css.logoDesktop}
             alt={intl.formatMessage({ id: 'CheckoutPage.goToLandingPage' })}
-            isMobile={false}
+            format="desktop"
           />
         </NamedLink>
       </div>

src/containers/CheckoutPage/LogoIcon.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import desktopLogo from './images/saunatime-logo.png';
-
-const LogoIcon = props => {
-  const { alt, className, isMobile } = props;
-
-  if (isMobile) {
-    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"
-          fillRule="evenodd"
-        />
-      </svg>
-    );
-  }
-  return <img className={className} src={desktopLogo} alt={alt} />;
-};
-
-const { bool, string } = PropTypes;
-
-LogoIcon.defaultProps = {
-  alt: 'Logo',
-  className: null,
-  isMobile: true,
-};
-
-LogoIcon.propTypes = {
-  alt: string,
-  className: string,
-  isMobile: bool,
-};
-
-export default LogoIcon;

src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap

@@ -9,16 +9,15 @@ exports[`CheckoutPage matches snapshot 1`] = `
     <NamedLink
       name="LandingPage"
     >
-      <LogoIcon
-        alt="Logo"
+      <Logo
         className={null}
-        isMobile={true}
+        format="mobile"
         title="CheckoutPage.goToLandingPage"
       />
-      <LogoIcon
+      <Logo
         alt="CheckoutPage.goToLandingPage"
         className={null}
-        isMobile={false}
+        format="desktop"
       />
     </NamedLink>
   </div>