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
disabled={!loaded}
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>
);
};

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 };
type TCustomIconName = 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled';
const PlayButton = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
const { colors } = useTheme();
let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' = 'arrow-down';
let customIconName: TCustomIconName = 'arrow-down';
if (cached) {
customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled';
}
return (
<Touchable
style={[styles.playPauseButton, { backgroundColor: colors.audioPlayerPrimary }]}
style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]}
disabled={disabled}
onPress={onPress}
hitSlop={BUTTON_HIT_SLOP}
@ -34,7 +36,7 @@ const PlayButton = React.memo(({ loading, paused, onPress, disabled, cached }: I
{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>
);

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

@ -126,19 +126,19 @@ const Slider = ({ currentTime, duration, loaded = false, onChangeTime }: ISlider
} as any;
}, [current, isTimeChanged, duration]);
const thumbColor = loaded ? colors.audioPlayerPrimary : colors.tintDisabled;
const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
return (
<View style={styles.sliderContainer}>
<AnimatedTextInput
defaultValue={'00:00'}
editable={false}
style={[styles.duration, { color: colors.audioTimeText }]}
style={[styles.duration, { color: colors.fontDefault }]}
animatedProps={getCurrentTime}
/>
<View style={styles.slider} onLayout={onLayout}>
<View style={[styles.line, { backgroundColor: colors.audioPlayerSecondary }]} />
<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.audioPlayerPrimary }]} />
<View style={[styles.line, { backgroundColor: colors.strokeLight }]} />
<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} />
<PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}>
<Animated.View hitSlop={BUTTON_HIT_SLOP} style={[styles.thumbSlider, { backgroundColor: thumbColor }, styleThumb]} />
</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 (
<>
<Markdown msg={msg} style={[isReply && style]} username={user.username} getCustomEmoji={getCustomEmoji} />
<View
style={[
styles.audioContainer,
{ backgroundColor: colors.audioComponentBackground, borderColor: colors.audioBorderColor }
]}>
<View style={[styles.audioContainer, { backgroundColor: colors.surfaceTint, borderColor: colors.strokeExtraLight }]}>
<PlayButton disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={onPress} />
<Slider currentTime={currentTime} duration={duration} loaded={!isReply && cached} onChangeTime={setPosition} />
<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',
statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2',
audioPlayerPrimary: '#156FF5',
audioPlayerSecondary: '#CBCED1',
audioRateBackground: '#E4E7EA',
audioRateText: '#1F2329',
audioTimeText: '#2F343D',
audioBorderColor: '#EBECEF',
audioComponentBackground: '#F7F8FA',
buttonBackgroundPrimaryDefault: '#156FF5',
buttonBackgroundSecondaryDefault: '#E4E7EA',
buttonFontOnPrimary: '#FFFFFF',
buttonFontOnSecondary: '#1F2329',
fontDefault: '#2F343D',
strokeExtraLight: '#EBECEF',
strokeLight: '#CBCED1',
surfaceTint: '#F7F8FA',
...mentions,
...callButtons
},
@ -188,13 +189,14 @@ export const colors = {
statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2',
audioPlayerPrimary: '#3976D1',
audioPlayerSecondary: '#404754',
audioRateBackground: '#353B45',
audioRateText: '#E4E7EA',
audioTimeText: '#E4E7EA',
audioBorderColor: '#2F343D',
audioComponentBackground: '#1F2329',
buttonBackgroundPrimaryDefault: '#3976D1',
buttonBackgroundSecondaryDefault: '#353B45',
buttonFontOnPrimary: '#FFFFFF',
buttonFontOnSecondary: '#E4E7EA',
fontDefault: '#E4E7EA',
strokeExtraLight: '#2F343D',
strokeLight: '#333842',
surfaceTint: '#1F2329',
...mentions,
...callButtons
},
@ -274,13 +276,14 @@ export const colors = {
statusBackgroundWarning: '#FFECAD',
statusFontOnWarning: '#B88D00',
overlayColor: '#1F2329B2',
audioPlayerPrimary: '#3976D1',
audioPlayerSecondary: '#404754',
audioRateBackground: '#353B45',
audioRateText: '#E4E7EA',
audioTimeText: '#E4E7EA',
audioBorderColor: '#2F343D',
audioComponentBackground: '#1F2329',
buttonBackgroundPrimaryDefault: '#3976D1',
buttonBackgroundSecondaryDefault: '#353B45',
buttonFontOnPrimary: '#FFFFFF',
buttonFontOnSecondary: '#E4E7EA',
fontDefault: '#E4E7EA',
strokeExtraLight: '#2F343D',
strokeLight: '#333842',
surfaceTint: '#1F2329',
...mentions,
...callButtons
}