layout fixed

app/containers/message/Components/Audio/Slider.tsx

@@ -158,7 +158,7 @@ const Slider = ({ thumbColor = '', sound, onEndCallback }: ISlider) => {
 			<AnimatedTextInput
 				defaultValue={'00:00'}
 				editable={false}
-				style={[styles.duration, { color: colors.bodyText }]}
+				style={[styles.duration, { color: colors.audioTimeText }]}
 				animatedProps={getCurrentTime}
 			/>
 			<View style={styles.slider} onLayout={onLayout}>

app/containers/message/Components/Audio/index.tsx

@@ -7,7 +7,6 @@ import { Sound } from 'expo-av/build/Audio/Sound';
 import Touchable from '../../Touchable';
 import Markdown from '../../../markdown';
 import { CustomIcon } from '../../../CustomIcon';
-import { themes } from '../../../../lib/constants';
 import MessageContext from '../../Context';
 import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
 import { IAttachment, IUserMessage } from '../../../../definitions';
@@ -81,7 +80,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 	const [cached, setCached] = useState(false);
 
 	const { baseUrl, user } = useContext(MessageContext);
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const sound = useRef<Sound | null>(null);
 
@@ -232,24 +231,18 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 
 	let thumbColor;
 	if (isReply) {
-		thumbColor = themes[theme].tintDisabled;
+		thumbColor = colors.tintDisabled;
 	} else {
-		thumbColor = themes[theme].audioPlayerPrimary;
+		thumbColor = colors.audioPlayerPrimary;
 	}
 
 	return (
 		<>
-			<Markdown
+			<Markdown msg={file.description} style={[isReply && style]} username={user.username} getCustomEmoji={getCustomEmoji} />
-				msg={file.description}
-				style={[isReply && style]}
-				username={user.username}
-				getCustomEmoji={getCustomEmoji}
-				theme={theme}
-			/>
 			<View
 				style={[
 					styles.audioContainer,
-					{ backgroundColor: themes[theme].chatComponentBackground, borderColor: themes[theme].borderColor }
+					{ backgroundColor: colors.audioComponentBackground, borderColor: colors.audioBorderColor }
 				]}
 			>
 				<Button disabled={isReply} loading={loading} paused={paused} cached={cached} onPress={onPress} />

app/lib/constants/colors.ts

@@ -105,6 +105,8 @@ export const colors = {
 		audioRateBackground: '#E4E7EA',
 		audioRateText: '#1F2329',
 		audioTimeText: '#2F343D',
+		audioBorderColor: '#EBECEF',
+		audioComponentBackground: '#F7F8FA',
 		...mentions,
 		...callButtons
 	},
@@ -187,6 +189,8 @@ export const colors = {
 		audioRateBackground: '#353B45',
 		audioRateText: '#E4E7EA',
 		audioTimeText: '#E4E7EA',
+		audioBorderColor: '#2F343D',
+		audioComponentBackground: '#1F2329',
 		...mentions,
 		...callButtons
 	},
@@ -269,6 +273,8 @@ export const colors = {
 		audioRateBackground: '#353B45',
 		audioRateText: '#E4E7EA',
 		audioTimeText: '#E4E7EA',
+		audioBorderColor: '#2F343D',
+		audioComponentBackground: '#1F2329',
 		...mentions,
 		...callButtons
 	}