verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

chore: set custom icon default color

This commit is contained in:
GleidsonDaniel 2024-03-13 17:57:41 -03:00
parent ab59dbd87c
commit d280ebf1c4
26 changed files with 60 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/Chip/index.tsx
View File

@ -66,7 +66,7 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
{text}
</Text>
</View>
{onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null}
{onPress ? <CustomIcon name='close' size={16} /> : null}
</View>
</Pressable>
);

16
app/containers/CustomIcon/index.tsx
View File

@ -1,8 +1,9 @@
import React from 'react';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import { TextProps } from 'react-native';
import type { IconProps } from 'react-native-vector-icons/Icon';
import { mappedIcons } from './mappedIcons';
import { useTheme } from '../../theme';
const icoMoonConfig = require('./selection.json');
@ -10,14 +11,15 @@ export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom
export type TIconsName = keyof typeof mappedIcons;
export interface ICustomIcon extends TextProps {
export interface ICustomIcon extends IconProps {
name: TIconsName;
size: number;
color: string;
color?: string;
}
const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon) => (
// @ts-ignore TODO remove this after update @types/react-native to 0.65.0
<IconSet name={name} size={size} color={color} style={[{ lineHeight: size }, style]} {...props} />
);
const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => {
const { colors } = useTheme();
return <IconSet name={name} size={size} color={color || colors.fontDefault} style={[{ lineHeight: size }, style]} {...props} />;
};
export { CustomIcon };

4
app/containers/EmojiPicker/Footer.tsx
View File

@ -20,7 +20,7 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
]}
testID='emoji-picker-search'
>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
<CustomIcon size={24} name='search' />
</Pressable>
<Pressable
@ -32,7 +32,7 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
]}
testID='emoji-picker-backspace'
>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
<CustomIcon size={24} name='backspace' />
</Pressable>
</View>
);

8
app/containers/HeaderButton/HeaderButtonItem.tsx
View File

@ -2,11 +2,11 @@ import React from 'react';
import { Platform, StyleSheet, Text } from 'react-native';
import { PlatformPressable } from '@react-navigation/elements';
import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon';
import { CustomIcon, TIconsName } from '../CustomIcon';
import { useTheme } from '../../theme';
import sharedStyles from '../../views/Styles';
export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | 'color'> {
export interface IHeaderButtonItem {
title?: string;
iconName?: TIconsName;
onPress?: <T>(arg: T) => void;
@ -57,9 +57,9 @@ const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...pro
>
<>
{iconName ? (
<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />
<CustomIcon name={iconName} size={24} color={color} {...props} />
) : (
<Text style={[styles.title, { color: color || colors.headerTintColor }]} {...props}>
<Text style={[styles.title, { color: color || colors.fontDefault }]} {...props}>
{title}
</Text>
)}

2
app/containers/InAppNotification/NotifierComponent.tsx
View File

@ -129,7 +129,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
</>
</Touchable>
<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
<CustomIcon name='close' size={20} color={themes[theme].fontTitlesLabels} style={styles.close} />
<CustomIcon name='close' size={20} style={styles.close} />
</Touchable>
</View>
);

18
app/containers/List/ListIcon.tsx
View File

@ -1,14 +1,12 @@
import React from 'react';
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../lib/constants';
import { CustomIcon, TIconsName } from '../CustomIcon';
import { useTheme } from '../../theme';
import { ICON_SIZE } from './constants';
interface IListIcon {
name: TIconsName;
color?: string | null;
color?: string;
style?: StyleProp<ViewStyle>;
testID?: string;
size?: number;
@ -21,15 +19,11 @@ const styles = StyleSheet.create({
}
});
const ListIcon = React.memo(({ name, color, style, testID, size }: IListIcon) => {
const { theme } = useTheme();
return (
<View style={[styles.icon, style]}>
<CustomIcon name={name} color={color ?? themes[theme].fontSecondaryInfo} size={size ?? ICON_SIZE} testID={testID} />
</View>
);
});
const ListIcon = ({ name, color, style, testID, size }: IListIcon): React.ReactElement => (
<View style={[styles.icon, style]}>
<CustomIcon name={name} color={color} size={size ?? ICON_SIZE} testID={testID} />
</View>
);
ListIcon.displayName = 'List.Icon';

2
app/containers/LoginServices/ButtonService.tsx
View File

@ -20,7 +20,7 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
>
<View style={styles.serviceButtonContainer}>
{authType === 'oauth' || authType === 'apple' ? (
<CustomIcon name={icon} size={24} color={colors.fontTitlesLabels} style={styles.serviceIcon} />
<CustomIcon name={icon} size={24} style={styles.serviceIcon} />
) : null}
<Text style={[styles.serviceText, { color: colors.fontTitlesLabels }]}>{buttonText}</Text>
</View>

2
app/containers/MessageActions/Header.tsx
View File

@ -81,7 +81,7 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
onPress={(param: any) => onReaction(param)}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}
>
<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
<CustomIcon name='reaction-add' size={24} />
</Touch>
);

