fix(ui): update grayscale colors to improve contrast

ios/Podfile.lock

@@ -412,7 +412,7 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.7.4):
     - React-Core
-  - react-native-skia (0.1.225):
+  - react-native-skia (0.1.230):
     - RCT-Folly (= 2021.07.22.00)
     - React
     - React-callinvoker
@@ -913,7 +913,7 @@ SPEC CHECKSUMS:
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: 2cd91d532de12acdb0a9cbc8d43ac72a8e4c897c
-  react-native-skia: 0af8dd48ce9332d1dedcb1bc8a648f7d57a04b6c
+  react-native-skia: a395bbbb438d593e525f65d0886c36d1c30f0604
   react-native-tcp-socket: c1b7297619616b4c9caae6889bcb0aba78086989
   React-NativeModulesApple: b6868ee904013a7923128892ee4a032498a1024a
   React-perflogger: 31ea61077185eb1428baf60c0db6e2886f141a5a

package.json

@@ -47,7 +47,7 @@
     "@react-navigation/stack": "6.3.20",
     "@reduxjs/toolkit": "2.0.1",
     "@sayem314/react-native-keep-awake": "1.2.2",
-    "@shopify/react-native-skia": "0.1.225",
+    "@shopify/react-native-skia": "0.1.230",
     "@synonymdev/blocktank-client": "0.0.50",
     "@synonymdev/blocktank-lsp-http-client": "0.9.0",
     "@synonymdev/feeds": "2.1.1",

src/assets/icons/wallet.ts

