Page MenuHomePhabricator
Files F3351711

D4254.diff
No OneTemporary
Actions

D4254.diff
View Options

diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -48,7 +48,7 @@
},
outerRingSelected: {
backgroundColor: '#404040',
- borderRadius: 40,
+ borderRadius: 30,
height: 60,
margin: 5,
width: 60,
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
-import { Button, Text, View, StyleSheet } from 'react-native';
+import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import tinycolor from 'tinycolor2';
import { selectedThreadColors } from 'lib/shared/thread-utils';
@@ -10,6 +10,7 @@
type ColorSelectorProps = {
+currentColor: string,
+ +windowWidth: number,
+onColorSelected: (hex: string) => void,
};
function ColorSelector(props: ColorSelectorProps): React.Node {
@@ -29,13 +30,26 @@
[pendingColor],
);
+ const firstRow = React.useMemo(
+ () => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
+ [colorSelectorButtons],
+ );
+
+ const secondRow = React.useMemo(
+ () => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
+ [colorSelectorButtons],
+ );
+
const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
const saveButtonStyle = React.useMemo(
() => [
styles.saveButton,
- { backgroundColor: saveButtonDisabled ? '#404040' : `#${pendingColor}` },
+ {
+ backgroundColor: saveButtonDisabled ? '#404040' : `#${pendingColor}`,
+ width: 0.75 * props.windowWidth,
+ },
],
- [saveButtonDisabled, pendingColor],
+ [saveButtonDisabled, pendingColor, props.windowWidth],
);
const onColorSplotchSaved = React.useCallback(() => {
@@ -45,14 +59,16 @@
return (
<View style={styles.container}>
<Text style={styles.header}>Select thread color</Text>
- <View style={styles.colorButtons}>{colorSelectorButtons}</View>
+ <View style={styles.colorButtons}>{firstRow}</View>
+ <View style={styles.colorButtons}>{secondRow}</View>
<View style={saveButtonStyle}>
- <Button
- title="Save"
- color="white"
+ <TouchableOpacity
+ style={styles.saveButton}
onPress={onColorSplotchSaved}
disabled={saveButtonDisabled}
- />
+ >
+ <Text style={styles.saveButtonText}>Save</Text>
+ </TouchableOpacity>
</View>
</View>
);
@@ -60,27 +76,28 @@
const styles = StyleSheet.create({
colorButtons: {
- flex: 1,
flexDirection: 'row',
- flexWrap: 'wrap',
- justifyContent: 'center',
+ justifyContent: 'space-evenly',
},
container: {
alignItems: 'center',
flex: 1,
- justifyContent: 'center',
},
header: {
color: 'white',
fontSize: 24,
fontWeight: 'bold',
- margin: 20,
+ marginBottom: 10,
+ marginTop: 20,
},
saveButton: {
+ alignItems: 'center',
borderRadius: 5,
margin: 10,
- padding: 5,
- width: 320,
+ },
+ saveButtonText: {
+ color: 'white',
+ fontSize: 16,
},
});

File Metadata

Mime Type
text/plain
Expires
Sun, Nov 24, 3:18 AM (21 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2573671
Default Alt Text
D4254.diff (3 KB)

Event Timeline