theming for call screen

app/client/mobile/src/calling/Calling.styled.ts

@@ -38,7 +38,6 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgb(64,64,64)',
   },
   calls: {
     borderRadius: 8,
@@ -73,7 +72,6 @@ export const styles = StyleSheet.create({
   },
   name: {
     fontSize: 28,
-    color: '#aaaaaa',
     paddingLeft: 16,
     paddingRight: 16,
     width: '100%',
@@ -100,14 +98,14 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    backgroundColor: 'rgb(64,64,64)',
   },
   card: {
     width: '100%',
-    height: 48,
+    height: 64,
-    paddingTop: 8,
+    paddingTop: 16,
-    paddingBottom: 8,
+    paddingBottom: 16,
-    paddingLeft: 16,
+    paddingLeft: 32,
+    paddingRight: 32,
     borderBottomWidth: 1,
   }
 });

app/client/mobile/src/calling/Calling.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useWindowDimensions, Image, SafeAreaView, Modal, ScrollView, View } from 'react-native';
-import { Surface, Icon, Divider, Button, IconButton, Text, TextInput} from 'react-native-paper';
+import { Surface, Icon, Divider, Button, IconButton, Text, TextInput, useTheme} from 'react-native-paper';
 import {styles} from './Calling.styled';
 import {useCalling} from './useCalling.hook';
 import {BlurView} from '@react-native-community/blur';
@@ -24,6 +24,19 @@ export function Calling({ callCard }: { callCard: string }) {
   const [accepting, setAccepting] = useState(null as null|string);
   const [ignoring, setIgnoring] = useState(null as null|string);
   const [declining, setDeclining] = useState(null as null|string);
+  const theme = useTheme();
+
+  const surface = theme.dark ? {
+    base: 'rgba(16,16,16,1)',
+    blend: 'rgba(16,16,16,0)',
+    control: 'rgba(64,64,64,0.6)',
+    title: 'rgba(32,32,32,0.8)',
+  } : {
+    base: 'rgba(212,212,212,1)',
+    blend: 'rgba(212,212,212,0)',
+    control: 'rgba(128,128,128,0.6)',
+    title: 'rgba(192,192,192,0.8)',
+  };
 
   const toggleVideo = async () => {
     if (!applyingVideo) {
@@ -178,12 +191,12 @@ export function Calling({ callCard }: { callCard: string }) {
         </View>
       )}
       { connecting && !state.calling && (
-        <View style={styles.container}>
+        <View style={{ ...styles.container, backgroundColor: surface.base }}>
           <ActivityIndicator size={72} />
         </View>
       )}
       { state.calling && (
-        <View style={styles.container}>
+        <View style={{ ...styles.container, backgroundColor: surface.base }}>
           <View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}>
             <Image
               style={{ ...styles.image, opacity: state.loaded ? 1 : 0 }}
@@ -192,23 +205,23 @@ export function Calling({ callCard }: { callCard: string }) {
               onLayout={actions.loaded}
             />
             { state.loaded && (
-              <LinearGradient style={{...styles.overlap, width: '100%', height: 16, top: 0, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']} />
+              <LinearGradient style={{...styles.overlap, width: '100%', height: 16, top: 0, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={[surface.base, surface.blend]} />
             )}
             { state.loaded && (
-              <LinearGradient style={{...styles.overlap, width: '100%', height: 16, bottom: 0, borderRadius: 8}} start={{x: 0, y: 0.2}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
+              <LinearGradient style={{...styles.overlap, width: '100%', height: 16, bottom: 0, borderRadius: 8}} start={{x: 0, y: 0.2}} end={{x: 0, y: 1}} colors={[surface.blend, surface.base]} />
             )}
             { state.loaded && (
-              <LinearGradient style={{...styles.overlap, height: '100%', width: 16, right: 0}} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
+              <LinearGradient style={{...styles.overlap, height: '100%', width: 16, right: 0}} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={[surface.blend, surface.base]} />
             )}
             { state.loaded && (
-              <LinearGradient style={{...styles.overlap, height: '100%', width: 16, left: 0}} start={{x: 1, y: 0}} end={{x: 0, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
+              <LinearGradient style={{...styles.overlap, height: '100%', width: 16, left: 0}} start={{x: 1, y: 0}} end={{x: 0, y: 0}} colors={[surface.blend, surface.base]} />
             )}
           </View>
         </View>
       )}
       { state.calling && state.loaded && (
         <View style={{ ...styles.overlap, top: 64 }}>
-          <View style={{backgroundColor: 'rgba(32,32,32,0.8', borderRadius: 4 }}> 
+          <View style={{backgroundColor: surface.title, borderRadius: 4 }}> 
           { state.calling.name && (
             <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text>
           )}
@@ -245,7 +258,7 @@ export function Calling({ callCard }: { callCard: string }) {
       )}
       { state.calling && state.loaded && (
         <View style={{ ...styles.overlap, bottom: frameOffset }}>
-          <View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: 'rgba(128,128,128,0.6)' }}>
+          <View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: surface.control }}>
           <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.audioEnabled ? 'microphone' : 'microphone-off'} loading={applyingAudio} disabled={!state.audio} compact="true" mode="contained" size={32} onPress={toggleAudio} />
           <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.videoEnabled ? 'video-outline' : 'video-off-outline'} loading={applyingVideo} disabled={!state.video} compact="true" mode="contained" size={32} onPress={toggleVideo} />
           <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.danger} icon="phone-hangup-outline" compact="true" mode="contained" size={32} onPress={end} />