remake app ohome setup /notworking

2021-10-24 22:18:31 +02:00
parent 4568076445
commit 55c6704d1b
76 changed files with 22173 additions and 749 deletions
--- a/src/pages/recipes/styles/addRecipe.js
+++ b/src/pages/recipes/styles/addRecipe.js
@@ -0,0 +1,95 @@
+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};
+`