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 seal wizard for dark mode

Browse Source
This commit is contained in:
Roland Osborne 2023-08-29 13:08:05 -07:00
parent f4ad6c9a9f
commit 1870aa16af
4 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,15 +41,16 @@ const LightColors = {
enabledIndicator: '#8fbea7', enabledIndicator: '#8fbea7',
disabledIndicator: '#eeeeee', disabledIndicator: '#eeeeee',
disconnectedIndicator: '#aa0000', disconnectedIndicator: '#aa0000',
sliderGrip: '#888888',
}; };
const DarkColors = { const DarkColors = {
tabBar: '#111111', tabBar: '#111111',
activeTabIcon: '#dddddd', activeTabIcon: '#dddddd',
idleTabIcon: '#aaaaaa', idleTabIcon: '#aaaaaa',
activeBorder: '#aa8866', activeBorder: '#aaaaaa',
idleBorder: '#eeeeee', idleBorder: '#eeeeee',
activeFill: '#66aa88', activeFill: '#559955',
linkText: '#88eecc', linkText: '#88eecc',
dangerText: '#ffaaaa', dangerText: '#ffaaaa',
labelText: '#eeeeee', labelText: '#eeeeee',
@ -59,14 +60,14 @@ const DarkColors = {
text: '#ffffff', text: '#ffffff',
screenBase: '#333333', screenBase: '#333333',
areaBase: '#555555', areaBase: '#555555',
modalBase: '#ffffff', modalBase: '#333333',
modalOverlay: 'rgba(52,52,52,0.8)', modalOverlay: 'rgba(88,88,88,0.8)',
headerBar: '#555555', headerBar: '#555555',
primaryButton: '#448866', primaryButton: '#448866',
primaryButtonText: '#ffffff', primaryButtonText: '#ffffff',
disabledButton: '#aaaaaa', disabledButton: '#888888',
disabledButtonText: '#888888', disabledButtonText: '#eeeeee',
dangerButton: '#ff888888', dangerButton: '#ff5555',
dangerButtonText: '#ffffff', dangerButtonText: '#ffffff',
inputBase: '#ffffff', inputBase: '#ffffff',
inputPlaceholder: '#888888', inputPlaceholder: '#888888',
@ -84,6 +85,7 @@ const DarkColors = {
enabledIndicator: '#8fbea7', enabledIndicator: '#8fbea7',
disabledIndicator: '#eeeeee', disabledIndicator: '#eeeeee',
disconnectedIndicator: '#aa0000', disconnectedIndicator: '#aa0000',
sliderGrip: '#eeeeee',
}; };
function getColor(label) { function getColor(label) {
@ -131,6 +133,7 @@ export const Colors = {
enabledIndicator: getColor('enabledIndicator'), enabledIndicator: getColor('enabledIndicator'),
disabledIndicator: getColor('disabledIndicator'), disabledIndicator: getColor('disabledIndicator'),
disconnectedIndicator: getColor('disconnectedIndicator'), disconnectedIndicator: getColor('disconnectedIndicator'),
sliderGrip: getColor('sliderGrip'),
background: '#8fbea7', background: '#8fbea7',
primary: '#448866', primary: '#448866',

1
app/mobile/src/session/Session.styled.js
View File

@ -67,6 +67,7 @@ export const styles = StyleSheet.create({
color: Colors.white, color: Colors.white,
}, },
tabBar: { tabBar: {
borderTopWidth: 0,
backgroundColor: Colors.primary, backgroundColor: Colors.primary,
maxHeight: 72, maxHeight: 72,
}, },

6
app/mobile/src/session/settings/Settings.jsx
View File

@ -41,7 +41,7 @@ export function Settings() {
</View> </View>
<View style={styles.optionControl}> <View style={styles.optionControl}>
<Text style={styles.optionLink}>{ state.strings.enableNotifications }</Text> <Text style={styles.optionLink}>{ state.strings.enableNotifications }</Text>
<Switch style={styles.notifications} trackColor={styles.track}/> <Switch value={true} style={styles.notifications} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track}/>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.divider} /> <View style={styles.divider} />
@ -64,7 +64,7 @@ export function Settings() {
<View style={styles.group}> <View style={styles.group}>
<View style={styles.entry}> <View style={styles.entry}>
<View style={styles.icon}> <View style={styles.icon}>
<MatIcons name="progress-clock" size={20} color={Colors.text} /> <MatIcons name="progress-clock" size={20} color={Colors.labelText} />
</View> </View>
<View style={styles.optionControl}> <View style={styles.optionControl}>
<Text style={styles.labelText}>{ state.strings.hourMode }</Text> <Text style={styles.labelText}>{ state.strings.hourMode }</Text>
@ -91,7 +91,7 @@ export function Settings() {
<View style={styles.divider} /> <View style={styles.divider} />
<TouchableOpacity style={styles.entry} activeOpacity={1}> <TouchableOpacity style={styles.entry} activeOpacity={1}>
<View style={styles.icon}> <View style={styles.icon}>
<MatIcons name="calendar-month-outline" size={20} color={Colors.text} /> <MatIcons name="calendar-month-outline" size={20} color={Colors.labelText} />
</View> </View>
<View style={styles.optionControl}> <View style={styles.optionControl}>
<Text style={styles.labelText}>{ state.strings.dateMode }</Text> <Text style={styles.labelText}>{ state.strings.dateMode }</Text>

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

@ -11,7 +11,7 @@ export const styles = StyleSheet.create({
backgroundColor: Colors.screenBase, backgroundColor: Colors.screenBase,
}, },
label: { label: {
color: Colors.text, color: Colors.labelText,
padding: 4, padding: 4,
fontFamily: 'Roboto', fontFamily: 'Roboto',
}, },
@ -104,8 +104,8 @@ export const styles = StyleSheet.create({
fontFamily: 'Roboto', fontFamily: 'Roboto',
}, },
track: { track: {
false: Colors.disabledIndicator, false: Colors.idleFill,
true: Colors.enabledIndicator, true: Colors.activeFill,
}, },
notifications: { notifications: {
transform: [{ scaleX: .6 }, { scaleY: .6 }], transform: [{ scaleX: .6 }, { scaleY: .6 }],
@ -130,7 +130,7 @@ export const styles = StyleSheet.create({
modalHeader: { modalHeader: {
fontSize: 18, fontSize: 18,
paddingTop: 16, paddingTop: 16,
color: Colors.text, color: Colors.labelText,
fontFamily: 'Roboto', fontFamily: 'Roboto',
}, },
modalClose: { modalClose: {