pdf-reader-web/components/Button/styled.ts

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

const align: { [index: string]: string } = {
  left: 'flex-start',
  center: 'center',
  right: 'flex-end',
};

const staticStyles = css`
  border-width: 0;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.2rem;
  font-style: normal;
  transition: all 0.3s linear;
  cursor: pointer;
  outline: none;
  padding: 5px 20px;
  min-width: 80px;
`;

const btnTheme: { [index: string]: any } = {
  default: css`
    color: black;
    background-color: transparent;
    border: 1.5px solid transparent;

    &:hover {
      background-color: ${({ theme }) => theme.colors['soft-blue']};
    }
  `,
  primary: css`
    color: white;
    background-color: ${({ theme }) => theme.colors.primary};
    border: 1.5px solid ${({ theme }) => theme.colors.primary};

    &:hover {
      background-color: ${({ theme }) => theme.colors['french-blue']};
      border: 1.5px solid ${({ theme }) => theme.colors['french-blue']};
    }
  `,
  'primary-hollow': css`
    color: black;
    background-color: white;
    border: 1.5px solid ${({ theme }) => theme.colors.primary};

    &:hover {
      background-color: ${({ theme }) => theme.colors['primary-light']};
    }
  `,
  'danger-hollow': css`
    color: ${({ theme }) => theme.colors.danger};
    background-color: white;
    border: 1.5px solid ${({ theme }) => theme.colors.danger};

    &:hover {
      background-color: white;
    }
  `,
  'default-hollow': css`
    color: black;
    background-color: white;
    border: 1.5px solid ${({ theme }) => theme.colors.black56};

    &:hover {
      color: white;
      background-color: ${({ theme }) => theme.colors.black38};
    }
  `,
  link: css`
    color: ${({ theme }) => theme.colors.primary};
    background-color: transparent;
    border: none;
    text-decoration: underline;
    padding: 5px 0;
  `,
  'danger-link': css`
    color: ${({ theme }) => theme.colors.error};
    background-color: transparent;
    border: none;
    text-decoration: underline;
    padding: 5px 0;
  `,
  dark: css`
    color: #ffffff;
    background-color: #000000;
    border: 1.5px solid #000000;

    &:hover {
      background-color: #333333;
      border: 1.5px solid #333333;
    }
  `,
};

const activeTheme: { [index: string]: any } = {
  default: css`
    background-color: ${({ theme }) => theme.colors['soft-blue']};
  `,
  primary: css`
    background-color: ${({ theme }) => theme.colors['french-blue']};
    border: 1.5px solid ${({ theme }) => theme.colors['french-blue']};
  `,
  'primary-hollow': css`
    background-color: ${({ theme }) => theme.colors['primary-light']};
  `,
  'default-hollow': css`
    background-color: ${({ theme }) => theme.colors.black38};
  `,
};

export const NormalButton = styled('div')<{
  appearance?: string;
  shouldFitContainer?: boolean;
  align?: string;
  isActive?: boolean;
}>`
  ${staticStyles}
  ${props => btnTheme[props.appearance || 'default']};
  ${props =>
    props.shouldFitContainer
      ? css`
          width: 100%;
        `
      : null}
  ${props =>
    props.isActive
      ? activeTheme[props.appearance || 'default']
      : null}

  display: inline-flex;
  justify-content: ${props => align[props.align || 'center']};
  align-items: center;
`;

export const DisableButton = styled.button`
  ${staticStyles}

  color: ${({ theme }) => theme.colors.black38};
  background-color: #eeeff3;
  cursor: not-allowed;
`;