Wolf/ohome-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

recipes visible

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-02 15:43:43 +01:00
parent ad4778de3d
commit ad391b69f6
19 changed files with 252 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/recipes/styles/recipe.js
View File

@@ -5,6 +5,14 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
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)`
@@ -15,27 +23,30 @@ export const InstructionWrapper = styled(View)`
align-items: center;
border-bottom-color: ${({ theme }) => theme.colors.dp02};
border-bottom-width: 3px;
#instruction{
margin-left: 7px;
color: ${({theme}) => theme.colors.textW4};
}
`
export const InstructionNumber = styled(Text)`
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;
height: 34px;
width: 34px;
border-radius: 17px;
`
export const StyledImage = styled(Image)`
margin-top: -70px;
height: 200px;
width: 100%;
`
@@ -43,25 +54,24 @@ export const TextPrep = styled(Text)`
text-align: right;
width: 70px;
font-weight: bold;
font-size: ${({theme}) => theme.fontSize.fontS};
line-height: 1.2;
font-size: ${({theme}) => theme.fontSizes.fontM}px;
color: ${({theme}) => theme.colors.textW4};
`
export const TextTime = styled(Text)`
margin-bottom: -3px;
width: 70px;
font-size: ${({theme}) => theme.fontSize.fontS};
font-weight: bold;
line-height: 1.2;
font-size: ${({theme}) => theme.fontSizes.fontM}px;
color: ${({ theme }) => theme.colors.primary};
`
export const TextMinutes = styled(Text)`
width: 70px;
font-size: ${({theme}) => theme.fontSize.fontS};
font-weight: normal;
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;
@@ -69,14 +79,16 @@ export const WrapperServings = styled(View)`
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={theme.fontSize.fontL} />
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="food-turkey" color={theme.colors.primary} size={theme.fontSize.fontL} />
const Meal = () => <MaterialCommunityIcons name="silverware-clean" color={theme.colors.primary} size={40} />
export const IconMeal = styled(Meal)`
margin: -20px 0px -16px 0px;