import React from 'react' ; import { emphasize } from '@material-ui/core' ; import BaseButton , { BaseButtonProps } from '@src/modules/shared/BaseButton' ; import { CSSProperties } from '@material-ui/core/styles/withStyles' ; import { Maybe } from '@src/generated/graphql' ; import AlertError from '@src/modules/shared/AlertError' ; import styled from '@emotion/styled' ; import { Bold } from '@src/modules/styling/StylingUtils' ; import { shouldForwardProp } from '../shared/SharedUtils' ; interface StyleProps { backgroundColor : NonNullable < CSSProperties [ 'backgroundColor' ] > ; fontColor : CSSProperties [ 'color' ] ; } const StyledButton = styled ( BaseButton , { shouldForwardProp : shouldForwardProp < StyleProps > ( [ 'backgroundColor' , 'fontColor' , ] ) , } ) < StyleProps > `
  color: ${ ( { fontColor } ) => fontColor };
  background-color: ${ ( { backgroundColor } ) => backgroundColor };
  &:hover {
    background-color: ${ ( { backgroundColor } ) => emphasize ( backgroundColor , 0.1 ) };
  }
` ; const ButtonText = styled . span `
  width: 100%;
` ; export type SocialButtonBaseProps = StyleProps & React . PropsWithChildren < { icon : React . ReactNode ; disabled ? : BaseButtonProps [ 'disabled' ] ; loading ? : BaseButtonProps [ 'loading' ] ; error ? : Maybe < Error > ; onClick : BaseButtonProps [ 'onClick' ] ; } > ; function SocialButtonBase ( { children , icon , backgroundColor , fontColor , loading , disabled , error , onClick , } ) { return ( < div > < AlertError error = { error } / > < StyledButton fullWidth loading = { loading } disabled = { disabled } onClick = { onClick } startIcon = { icon } fontColor = { fontColor } backgroundColor = { backgroundColor } variant = "outlined" > < ButtonText > < Bold > { children } < /Bold> < /ButtonText> < /StyledButton> < /div>); } export default SocialButtonBase ;