martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

styling conversation for dark mode

Browse Source
This commit is contained in:
Roland Osborne 2023-10-02 16:30:37 -07:00
parent c3c979ad72
commit 405e6c2b76
13 changed files with 43 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/mobile/src/constants/Colors.js
View File

@ -19,7 +19,7 @@ const LightColors = {
descriptionText: '#888888', descriptionText: '#888888',
text: '#444444', text: '#444444',
screenBase: '#dddddd', screenBase: '#dddddd',
drawerBase: '#eeeeee', drawerBase: '#bbbbbb',
areaBase: '#ffffff', areaBase: '#ffffff',
modalBase: '#ffffff', modalBase: '#ffffff',
modalBorder: '#555555', modalBorder: '#555555',
@ -28,7 +28,7 @@ const LightColors = {
primaryButton: '#448866', primaryButton: '#448866',
primaryButtonText: '#ffffff', primaryButtonText: '#ffffff',
cancelButton: '#888888', cancelButton: '#888888',
cancelButtonText: '#ffffff', cancelButtonText: '#888888',
disabledButton: '#dddddd', disabledButton: '#dddddd',
disabledButtonText: '#aaaaaa', disabledButtonText: '#aaaaaa',
dangerButton: '#ff5555', dangerButton: '#ff5555',
@ -55,10 +55,10 @@ const LightColors = {
sliderGrip: '#eeeeee', sliderGrip: '#eeeeee',
areaBorder: '#ffffff', areaBorder: '#ffffff',
connected: '#4488FF', connected: '#4488FF',
connecting: '#dd88ff', connecting: '#dd44ff',
requested: '#448844', requested: '#448844',
pending: '#ffaa22', pending: '#ffaa22',
confirmed: '#aaaaaa', confirmed: '#999999',
offsync: '#ff4444', offsync: '#ff4444',
unsaved: '#888888', unsaved: '#888888',
}; };
@ -108,7 +108,7 @@ const DarkColors = {
confirmedIndicator: '#88bb00', confirmedIndicator: '#88bb00',
unknownIndicator: '#dddddd', unknownIndicator: '#dddddd',
errorIndicator: '#ffaaaa', errorIndicator: '#ffaaaa',
horizontalDivider: '#888888', horizontalDivider: '#999999',
verticalDivider: '#aaaaaa', verticalDivider: '#aaaaaa',
itemDivider: '#555555', itemDivider: '#555555',
unreadIndicator: '#00aa00', unreadIndicator: '#00aa00',

4
app/mobile/src/constants/Strings.js
View File

@ -94,9 +94,9 @@ const Strings = [
confirmReport: 'Report', confirmReport: 'Report',
confirmed: 'Saved', confirmed: 'Saved',
pending: 'Unknown', pending: 'Unknown',
connecting: 'Requested', connecting: 'Request Sent',
connected: 'Connected', connected: 'Connected',
requested: 'Received', requested: 'Request Received',
unsaved: 'Unsaved', unsaved: 'Unsaved',
offsync: 'Offsync', offsync: 'Offsync',
actionResync: 'Resync', actionResync: 'Resync',

6
app/mobile/src/session/channels/Channels.styled.js
View File

@ -98,14 +98,14 @@ export const styles = StyleSheet.create({
paddingTop: 8, paddingTop: 8,
paddingBottom: 16, paddingBottom: 16,
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.divider, borderColor: Colors.horizontalDivider,
}, },
columntop: { columntop: {
paddingLeft: 24, paddingLeft: 24,
paddingRight: 16, paddingRight: 16,
paddingBottom: 8, paddingBottom: 8,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.divider, borderColor: Colors.horizontalDivider,
}, },
addWrapper: { addWrapper: {
display: 'flex', display: 'flex',
@ -143,7 +143,7 @@ export const styles = StyleSheet.create({
}, },
cancel: { cancel: {
borderWidth: 1, borderWidth: 1,
borderColor: Colors.lightgrey, borderColor: Colors.cancelButton,
borderRadius: 4, borderRadius: 4,
padding: 4, padding: 4,
marginRight: 8, marginRight: 8,

10
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -66,20 +66,20 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
}, []); }, []);
return ( return (
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={72}
enabled={Platform.OS === 'ios' ? state.keyboard : false}> <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.container}> <View style={styles.container}>
{ !navigation && ( { !navigation && (
<View style={styles.header}> <View style={styles.header}>
{ state.loaded && ( { state.loaded && (
<TouchableOpacity style={styles.headertitle} onPress={openDetails}> <TouchableOpacity style={styles.headertitle} onPress={openDetails} activeOpacity={1}>
<Logo src={state.logo} width={32} height={32} radius={2} /> <Logo src={state.logo} width={32} height={32} radius={2} />
<Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text> <Text style={styles.titletext} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
<Ionicons name={'setting'} size={24} color={Colors.primary} style={styles.titlebutton} /> <Ionicons name={'setting'} size={24} color={Colors.linkText} style={styles.titlebutton} />
</TouchableOpacity> </TouchableOpacity>
)} )}
<TouchableOpacity style={styles.headerclose} onPress={closeConversation}> <TouchableOpacity style={styles.headerclose} onPress={closeConversation}>
<Ionicons name={'close'} size={22} color={Colors.grey} style={styles.titlebutton} /> <Ionicons name={'close'} size={22} color={Colors.descriptionText} style={styles.titlebutton} />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}

2
app/mobile/src/session/conversation/Conversation.styled.js
View File

@ -18,7 +18,7 @@ export const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.divider, borderColor: Colors.horizontalDivider,
height: 48, height: 48,
marginLeft: 16, marginLeft: 16,
marginRight: 16, marginRight: 16,

18
app/mobile/src/session/conversation/addTopic/AddTopic.jsx
View File

@ -159,7 +159,7 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
<View style={{ height: 0, width: `${state.progress}%`, borderColor: Colors.background, borderWidth: 1 }} /> <View style={{ height: 0, width: `${state.progress}%`, borderColor: Colors.background, borderWidth: 1 }} />
)} )}
{ !state.uploadError && !state.progress && ( { !state.uploadError && !state.progress && (
<View style={{ height: 0, width: '100%', borderColor: Colors.formBackground, borderWidth: 1 }} /> <View style={{ height: 0, width: '100%', borderColor: Colors.horizontalDivider, borderWidth: 1 }} />
)} )}
{ state.uploadError && ( { state.uploadError && (
<View style={{ height: 0, width: '100%', borderColor: Colors.alert, borderWidth: 1 }} /> <View style={{ height: 0, width: '100%', borderColor: Colors.alert, borderWidth: 1 }} />
@ -178,28 +178,28 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
<View style={styles.addButtons}> <View style={styles.addButtons}>
{ state.enableImage && ( { state.enableImage && (
<TouchableOpacity style={styles.addButton} onPress={addImage}> <TouchableOpacity style={styles.addButton} onPress={addImage}>
<AntIcons name="picture" size={20} color={Colors.text} /> <AntIcons name="picture" size={24} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.enableVideo && ( { state.enableVideo && (
<TouchableOpacity style={styles.addButton} onPress={addVideo}> <TouchableOpacity style={styles.addButton} onPress={addVideo}>
<MatIcons name="video-outline" size={24} color={Colors.text} /> <MatIcons name="video-outline" size={26} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
)} )}
{ state.enableAudio && ( { state.enableAudio && (
<TouchableOpacity style={styles.addButton} onPress={addAudio}> <TouchableOpacity style={styles.addButton} onPress={addAudio}>
<MatIcons name="music-box-outline" size={20} color={Colors.text} /> <MatIcons name="music-note" size={24} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
)} )}
<TouchableOpacity style={styles.addButton} onPress={addBinary}> <TouchableOpacity style={styles.addButton} onPress={addBinary}>
<MatIcons name="all-inclusive-box-outline" size={20} color={Colors.text} /> <MatIcons name="file-outline" size={24} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.divider} /> <View style={styles.divider} />
<TouchableOpacity style={styles.addButton} onPress={actions.showFontSize}> <TouchableOpacity style={styles.addButton} onPress={actions.showFontSize}>
<MatIcons name="format-size" size={20} color={Colors.text} /> <MatIcons name="format-size" size={24} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.addButton} onPress={actions.showFontColor}> <TouchableOpacity style={styles.addButton} onPress={actions.showFontColor}>
<MatIcons name="palette-outline" size={20} color={Colors.text} /> <MatIcons name="palette-outline" size={24} color={Colors.text} />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.space} /> <View style={styles.space} />
<TouchableOpacity style={styles.addButton} onPress={sendMessage}> <TouchableOpacity style={styles.addButton} onPress={sendMessage}>
@ -210,13 +210,13 @@ export function AddTopic({ contentKey, shareIntent, setShareIntent }) {
<MatIcons name="send-outline" size={20} color={Colors.alert} /> <MatIcons name="send-outline" size={20} color={Colors.alert} />
)} )}
{ !state.conflict && state.locked && !contentKey && ( { !state.conflict && state.locked && !contentKey && (
<MatIcons name="lock" size={20} color={Colors.lightgrey} /> <MatIcons name="lock" size={20} color={Colors.disabledButtonText} />
)} )}
{ !state.conflict && !state.busy && (!state.locked || contentKey) && (state.message || state.assets.length > 0) && ( { !state.conflict && !state.busy && (!state.locked || contentKey) && (state.message || state.assets.length > 0) && (
<MatIcons name="send-outline" size={20} color={Colors.text} /> <MatIcons name="send-outline" size={20} color={Colors.text} />
)} )}
{ !state.conflict && !state.busy && (!state.locked || contentKey) && !(state.message || state.assets.length > 0) && ( { !state.conflict && !state.busy && (!state.locked || contentKey) && !(state.message || state.assets.length > 0) && (
<MatIcons name="send-outline" size={20} color={Colors.lightgrey} /> <MatIcons name="send-outline" size={20} color={Colors.disabledButtonText} />
)} )}
</TouchableOpacity> </TouchableOpacity>
</View> </View>

19
app/mobile/src/session/conversation/addTopic/AddTopic.styled.js
View File

@ -4,7 +4,7 @@ import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({ export const styles = StyleSheet.create({
add: { add: {
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.divider, borderColor: Colors.itemDivider,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}, },
@ -18,15 +18,12 @@ export const styles = StyleSheet.create({
addButton: { addButton: {
width: 36, width: 36,
height: 36, height: 36,
backgroundColor: Colors.white,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
borderWidth: 1, borderRadius: 4,
borderColor: Colors.divider, marginLeft: 8,
borderRadius: 2, marginRight: 8,
marginLeft: 4,
marginRight: 4,
}, },
input: { input: {
marginLeft: 16, marginLeft: 16,
@ -36,8 +33,8 @@ export const styles = StyleSheet.create({
padding: 8, padding: 8,
borderRadius: 4, borderRadius: 4,
borderWidth: 1, borderWidth: 1,
borderColor: Colors.divider, borderColor: Colors.itemDivider,
backgroundColor: Colors.white, backgroundColor: Colors.inputBase,
maxHeight: 96, maxHeight: 96,
minHeight: 52, minHeight: 52,
}, },
@ -45,9 +42,9 @@ export const styles = StyleSheet.create({
height: 32, height: 32,
flexGrow: 1, flexGrow: 1,
}, },
divider: { itemDivider: {
borderWidth: 1, borderWidth: 1,
borderColor: Colors.divider, borderColor: Colors.itemDivider,
height: 32, height: 32,
marginLeft: 8, marginLeft: 8,
marginRight: 8, marginRight: 8,

2
app/mobile/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -141,7 +141,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
{ (state.logo === 'avatar' || !state.logo) && ( { (state.logo === 'avatar' || !state.logo) && (
<Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} /> <Image source={avatar} style={{ width: 28, height: 28, borderRadius: 6 }} />
)} )}
<Text style={{ ...styles.name, color: state.nameSet ? Colors.text : Colors.grey }}>{ state.name }</Text> <Text style={{ ...styles.name, fontStyle: state.nameSet ? 'normal' : 'italic' }}>{ state.name }</Text>
<Text style={styles.timestamp}>{ state.timestamp }</Text> <Text style={styles.timestamp}>{ state.timestamp }</Text>
</TouchableOpacity> </TouchableOpacity>
{ state.status === 'confirmed' && ( { state.status === 'confirmed' && (

5
app/mobile/src/session/conversation/topicItem/TopicItem.styled.js
View File

@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
}, },
item: { item: {
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.white, borderColor: Colors.itemDivider,
paddingTop: 8, paddingTop: 8,
}, },
header: { header: {
@ -17,12 +17,13 @@ export const styles = StyleSheet.create({
}, },
name: { name: {
paddingLeft: 8, paddingLeft: 8,
color: Colors.descriptionText,
}, },
timestamp: { timestamp: {
paddingLeft: 8, paddingLeft: 8,
fontSize: 11, fontSize: 11,
paddingTop: 2, paddingTop: 2,
color: Colors.grey, color: Colors.descriptionText,
}, },
carousel: { carousel: {
paddingLeft: 52, paddingLeft: 52,

6
app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js
View File

@ -108,9 +108,11 @@ export function useTopicItem(item, hosting, remove, contentKey) {
known = true; known = true;
if (identity.name) { if (identity.name) {
name = identity.name; name = identity.name;
nameSet = true;
} }
else { else {
name = identity.node ? `${identity.handle}@${identity.node}` : identity.handle; name = identity.node ? `${identity.handle}/${identity.node}` : identity.handle;
nameSet = false;
} }
const img = profile.state.imageUrl; const img = profile.state.imageUrl;
if (img) { if (img) {
@ -132,7 +134,7 @@ export function useTopicItem(item, hosting, remove, contentKey) {
} }
else { else {
const { node, handle } = contact.profile || {}; const { node, handle } = contact.profile || {};
name = node ? `${handle}@${node}` : handle; name = node ? `${handle}/${node}` : handle;
nameSet = false; nameSet = false;
} }
} }

2
app/mobile/src/session/settings/Settings.styled.js
View File

@ -66,7 +66,7 @@ export const styles = StyleSheet.create({
divider: { divider: {
width: '100%', width: '100%',
height: 2, height: 2,
backgroundColor: Colors.screenBase, backgroundColor: Colors.areaBase,
}, },
entry: { entry: {
width: '100%', width: '100%',

2
app/mobile/src/session/welcome/Welcome.jsx
View File

@ -10,8 +10,6 @@ import dark from 'images/darksess.png';
export function Welcome() { export function Welcome() {
console.log(Colors.theme);
return ( return (
<SafeAreaView style={styles.container}> <SafeAreaView style={styles.container}>
<Text style={styles.header}>Databag</Text> <Text style={styles.header}>Databag</Text>

2
app/mobile/src/session/welcome/Welcome.styled.js
View File

@ -4,7 +4,7 @@ import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({ export const styles = StyleSheet.create({
container: { container: {
height: '100%', height: '100%',
backgroundColor: Colors.background, backgroundColor: Colors.drawerBase,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
}, },