bufferapp/ui

File `style.ts` has 284 lines of code (exceeds 250 allowed). Consider refactoring.
/* eslint-disable no-confusing-arrow */
import style, { css } from 'styled-components'
import {
  grayDarker,
  blue,
  blueDark,
  blueDarker,
  blueLighter,
  white,
  grayDark,
  gray,
  grayDefault,
  boxShadow,
  grayLight,
  orangeDarker,
  redDark,
  redDarker,
  redLighter,
  orange as orangeColor,
} from '../style/colors'
import {
  fontFamily,
  fontSize,
  lineHeight,
  fontWeightMedium,
} from '../style/fonts'
import { borderRadius } from '../style/borders'
import { ButtonStyled } from './Button'
 
Similar blocks of code found in 2 locations. Consider refactoring.
export const ButtonWrapperBase = css`
  -webkit-appearance: none;
  align-items: center;
  background-color: ${white};
  border: 0;
  border-radius: ${borderRadius};
  box-sizing: border-box;
  color: ${grayDefault};
  cursor: pointer;
  display: inline-block;
  justify-content: flex-start;
  flex: 0 0 auto;
  font-family: ${fontFamily};
  font-size: ${fontSize};
  font-weight: ${fontWeightMedium};
  line-height: ${lineHeight};
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  transition-property: background-color, border-color, color;
  transition-duration: 0.1s;
  transition-timing-function: ease-in;
  user-select: none;
 
  :active {
    top: ${(props) =>
      // @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'ThemeP... Remove this comment to see the full error message
      props.disabled ? '0px' : '1px'};
  }
  :focus {
    box-shadow: 0 0 0 3px ${boxShadow};
    outline: 0;
  }
  :hover {
    transition-property: background-color, border-color, color;
    transition-duration: 0.1s;
    transition-timing-function: ease-in;
  }
`
 
export const ButtonContainerBase = css`
  -webkit-appearance: none;
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  flex: 0 0 auto;
  user-select: none;
  width: 100%;
  height: 100%;
`
 
export const ButtonNestedBase = css`
  align-items: center;
  background: none transparent;
  border: 0;
  border-radius: ${borderRadius};
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  justify-content: flex-start;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
`
 
/* styles common to all buttons */
Similar blocks of code found in 2 locations. Consider refactoring.
export const ButtonBase = css`
  -webkit-appearance: none;
  align-items: center;
  background-color: ${white};
  border: 0;
  border-radius: ${borderRadius};
  color: ${grayDefault};
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  flex: 0 0 auto;
  font-family: ${fontFamily};
  font-size: ${fontSize};
  font-weight: ${fontWeightMedium};
  line-height: ${lineHeight};
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  transition-property: background-color, border-color, color;
  transition-duration: 0.1s;
  transition-timing-function: ease-in;
  user-select: none;
  :active {
    top: ${(props) =>
      // @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'ThemeP... Remove this comment to see the full error message
      props.disabled ? '0px' : '1px'};
  }
  :focus {
    box-shadow: 0 0 0 3px ${boxShadow};
  }
  :hover {
    transition-property: background-color, border-color, color;
    transition-duration: 0.1s;
    transition-timing-function: ease-in;
  }
`
 
/* theme variants */
export const primary = css`
  background-color: ${(props) =>
    // @ts-expect-error TS(2339) FIXME: Property '$loading' does not exist on type 'ThemeP... Remove this comment to see the full error message
    props.$loading ? blueDarker : blue};
  color: ${white};
  border: 1px solid
    ${(props) =>
      // @ts-expect-error TS(2339) FIXME: Property '$loading' does not exist on type 'ThemeP... Remove this comment to see the full error message
      props.$loading ? blueDarker : blue};
  :hover {
    background-color: ${blueDark};
    border-color: ${blueDark};
    color: ${white};
  }
`
 
export const secondary = css`
  background-color: ${white};
  color: ${grayDark};
  border: 1px solid ${gray};
 
  :hover {
    color: ${grayDarker};
    border-color: ${grayDark};
  }
 
  :focus {
    border-color: ${blue};
    color: ${grayDarker};
  }
`
 
