From e3c05554521db411f1abb646f229091278e1996b Mon Sep 17 00:00:00 2001 From: "wolfmoyaers@gmail.com" Date: Sun, 31 Oct 2021 20:26:57 +0100 Subject: [PATCH] icons --- package.json | 2 +- .../GroceryList/groceries/styles/buttons.js | 34 ++++------ .../GroceryList/groceries/styles/list.js | 35 +++++------ .../GroceryList/products/styles/buttons.js | 46 ++++---------- .../products/styles/listedProduct.js | 7 +-- src/components/GroceryList/styles/tabMenu.js | 23 ++++--- src/components/Home/styles/groceryCard.js | 18 +++--- .../modals/groceries/styles/addItem.js | 29 +++------ .../modals/groceries/styles/addProduct.js | 29 +++------ .../modals/groceries/styles/edit.js | 1 - .../modals/recipes/ModalAddIngredients.js | 14 ++--- src/components/modals/styles/modal.js | 17 ++--- .../recipes/addRecipe/styles/buttons.js | 34 +++++----- .../recipes/addRecipe/styles/ingredient.js | 17 ++--- src/components/recipes/styles/recipeCard.js | 1 - src/pages/recipes/styles/addRecipe.js | 37 ++++------- src/pages/recipes/styles/recipe.js | 17 ++--- src/pages/styles/HomePage.js | 7 +-- src/pages/styles/page.js | 9 +-- src/styles/componentBlueprints.js | 29 ++++----- yarn.lock | 62 +++++++++++++++++-- 21 files changed, 212 insertions(+), 256 deletions(-) diff --git a/package.json b/package.json index becf0b6..260d484 100644 --- a/package.json +++ b/package.json @@ -18,13 +18,13 @@ "expo-status-bar": "~1.1.0", "react": "17.0.1", "react-dom": "17.0.1", - "react-icons": "^4.3.1", "react-native": "0.64.2", "react-native-gesture-handler": "~1.10.2", "react-native-modal": "^13.0.0", "react-native-reanimated": "~2.2.0", "react-native-safe-area-context": "3.3.2", "react-native-screens": "~3.8.0", + "react-native-vector-icons": "^9.0.0", "react-native-web": "0.17.1", "react-redux": "^7.2.5", "styled-components": "^5.3.3" diff --git a/src/components/GroceryList/groceries/styles/buttons.js b/src/components/GroceryList/groceries/styles/buttons.js index 67d31df..45da615 100644 --- a/src/components/GroceryList/groceries/styles/buttons.js +++ b/src/components/GroceryList/groceries/styles/buttons.js @@ -1,10 +1,9 @@ import styled, { css } from 'styled-components' //dependencies -import { MdAddShoppingCart, MdDeleteForever } from 'react-icons/md' -import { FiMenu, FiCheckSquare } from 'react-icons/fi' -import { CgFileAdd } from 'react-icons/cg' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; //blueprints import { Button } from '../../../../styles/componentBlueprints' +import theme from '../../../../styles/theme'; export const WrapperButtons = styled(Button)` @@ -52,23 +51,12 @@ export const WrapperSelect = styled(Button)` bottom:70px; `}; ` -export const MenuIcon = styled(FiMenu)` - color: ${({ theme }) => theme.colors.textB2}; - font-size: 47px; -` -export const PlusIcon = styled(MdAddShoppingCart)` -color: ${({ theme }) => theme.colors.textB2}; - font-size: 45px; -` -export const RemoveIcon = styled(MdDeleteForever)` -color: ${({ theme }) => theme.colors.textB2}; - font-size: 45px; -` -export const CheckIcon = styled(FiCheckSquare)` - color: ${({ theme }) => theme.colors.textB2}; - font-size: 40px; -` -export const ListIcon = styled(CgFileAdd)` - color: ${({ theme }) => theme.colors.textB2}; - font-size: 40px; -` \ No newline at end of file +export const MenuIcon = () => + +export const PlusIcon = () => + +export const RemoveIcon = () => + +export const CheckIcon = () => + +export const ListIcon = () => \ No newline at end of file diff --git a/src/components/GroceryList/groceries/styles/list.js b/src/components/GroceryList/groceries/styles/list.js index bb60a80..3233ab9 100644 --- a/src/components/GroceryList/groceries/styles/list.js +++ b/src/components/GroceryList/groceries/styles/list.js @@ -1,8 +1,7 @@ import { Text, TouchableOpacity, View } from 'react-native' import styled, { css } from 'styled-components' -import { MdClose } from 'react-icons/md' -import { BiEditAlt } from 'react-icons/bi' -import { IoChevronDown } from 'react-icons/io5' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from '../../../../styles/theme'; export const WrapperGroceryList = styled(View)` width:100%; @@ -60,22 +59,22 @@ export const ListSubtitle = styled(Text)` font-size: 17px; ` -export const ButtonRemoveList = styled(MdClose)` - color: ${({ theme }) => theme.colors.textW5}; - height: 28px; - width: 28px; - margin: 4px 10px 4px 0px; -` -export const ButtonEditList = styled(BiEditAlt)` - color: ${({ theme }) => theme.colors.textW5}; - height: 28px; - width: 28px; - margin: 4px 10px 4px 0px; -` -export const IconArrowDown = styled(IoChevronDown)` - transform: rotate(${props => props.visible === 'true' ? css`-180deg` : css`0deg`}); +const Close = () => - color: ${({ theme }) => theme.colors.textW5}; +export const ButtonRemoveList = styled(Close)` + margin: 4px 10px 4px 0px; +` + +const Edit = () => + +export const ButtonEditList = styled(Edit)` + margin: 4px 10px 4px 0px; +` + +const ArrowDown = () => + +export const IconArrowDown = styled(ArrowDown)` + transform: rotate(${props => props.visible === 'true' ? css`-180deg` : css`0deg`}); height: 28px; width: 28px; margin: 4px; diff --git a/src/components/GroceryList/products/styles/buttons.js b/src/components/GroceryList/products/styles/buttons.js index c112392..f36f783 100644 --- a/src/components/GroceryList/products/styles/buttons.js +++ b/src/components/GroceryList/products/styles/buttons.js @@ -1,10 +1,10 @@ import styled from 'styled-components' //dependencies -import { FiPlus, FiMenu , FiUploadCloud, FiDownloadCloud } from 'react-icons/fi' -import { MdDeleteForever } from 'react-icons/md' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; //blueprints import { Button } from '../../../../styles/componentBlueprints' import { TextInput } from 'react-native' +import theme from '../../../../styles/theme'; export const WrapperButtons = styled(Button)` position:absolute; @@ -48,36 +48,12 @@ export const WrapperDownload = styled(Button)` ` -export const MenuIcon = styled(FiMenu)` - color: ${({theme})=> theme.colors.textB2}; - font-size: 60px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - font-size: 50px; - } -` -export const PlusIcon = styled(FiPlus)` - color: ${({theme})=> theme.colors.textB2}; - font-size: 60px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - font-size: 60px; - } -` -export const UploadIcon = styled(FiUploadCloud)` - font-size: 50px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - font-size: 40px; - } -` -export const DownloadIcon = styled(FiDownloadCloud)` - font-size: 50px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - font-size: 40px; - } -` -export const RemoveIcon = styled(MdDeleteForever)` - color: ${({theme})=> theme.colors.textB2}; - font-size: 60px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - font-size: 45px; - } -` \ No newline at end of file +export const MenuIcon = () => + +export const PlusIcon = () => + +export const UploadIcon = () => + +export const DownloadIcon = () => + +export const RemoveIcon = () => \ No newline at end of file diff --git a/src/components/GroceryList/products/styles/listedProduct.js b/src/components/GroceryList/products/styles/listedProduct.js index f122e88..08dcee6 100644 --- a/src/components/GroceryList/products/styles/listedProduct.js +++ b/src/components/GroceryList/products/styles/listedProduct.js @@ -1,7 +1,7 @@ import { View, Text, Image, TouchableOpacity } from 'react-native' import styled, { css } from 'styled-components' //dependencies -import { HiCheck } from 'react-icons/hi' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; //functions import LightenDarken from '../../../../functions' @@ -75,7 +75,4 @@ export const StyledImage = styled(Image)` ` -export const IconCheck = styled(HiCheck)` - font-size: 16px; - color: ${({ theme }) => theme.colors.dp00}; -` \ No newline at end of file +export const IconCheck = () => \ No newline at end of file diff --git a/src/components/GroceryList/styles/tabMenu.js b/src/components/GroceryList/styles/tabMenu.js index 983f996..d8b9e66 100644 --- a/src/components/GroceryList/styles/tabMenu.js +++ b/src/components/GroceryList/styles/tabMenu.js @@ -1,7 +1,7 @@ import { TouchableOpacity, View } from 'react-native' import styled, { css } from 'styled-components' -import { RiShoppingBasketLine } from 'react-icons/ri' -import { FaAppleAlt } from 'react-icons/fa' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from '../../../styles/theme'; const iconSize = '2.0px' @@ -19,7 +19,6 @@ export const Wrapper = styled(View)` flex-direction: row; justify-content: space-evenly; align-items: center; - /* background-color: #1A2C31cc; */ background-color: ${({ theme }) => theme.colors.dp00 +'88'}; width: 250px; height: 60px; @@ -55,12 +54,15 @@ export const WrapperGroceries = styled(WrapperIcon)` flex:1; height: 65px; ` -export const IconGroceries = styled(RiShoppingBasketLine)` + +const Groceries = () => + +export const IconGroceries = styled(Groceries)` font-size: ${iconSize}; ${props => props.currenttab === 'Groceries' && css` - color: ${props => props.theme.colors.textW0}; - font-size: ${iconSizeSelected};` + color: ${props => props.theme.colors.textW0}; + font-size: ${iconSizeSelected};` }; ` //products @@ -69,13 +71,16 @@ export const WrapperProducts = styled(WrapperIcon)` height: 65px; ` -export const IconProducts = styled(FaAppleAlt)` + +const Products = () => + +export const IconProducts = styled(Products)` font-size: 16px; margin-top:-5px; ${props => props.currenttab === 'Products' && css` - color: ${props => props.theme.colors.textW0}; - font-size: 16px;` + color: ${props => props.theme.colors.textW0}; + font-size: 16px;` }; ` diff --git a/src/components/Home/styles/groceryCard.js b/src/components/Home/styles/groceryCard.js index 1432766..23e6ef4 100644 --- a/src/components/Home/styles/groceryCard.js +++ b/src/components/Home/styles/groceryCard.js @@ -1,7 +1,8 @@ +import React from 'react' import { Text, TouchableOpacity, View } from 'react-native' import styled from 'styled-components' -import { FiCoffee } from 'react-icons/fi' -import { GiHotMeal } from 'react-icons/gi' +import theme from '../../../styles/theme' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; export const WrapperLink = styled(View)` position: absolute; @@ -30,13 +31,14 @@ export const TextCard = styled(Text)` color: ${props => props.theme.colors.textW2}; background-color: #0003; ` -export const IconCoffee = styled(FiCoffee)` +const Coffee = () => + +export const IconCoffee = styled(Coffee)` margin-top: 15px; - color: ${({ theme }) => theme.colors.primaryVar}; - font-size: 50px; ` -export const IconRecipe = styled(GiHotMeal)` + +const Meal = () => + +export const IconRecipe = styled(Meal)` margin-top: 15px; - color: ${({ theme }) => theme.colors.primaryVar}; - font-size: 50px; ` \ No newline at end of file diff --git a/src/components/modals/groceries/styles/addItem.js b/src/components/modals/groceries/styles/addItem.js index ddc71a7..7fc640f 100644 --- a/src/components/modals/groceries/styles/addItem.js +++ b/src/components/modals/groceries/styles/addItem.js @@ -1,13 +1,10 @@ import styled from 'styled-components' -import { IoFastFood } from 'react-icons/io5' -import {AiOutlineFieldNumber} from 'react-icons/ai' -import {IoPersonCircleSharp} from 'react-icons/io5' -import {BiCommentAdd} from 'react-icons/bi' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { Image } from 'react-native' +import theme from '../../../../styles/theme'; export const StyledImage = styled(Image)` position: absolute; - resize-mode: contain; z-index:0; opacity: 0.1; width: 70%; @@ -18,20 +15,8 @@ export const StyledImage = styled(Image)` border-bottom-left-radius: 15px; border-bottom-right-radius: 100px; ` -const iconSize = '32px' -export const IconProduct = styled(IoFastFood)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` -export const IconAmount = styled(AiOutlineFieldNumber)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` -export const IconPerson = styled(IoPersonCircleSharp)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` -export const IconDetails = styled(BiCommentAdd)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` \ No newline at end of file + +export const IconProduct = () => +export const IconAmount = () => +export const IconPerson = () => +export const IconDetails = () => \ No newline at end of file diff --git a/src/components/modals/groceries/styles/addProduct.js b/src/components/modals/groceries/styles/addProduct.js index b52e94d..fbd87d3 100644 --- a/src/components/modals/groceries/styles/addProduct.js +++ b/src/components/modals/groceries/styles/addProduct.js @@ -1,32 +1,21 @@ import styled from 'styled-components' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -import { IoFastFood } from 'react-icons/io5' -import { BsTag } from 'react-icons/bs' -import { BiDollar ,BiLinkAlt} from 'react-icons/bi' import { Image } from 'react-native' +import theme from '../../../../styles/theme'; export const StyledImage = styled(Image)` position: absolute; - resize-mode: contain; width: 35%; height: 50%; right:0; border-radius: 15px; ` const iconSize = '32px' -export const IconProduct = styled(IoFastFood)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` -export const IconTag = styled(BsTag)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` -export const IconDollar = styled(BiDollar)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` -export const IconLink = styled(BiLinkAlt)` - font-size: ${iconSize}; - color: ${({theme})=>theme.colors.iconGrey}; -` \ No newline at end of file +export const IconProduct = () => + +export const IconTag = () => + +export const IconDollar = () => + +export const IconLink = () => \ No newline at end of file diff --git a/src/components/modals/groceries/styles/edit.js b/src/components/modals/groceries/styles/edit.js index 363ac5e..1b2539a 100644 --- a/src/components/modals/groceries/styles/edit.js +++ b/src/components/modals/groceries/styles/edit.js @@ -33,7 +33,6 @@ export const TextTag = styled(Text)` margin: 0px 5px; ` export const StyledImage = styled(Image)` - resize-mode: contain; width: 150px; height: 150px; margin-top:-50px; diff --git a/src/components/modals/recipes/ModalAddIngredients.js b/src/components/modals/recipes/ModalAddIngredients.js index 74546c9..54a3562 100644 --- a/src/components/modals/recipes/ModalAddIngredients.js +++ b/src/components/modals/recipes/ModalAddIngredients.js @@ -1,7 +1,6 @@ import React, { useState } from 'react' import styled from "styled-components" -import { CgFile } from "react-icons/cg" -import { GiMeal } from "react-icons/gi" +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { useDispatch, useSelector } from 'react-redux' import { findRecipeById } from '../../../redux/slices/recipesSlice' @@ -13,16 +12,11 @@ import { import Ingredient from '../../recipes/Ingredient&Button' import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice' import Dropdown from '../../Dropdown' +import theme from '../../../styles/theme'; -const IconList = styled(CgFile)` - font-size: 16px; - color: ${({ theme }) => theme.colors.primaryVar}; -` -const IconMeal = styled(GiMeal)` - font-size: 16px; - color: ${({ theme }) => theme.colors.primaryVar}; -` +const IconList = () => +const IconMeal = () => const ModalAddIngredients = (props) => { const dispatch = useDispatch() diff --git a/src/components/modals/styles/modal.js b/src/components/modals/styles/modal.js index ca1f7f5..8687569 100644 --- a/src/components/modals/styles/modal.js +++ b/src/components/modals/styles/modal.js @@ -1,8 +1,8 @@ import { Text, View, TextInput } from 'react-native' import styled from 'styled-components' import Modal from 'react-native-modal'; -import { FaAsterisk } from 'react-icons/fa' -import { HiCheck } from 'react-icons/hi' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from '../../../styles/theme'; export const StyledModal = styled(Modal)` .modal-content{ @@ -77,17 +77,18 @@ export const ModalDescription = styled(Text)` padding: 2px; ` -export const IconWrong = styled(FaAsterisk)` +const Wrong = () => + +export const IconWrong = styled(Wrong)` margin-left: -10px; margin-top: -10px; - font-size: ${({ theme }) => theme.fontSize.fontS}; - color: ${({ theme }) => theme.colors.error + 'aa'}; ` -export const IconCheck = styled(HiCheck)` + +const Check = () => + +export const IconCheck = styled(Check)` margin-left: -15px; margin-top: -3px; - font-size: ${({ theme }) => theme.fontSize.fontM}; - color: ${({ theme }) => theme.colors.primary}; ` diff --git a/src/components/recipes/addRecipe/styles/buttons.js b/src/components/recipes/addRecipe/styles/buttons.js index 539f090..a08b514 100644 --- a/src/components/recipes/addRecipe/styles/buttons.js +++ b/src/components/recipes/addRecipe/styles/buttons.js @@ -2,9 +2,8 @@ import { View } from "react-native" import styled, {css} from 'styled-components' import { Button } from '../../../../styles/componentBlueprints' -import { FiPlus, FiSettings } from 'react-icons/fi' -import { GoTrashcan } from 'react-icons/go' -import { BiEditAlt } from 'react-icons/bi' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from "../../../../styles/theme"; export const WrapperAddRecipe = styled(Button)` position:absolute; @@ -16,13 +15,8 @@ export const WrapperAddRecipe = styled(Button)` right:10px; } ` -export const IconPlus = styled(FiPlus)` - color: ${({ theme }) => theme.colors.textB2}; - font-size: 60px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - font-size: 60px; - } -` +export const IconPlus = () => + export const WrapperOptions = styled(View)` position: absolute; top: 0px; @@ -42,21 +36,23 @@ export const WrapperOptionButtons = styled(View)` border-bottom-left-radius: 8px; overflow: hidden; ` -export const IconOptions = styled(FiSettings)` +const Options = () => + +export const IconOptions = styled(Options)` margin-right: 5px; margin-top: 10px; - color: ${({ theme }) => theme.colors.textW2}; transform: rotate(${props => props.toggled ? css`135deg` : css`0deg` }); - font-size: 40px; ` -export const IconRemove = styled(GoTrashcan)` + +const Remove = () => + +export const IconRemove = styled(Remove)` position: absolute; - font-size: 40px; - color: ${({ theme }) => theme.colors.error}; ` -export const IconEdit = styled(BiEditAlt)` + +const Edit = () => + +export const IconEdit = styled(Edit)` position: absolute; top: 50px; - color: ${({ theme }) => theme.colors.textW2}; - font-size: 40px; ` \ No newline at end of file diff --git a/src/components/recipes/addRecipe/styles/ingredient.js b/src/components/recipes/addRecipe/styles/ingredient.js index f1e7e38..3feea56 100644 --- a/src/components/recipes/addRecipe/styles/ingredient.js +++ b/src/components/recipes/addRecipe/styles/ingredient.js @@ -1,7 +1,8 @@ import { Text, View } from "react-native" import styled from 'styled-components' -import { GoTrashcan } from 'react-icons/go' -import { BiEditAlt } from 'react-icons/bi' + +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from "../../../../styles/theme"; export const WrapperIngredient = styled(View)` margin: 5px 0px; @@ -47,15 +48,15 @@ font-size: ${({theme}) => theme.fontSize.fontS}; /* overflow-wrap: break-word; */ color: ${props => props.theme.colors.textW5}; ` -export const IconRemove = styled(GoTrashcan)` +const Remove = () => + +export const IconRemove = styled(Remove)` position:absolute; right: 0px; -color: ${({ theme }) => theme.colors.error + 'aa'}; -font-size: ${({theme}) => theme.fontSize.fontS}; ` -export const IconEdit = styled(BiEditAlt)` +const Edit = () => + +export const IconEdit = styled(Edit)` position:absolute; right: 20px; -color: ${({ theme }) => theme.colors.textW5}; -font-size: ${({theme}) => theme.fontSize.fontS}; ` \ No newline at end of file diff --git a/src/components/recipes/styles/recipeCard.js b/src/components/recipes/styles/recipeCard.js index 6db55f1..1023dc6 100644 --- a/src/components/recipes/styles/recipeCard.js +++ b/src/components/recipes/styles/recipeCard.js @@ -32,7 +32,6 @@ export const RecipeName = styled(Text)` ` export const ImageRecipe = styled(Image)` - resize-mode: contain; width: 100%; height: 100%; border-radius: 20px; diff --git a/src/pages/recipes/styles/addRecipe.js b/src/pages/recipes/styles/addRecipe.js index 9d4b370..b84ed84 100644 --- a/src/pages/recipes/styles/addRecipe.js +++ b/src/pages/recipes/styles/addRecipe.js @@ -1,8 +1,7 @@ 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' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from "../../../styles/theme"; export const Wrapper = styled(View)` display: flex; @@ -63,33 +62,23 @@ export const InputInstructions = styled(Text)` width: 100%; ` export const StyledImage = styled(Image)` - resize-mode: contain; 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)` +export const IconRecipe = () => + +export const IconPot = () => + +export const IconMeal = () => + +export const IconImage = () => + +const Check = () => + +export const IconCheck = styled(Check)` 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}; ` \ No newline at end of file diff --git a/src/pages/recipes/styles/recipe.js b/src/pages/recipes/styles/recipe.js index 5aa16f1..0fedbd1 100644 --- a/src/pages/recipes/styles/recipe.js +++ b/src/pages/recipes/styles/recipe.js @@ -1,6 +1,7 @@ import { Image, Text, View } from "react-native" import styled from 'styled-components' -import { GiCookingPot, GiMeal } from 'react-icons/gi' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from "../../../styles/theme"; export const Title = styled(Text)` margin-top: 10px; @@ -34,7 +35,6 @@ export const InstructionNumber = styled(Text)` export const StyledImage = styled(Image)` margin-top: -70px; - resize-mode: contain; height: 200px; width: 100%; @media ${({theme}) => theme.mediaQueries.above768}{ @@ -72,15 +72,16 @@ export const TextServings = styled(Text)` margin-top: -5px; font-weight: bold; ` -export const IconPotLarge = styled(GiCookingPot)` +const PotLarge = () => + +export const IconPotLarge = styled(PotLarge)` margin: -20px 0px -16px 0px; - color: ${({ theme }) => theme.colors.primary}; - font-size: ${({theme}) => theme.fontSize.fontL}; ` -export const IconMeal = styled(GiMeal)` + +const Meal = () => + +export const IconMeal = styled(Meal)` margin: -20px 0px -16px 0px; - color: ${({ theme }) => theme.colors.primary}; - font-size: ${({theme}) => theme.fontSize.fontL}; ` diff --git a/src/pages/styles/HomePage.js b/src/pages/styles/HomePage.js index 4796107..ee2c39e 100644 --- a/src/pages/styles/HomePage.js +++ b/src/pages/styles/HomePage.js @@ -1,6 +1,6 @@ +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { View } from "react-native" import styled from 'styled-components' -import { FiMenu } from 'react-icons/fi' export const Wrapper = styled(View)` display: flex; @@ -24,7 +24,4 @@ export const WrapperRight = styled(View)` width: 50%; padding: 0px 8px 8px 4px; ` -// export const Menu = styled(FiMenu)` -// color: ${props=>props.theme.colors.textW2}; -// font-size: 45px; -// ` \ No newline at end of file +export const Menu = () => \ No newline at end of file diff --git a/src/pages/styles/page.js b/src/pages/styles/page.js index 27e5edf..ab59c4b 100644 --- a/src/pages/styles/page.js +++ b/src/pages/styles/page.js @@ -1,9 +1,4 @@ import styled from 'styled-components' -import { BiArrowBack } from 'react-icons/bi' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; -export const ArrowBack = styled(BiArrowBack).attrs(props=>({ - // onClick:() => history.goBack() -}))` - color: ${({theme}) => theme.colors.textW2}; - font-size: 45px; -` \ No newline at end of file +export const ArrowBack = () => \ No newline at end of file diff --git a/src/styles/componentBlueprints.js b/src/styles/componentBlueprints.js index 1dfc87d..a78217f 100644 --- a/src/styles/componentBlueprints.js +++ b/src/styles/componentBlueprints.js @@ -2,22 +2,18 @@ import { TouchableOpacity, View } from "react-native" import React from 'react' import styled, { css } from 'styled-components' //deps -import { HiCheck } from 'react-icons/hi' - import LightenDarken from '../functions' +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; +import theme from "./theme"; //standard button layout export const Button = styled(TouchableOpacity)` - box-shadow: ${({ theme }) => theme.colors.shadow}; - display: flex; - align-items: center; - justify-content: center; - width: 80px; - height:80px; - border-radius: 50px; - @media ${({ theme }) => theme.mediaQueries.below768}{ - height: 65px; - width: 65px; - } + box-shadow: ${({ theme }) => theme.colors.shadow}; + display: flex; + align-items: center; + justify-content: center; + height: 65px; + width: 65px; + border-radius: 35px; ` const CheckButtonWrapper = styled(View)` display:flex; @@ -31,14 +27,11 @@ const CheckButtonWrapper = styled(View)` margin: 0px 5px ; background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey}; ` -const IconCheck = styled(HiCheck)` - font-size: ${({ theme }) => theme.fontSize.fontL}; - color: ${({ theme }) => theme.colors.dp00}; -` + export const CheckButton = (props) => { return ( - {/* */} + ) } diff --git a/yarn.lock b/yarn.lock index 54dec46..6f16b89 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2090,6 +2090,15 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" +cliui@^7.0.2: + version "7.0.4" + resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f" + integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ== + dependencies: + string-width "^4.2.0" + strip-ansi "^6.0.0" + wrap-ansi "^7.0.0" + clone-deep@^4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz" @@ -2908,7 +2917,7 @@ gensync@^1.0.0-beta.2: resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz" integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== -get-caller-file@^2.0.1: +get-caller-file@^2.0.1, get-caller-file@^2.0.5: version "2.0.5" resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== @@ -4636,11 +4645,6 @@ react-dom@17.0.1: object-assign "^4.1.1" scheduler "^0.20.1" -react-icons@^4.3.1: - version "4.3.1" - resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz" - integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ== - react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" @@ -4708,6 +4712,20 @@ react-native-screens@~3.8.0: dependencies: warn-once "^0.1.0" +react-native-vector-icons@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-9.0.0.tgz#ab38ec6941f3f340d39846f1e8300e59863e2fb1" + integrity sha512-qKX5d5/TafHmI4B7UOSZCL3BAGh7ZfF30iLwRgxBkKfZl2lKSuHp8Ottj9OyWh9b5fFtlg+LtyvZrns3g2kh+w== + dependencies: + lodash.frompairs "^4.0.1" + lodash.isequal "^4.5.0" + lodash.isstring "^4.0.1" + lodash.omit "^4.5.0" + lodash.pick "^4.4.0" + lodash.template "^4.5.0" + prop-types "^15.7.2" + yargs "^16.1.1" + react-native-web@0.17.1: version "0.17.1" resolved "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz" @@ -5727,6 +5745,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrappy@1: version "1.0.2" resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz" @@ -5817,6 +5844,11 @@ y18n@^4.0.0: resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz" integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ== +y18n@^5.0.5: + version "5.0.8" + resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55" + integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA== + yallist@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz" @@ -5830,6 +5862,11 @@ yargs-parser@^18.1.2: camelcase "^5.0.0" decamelize "^1.2.0" +yargs-parser@^20.2.2: + version "20.2.9" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" + integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== + yargs@^15.1.0, yargs@^15.3.1: version "15.4.1" resolved "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz" @@ -5847,6 +5884,19 @@ yargs@^15.1.0, yargs@^15.3.1: y18n "^4.0.0" yargs-parser "^18.1.2" +yargs@^16.1.1: + version "16.2.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66" + integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw== + dependencies: + cliui "^7.0.2" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.0" + y18n "^5.0.5" + yargs-parser "^20.2.2" + yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"