Merge pull request #24 from Ninjas-Code-official/fixing-issues
dark theme issues
This commit is contained in:
commit
f7a7367d94
|
@ -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 }
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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'
|
||||||
},
|
},
|
||||||
|
|
|
@ -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>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue