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

refactor colors to be the same as figmas name

This commit is contained in:
Reinaldo Neto 2023-08-23 16:03:20 -03:00
parent 67b3200a02
commit 0738f60f8e
6 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/containers/message/__snapshots__/Message.stories.storyshot
View File

File diff suppressed because one or more lines are too long

4
app/containers/message/Components/Audio/AudioRate.tsx
View File

@ -25,9 +25,9 @@ const AudioRate = ({
<Touchable <Touchable
disabled={!loaded} disabled={!loaded}
onPress={onPress} onPress={onPress}
style={[styles.containerAudioRate, { backgroundColor: colors.audioRateBackground }]} style={[styles.containerAudioRate, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}
> >
<Text style={[styles.audioRateText, { color: colors.audioRateText }]}>{rate}x</Text> <Text style={[styles.audioRateText, { color: colors.buttonFontOnSecondary }]}>{rate}x</Text>
</Touchable> </Touchable>
); );
}; };

8
app/containers/message/Components/Audio/PlayButton.tsx
View File

@ -16,16 +16,18 @@ interface IButton {
const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 }; const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
type TCustomIconName = 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled';
const PlayButton = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => { const PlayButton = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
const { colors } = useTheme(); const { colors } = useTheme();
let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' = 'arrow-down'; let customIconName: TCustomIconName = 'arrow-down';
if (cached) { if (cached) {
customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled'; customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled';
} }
return ( return (
<Touchable <Touchable
style={[styles.playPauseButton, { backgroundColor: colors.audioPlayerPrimary }]} style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]}
disabled={disabled} disabled={disabled}
onPress={onPress} onPress={onPress}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
@ -34,7 +36,7 @@ const PlayButton = React.memo(({ loading, paused, onPress, disabled, cached }: I
{loading ? ( {loading ? (
<Loading /> <Loading />
) : ( ) : (
<CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonText} /> <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontOnPrimary} />
)} )}
</Touchable> </Touchable>
); );

8
app/containers/message/Components/Audio/Slider.tsx
View File

@ -126,19 +126,19 @@ const Slider = ({ currentTime, duration, loaded = false, onChangeTime }: ISlider
} as any; } as any;
}, [current, isTimeChanged, duration]); }, [current, isTimeChanged, duration]);
const thumbColor = loaded ? colors.audioPlayerPrimary : colors.tintDisabled; const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
return ( return (
<View style={styles.sliderContainer}> <View style={styles.sliderContainer}>
<AnimatedTextInput <AnimatedTextInput
defaultValue={'00:00'} defaultValue={'00:00'}
editable={false} editable={false}
style={[styles.duration, { color: colors.audioTimeText }]} style={[styles.duration, { color: colors.fontDefault }]}
animatedProps={getCurrentTime} animatedProps={getCurrentTime}
/> />
<View style={styles.slider} onLayout={onLayout}> <View style={styles.slider} onLayout={onLayout}>
<View style={[styles.line, { backgroundColor: colors.audioPlayerSecondary }]} /> <View style={[styles.line, { backgroundColor: colors.strokeLight }]} />
<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.audioPlayerPrimary }]} /> <Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} />
<PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}> <PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}>
<Animated.View hitSlop={BUTTON_HIT_SLOP} style={[styles.thumbSlider, { backgroundColor: thumbColor }, styleThumb]} /> <Animated.View hitSlop={BUTTON_HIT_SLOP} style={[styles.thumbSlider, { backgroundColor: thumbColor }, styleThumb]} />
</PanGestureHandler> </PanGestureHandler>

6
app/containers/message/Components/Audio/index.tsx
View File

@ -206,11 +206,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style, msg }: IMe
return ( return (
<> <>
<Markdown msg={msg} style={[isReply && style]} username={user.username} getCustomEmoji={getCustomEmoji} /> <Markdown msg={msg} style={[isReply && style]} username={user.username} getCustomEmoji={getCustomEmoji} />
<View <View style={[styles.audioContainer, { backgroundColor: colors.surfaceTint, borderColor: colors.strokeExtraLight }]}>
style={[
styles.audioContainer,
{ backgroundColor: colors.audioComponentBackground, borderColor: colors.audioBorderColor }
]}>
<PlayButton disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={onPress} /> <PlayButton disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={onPress} />
<Slider currentTime={currentTime} duration={duration} loaded={!isReply && cached} onChangeTime={setPosition} /> <Slider currentTime={currentTime} duration={duration} loaded={!isReply && cached} onChangeTime={setPosition} />
<AudioRate onChange={onChangeRate} loaded={!isReply && cached} rate={rate} /> <AudioRate onChange={onChangeRate} loaded={!isReply && cached} rate={rate} />

45
app/lib/constants/colors.ts
View File

@ -102,13 +102,14 @@ export const colors = {
statusBackgroundWarning: '#FFECAD', statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00', statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2', overlayColor: '#1F2329B2',
audioPlayerPrimary: '#156FF5', buttonBackgroundPrimaryDefault: '#156FF5',
audioPlayerSecondary: '#CBCED1', buttonBackgroundSecondaryDefault: '#E4E7EA',
audioRateBackground: '#E4E7EA', buttonFontOnPrimary: '#FFFFFF',
audioRateText: '#1F2329', buttonFontOnSecondary: '#1F2329',
audioTimeText: '#2F343D', fontDefault: '#2F343D',
audioBorderColor: '#EBECEF', strokeExtraLight: '#EBECEF',
audioComponentBackground: '#F7F8FA', strokeLight: '#CBCED1',
surfaceTint: '#F7F8FA',
...mentions, ...mentions,
...callButtons ...callButtons
}, },
@ -188,13 +189,14 @@ export const colors = {
statusBackgroundWarning: '#FFECAD', statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00', statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2', overlayColor: '#1F2329B2',
audioPlayerPrimary: '#3976D1', buttonBackgroundPrimaryDefault: '#3976D1',
audioPlayerSecondary: '#404754', buttonBackgroundSecondaryDefault: '#353B45',
audioRateBackground: '#353B45', buttonFontOnPrimary: '#FFFFFF',
audioRateText: '#E4E7EA', buttonFontOnSecondary: '#E4E7EA',
audioTimeText: '#E4E7EA', fontDefault: '#E4E7EA',
audioBorderColor: '#2F343D', strokeExtraLight: '#2F343D',
audioComponentBackground: '#1F2329', strokeLight: '#333842',
surfaceTint: '#1F2329',
...mentions, ...mentions,
...callButtons ...callButtons
}, },
@ -274,13 +276,14 @@ export const colors = {
statusBackgroundWarning: '#FFECAD', statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00', statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2', overlayColor: '#1F2329B2',
audioPlayerPrimary: '#3976D1', buttonBackgroundPrimaryDefault: '#3976D1',
audioPlayerSecondary: '#404754', buttonBackgroundSecondaryDefault: '#353B45',
audioRateBackground: '#353B45', buttonFontOnPrimary: '#FFFFFF',
audioRateText: '#E4E7EA', buttonFontOnSecondary: '#E4E7EA',
audioTimeText: '#E4E7EA', fontDefault: '#E4E7EA',
audioBorderColor: '#2F343D', strokeExtraLight: '#2F343D',
audioComponentBackground: '#1F2329', strokeLight: '#333842',
surfaceTint: '#1F2329',
...mentions, ...mentions,
...callButtons ...callButtons
} }