From 63d51935f31ff18e758bf3bbe3bb38b2c5941cb1 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 18 Jan 2025 17:11:17 -0800
Subject: [PATCH] styling media controls

---
 .../mobile/src/conversation/Conversation.tsx       |  2 +-
 .../src/message/audioAsset/AudioAsset.styled.ts    |  1 -
 .../mobile/src/message/audioAsset/AudioAsset.tsx   | 14 +++++++++-----
 .../src/message/binaryAsset/BinaryAsset.styled.ts  |  1 -
 .../mobile/src/message/binaryAsset/BinaryAsset.tsx | 10 +++++-----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index 22fd9b46..4d1c5201 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -222,7 +222,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
             <Icon source="server" size={20} />
           )}
           { state.detailSet && state.sealed && (
-            <Icon source="shield-outline" size={18} />
+            <Icon source="shield-outline" size={20} />
           )}
         </View>
         <IconButton style={styles.icon} mode="contained" icon="cog-transfer-outline" size={28} onPress={openDetails} />
diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
index 96a3eea1..73c80826 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
@@ -19,7 +19,6 @@ export const styles = StyleSheet.create({
   button: {
     position: 'absolute',
     borderRadius: 4,
-    backgroundColor: '#444444',
   },
   container: {
     position: 'relative',
diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
index c856710b..c93a1741 100644
--- a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
+++ b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { SafeAreaView, Modal, Share, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native'
-import { Icon, Text, ProgressBar, IconButton } from 'react-native-paper'
+import { Surface, Icon, Text, ProgressBar, IconButton } from 'react-native-paper'
 import { useAudioAsset } from './useAudioAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './AudioAsset.styled'
@@ -81,9 +81,9 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
             source={thumb}
             onLoad={loaded}
           />
-          <View style={styles.button}>
+          <Surface elevation={2} style={styles.button}>
             <Icon size={28} source="play-box-outline" />
-          </View>
+          </Surface>
           <Text style={styles.info} numberOfLines={1}>{ asset.audio?.label || asset.encrypted?.label }</Text>
         </Animated.View>
       </Pressable>
@@ -101,10 +101,14 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
               controls={false} resizeMode="contain" />
           )}
           { status === 'playing' && (
-            <IconButton style={styles.control} size={64} icon="pause" onPress={pause} />
+            <Surface elevation={2} style={styles.control}>
+              <IconButton size={64} icon="pause" onPress={pause} />
+            </Surface>
           )}
           { status === 'paused' && (
-            <IconButton style={styles.control} size={64} icon="play" onPress={play} />
+            <Surface elevation={2} style={styles.control}>
+              <IconButton size={64} icon="play" onPress={play} />
+            </Surface>
           )}
           { state.loading && (
             <View style={styles.progress}>
diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts b/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts
index 583d9468..e3cd6345 100644
--- a/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts
+++ b/app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts
@@ -12,7 +12,6 @@ export const styles = StyleSheet.create({
   button: {
     position: 'absolute',
     borderRadius: 4,
-    backgroundColor: '#444444',
   },
   control: {
     backgroundColor: 'transparent',
diff --git a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
index 97f9b5be..d8d1f631 100644
--- a/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
+++ b/app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { SafeAreaView, Modal, Share, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native'
-import { Text, Icon, ProgressBar, IconButton } from 'react-native-paper'
+import { Text, Surface, Icon, ProgressBar, IconButton } from 'react-native-paper'
 import { useBinaryAsset } from './useBinaryAsset.hook';
 import { MediaAsset } from '../../conversation/Conversation';
 import { styles } from './BinaryAsset.styled'
@@ -70,9 +70,9 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string,
             source={thumb}
             onLoad={loaded}
           />
-          <View style={styles.button}>
+          <Surface elevation={2} style={styles.button}>
             <Icon size={28} source="download-outline" />
-          </View>
+          </Surface>
           <Text style={styles.info} numberOfLines={1}>{ asset.binary?.label || asset.encrypted?.label }</Text>
         </Animated.View>
       </Pressable>
@@ -86,9 +86,9 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string,
               source={thumb}
             />
             { state.dataUrl && (
-              <View style={styles.button}>
+              <Surface elevation={2} style={styles.button}>
                 <IconButton style={styles.control} size={64} icon="download-outline" loading={downloading} onPress={download} />
-              </View>
+              </Surface>
             )}
           </View>
           { state.loading && (