Bugfix: standardize colors (#618)

* reds * blue * greays and primaryfox * greens * yellow * orange * random colors * snapshots * update colords * snapshots
MetaMask · Apr 22, 2019 · 226c691 · 226c691
1 parent ebe5d22
commit 226c691
Show file tree

Hide file tree

Showing 116 changed files with 544 additions and 585 deletions.
diff --git a/app/components/UI/AccountApproval/__snapshots__/index.test.js.snap b/app/components/UI/AccountApproval/__snapshots__/index.test.js.snap
@@ -127,7 +127,7 @@ exports[`AccountApproval should render correctly 1`] = `
               style={
                 Object {
                   "alignItems": "center",
-                  "backgroundColor": "#5ea40c",
+                  "backgroundColor": "#28a745",
                   "borderRadius": 12,
                   "height": 24,
                   "position": "relative",
@@ -152,7 +152,7 @@ exports[`AccountApproval should render correctly 1`] = `
             <View
               style={
                 Object {
-                  "borderColor": "#9b9b9b",
+                  "borderColor": "#848c96",
                   "borderStyle": "dashed",
                   "borderWidth": 1,
                   "left": 0,
@@ -227,7 +227,7 @@ exports[`AccountApproval should render correctly 1`] = `
           Object {
             "alignItems": "center",
             "borderBottomWidth": 1,
-            "borderColor": "#CCCCCC",
+            "borderColor": "#d6d9dc",
             "borderTopWidth": 1,
             "display": "flex",
             "flexDirection": "row",
@@ -266,7 +266,7 @@ exports[`AccountApproval should render correctly 1`] = `
         </Text>
         <Icon
           allowFontScaling={false}
-          color="#008edf"
+          color="#037dd6"
           name="info-circle"
           size={22}
         />

diff --git a/app/components/UI/AccountApproval/index.js b/app/components/UI/AccountApproval/index.js
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
 	permissions: {
 		alignItems: 'center',
 		borderBottomWidth: 1,
-		borderColor: colors.borderColor,
+		borderColor: colors.grey100,
 		borderTopWidth: 1,
 		display: 'flex',
 		flexDirection: 'row',
@@ -112,7 +112,7 @@ const styles = StyleSheet.create({
 		width: '33%'
 	},
 	border: {
-		borderColor: colors.accentGray,
+		borderColor: colors.grey400,
 		borderStyle: 'dashed',
 		borderWidth: 1,
 		left: 0,
@@ -124,7 +124,7 @@ const styles = StyleSheet.create({
 	},
 	checkWrapper: {
 		alignItems: 'center',
-		backgroundColor: colors.success,
+		backgroundColor: colors.green500,
 		borderRadius: 12,
 		height: 24,
 		position: 'relative',
@@ -228,7 +228,7 @@ class AccountApproval extends Component {
 								{strings('accountApproval.permission')}
 								<Text style={styles.permission}> {strings('accountApproval.address')}</Text>
 							</Text>
-							<Icon name="info-circle" color={colors.primary} size={22} />
+							<Icon name="info-circle" color={colors.blue} size={22} />
 						</View>
 						<Text style={styles.warning}>{strings('accountApproval.warning')}</Text>
 					</View>

diff --git a/app/components/UI/AccountInput/index.js b/app/components/UI/AccountInput/index.js
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 		flex: 1
 	},
 	arrow: {
-		color: colors.inputBorderColor,
+		color: colors.grey100,
 		position: 'absolute',
 		right: 10,
 		top: Platform.OS === 'android' ? 14 : 12
@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'row',
 		backgroundColor: colors.white,
-		borderColor: colors.inputBorderColor,
+		borderColor: colors.grey100,
 		borderRadius: 4,
 		borderWidth: 1
 	},
@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
 	},
 	optionList: {
 		backgroundColor: colors.white,
-		borderColor: colors.inputBorderColor,
+		borderColor: colors.grey100,
 		borderRadius: 4,
 		borderWidth: 1,
 		paddingBottom: 12,

diff --git a/app/components/UI/AccountList/index.js b/app/components/UI/AccountList/index.js
@@ -34,21 +34,21 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		borderBottomWidth: StyleSheet.hairlineWidth,
-		borderColor: colors.borderColor
+		borderColor: colors.grey100
 	},
 	dragger: {
 		width: 48,
 		height: 5,
 		borderRadius: 4,
-		backgroundColor: colors.gray,
+		backgroundColor: colors.grey400,
 		opacity: Platform.OS === 'android' ? 0.6 : 0.5
 	},
 	accountsWrapper: {
 		flex: 1
 	},
 	account: {
 		borderBottomWidth: StyleSheet.hairlineWidth,
-		borderColor: colors.borderColor,
+		borderColor: colors.grey100,
 		flexDirection: 'row',
 		paddingHorizontal: 20,
 		paddingVertical: 20,
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
 	},
 	btnText: {
 		fontSize: 14,
-		color: colors.primary,
+		color: colors.blue,
 		...fontStyles.normal
 	},
 	footerButton: {
@@ -89,10 +89,10 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		borderTopWidth: StyleSheet.hairlineWidth,
-		borderColor: colors.borderColor
+		borderColor: colors.grey100
 	},
 	importedText: {
-		color: colors.another50ShadesOfGrey,
+		color: colors.grey400,
 		fontSize: 10,
 		...fontStyles.bold
 	},
@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
 		paddingVertical: 3,
 		borderRadius: 10,
 		borderWidth: 1,
-		borderColor: colors.another50ShadesOfGrey
+		borderColor: colors.grey400
 	},
 	importedView: {
 		flex: 0.5,
@@ -249,7 +249,7 @@ export default class AccountList extends Component {
 	renderItem = ({ item }) => {
 		const { index, name, address, balance, isSelected, isImported } = item;
 
-		const selected = isSelected ? <Icon name="check-circle" size={30} color={colors.primary} /> : null;
+		const selected = isSelected ? <Icon name="check-circle" size={30} color={colors.blue} /> : null;
 		const imported = isImported ? (
 			<View style={styles.importedWrapper}>
 				<Text numberOfLines={1} style={styles.importedText}>
@@ -325,7 +325,7 @@ export default class AccountList extends Component {
 				<View style={styles.footer}>
 					<TouchableOpacity style={styles.footerButton} onPress={this.addAccount}>
 						{this.state.loading ? (
-							<ActivityIndicator size="small" color={colors.primary} />
+							<ActivityIndicator size="small" color={colors.blue} />
 						) : (
 							<Text style={styles.btnText}>{strings('accounts.create_new_account')}</Text>
 						)}

diff --git a/app/components/UI/AccountOverview/index.js b/app/components/UI/AccountOverview/index.js
@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
 		marginBottom: Platform.OS === 'android' ? -10 : 0
 	},
 	addressWrapper: {
-		backgroundColor: colors.blueishGrey,
+		backgroundColor: colors.blue000,
 		borderRadius: 40,
 		marginTop: 20,
 		marginBottom: 20,
@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
 	},
 	address: {
 		fontSize: 12,
-		color: colors.gray,
+		color: colors.grey400,
 		...fontStyles.normal,
 		letterSpacing: 0.8
 	},
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
 		borderRadius: 80,
 		borderWidth: 2,
 		padding: 2,
-		borderColor: colors.primary
+		borderColor: colors.blue
 	}
 });
 

diff --git a/app/components/UI/AccountSelect/index.js b/app/components/UI/AccountSelect/index.js
@@ -21,14 +21,14 @@ const styles = StyleSheet.create({
 		width: '100%',
 		marginTop: 75,
 		maxHeight: 200,
-		borderColor: colors.inputBorderColor,
+		borderColor: colors.grey100,
 		borderRadius: 4,
 		borderWidth: 1,
 		elevation: 11
 	},
 	activeOption: {
 		backgroundColor: colors.white,
-		borderColor: colors.inputBorderColor,
+		borderColor: colors.grey100,
 		borderRadius: 4,
 		borderWidth: 1,
 		position: 'relative'
@@ -58,14 +58,14 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 8
 	},
 	arrow: {
-		color: colors.inputBorderColor,
+		color: colors.grey100,
 		position: 'absolute',
 		right: 10,
 		top: 25
 	},
 	optionList: {
 		backgroundColor: colors.white,
-		borderColor: colors.inputBorderColor,
+		borderColor: colors.grey100,
 		borderRadius: 4,
 		borderWidth: 1,
 		paddingBottom: 12,

diff --git a/app/components/UI/ActionModal/__snapshots__/index.test.js.snap b/app/components/UI/ActionModal/__snapshots__/index.test.js.snap
@@ -70,7 +70,7 @@ exports[`ActionModal should render correctly 1`] = `
       <View
         style={
           Object {
-            "borderTopColor": "#d2d8dd",
+            "borderTopColor": "#bbc0c5",
             "borderTopWidth": 1,
             "flex": 0,
             "flexDirection": "row",

diff --git a/app/components/UI/ActionModal/index.js b/app/components/UI/ActionModal/index.js
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 		borderRadius: 10
 	},
 	actionContainer: {
-		borderTopColor: colors.lightGray,
+		borderTopColor: colors.grey200,
 		borderTopWidth: 1,
 		flex: 0,
 		flexDirection: 'row',

diff --git a/app/components/UI/ActionView/__snapshots__/index.test.js.snap b/app/components/UI/ActionView/__snapshots__/index.test.js.snap
@@ -41,7 +41,7 @@ exports[`ActionView should render correctly 1`] = `
   <View
     style={
       Object {
-        "borderTopColor": "#d2d8dd",
+        "borderTopColor": "#bbc0c5",
         "borderTopWidth": 1,
         "flex": 0,
         "flexDirection": "row",

diff --git a/app/components/UI/ActionView/index.js b/app/components/UI/ActionView/index.js
@@ -8,7 +8,7 @@ import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view
 
 const styles = StyleSheet.create({
 	actionContainer: {
-		borderTopColor: colors.lightGray,
+		borderTopColor: colors.grey200,
 		borderTopWidth: 1,
 		flex: 0,
 		flexDirection: 'row',

diff --git a/app/components/UI/AddCustomCollectible/__snapshots__/index.test.js.snap b/app/components/UI/AddCustomCollectible/__snapshots__/index.test.js.snap
@@ -50,7 +50,7 @@ exports[`AddCustomCollectible should render correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#CCCCCC",
+                "borderColor": "#d6d9dc",
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "fontFamily": "Roboto",
@@ -67,7 +67,7 @@ exports[`AddCustomCollectible should render correctly 1`] = `
         <Text
           style={
             Object {
-              "color": "#FF0000",
+              "color": "#D73A49",
               "fontFamily": "Roboto",
               "fontWeight": "400",
               "marginTop": 15,
@@ -104,7 +104,7 @@ exports[`AddCustomCollectible should render correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#CCCCCC",
+                "borderColor": "#d6d9dc",
                 "borderRadius": 4,
                 "borderWidth": 1,
                 "fontFamily": "Roboto",
@@ -121,7 +121,7 @@ exports[`AddCustomCollectible should render correctly 1`] = `
         <Text
           style={
             Object {
-              "color": "#FF0000",
+              "color": "#D73A49",
               "fontFamily": "Roboto",
               "fontWeight": "400",
               "marginTop": 15,

diff --git a/app/components/UI/AddCustomCollectible/index.js b/app/components/UI/AddCustomCollectible/index.js
@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 	textInput: {
 		borderWidth: 1,
 		borderRadius: 4,
-		borderColor: colors.borderColor,
+		borderColor: colors.grey100,
 		padding: 16,
 		...fontStyles.normal
 	},
 	warningText: {
 		marginTop: 15,
-		color: colors.error,
+		color: colors.red,
 		...fontStyles.normal
 	}
 });

diff --git a/app/components/UI/AddCustomToken/__snapshots__/index.test.js.snap b/app/components/UI/AddCustomToken/__snapshots__/index.test.js.snap
@@ -50,7 +50,7 @@ exports[`AddCustomToken should render correctly 1`] = `
           returnKeyType="next"
           style={
             Object {
-              "borderColor": "#CCCCCC",
+              "borderColor": "#d6d9dc",
               "borderRadius": 4,
               "borderWidth": 1,
               "fontFamily": "Roboto",
@@ -65,7 +65,7 @@ exports[`AddCustomToken should render correctly 1`] = `
         <Text
           style={
             Object {
-              "color": "#FF0000",
+              "color": "#D73A49",
               "fontFamily": "Roboto",
               "fontWeight": "400",
               "marginTop": 15,
@@ -100,7 +100,7 @@ exports[`AddCustomToken should render correctly 1`] = `
           returnKeyType="next"
           style={
             Object {
-              "borderColor": "#CCCCCC",
+              "borderColor": "#d6d9dc",
               "borderRadius": 4,
               "borderWidth": 1,
               "fontFamily": "Roboto",
@@ -115,7 +115,7 @@ exports[`AddCustomToken should render correctly 1`] = `
         <Text
           style={
             Object {
-              "color": "#FF0000",
+              "color": "#D73A49",
               "fontFamily": "Roboto",
               "fontWeight": "400",
               "marginTop": 15,
@@ -152,7 +152,7 @@ exports[`AddCustomToken should render correctly 1`] = `
           returnKeyType="done"
           style={
             Object {
-              "borderColor": "#CCCCCC",
+              "borderColor": "#d6d9dc",
               "borderRadius": 4,
               "borderWidth": 1,
               "fontFamily": "Roboto",
@@ -167,7 +167,7 @@ exports[`AddCustomToken should render correctly 1`] = `
         <Text
           style={
             Object {
-              "color": "#FF0000",
+              "color": "#D73A49",
               "fontFamily": "Roboto",
               "fontWeight": "400",
               "marginTop": 15,

diff --git a/app/components/UI/AddCustomToken/index.js b/app/components/UI/AddCustomToken/index.js
@@ -19,13 +19,13 @@ const styles = StyleSheet.create({
 	textInput: {
 		borderWidth: 1,
 		borderRadius: 4,
-		borderColor: colors.borderColor,
+		borderColor: colors.grey100,
 		padding: 16,
 		...fontStyles.normal
 	},
 	warningText: {
 		marginTop: 15,
-		color: colors.error,
+		color: colors.red,
 		...fontStyles.normal
 	}
 });