button_component.js

// This Button component uses a library called styled components (CSS in JS) which helps write declarative components for your css.
// This allow for extremley flexible user interfaces because you can combine css and JS logic to write flexible components.


// Usage
 <Button inverted disabled inline>Join Now</Button>
 

// implementation
import styled, { css } from 'styled-components'
import React from 'react'
import Loading from './Loading'
import { darken } from 'polished'

const Button = styled.button`
  border: none;
  background-color: ${props => props.theme.colors.secondary};
  width: 100%;
  padding: 3%;
  margin: 5px 0;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 3px;
  transform: scale(0.98);
  transition: 0.3s all ease;
  &:hover {
    cursor: pointer;
    transform: scale(1);
    background-color: ${props => darken(0.2, props.theme.colors.secondary)};
  }
  ${props =>
    props.inline &&
    css`
      display: inline;
      width: auto;
      padding: 10px;
      margin-bottom: 3%;
    `};
  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
      background-color: gray;
      &:hover {
        transform: scale(1);
        background-color: gray;
      }
    `};
  ${props =>
    props.inverted &&
    css`
      background: transparent;
      color: ${props => props.theme.colors.secondary};
      margin-bottom: 0%;
      &:hover {
        transform: scale(1);
         background: transparent;
         text-decoration: underline;

    `};
  ${props =>
    props.right &&
    css`
      justify-self: right;
    `};

  ${props =>
    props.delete &&
    css`
      background-color: ${props => props.theme.colors.warning};
      &:hover {
        background-color: ${props => darken(0.2, props.theme.colors.warning)};
      }
    `};

  ${props =>
    props.white &&
    css`
      background: #fff;
      color: #333;
      box-shadow: rgba(50, 50, 93, 0.1) 0px 0px 0px 1px,
        rgba(50, 50, 93, 0.1) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.07) 0px 1px 1.5px 0px,
        rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
      &:hover {
        background-color: #f6f7fd;
      }
    `};
`

export default props => {
  return (
    <Button {...props}>{props.loading ? <Loading color="#fff" /> : props.children}</Button>
  )
}