import { SCREEN_WIDTH, colors } from '../styleVars';

const styles = {
  logoContainerStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  logoStyle: {
    marginTop: 20,
    width: 120,
    height: 120,
    borderWidth: 1,
    borderRadius: 60
  },
  buttonStyle: {
    width: SCREEN_WIDTH * 0.9,
    marginTop: 0,
    marginBottom: 0,
    borderRadius: 5,
    backgroundColor: colors.buttonBlue
  },
  inputTextStyle: {
    color: colors.black
  },
  instructions: {
    fontSize: 16,
    textAlign: 'left',
    color: colors.darkGrey,
    marginBottom: 5,
    marginHorizontal: 10
  },
  freeTextStyle: {
    left: 20,
    marginTop: 10,
    fontSize: 18
  },
  navigationHeaderRightStyle: {
    color: colors.middleGrey,
    marginRight: 5
  },
  parentContentScrollViewStyle: {
    flexGrow: 1,
    backgroundColor: colors.white
  },
  buttonContainerStyle: {
    flex: 2,
    marginLeft: 30,
    flexDirection: 'column',
    justifyContent: 'center'
  },
  photoButtonsOrTextStyle: {
    fontSize: 22,
    color: colors.lightGrey
  },
  avatarStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FAFAFA'
  },
  noAvatarStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10
  },
  textButtonStyle: {
    fontSize: 20,
    color: colors.labelBlue,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 0
  },
  labelStyle: {
    color: colors.labelBlue,
    marginTop: 5,
    marginLeft: 0
  },
  chevronIconStyle: {
    name: 'chevron-right',
    color: colors.white,
    size: 30,
    style: { marginLeft: 0 }
  },
  colors
};

export default styles;