@@ -7,21 +7,21 @@ export const transferIcon = (
 export const unitBitcoinIcon = (
 	color = 'white',
 ): string => `<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="32" height="32" rx="16" fill="white" fill-opacity="0.08"/>
+<rect width="32" height="32" rx="16" fill="white" fill-opacity="0.10"/>
 <path d="M21.0502 14.6283C21.2702 13.1571 20.1499 12.3665 18.6183 11.8389L19.1151 9.84618L17.9022 9.54385L17.4184 11.484C17.0992 11.4045 16.772 11.3296 16.4463 11.2554L16.9332 9.30233L15.7211 9L15.2238 10.9924C14.9598 10.9322 14.7008 10.8729 14.4492 10.8103L14.4504 10.8041L12.7777 10.3865L12.4549 11.682C12.4549 11.682 13.3548 11.8882 13.3358 11.9011C13.8271 12.0237 13.9157 12.3488 13.901 12.6064L13.3352 14.8766C13.369 14.8853 13.4127 14.8975 13.4613 14.9171C13.4207 14.907 13.3776 14.8961 13.3332 14.8853L12.54 18.0652C12.4798 18.2145 12.3273 18.4385 11.984 18.3534C11.9961 18.371 11.1019 18.1334 11.1019 18.1334L10.5 19.5216L12.0784 19.9151C12.3719 19.9887 12.6601 20.0655 12.9432 20.1382L12.4416 22.1538L13.6532 22.4561L14.1502 20.4621C14.4816 20.5517 14.8028 20.6348 15.1172 20.713L14.6219 22.6977L15.8349 23L16.337 20.9883C18.4057 21.3795 19.9612 21.2217 20.6156 19.351C21.1434 17.8448 20.5895 16.9758 19.5012 16.4091C20.2937 16.2264 20.8909 15.705 21.0502 14.6283ZM18.2789 18.5147C17.9036 20.0211 15.3677 19.2067 14.545 19.0023L15.211 16.3323C16.0333 16.5373 18.6704 16.9436 18.2789 18.5147ZM18.6535 14.6067C18.3117 15.9769 16.2006 15.2806 15.5158 15.1098L16.1196 12.6881C16.8042 12.8589 19.0099 13.1775 18.6535 14.6067Z" fill="${color}"/>
 </svg>
 `;
 
 export const unitSatoshiIcon = (
 	color = 'white',
 ): string => `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-<rect fill="#fff" fill-opacity=".08" height="32" rx="16" width="32"/>
+<rect fill="#fff" fill-opacity="0.10" height="32" rx="16" width="32"/>
 <path d="M11.9978 17.2345H15.6938L13.7587 22.2319C13.4849 22.9191 14.2253 23.2868 14.6982 22.7262L20.6591 15.643C20.7711 15.5043 20.8333 15.3717 20.8333 15.221C20.8333 14.9558 20.6218 14.7629 20.3356 14.7629H16.6396L18.5747 9.76546C18.8422 9.07824 18.108 8.71654 17.6351 9.27114L11.6742 16.3543C11.556 16.493 11.5 16.6256 11.5 16.7763C11.5 17.0415 11.7116 17.2345 11.9978 17.2345Z" fill="${color}"/>
 </svg>`;
 
 export const unitFiatIcon = (color = 'white'): string =>
 	`<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
-	<rect fill="#fff" fill-opacity=".08" height="32" rx="16" width="32"/>
+	<rect fill="#fff" fill-opacity="0.10" height="32" rx="16" width="32"/>
 	<g fill="${color}">
 		<path d="m16 22c3.3137 0 6-2.6863 6-6s-2.6863-6-6-6-6 2.6863-6 6 2.6863 6 6 6z" opacity=".2"/>
 		<path clip-rule="evenodd" d="m16 10.5c-3.0376 0-5.5 2.4624-5.5 5.5s2.4624 5.5 5.5 5.5 5.5-2.4624 5.5-5.5-2.4624-5.5-5.5-5.5zm-6.5 5.5c0-3.5899 2.9101-6.5 6.5-6.5s6.5 2.9101 6.5 6.5-2.9101 6.5-6.5 6.5-6.5-2.9101-6.5-6.5z" fill-rule="evenodd"/>

src/components/AuthWidget.tsx

@@ -85,7 +85,7 @@ const AuthWidget = ({
 		<>
 			<TouchableOpacity
 				style={[styles.root, style]}
-				color="white08"
+				color="white10"
 				activeOpacity={0.9}
 				testID={testID}
 				onPressIn={onPressIn}

src/components/BaseFeedWidget.tsx

@@ -62,7 +62,7 @@ const BaseFeedWidget = ({
 		<>
 			<TouchableOpacity
 				style={[styles.root, style]}
-				color="white08"
+				color="white10"
 				activeOpacity={0.9}
 				testID={testID}
 				onPress={onPress}

src/components/Button.tsx

@@ -33,10 +33,10 @@ const Button = ({
 	icon,
 	...props
 }: IButton): ReactElement => {
-	const { white08, white32 } = useColors();
+	const { white16, white32 } = useColors();
 
 	const buttonStyle = useMemo(() => {
-		const borderColor = variant === 'transparent' ? undefined : white08;
+		const borderColor = variant === 'transparent' ? undefined : white16;
 
 		return StyleSheet.compose(
 			{
@@ -48,17 +48,17 @@ const Button = ({
 				...(disabled && !icon
 					? { backgroundColor: 'transparent', borderColor: 'transparent' }
 					: {}),
-				...(disabled && icon ? { opacity: disabled ? 0.5 : 1 } : {}),
+				...(disabled && icon ? { opacity: disabled ? 0.4 : 1 } : {}),
 			},
 			style,
 		);
-	}, [variant, size, icon, disabled, white08, style]);
+	}, [variant, size, icon, disabled, white16, style]);
 
 	const buttonColor = useMemo(() => {
 		if (color) {
 			return color;
 		}
-		return variant === 'primary' ? 'white08' : 'transparent';
+		return variant === 'primary' ? 'white16' : 'transparent';
 	}, [color, variant]);
 
 	const textStyles = useMemo(() => {

src/components/CheckButton.tsx

@@ -40,7 +40,7 @@ const CheckButton = memo(
 				<View style={styles.rightColumn}>
 					<StyledView
 						style={[styles.checkbox, checked && styles.checked]}
-						color={checked ? 'brand32' : 'white1'}>
+						color={checked ? 'brand32' : 'white10'}>
 						{checked && <Checkmark color="brand" height={22} width={22} />}
 					</StyledView>
 				</View>

src/components/ContactSmall.tsx

@@ -31,7 +31,7 @@ const ContactSmall = ({
 				size === 'large' && styles.containerLarge,
 				style,
 			]}
-			color="white05"
+			color="white10"
 			activeOpacity={onPress ? 0.6 : 1}
 			onPress={onPress}
 			testID={testID}>

src/components/Divider.tsx

@@ -7,7 +7,7 @@ interface DividerProps extends PropsWithChildren<any> {
 }
 
 const Divider = ({ style }: DividerProps): ReactElement => {
-	return <View color="white1" style={[styles.root, style]} />;
+	return <View color="white10" style={[styles.root, style]} />;
 };
 
 const styles = StyleSheet.create({

src/components/Glow.tsx

@@ -1,18 +1,12 @@
 import React, { memo, ReactElement, useMemo, useEffect } from 'react';
-import {
-	Canvas,
-	RadialGradient,
-	Rect,
-	runTiming,
-	useValue,
-	vec,
-} from '@shopify/react-native-skia';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { Canvas, RadialGradient, Rect, vec } from '@shopify/react-native-skia';
 
 import useColors from '../hooks/colors';
 import { IThemeColors } from '../styles/themes';
 
 /**
- * This component draws round gradint
+ * This component draws round gradient
  */
 
 type GlowProps = {
@@ -23,14 +17,14 @@ type GlowProps = {
 
 export const Glow = memo(
 	({ color, size = 600, style }: GlowProps): ReactElement => {
-		const opacity = useValue(0);
+		const opacity = useSharedValue(0);
 		const cstyle = useMemo(
 			() => ({ width: size, height: size, ...style }),
 			[size, style],
 		);
 
 		useEffect(() => {
-			runTiming(opacity, 0.4, { duration: 300 });
+			opacity.value = withTiming(0.4, { duration: 300 });
 		}, [opacity]);
 
 		return (

src/components/GlowingBackground.tsx

@@ -6,14 +6,8 @@ import React, {
 	useEffect,
 } from 'react';
 import { View, StyleSheet, LayoutChangeEvent } from 'react-native';
-import {
-	Canvas,
-	RadialGradient,
-	Rect,
-	runTiming,
-	useValue,
-	vec,
-} from '@shopify/react-native-skia';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+import { Canvas, RadialGradient, Rect, vec } from '@shopify/react-native-skia';
 
 import { View as ThemedView } from '../styles/components';
 import { IColors } from '../styles/colors';
@@ -35,10 +29,10 @@ const Glow = memo(
 		width: number;
 		height: number;
 	}) => {
-		const opacity = useValue(0);
+		const opacity = useSharedValue(0);
 
 		useEffect(() => {
-			runTiming(opacity, fadeout ? 0 : 1, { duration: DURATION });
+			opacity.value = withTiming(fadeout ? 0 : 1, { duration: DURATION });
 		}, [opacity, fadeout]);
 
 		return (

src/components/HorizontalGradient.tsx

@@ -1,13 +1,6 @@
-import React, { ReactElement, useState, useEffect } from 'react';
+import React, { ReactElement, useState } from 'react';
 import { LayoutChangeEvent, StyleProp, View, ViewStyle } from 'react-native';
-import {
-	Canvas,
-	LinearGradient,
-	Rect,
-	runTiming,
-	useValue,
-	vec,
-} from '@shopify/react-native-skia';
+import { Canvas, LinearGradient, Rect, vec } from '@shopify/react-native-skia';
 
 type HorizontalGradientProps = {
 	color: string;
@@ -22,7 +15,7 @@ const HorizontalGradient = ({
 	style,
 }: HorizontalGradientProps): ReactElement => {
 	const [layout, setLayout] = useState({ width: 1, height: 1 });
-	const opacity = useValue(0);
+	const { height, width } = layout;
 
 	const handleLayout = (event: LayoutChangeEvent): void => {
 		setLayout({
@@ -31,16 +24,10 @@ const HorizontalGradient = ({
 		});
 	};
 
-	const { height, width } = layout;
-
-	useEffect(() => {
-		runTiming(opacity, 0.7);
-	}, [opacity]);
-
 	return (
 		<View style={style} onLayout={handleLayout}>
 			<Canvas style={style}>
-				<Rect x={0} y={0} width={width} height={height} opacity={opacity}>
+				<Rect x={0} y={0} width={width} height={height} opacity={0.7}>
 					<LinearGradient
 						start={vec(0, 0)}
 						end={vec(width, 0)}

src/components/IconButton.tsx

@@ -26,7 +26,7 @@ const IconButton = ({
 	return (
 		<TouchableOpacity
 			style={[buttonStyles, style]}
-			color="white08"
+			color="white16"
 			activeOpacity={0.7}
 			disabled={disabled}
 			onPress={onPress}

src/components/LabeledInput.tsx

@@ -65,7 +65,7 @@ const LabeledInput = ({
 						style={textInputStyle}
 						ref={ref}
 						defaultValue={value}
-						backgroundColor="white08"
+						backgroundColor="white10"
 						autoCapitalize="none"
 						autoCorrect={false}
 						placeholder={placeholder}

src/components/LightningChannel.tsx

@@ -23,7 +23,7 @@ const LightningChannel = ({
 
 	let spendingColor: keyof IThemeColors = 'purple5';
 	let spendingAvailableColor: keyof IThemeColors = 'purple';
-	let receivingColor: keyof IThemeColors = 'white5';
+	let receivingColor: keyof IThemeColors = 'white50';
 	let receivingAvailableColor: keyof IThemeColors = 'white';
 
 	if (status === 'closed') {

src/components/Money.tsx

@@ -87,7 +87,7 @@ const Money = (props: IMoney): ReactElement => {
 					<Text
 						style={styles.symbol}
 						lineHeight={lineHeight}
-						color={color ?? 'white5'}
+						color={color ?? 'white50'}
 						testID="MoneyFiatSymbol">
 						{dv.fiatSymbol}
 					</Text>
@@ -96,7 +96,7 @@ const Money = (props: IMoney): ReactElement => {
 				return (
 					<LightningIcon
 						style={styles.symbol}
-						color={color ?? 'white5'}
+						color={color ?? 'white50'}
 						height={iconHeight}
 						width={iconWidth}
 						testID="MoneyLightningSymbol"
@@ -106,7 +106,7 @@ const Money = (props: IMoney): ReactElement => {
 				return (
 					<BIcon
 						style={styles.symbol}
-						color={color ?? 'white5'}
+						color={color ?? 'white50'}
 						height={iconHeight}
 						width={iconWidth}
 						testID="MoneyBitcoinSymbol"
@@ -156,7 +156,7 @@ const Money = (props: IMoney): ReactElement => {
 				<Text
 					style={styles.sign}
 					lineHeight={lineHeight}
-					color={color ?? 'white5'}
+					color={color ?? 'white50'}
 					testID="MoneySign">
 					{sign}
 				</Text>
@@ -166,7 +166,7 @@ const Money = (props: IMoney): ReactElement => {
 				{prim}
 			</Text>
 			{secd !== '' && (
-				<Text lineHeight={lineHeight} color="white5" testID="MoneySecondary">
+				<Text lineHeight={lineHeight} color="white50" testID="MoneySecondary">
 					{secd}
 				</Text>
 			)}

src/components/MoneySymbol.tsx

@@ -20,22 +20,22 @@ const MoneySymbol = ({
 			{unit === EUnit.fiat && (
 				<Display
 					style={styles.fiatSymbol}
-					color="white5"
+					color="white50"
 					testID="MoneyFiatSymbol">
 					{fiatSymbol}
 				</Display>
 			)}
 			{unit === EUnit.satoshi && (
 				<LightningIcon
-					color="white5"
+					color="white50"
 					height={40}
 					width={28}
 					testID="MoneyLightningSymbol"
 				/>
 			)}
 			{unit === EUnit.BTC && (
 				<BIcon
-					color="white5"
+					color="white50"
 					height={40}
 					width={28}
 					testID="MoneyBitcoinSymbol"

src/components/NumberPadTextField.tsx

@@ -104,7 +104,7 @@ const NumberPadTextField = ({
 				<Display color="white" lineHeight="57px">
 					{value !== placeholder && value}
 					<Display
-						color={showPlaceholder ? 'white5' : 'white'}
+						color={showPlaceholder ? 'white50' : 'white'}
 						lineHeight="57px">
 						{placeholder}
 					</Display>

src/components/SearchInput.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { useTranslation } from 'react-i18next';
 
-import { TextInput } from '../styles/components';
+import { TextInput, View as ThemedView } from '../styles/components';
 import { MagnifyingGlassIcon } from '../styles/icons';
 
 type SearchInputProps = TextInputProps & {
@@ -24,14 +24,14 @@ const SearchInput = ({
 	const { t } = useTranslation('search');
 
 	return (
-		<View style={[styles.root, style]}>
+		<ThemedView style={[styles.root, style]} color="white10">
 			<MagnifyingGlassIcon
 				style={styles.icon}
 				color={props.value ? 'brand' : 'gray1'}
 			/>
 			<TextInput style={styles.input} placeholder={t('search')} {...props} />
 			{children && <View style={styles.tags}>{children}</View>}
-		</View>
+		</ThemedView>
 	);
 };
 
@@ -41,7 +41,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center',
 		borderRadius: 32,
-		backgroundColor: 'rgba(255, 255, 255, 0.08)',
 		height: 48,
 		overflow: 'hidden',
 	},

src/components/SeedInput.tsx

@@ -27,7 +27,7 @@ const SeedInput = forwardRef<any, SeedInputProps>(
 				{index !== undefined && (
 					<View style={styles.index}>
 						<Text01S
-							color={valid ? 'white5' : 'red'}
+							color={valid ? 'white50' : 'red'}
 							style={styles.indexText}
 							testID={`WordIndex-${index}`}>
 							{index + 1}.