martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-04 23:45:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling for light mode

Browse Source
This commit is contained in:
balzack 2025-01-16 17:38:09 -08:00
parent c3607a114b
commit b4278d99c2
8 changed files with 41 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/mobile/App.tsx
View File

@ -44,12 +44,12 @@ const databagColors = {
inverseOnSurface: 'rgb(239, 241, 237)', inverseOnSurface: 'rgb(239, 241, 237)',
inversePrimary: 'rgb(113, 218, 166)', inversePrimary: 'rgb(113, 218, 166)',
elevation: { elevation: {
level0: 'rgb(251, 253, 248)', level0: 'rgb(255, 255, 255)',
level1: 'rgb(238, 246, 239)', level1: 'rgb(240, 240, 240)',
level2: 'rgb(231, 241, 234)', level2: 'rgb(220, 220, 220)',
level3: 'rgb(223, 237, 229)', level3: 'rgb(200, 200, 200)',
level4: 'rgb(221, 236, 227)', level4: 'rgb(180, 180, 180)',
level5: 'rgb(216, 233, 223)', level5: 'rgb(160, 160, 160)',
}, },
surfaceDisabled: 'rgba(25, 28, 26, 0.12)', surfaceDisabled: 'rgba(25, 28, 26, 0.12)',
onSurfaceDisabled: 'rgba(25, 28, 26, 0.38)', onSurfaceDisabled: 'rgba(25, 28, 26, 0.38)',

4
app/client/mobile/index.js
View File

@ -8,9 +8,7 @@ import App from './App';
import {name as appName} from './app.json'; import {name as appName} from './app.json';
import messaging from '@react-native-firebase/messaging'; import messaging from '@react-native-firebase/messaging';
console.log("CALLING REGISTER DEVICE"); messaging().registerDeviceForRemoteMessages().then(() => { });
messaging().registerDeviceForRemoteMessages().then(() => { console.log("REGISTER SUCCESS!!!!"); });
messaging().setBackgroundMessageHandler(async remoteMessage => {}); messaging().setBackgroundMessageHandler(async remoteMessage => {});

1
app/client/mobile/src/content/Content.styled.ts
View File

@ -27,6 +27,7 @@ export const styles = StyleSheet.create({
borderRadius: 8, borderRadius: 8,
marginTop: 6, marginTop: 6,
marginBottom: 6, marginBottom: 6,
marginRight: 4,
fontSize: 16, fontSize: 16,
}, },
indicator: { indicator: {

4
app/client/mobile/src/conversation/Conversation.styled.ts
View File

@ -112,6 +112,10 @@ export const styles = StyleSheet.create({
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,
}, },
indent: {
paddingLeft: 8,
paddingRight: 8,
},
nopad: { nopad: {
}, },
border: { border: {

39
app/client/mobile/src/conversation/Conversation.tsx
View File

@ -188,6 +188,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
const containerStyle = state.layout === 'large' ? { ...styles.conversation, ...styles.largeConversation } : styles.conversation; const containerStyle = state.layout === 'large' ? { ...styles.conversation, ...styles.largeConversation } : styles.conversation;
const headerStyle = state.layout === 'large' ? { ...styles.header, ...styles.largeHeader } : styles.header; const headerStyle = state.layout === 'large' ? { ...styles.header, ...styles.largeHeader } : styles.header;
const padStyle = state.layout === 'large' ? styles.pad : styles.nopad; const padStyle = state.layout === 'large' ? styles.pad : styles.nopad;
const inputPadStyle = state.layout === 'large' ? styles.pad : styles.indent;
const offset = state.layout === 'large' ? state.avoid - 64 : state.avoid - 120; const offset = state.layout === 'large' ? state.avoid - 64 : state.avoid - 120;
return ( return (
@ -287,7 +288,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
{ media } { media }
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
<View style={padStyle}> <View style={inputPadStyle}>
<TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }} <TextInput multiline={true} mode="outlined" style={{ ...styles.message, fontSize: state.textSize }}
blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send" blurOnSubmit={true} onSubmitEditing={sendMessage} returnKeyType="send"
onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)} editable={!sending} onFocus={()=>setAvoid(true)} onBlur={()=>setAvoid(false)} editable={!sending}
@ -298,13 +299,13 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
{ avoid && (<View style={{ ...styles.avoid, height: offset }} />) } { avoid && (<View style={{ ...styles.avoid, height: offset }} />) }
<View style={styles.controls}> <View style={styles.controls}>
<Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable> <Pressable style={styles.control} onPress={addImage}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="camera" size={24} color={Colors.primary} /></Surface></Pressable>
<Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable> <Pressable style={styles.control} onPress={addVideo}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="video-outline" size={24} color={Colors.primary} /></Surface></Pressable>
<Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable> <Pressable style={styles.control} onPress={addAudio}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="volume-high" size={24} color={Colors.primary} /></Surface></Pressable>
<Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2}><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable> <Pressable style={styles.control} onPress={addBinary}><Surface style={styles.surface} elevation={2} mode="flat"><Icon style={styles.button} source="file-outline" size={24} color={Colors.primary} /></Surface></Pressable>
<Divider style={styles.separator} /> <Divider style={styles.separator} />
<Pressable style={styles.control} onPress={()=>setColorMenu(true)}> <Pressable style={styles.control} onPress={()=>setColorMenu(true)}>
<Surface style={styles.surface} elevation={2}> <Surface style={styles.surface} elevation={2} mode="flat">
<Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} /> <Icon style={styles.button} source="format-color-text" size={24} color={Colors.primary} />
</Surface> </Surface>
</Pressable> </Pressable>
@ -314,7 +315,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
onDismiss={()=>setSizeMenu(false)} onDismiss={()=>setSizeMenu(false)}
anchor={( anchor={(
<Pressable style={styles.control} onPress={()=>setSizeMenu(true)}> <Pressable style={styles.control} onPress={()=>setSizeMenu(true)}>
<Surface style={styles.surface} elevation={2}> <Surface style={styles.surface} elevation={2} mode="flat">
<Icon style={styles.button} source="format-size" size={24} color={Colors.primary} /> <Icon style={styles.button} source="format-size" size={24} color={Colors.primary} />
</Surface> </Surface>
</Pressable> </Pressable>
@ -325,17 +326,19 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
</Menu> </Menu>
<View style={styles.end}> <View style={styles.end}>
<Pressable style={styles.control} onPress={sendMessage}><Surface style={styles.surface} elevation={2}> <Pressable style={styles.control} onPress={sendMessage}>
{ sending && ( <Surface style={styles.surface} elevation={2} mode="flat">
<ActivityIndicator size="small" /> { sending && (
)} <ActivityIndicator size="small" />
{ !sending && state.access && (state.message || state.assets.length != 0) && ( )}
<Icon style={styles.button} source="send" size={24} color={Colors.primary} /> { !sending && state.access && (state.message || state.assets.length != 0) && (
)} <Icon style={styles.button} source="send" size={24} color={Colors.primary} />
{ !sending && (!state.access || (!state.message && state.assets.length == 0)) && ( )}
<Icon style={styles.button} source="send" size={24} color={Colors.placeholder} /> { !sending && (!state.access || (!state.message && state.assets.length == 0)) && (
)} <Icon style={styles.button} source="send" size={24} color={Colors.placeholder} />
</Surface></Pressable> )}
</Surface>
</Pressable>
</View> </View>
</View> </View>
</View> </View>

3
app/client/mobile/src/session/Session.styled.ts
View File

@ -9,6 +9,9 @@ export const styles = StyleSheet.create({
width: '100%', width: '100%',
height: '100%', height: '100%',
}, },
noHeader: {
headerBackTitleVisible: false,
},
full: { full: {
width: '100%', width: '100%',
height: '100%', height: '100%',

26
app/client/mobile/src/session/Session.tsx
View File

@ -207,22 +207,14 @@ function ContentTab({scheme, textCard, contentTab}: {scheme: string, textCard: {
<Content textCard={textCard} openConversation={()=>openConversation(props)} /> <Content textCard={textCard} openConversation={()=>openConversation(props)} />
)} )}
</ContentStack.Screen> </ContentStack.Screen>
<ContentStack.Screen name="conversation" <ContentStack.Screen name="conversation" options={styles.noHeader}>
options={{
headerBackTitleVisible: false,
...TransitionPresets.ScaleFromCenterAndroid,
}}>
{props => ( {props => (
<SafeAreaView style={styles.screen}> <SafeAreaView style={styles.screen}>
<Conversation openDetails={()=>props.navigation.navigate('details')} close={()=>props.navigation.goBack()} wide={false} /> <Conversation openDetails={()=>props.navigation.navigate('details')} close={()=>props.navigation.goBack()} wide={false} />
</SafeAreaView> </SafeAreaView>
)} )}
</ContentStack.Screen> </ContentStack.Screen>
<ContentStack.Screen name="details" <ContentStack.Screen name="details" options={styles.noHeader}>
options={{
headerBackTitleVisible: false,
...TransitionPresets.ScaleFromCenterAndroid,
}}>
{props => ( {props => (
<Details close={()=>props.navigation.goBack()} closeAll={()=>props.navigation.popToTop()} /> <Details close={()=>props.navigation.goBack()} closeAll={()=>props.navigation.popToTop()} />
)} )}
@ -255,12 +247,7 @@ function ContactTab({scheme, textContact}: {scheme: string, textContact: (cardId
/> />
)} )}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen <ContactStack.Screen name="registry" options={styles.noHeader}>
name="registry"
options={{
headerBackTitleVisible: false,
...TransitionPresets.ScaleFromCenterAndroid,
}}>
{props => ( {props => (
<Registry <Registry
close={props.navigation.goBack} close={props.navigation.goBack}
@ -271,12 +258,7 @@ function ContactTab({scheme, textContact}: {scheme: string, textContact: (cardId
/> />
)} )}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen <ContactStack.Screen name="profile" options={styles.noHeader}>
name="profile"
options={{
headerBackTitleVisible: false,
...TransitionPresets.ScaleFromCenterAndroid,
}}>
{props => <Profile close={props.navigation.goBack} params={contactParams} />} {props => <Profile close={props.navigation.goBack} params={contactParams} />}
</ContactStack.Screen> </ContactStack.Screen>
</ContactStack.Navigator> </ContactStack.Navigator>

2
app/client/mobile/src/settings/Settings.tsx
View File

@ -456,7 +456,7 @@ export function Settings({showLogout}: {showLogout: boolean}) {
{state.profile.description && <Text style={styles.labelSet}>{state.profile.description}</Text>} {state.profile.description && <Text style={styles.labelSet}>{state.profile.description}</Text>}
</View> </View>
<TouchableOpacity style={styles.editDetails} onPress={() => setDetails(true)}> <TouchableOpacity style={styles.editDetails} onPress={() => setDetails(true)}>
<Surface elevation={4} mode="flat"> <Surface elevation={2} mode="flat">
<Text style={styles.editDetailsLabel}>{state.strings.edit}</Text> <Text style={styles.editDetailsLabel}>{state.strings.edit}</Text>
</Surface> </Surface>
</TouchableOpacity> </TouchableOpacity>