4
app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
View File

@ -9,7 +9,7 @@ import { NO_CANNED_RESPONSES } from '../../constants';
import { useStyle } from './styles';
export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCannedResponse }) => {
const [styles, colors] = useStyle();
const [styles] = useStyle();
if (item.id === NO_CANNED_RESPONSES) {
return (
<View style={styles.canned}>
@ -17,7 +17,7 @@ export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCanned
<Text style={styles.cannedTitleText}>
{I18n.t('No_match_found')} <Text style={sharedStyles.textSemibold}>{I18n.t('Check_canned_responses')}</Text>
</Text>
<CustomIcon name='chevron-right' size={24} color={colors.fontHint} />
<CustomIcon name='chevron-right' size={24} />
</View>
</View>
);

2
app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
View File

@ -19,7 +19,7 @@ export const AutocompletePreview = ({ item, onPress }: IAutocompleteItemProps) =
item.preview.type === 'image' ? (
<FastImage style={styles.previewImage} source={{ uri: item.preview.value }} resizeMode={FastImage.resizeMode.cover} />
) : (
<CustomIcon name='attach' size={36} color={colors.fontInfo} />
<CustomIcon name='attach' size={36} />
);
}

18
app/containers/MessageComposer/components/Buttons/BaseButton.tsx
View File

@ -4,7 +4,6 @@ import { View, StyleSheet } from 'react-native';
import I18n from '../../../../i18n';
import { CustomIcon, TIconsName } from '../../../CustomIcon';
import { useTheme } from '../../../../theme';
export interface IBaseButton {
testID: string;
@ -21,16 +20,13 @@ export const hitSlop = {
left: 16
};
export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => {
const { colors } = useTheme();
return (
<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
<CustomIcon name={icon} size={24} color={color || colors.fontSecondaryInfo} />
</View>
</BorderlessButton>
);
};
export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => (
<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
<CustomIcon name={icon} size={24} color={color} />
</View>
</BorderlessButton>
);
const styles = StyleSheet.create({
button: {

7
app/containers/RadioButton/index.tsx
View File

@ -6,11 +6,6 @@ import { useTheme } from '../../theme';
export const RadioButton = ({ check, testID, size }: { check: boolean; testID?: string; size?: number }): React.ReactElement => {
const { colors } = useTheme();
return (
<RadioButtonUiLib
testID={testID}
selected={check}
size={size || 20}
color={check ? colors.tintActive : colors.auxiliaryTintColor}
/>
null
);
};

2
app/containers/ReactionsList/ReactionsTabBar.tsx
View File

@ -68,7 +68,7 @@ const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactio
style={{
width: tabWidth,
borderBottomWidth: isActiveTab ? 2 : 1,
borderColor: isActiveTab ? colors.tintActive : colors.separatorColor
borderColor: isActiveTab ? colors.strokeHighlight : colors.strokeLight
}}
key={tab.emoji}
>

17
app/containers/TextInput/FormTextInput.tsx
View File

@ -28,8 +28,8 @@ const styles = StyleSheet.create({
fontSize: 16,
paddingHorizontal: 16,
paddingVertical: 10,
borderWidth: 1,
borderRadius: 4
borderWidth: 2,
borderRadius: 2
},
inputIconLeft: {
paddingLeft: 45
@ -91,7 +91,9 @@ export const FormTextInput = ({
return (
<View style={[styles.inputContainer, containerStyle]}>
{label ? (
<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.dangerColor }]}>{label}</Text>
<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.dangerColor }]}>
{label}
</Text>
) : null}
<View style={styles.wrap}>
@ -102,7 +104,7 @@ export const FormTextInput = ({
(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
{
backgroundColor: colors.backgroundColor,
borderColor: colors.separatorColor,
borderColor: colors.strokeLight,
color: colors.fontTitlesLabels
},
error?.error && {
@ -121,6 +123,7 @@ export const FormTextInput = ({
accessibilityLabel={placeholder}
placeholder={placeholder}
value={value}
placeholderTextColor={colors.fontAnnotation}
{...inputProps}
/>
@ -136,7 +139,7 @@ export const FormTextInput = ({
{showClearInput ? (
<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
<CustomIcon name='input-clear' size={20} color={colors.auxiliaryTintColor} />
<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
</Touchable>
) : null}
@ -145,7 +148,7 @@ export const FormTextInput = ({
name={iconRight}
testID={testID ? `${testID}-icon-right` : undefined}
size={20}
color={colors.bodyText}
color={colors.fontDefault}
style={[styles.iconContainer, styles.iconRight]}
/>
) : null}
@ -156,7 +159,7 @@ export const FormTextInput = ({
name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
testID={testID ? `${testID}-icon-password` : undefined}
size={20}
color={colors.fontSecondaryInfo}
color={colors.fontDefault}
/>
</Touchable>
) : null}

1
app/containers/markdown/new/TaskList.tsx
View File

@ -22,7 +22,6 @@ const TaskList = ({ value = [] }: ITasksProps) => {
testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
size={24}
color={colors.taskBoxColor}
/>
</Text>
<Text style={[styles.inline, { color: colors.bodyText }]}>

2
app/containers/message/Components/OverlayComponent/index.tsx
View File

@ -21,7 +21,7 @@ const OverlayComponent = ({
<>
<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
<View style={[style, styles.blurIndicator]}>
{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
{loading ? <RCActivityIndicator size={54} /> : <CustomIcon name={iconName} size={54} />}
</View>
</>
);

6
app/containers/message/Components/RightIcons/Edited.tsx
View File

@ -2,20 +2,16 @@ import React, { memo } from 'react';
import { View } from 'react-native';
import { CustomIcon } from '../../../CustomIcon';
import { useTheme } from '../../../../theme';
import { themes } from '../../../../lib/constants';
import styles from '../../styles';
const Edited = memo(({ isEdited, testID }: { isEdited: boolean; testID?: string }) => {
const { theme } = useTheme();
if (!isEdited) {
return null;
}
return (
<View testID={testID} style={styles.rightIcons}>
<CustomIcon name='edit' size={16} color={themes[theme].fontSecondaryInfo} />
<CustomIcon name='edit' size={16} />
</View>
);
});

6
app/containers/message/Components/RightIcons/Encrypted.tsx
View File

@ -5,11 +5,9 @@ import { CustomIcon } from '../../../CustomIcon';
import { BUTTON_HIT_SLOP } from '../../utils';
import MessageContext from '../../Context';
import styles from '../../styles';
import { useTheme } from '../../../../theme';
import { E2E_MESSAGE_TYPE, themes } from '../../../../lib/constants';
import { E2E_MESSAGE_TYPE } from '../../../../lib/constants';
const Encrypted = React.memo(({ type }: { type: string }) => {
const { theme } = useTheme();
const { onEncryptedPress } = useContext(MessageContext);
if (type !== E2E_MESSAGE_TYPE) {
@ -18,7 +16,7 @@ const Encrypted = React.memo(({ type }: { type: string }) => {
return (
<Touchable onPress={onEncryptedPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon name='encrypted' size={16} color={themes[theme].fontSecondaryInfo} />
<CustomIcon name='encrypted' size={16} />
</Touchable>
);
});

4
app/containers/message/Components/RightIcons/Translated.tsx
View File

@ -2,11 +2,9 @@ import React, { memo } from 'react';
import { View } from 'react-native';
import { CustomIcon } from '../../../CustomIcon';
import { useTheme } from '../../../../theme';
import styles from '../../styles';
const Translated = memo(({ isTranslated }: { isTranslated: boolean }) => {
const { colors } = useTheme();
if (!isTranslated) {
return null;
@ -14,7 +12,7 @@ const Translated = memo(({ isTranslated }: { isTranslated: boolean }) => {
return (
<View style={styles.rightIcons}>
<CustomIcon name='language' size={16} color={colors.fontSecondaryInfo} />
<CustomIcon name='language' size={16} />
</View>
);
});

2
app/views/AddExistingChannelView/index.tsx
View File

@ -162,7 +162,7 @@ const AddExistingChannelView = () => {
onPress={() => toggleChannel(item.rid)}
testID={`add-existing-channel-view-item-${item.name}`}
left={() => <List.Icon name={icon} />}
right={() => (isChecked(item.rid) ? <List.Icon name='check' /> : null)}
right={() => (isChecked(item.rid) ? <List.Icon name='check' color={colors.strokeHighlight} /> : null)}
/>
);
}}

2
app/views/MediaAutoDownloadView/ListPicker.tsx
View File

@ -53,7 +53,7 @@ const ListPicker = ({
hideActionSheet();
onChangeValue(i.value);
},
right: option.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
right: option.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
}));
return (

2
app/views/NotificationPreferencesView/index.tsx
View File

@ -57,7 +57,7 @@ const RenderListPicker = ({
onChangeValue(preference, { [preference]: i.value.toString() }, () => setOption(option));
setOption(i);
},
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
}));
return (

2
app/views/ScreenLockedView.tsx
View File

@ -79,7 +79,7 @@ const ScreenLockedView = (): JSX.Element => {
<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
{data?.force ? (
<Touchable onPress={onCancel} style={styles.close}>
<CustomIcon name='close' color={colors.fontDefault} size={30} />
<CustomIcon name='close' size={30} />
</Touchable>
) : null}
</Modal>

2
app/views/TeamChannelsView.tsx
View File

@ -436,7 +436,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
} = this.props;
const isAutoJoinChecked = item.teamDefault;
const autoJoinIcon = isAutoJoinChecked ? 'checkbox-checked' : 'checkbox-unchecked';
const autoJoinIconColor = isAutoJoinChecked ? themes[theme].tintActive : themes[theme].auxiliaryTintColor;
const autoJoinIconColor = isAutoJoinChecked ? themes[theme].strokeHighlight : themes[theme].fontDefault;
const options: TActionSheetOptionsItem[] = [];

4
app/views/UserNotificationPreferencesView/ListPicker.tsx
View File

@ -45,7 +45,7 @@ const ListPicker = ({
hideActionSheet();
onChangeValue({ [preference]: i.value.toString() });
},
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
}));
return (
@ -54,7 +54,7 @@ const ListPicker = ({
testID={testID}
onPress={() => showActionSheet({ options: getOptions() })}
right={() => (
<Text style={[styles.pickerText, { color: colors.actionTintColor }]}>
<Text style={[styles.pickerText, { color: colors.strokeHighlight }]}>
{option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label}
</Text>
)}

2
app/views/UserPreferencesView/ListPicker.tsx
View File

@ -61,7 +61,7 @@ const ListPicker = ({
onChangeValue({ [preference]: i.value.toString() }, () => setOption(option));
setOption(i);
},
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
}));
return (