Adding some styling

Now let’s add some styling to the components. We are using glamor for styling. You can read the official documentation to find out more.

Create a new file called style.js in the component directory at <theme-root>/pages/Product/components/Header/components/Loyalty and populate it with:

<theme-root>/pages/Product/components/Header/components/Loyalty/style.js
import { css } from 'glamor';
import colors from 'Styles/colors';

const container = css({
  alignItems: 'center',
  display: 'flex',
  fontSize: 14,
  marginTop: 12,
});

const icon = css({
  fill: colors.accent,
  height: 16,
  marginRight: 4,
  width: 16,
});

export default {
  container,
  icon,
};

Now we can apply those styles to our component in <theme-root>/pages/Product/components/Header/components/Loyalty/index.jsx:

<theme-root>/pages/Product/components/Header/components/Loyalty/index.jsx
import React from 'react';
import PropTypes from 'prop-types';
import LoyaltyIcon from 'Components/icons/LoyaltyIcon';
import styles from './style';

const Loyalty = ({ points }) => (
  points ? (
    <div className={styles.container}>
      <LoyaltyIcon className={styles.icon} />
      Points: {points}
    </div>
  ) : null
);

Loyalty.propTypes = {
  points: PropTypes.number,
};

Loyalty.defaultProps = {
  points: 0,
};

export default Loyalty;