Leveraging the power of props and css helper in styled-components

Button.js

/* src/components/Button.js */

import styled, { css } from 'styled-components';

import { getFontSize, getColor } from '../utils/theme';

const Button = styled.button`
  font-size: ${getFontSize('smFont')};
  color: ${getColor('primary')};
  background: ${getColor('light')};
  border-radius: 5px;
  width: 150px;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  align-self: center;
  height: 30px;
  border: solid 1px ${getColor('primary')};

  ${props =>
    props.floating &&
    css`
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%, 0);
    `};
`;

export default Button;

User.js

/* src/components/User.js */

.
.
.

/* line 16 - 30 */

const maleBorder = props =>
  props.gender === 'male' ? `solid 4px ${props.theme.color.primary}` : '0';
const femaleBorder = props =>
  props.gender === 'female' ? `solid 4px ${props.theme.color.primary}` : '0';

const Avatar = styled.img`
  border-radius: 50%;
  width: 60px;
  height: 60px;
  position: relative;
  border-bottom: ${femaleBorder};
  border-left: ${femaleBorder};
  border-right: ${maleBorder};
  border-top: ${maleBorder};
`;

.
.
.