105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
import { Image, Text, View } from "react-native"
|
|
import styled from 'styled-components'
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import theme from "../../../styles/theme";
|
|
|
|
export const Title = styled(Text)`
|
|
color: ${({theme}) => theme.colors.textW1};
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
`
|
|
export const SubTitle = styled(Text)`
|
|
color: ${({theme}) => theme.colors.textW2};
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
margin-top: 10px;
|
|
`
|
|
export const InstructionWrapper = styled(View)`
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
padding: 5px 0px;
|
|
align-items: center;
|
|
border-bottom-color: ${({ theme }) => theme.colors.dp02};
|
|
border-bottom-width: 3px;
|
|
`
|
|
export const InstructionText= styled(Text)`
|
|
width: 80%;
|
|
font-size: 18px;
|
|
margin-left: 7px;
|
|
color: ${({theme}) => theme.colors.textW4};
|
|
`
|
|
export const WrapperNumber = styled(View)`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background-color: ${({theme}) => theme.colors.primary + 'dd'};
|
|
height: 36px;
|
|
width: 36px;
|
|
border-radius: 18px;
|
|
`
|
|
export const InstructionNumber = styled(Text)`
|
|
color: ${({theme}) => theme.colors.textB1};
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
`
|
|
|
|
export const StyledImage = styled(Image)`
|
|
margin-top: -110px;
|
|
height: 200px;
|
|
width: 100%;
|
|
`
|
|
export const TextPrep = styled(Text)`
|
|
text-align: right;
|
|
width: 70px;
|
|
font-weight: bold;
|
|
font-size: ${({theme}) => theme.fontSizes.fontM}px;
|
|
color: ${({theme}) => theme.colors.textW4};
|
|
`
|
|
export const TextTime = styled(Text)`
|
|
width: 70px;
|
|
font-weight: bold;
|
|
font-size: ${({theme}) => theme.fontSizes.fontM}px;
|
|
color: ${({ theme }) => theme.colors.primary};
|
|
`
|
|
export const TextMinutes = styled(Text)`
|
|
width: 70px;
|
|
font-size: ${({theme}) => theme.fontSizes.fontS}px;
|
|
color: ${({ theme }) => theme.colors.primary};
|
|
`
|
|
export const WrapperServings = styled(View)`
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 2%;
|
|
top: 2px;
|
|
`
|
|
export const TextServings = styled(Text)`
|
|
margin-top: -5px;
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
color: ${({theme}) => theme.colors.textW4};
|
|
`
|
|
const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={40} />
|
|
|
|
export const IconPotLarge = styled(PotLarge)`
|
|
margin: -20px 0px -16px 0px;
|
|
`
|
|
|
|
const Meal = () => <MaterialCommunityIcons name="silverware-clean" color={theme.colors.primary} size={40} />
|
|
|
|
export const IconMeal = styled(Meal)`
|
|
margin: -20px 0px -16px 0px;
|
|
`
|
|
|
|
|
|
export const Hr = styled(View)`
|
|
width: 100%;
|
|
margin: 4px 0px;
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
background-color: ${({ theme }) => theme.colors.dp08};
|
|
` |