icons

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 (
 		<CheckButtonWrapper checked={props.checked} >
-			{/* <IconCheck checked={props.checked} /> */}
+            <MaterialCommunityIcons name="check" color={theme.colors.dp00} size={25} />
 		</CheckButtonWrapper>
 	)
 }