Merge pull request #24 from Ninjas-Code-official/fixing-issues

dark theme issues
This commit is contained in:
Kashif Shehzad Baloch 2023-10-18 14:09:18 +05:00 committed by GitHub
commit f7a7367d94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 26 additions and 12 deletions

View File

@ -17,10 +17,12 @@ const COLORS = {
primaryLightBlue: '#0cc8d5', primaryLightBlue: '#0cc8d5',
lightBlueShadeGrey: '#f8f9fa', lightBlueShadeGrey: '#f8f9fa',
mediumBlueShadeGrey: '#f2f4f5', mediumBlueShadeGrey: '#f2f4f5',
dkmediumBlueShadeGrey: '#202020',
black06: 'rgba(0,0,0,0.6)', black06: 'rgba(0,0,0,0.6)',
white06: 'rgba(255,255,255,0.6)', white06: 'rgba(255,255,255,0.6)',
redishOrange: '#FA7751', redishOrange: '#FA7751',
blueColor: '#00b9c6', blueColor: '#00b9c6',
yellowishOrange: '#fff1d4' yellowishOrange: '#fff1d4',
fontMainColor: '#000'
} }
export { COLORS } export { COLORS }

View File

@ -62,7 +62,7 @@ const Theme = {
fontSecondColor: COLORS.whitishGrey, fontSecondColor: COLORS.whitishGrey,
placeHolderColor: COLORS.lightGrey, placeHolderColor: COLORS.lightGrey,
buttonBackground: COLORS.primary, buttonBackground: COLORS.primary,
buttonBackgroundLight: COLORS.mediumBlueShadeGrey, buttonBackgroundLight: COLORS.dkmediumBlueShadeGrey,
buttonBackgroundBlue: COLORS.primaryLightBlue, buttonBackgroundBlue: COLORS.primaryLightBlue,
active: COLORS.primaryLightBlue, active: COLORS.primaryLightBlue,
buttonText: COLORS.white, buttonText: COLORS.white,

View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import React from 'react' import React from 'react'
import { View } from 'react-native' import { View } from 'react-native'
import { alignment } from '../../../utils/alignment' import { alignment } from '../../../utils/alignment'
import TextDefault from '../../Text/TextDefault/TextDefault' import TextDefault from '../../Text'
import styles from './styles' import styles from './styles'
function TitleComponent(props) { function TitleComponent(props) {

View File

@ -18,7 +18,7 @@ const useStyle = () => {
marginTop: 20, marginTop: 20,
width: scale(275), width: scale(275),
padding: moderateScale(15), padding: moderateScale(15),
backgroundColor: '#f7f7fb', backgroundColor: colors.cardContainer,
borderRadius: 10, borderRadius: 10,
borderStyle: 'dashed', borderStyle: 'dashed',
borderColor: '#a5a5a5', borderColor: '#a5a5a5',
@ -32,7 +32,8 @@ const useStyle = () => {
// ...alignment.MTxSmall, // ...alignment.MTxSmall,
// ...alignment.MLmedium // ...alignment.MLmedium
}, },
textContainer: {}, textContainer: {
},
statusCircleContainer: { statusCircleContainer: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-start', justifyContent: 'flex-start',

View File

@ -43,7 +43,7 @@ const useStyle = () => {
contactContainer: { contactContainer: {
width: '100%', width: '100%',
alignSelf: 'center', alignSelf: 'center',
backgroundColor: colors.lightBackground, backgroundColor: colors.cardContainer,
borderRadius: 20, borderRadius: 20,
padding: scale(15) padding: scale(15)
}, },
@ -56,7 +56,7 @@ const useStyle = () => {
alignSelf: 'center', alignSelf: 'center',
borderTopLeftRadius: 20, borderTopLeftRadius: 20,
borderTopRightRadius: 20, borderTopRightRadius: 20,
backgroundColor: colors.lightBackground, backgroundColor: colors.cardContainer,
borderBottomColor: colors.horizontalLine, borderBottomColor: colors.horizontalLine,
...alignment.PLmedium, ...alignment.PLmedium,
...alignment.PRmedium, ...alignment.PRmedium,

View File

@ -164,7 +164,7 @@ const CreateAccount = () => {
style={styles.marginLeft5} style={styles.marginLeft5}
name="apple" name="apple"
size={scale(19)} size={scale(19)}
color="#000" color={colors.iconColor}
/> />
<TextDefault style={alignment.MLsmall} bold> <TextDefault style={alignment.MLsmall} bold>
Signup with Apple Signup with Apple

View File

@ -71,7 +71,7 @@ const useStyle = () => {
width: '100%', width: '100%',
height: height * 0.07, height: height * 0.07,
borderRadius: moderateScale(20), borderRadius: moderateScale(20),
backgroundColor: colors.lightBackground, backgroundColor: colors.buttonBackgroundLight,
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center' alignItems: 'center'
}, },

View File

@ -6,6 +6,7 @@ import i18n from '../../../i18n'
import { TextDefault, WrapperView } from '../../components' import { TextDefault, WrapperView } from '../../components'
import { NAVIGATION_SCREEN } from '../../utils/constant' import { NAVIGATION_SCREEN } from '../../utils/constant'
import useStyle from './styles' import useStyle from './styles'
import { useTheme } from '@react-navigation/native'
const links = [ const links = [
{ {
@ -22,6 +23,7 @@ const links = [
function Help() { function Help() {
const styles = useStyle() const styles = useStyle()
const navigation = useNavigation() const navigation = useNavigation()
const { colors } = useTheme()
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
@ -42,7 +44,7 @@ function Help() {
key={index}> key={index}>
<TextDefault H4>{title}</TextDefault> <TextDefault H4>{title}</TextDefault>
<TouchableOpacity> <TouchableOpacity>
<AntDesign name="arrowright" size={22} color="black" /> <AntDesign name="arrowright" size={22} color={colors.fontMainColor} />
</TouchableOpacity> </TouchableOpacity>
</TouchableOpacity> </TouchableOpacity>
))} ))}

View File

@ -10,7 +10,7 @@ const useStyle = () => {
flex: 1 flex: 1
}, },
itemContainer: { itemContainer: {
backgroundColor: colors.white, backgroundColor: colors.buttonBackgroundLight,
marginHorizontal: moderateScale(20), marginHorizontal: moderateScale(20),
borderRadius: moderateScale(10), borderRadius: moderateScale(10),
elevation: 2, elevation: 2,

View File

@ -58,9 +58,17 @@ function Profile() {
onError, onError,
}); });
const [title, setTitle] = useState('titleProfile');
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
title: "Profile", // headerTitle: () => (
// <TextDefault center H4 bold>
// {title || 'Profile'}
// </TextDefault>
// ),
// title: "Profile",
headerTitle: i18n.t(title),
headerRight: () => ( headerRight: () => (
<RightButton <RightButton
icon={toggleView ? ICONS_NAME.Pencil : ICONS_NAME.Cross} icon={toggleView ? ICONS_NAME.Pencil : ICONS_NAME.Cross}
@ -71,6 +79,7 @@ function Profile() {
}); });
}, [navigation, toggleView]); }, [navigation, toggleView]);
useEffect(() => { useEffect(() => {
if (backScreen) { if (backScreen) {
viewHideAndShow(); viewHideAndShow();