start the tweaks on layout

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

@@ -162,8 +162,8 @@ const Slider = ({ thumbColor = '', sound, onEndCallback }: ISlider) => {
 				animatedProps={getCurrentTime}
 			/>
 			<View style={styles.slider} onLayout={onLayout}>
-				<View style={[styles.line, { backgroundColor: colors.auxiliaryText }]} />
-				<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.tintColor }]} />
+				<View style={[styles.line, { backgroundColor: colors.audioPlayerSecondary }]} />
+				<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.audioPlayerPrimary }]} />
 				<PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}>
 					<Animated.View style={[styles.thumbSlider, { backgroundColor: thumbColor }, styleThumb]} />
 				</PanGestureHandler>

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

@@ -9,7 +9,7 @@ import Markdown from '../../../markdown';
 import { CustomIcon } from '../../../CustomIcon';
 import { themes } from '../../../../lib/constants';
 import MessageContext from '../../Context';
-import ActivityIndicator from '../../../ActivityIndicator';
+// import ActivityIndicator from '../../../ActivityIndicator';
 import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
 import { IAttachment, IUserMessage } from '../../../../definitions';
 import { useTheme } from '../../../../theme';
@@ -51,23 +51,26 @@ const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
 const Button = React.memo(({ loading, paused, onPress, disabled, cached }: IButton) => {
 	const { colors } = useTheme();
 
-	let customIconName: 'arrow-down-circle' | 'play-filled' | 'pause-filled' = 'arrow-down-circle';
+	let customIconName: 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled' | 'loading' = 'arrow-down';
 	if (cached) {
-		customIconName = paused ? 'play-filled' : 'pause-filled';
+		customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled';
+	}
+	if (loading) {
+		customIconName = 'loading';
 	}
 	return (
 		<Touchable
-			style={styles.playPauseButton}
+			style={[styles.playPauseButton, { backgroundColor: colors.audioPlayerPrimary }]}
 			disabled={disabled}
 			onPress={onPress}
 			hitSlop={BUTTON_HIT_SLOP}
 			background={Touchable.SelectableBackgroundBorderless()}
 		>
-			{loading ? (
+			<CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonText} />
+			{/* {loading ? (
 				<ActivityIndicator style={[styles.playPauseButton, styles.audioLoading]} />
 			) : (
-				<CustomIcon name={customIconName} size={36} color={disabled ? colors.tintDisabled : colors.tintColor} />
-			)}
+			)} */}
 		</Touchable>
 	);
 });
@@ -223,7 +226,7 @@ const MessageAudio = ({ file, getCustomEmoji, author, isReply, style }: IMessage
 	if (isReply) {
 		thumbColor = themes[theme].tintDisabled;
 	} else {
-		thumbColor = themes[theme].tintColor;
+		thumbColor = themes[theme].audioPlayerPrimary;
 	}
 
 	return (

app/containers/message/Components/Audio/styles.ts

@@ -14,7 +14,6 @@ const styles = StyleSheet.create({
 	},
 	playPauseButton: {
 		alignItems: 'center',
-		backgroundColor: '#929',
 		marginLeft: 16,
 		height: 32,
 		width: 32,

app/lib/constants/colors.ts

@@ -100,6 +100,8 @@ export const colors = {
 		gray100: '#CBCED1',
 		n900: '#1F2329',
 		overlayColor: '#1F2329B2',
+		audioPlayerPrimary: '#156FF5',
+		audioPlayerSecondary: '#CBCED1',
 		...mentions,
 		...callButtons
 	},
@@ -177,6 +179,8 @@ export const colors = {
 		gray100: '#CBCED1',
 		n900: '#FFFFFF',
 		overlayColor: '#1F2329B2',
+		audioPlayerPrimary: '#3976D1',
+		audioPlayerSecondary: '#404754',
 		...mentions,
 		...callButtons
 	},
@@ -254,6 +258,8 @@ export const colors = {
 		gray100: '#CBCED1',
 		n900: '#FFFFFF',
 		overlayColor: '#1F2329B2',
+		audioPlayerPrimary: '#3976D1',
+		audioPlayerSecondary: '#404754',
 		...mentions,
 		...callButtons
 	}