sendorderstyle

import styled from 'styled-components/native';

import Modal from 'react-native-modal';
import { colors } from '~/styles/themes';

import Button from '~/components/Button';
import { responsiveSize } from '~/styles/themes/responsive';

export const PaymentStatus = styled.View`
  display: flex;
  justify-content: center;
  align-items: center;
  color: ${colors.primary};
  width: 100%;
  font-weight: 700;
  background-color: #18d95a;
  height: ${responsiveSize(44)}px;
`;
export const PaymentText = styled.Text`
  font-size: ${responsiveSize(16)}px;
  color: ${colors.primary};
  font-weight: 700;
`;
export const Container = styled.View`
  display: flex;
  flex: 1;
  align-items: center;
  padding-left: ${responsiveSize(15)}px;
  padding-right: ${responsiveSize(15)}px;
`;
export const StyledButton = styled(Button)`
  display: flex;
  width: 100%;
  background-color: ${props => (props.doc ? colors.obscure : colors.secondary)};
`;
export const SubmitButton = styled(Button)`
  display: flex;
  align-self: flex-end;
  width: 100%;
  background: ${props =>
    props.disable ? 'rgba(226, 34, 39, 0.4)' : colors.secondary};
`;
export const Title = styled.Text`
margin-top: ${responsiveSize(30)}px;
margin-bottom: ${responsiveSize(30)}px
  font-size: ${responsiveSize(22)}px;
  text-align: center;
  font-weight: 700;
`;
export const Library = styled(Modal)`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  width: 90%;
  background-color: ${colors.secondary};
  padding: ${responsiveSize(20)}px;
`;
export const Option = styled.View`
  width: 100%;
  border-bottom-color: ${colors.primary};
  border-bottom-width: 2;
  margin-bottom: ${responsiveSize(20)}px;
  min-height: ${responsiveSize(40)}px;
`;
export const OptionTitle = styled.Text`
  font-size: ${responsiveSize(18)}px;
  color: ${colors.primary};
`;
export const LibraryTitle = styled.Text`
  font-weight: 700;
  font-size: ${responsiveSize(20)}px;
  margin-bottom: ${responsiveSize(25)}px;
  color: ${colors.primary};
`;

export const Document = styled(Modal)`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
  width: 90%;
  background-color: ${colors.primary};
  padding: ${responsiveSize(20)}px;
`;

export const CloseButton = styled.TouchableOpacity`
  display: flex;
  justify-content: center;
  align-items: center;
  width: ${responsiveSize(35)}px;
  height: ${responsiveSize(35)}px;
  background-color: ${props => (props.lib ? colors.primary : colors.secondary)};
  align-self: flex-end;
  z-index: 3;
`;
export const ButtonText = styled.Text`
  color: ${props => (props.lib ? colors.secondary : colors.primary)};
  font-weight: 700;
  font-size: ${responsiveSize(18)}px;
`;