Page MenuHomePhabricator
Files F3390871

D3790.id11666.diff
No OneTemporary
Actions

D3790.id11666.diff
View Options

diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/color-selector-button.react.js
@@ -0,0 +1,24 @@
+// @flow
+
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+type ColorSelectorButtonProps = {
+ +color: string,
+};
+
+function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
+ const { color } = props;
+ return <View style={[styles.button, { backgroundColor: color }]} />;
+}
+
+const styles = StyleSheet.create({
+ button: {
+ borderRadius: 100,
+ height: 40,
+ margin: 15,
+ width: 40,
+ },
+});
+
+export default ColorSelectorButton;
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
new file mode 100644
--- /dev/null
+++ b/native/components/color-selector.react.js
@@ -0,0 +1,57 @@
+// @flow
+
+import * as React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+import ColorSelectorButton from './color-selector-button.react';
+
+function ColorSelector(): React.Node {
+ return (
+ <View style={styles.container}>
+ <View style={styles.textContainer}>
+ <Text style={styles.text}>Select thread color</Text>
+ </View>
+ <View style={styles.colors}>
+ <ColorSelectorButton color="#4B87AA" />
+ <ColorSelectorButton color="#5C9F5F" />
+ <ColorSelectorButton color="#B8753D" />
+ <ColorSelectorButton color="#AA4B4B" />
+ <ColorSelectorButton color="#6D49AB" />
+ <ColorSelectorButton color="#C85000" />
+ <ColorSelectorButton color="#008F83" />
+ <ColorSelectorButton color="#648CAA" />
+ <ColorSelectorButton color="#57697F" />
+ <ColorSelectorButton color="#575757" />
+ </View>
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ colors: {
+ alignItems: 'center',
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ },
+ container: {
+ alignItems: 'center',
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'column',
+ flexWrap: 'wrap',
+ justifyContent: 'center',
+ },
+ text: {
+ color: 'white',
+ fontSize: 24,
+ fontWeight: 'bold',
+ },
+ textContainer: {
+ margin: 20,
+ },
+});
+
+export default ColorSelector;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 1, 1:17 AM (21 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2603130
Default Alt Text
D3790.id11666.diff (2 KB)

Event Timeline