95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
import { Image, Text, TextInput, View } from "react-native"
|
|
import styled from 'styled-components'
|
|
import { GiHotMeal, GiMeal, GiCookingPot } from 'react-icons/gi'
|
|
import { HiCheck } from 'react-icons/hi'
|
|
import { BiImageAdd } from 'react-icons/bi'
|
|
|
|
export const Wrapper = styled(View)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
@media ${({ theme }) => theme.mediaQueries.below768}{
|
|
align-items: flex-start;
|
|
}
|
|
`
|
|
export const WrapperRecipe = styled(View)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start;
|
|
width: 500px;
|
|
padding: 10px;
|
|
#row{
|
|
margin-top: 5px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
align-items: flex-end;
|
|
}
|
|
#column{
|
|
margin-left: 5px;
|
|
margin-bottom: -3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
@media ${({ theme }) => theme.mediaQueries.below768}{
|
|
width: 100%;
|
|
}
|
|
`
|
|
export const Input = styled(TextInput)`
|
|
flex:1;
|
|
margin-left: 5px;
|
|
|
|
color: ${props => props.theme.colors.textW1};
|
|
border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
|
|
border-bottom-width: 1px;
|
|
font-size: ${({theme}) => theme.fontSize.fontS};
|
|
|
|
width: 100%;
|
|
`
|
|
|
|
export const InputInstructions = styled(Text)`
|
|
margin-top: 30px;
|
|
padding: 5px;
|
|
|
|
color: ${props => props.theme.colors.textW1};
|
|
border-top: solid ${props => props.theme.colors.primary + 'aa'} 1px;
|
|
border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
|
|
border-bottom-width: 1px;
|
|
font-size: ${({theme}) => theme.fontSize.fontS};
|
|
min-height: 600px;
|
|
width: 100%;
|
|
`
|
|
export const StyledImage = styled(Image)`
|
|
object-fit: cover;
|
|
width: 100px;
|
|
height: 100px;
|
|
`
|
|
export const IconRecipe = styled(GiHotMeal)`
|
|
color: ${({ theme }) => theme.colors.primaryVar};
|
|
font-size: ${({theme}) => theme.fontSize.fontM};
|
|
`
|
|
export const IconPot = styled(GiCookingPot)`
|
|
color: ${({ theme }) => theme.colors.primaryVar};
|
|
font-size: ${({theme}) => theme.fontSize.fontM};
|
|
`
|
|
export const IconMeal = styled(GiMeal)`
|
|
margin-left: 5px;
|
|
color: ${({ theme }) => theme.colors.primaryVar};
|
|
font-size: ${({theme}) => theme.fontSize.fontM};
|
|
`
|
|
export const IconImage = styled(BiImageAdd)`
|
|
color: ${({ theme }) => theme.colors.primaryVar};
|
|
font-size: ${({theme}) => theme.fontSize.fontM};
|
|
`
|
|
export const IconCheck = styled(HiCheck)`
|
|
margin-right: 10px;
|
|
color: ${({ theme }) => theme.colors.textB3};
|
|
background-color: ${({ theme }) => theme.colors.primary + 'cc'};
|
|
border-radius: 30px;
|
|
min-width: 40px;
|
|
height: 40px;
|
|
font-size: ${({theme}) => theme.fontSize.fontL};
|
|
` |