export const danger = css`
  background-color: ${(props) =>
    // @ts-expect-error TS(2339) FIXME: Property '$loading' does not exist on type 'ThemeP... Remove this comment to see the full error message
    props.$loading ? redDarker : redDark};
  color: ${white};
  border-color: ${redDarker};
 
  :hover {
    background-color: ${redDarker};
  }
 
  :focus {
    box-shadow: 0 0 0 3px ${redLighter};
    background-color: ${redDark};
  }
`
 
export const link = css`
  background-color: transparent;
  color: ${blue};
  :hover {
    color: ${blueDark};
  }
`
export const text = css`
  background-color: transparent;
  :hover {
    color: ${grayDarker};
  }
`
 
export const orange = css`
  background-color: ${orangeDarker};
  color: ${white};
  border: 1px solid ${orangeDarker};
  :hover {
    background-color: ${orangeColor};
    border-color: ${orangeColor};
    color: ${white};
  }
`
 
/* size variants */
export const small = css`
  padding-left: 8px;
  padding-right: 8px;
  height: 32px;
`
export const medium = css`
  padding-right: 16px;
  padding-left: 16px;
  height: 40px;
`
export const large = css`
  padding-right: 16px;
  padding-left: 16px;
  height: 48px;
`
 
const Sizes = {
  small,
  medium,
  large,
}
 
/* state variants */
export const secondaryDisabled = css`
  cursor: not-allowed;
  border: 1px solid ${grayLight};
  color: ${gray};
`
export const Disabled = secondaryDisabled
 
export const primaryDisabled = css`
  background-color: #c6cbe4;
  cursor: not-allowed;
  border: 1px solid #c6cbe4;
  color: ${white};
`
 
export const disabled = css`
  cursor: not-allowed;
`
 
export const fullWidth = css`
  width: 100%;
  justify-content: center;
`
 
// @ts-expect-error TS(7006) FIXME: Parameter 'isDisabled' implicitly has an 'any' typ... Remove this comment to see the full error message
const getBackgroundColor = (isDisabled, type) => {
  if (isDisabled) {
    return grayLight
  }
  return type === 'primary' ? blueLighter : gray
}
 
export const ButtonSelect = style.div`
  :before {
    background-color: ${(props) =>
      // @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'Themed... Remove this comment to see the full error message
      getBackgroundColor(props.disabled, props.type)};
    color: ${(props): string => (props.    
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'Themed... Remove this comment to see the full error message
disabled ? gray : blueLighter)};
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
  }
 
  ${(props) =>
    // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
    Sizes[props.size] || Sizes.medium};
  cursor: ${(props): string => (props.  
// @ts-expect-error TS(2339) FIXME: Property 'disabled' does not exist on type 'Themed... Remove this comment to see the full error message
disabled ? 'not-allowed' : 'inherit')};
  align-items: center;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  ${(props): string =>
    // @ts-expect-error TS(2339) FIXME: Property 'size' does not exist on type 'ThemedStyl... Remove this comment to see the full error message
    props.size === 'small' ? 'padding: 0 6px' : 'padding 0 10px'};
  position: relative;
  width: 100%;
 
  ${ButtonStyled}:hover & {
    background-color: ${blueDark};
    color: ${white};
  }
  ${ButtonStyled}:focus & {
    border-color: ${blue};
      color: ${grayDarker};
  }
`
 
export const ButtonArrow = style.div`
  padding-left: 5px;
  display: flex;
  margin-right: -4px;
  ${(props): string => props.  
// @ts-expect-error TS(2339) FIXME: Property 'textToLeft' does not exist on type 'Them... Remove this comment to see the full error message
textToLeft && 'margin-left: auto;'}
`
 
export const ButtonLabel = style.div`
  margin-left: ${(props): string =>
    // @ts-expect-error TS(2339) FIXME: Property 'hasIcon' does not exist on type 'ThemedS... Remove this comment to see the full error message
    props.hasIcon && !props.iconEnd ? '5px' : '0px'};
  margin-right: ${(props): string =>
    // @ts-expect-error TS(2339) FIXME: Property 'hasIcon' does not exist on type 'ThemedS... Remove this comment to see the full error message
    props.hasIcon && props.iconEnd ? '5px' : '0px'};
`