Approve design updates (#1455)

Changes to the gas selection button group as requested here: #1390 (comment)
MetaMask · Mar 27, 2020 · b2cabde · b2cabde
1 parent 8be1989
commit b2cabde
Show file tree

Hide file tree

Showing 32 changed files with 226 additions and 378 deletions.
diff --git a/app/components/Nav/App/__snapshots__/index.test.js.snap b/app/components/Nav/App/__snapshots__/index.test.js.snap
@@ -49,18 +49,6 @@ exports[`App should render correctly 1`] = `
                       "getScreenOptions": [Function],
                       "getStateForAction": [Function],
                     },
-                    "ApproveSuccessView": Object {
-                      "childRouters": Object {
-                        "ApproveSuccess": null,
-                      },
-                      "getActionCreators": [Function],
-                      "getActionForPathAndParams": [Function],
-                      "getComponentForRouteName": [Function],
-                      "getComponentForState": [Function],
-                      "getPathAndParamsForState": [Function],
-                      "getScreenOptions": [Function],
-                      "getStateForAction": [Function],
-                    },
                     "ApproveView": Object {
                       "childRouters": Object {
                         "Approve": null,
@@ -515,18 +503,6 @@ exports[`App should render correctly 1`] = `
                         "getScreenOptions": [Function],
                         "getStateForAction": [Function],
                       },
-                      "ApproveSuccessView": Object {
-                        "childRouters": Object {
-                          "ApproveSuccess": null,
-                        },
-                        "getActionCreators": [Function],
-                        "getActionForPathAndParams": [Function],
-                        "getComponentForRouteName": [Function],
-                        "getComponentForState": [Function],
-                        "getPathAndParamsForState": [Function],
-                        "getScreenOptions": [Function],
-                        "getStateForAction": [Function],
-                      },
                       "ApproveView": Object {
                         "childRouters": Object {
                           "Approve": null,

diff --git a/app/components/Nav/Main/__snapshots__/index.test.js.snap b/app/components/Nav/Main/__snapshots__/index.test.js.snap
@@ -57,18 +57,6 @@ exports[`Main should render correctly 1`] = `
               "getScreenOptions": [Function],
               "getStateForAction": [Function],
             },
-            "ApproveSuccessView": Object {
-              "childRouters": Object {
-                "ApproveSuccess": null,
-              },
-              "getActionCreators": [Function],
-              "getActionForPathAndParams": [Function],
-              "getComponentForRouteName": [Function],
-              "getComponentForState": [Function],
-              "getPathAndParamsForState": [Function],
-              "getScreenOptions": [Function],
-              "getStateForAction": [Function],
-            },
             "ApproveView": Object {
               "childRouters": Object {
                 "Approve": null,
@@ -403,18 +391,6 @@ exports[`Main should render correctly 1`] = `
                 "getScreenOptions": [Function],
                 "getStateForAction": [Function],
               },
-              "ApproveSuccessView": Object {
-                "childRouters": Object {
-                  "ApproveSuccess": null,
-                },
-                "getActionCreators": [Function],
-                "getActionForPathAndParams": [Function],
-                "getComponentForRouteName": [Function],
-                "getComponentForState": [Function],
-                "getPathAndParamsForState": [Function],
-                "getScreenOptions": [Function],
-                "getStateForAction": [Function],
-              },
               "ApproveView": Object {
                 "childRouters": Object {
                   "Approve": null,

diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
@@ -96,7 +96,6 @@ import MessageSign from '../../UI/MessageSign';
 import WalletConnectReturnToBrowserModal from '../../UI/WalletConnectReturnToBrowserModal';
 import AsyncStorage from '@react-native-community/async-storage';
 import Approve from '../../Views/ApproveView/Approve';
-import ApproveSuccess from '../../Views/ApproveView/Success';
 import Amount from '../../Views/SendFlow/Amount';
 import Confirm from '../../Views/SendFlow/Confirm';
 import ContactForm from '../../Views/Settings/Contacts/ContactForm';
@@ -289,18 +288,6 @@ const MainNavigator = createStackNavigator(
 				}
 			})
 		},
-		ApproveSuccessView: {
-			screen: createStackNavigator(
-				{
-					ApproveSuccess: {
-						screen: ApproveSuccess
-					}
-				},
-				{
-					headerMode: 'none'
-				}
-			)
-		},
 		AddBookmarkView: {
 			screen: createStackNavigator({
 				AddBookmark: {

diff --git a/app/components/UI/ActionModal/__snapshots__/index.test.js.snap b/app/components/UI/ActionModal/__snapshots__/index.test.js.snap
@@ -47,6 +47,7 @@ exports[`ActionModal should render correctly 1`] = `
         "alignItems": "center",
         "flexDirection": "column",
         "justifyContent": "center",
+        "marginHorizontal": 24,
       }
     }
   >
@@ -55,7 +56,7 @@ exports[`ActionModal should render correctly 1`] = `
         Object {
           "backgroundColor": "#FFFFFF",
           "borderRadius": 10,
-          "width": "90%",
+          "width": "100%",
         }
       }
     >

diff --git a/app/components/UI/ActionModal/index.js b/app/components/UI/ActionModal/index.js
@@ -14,10 +14,11 @@ const styles = StyleSheet.create({
 	modalView: {
 		flexDirection: 'column',
 		justifyContent: 'center',
-		alignItems: 'center'
+		alignItems: 'center',
+		marginHorizontal: 24
 	},
 	modalContainer: {
-		width: '90%',
+		width: '100%',
 		backgroundColor: colors.white,
 		borderRadius: 10
 	},

diff --git a/app/components/UI/ActionView/__snapshots__/index.test.js.snap b/app/components/UI/ActionView/__snapshots__/index.test.js.snap
@@ -45,7 +45,8 @@ exports[`ActionView should render correctly 1`] = `
         "borderTopWidth": 1,
         "flex": 0,
         "flexDirection": "row",
-        "padding": 16,
+        "paddingHorizontal": 24,
+        "paddingVertical": 16,
       }
     }
   >

diff --git a/app/components/UI/ActionView/index.js b/app/components/UI/ActionView/index.js
@@ -12,7 +12,8 @@ const styles = StyleSheet.create({
 		borderTopWidth: 1,
 		flex: 0,
 		flexDirection: 'row',
-		padding: 16
+		paddingVertical: 16,
+		paddingHorizontal: 24
 	},
 	button: {
 		flex: 1

diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js
@@ -38,7 +38,8 @@ const styles = StyleSheet.create({
 		textAlign: 'center',
 		alignItems: 'flex-start',
 		width: '33%',
-		padding: 5
+		paddingVertical: 8,
+		paddingHorizontal: 10
 	},
 	advancedOptions: {
 		textAlign: 'right',

diff --git a/app/components/UI/Radio/__snapshots__/index.test.js.snap b/app/components/UI/Radio/__snapshots__/index.test.js.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio should render correctly 1`] = `
+<Svg
+  height="12"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 12 12"
+  width="12"
+>
+  <Circle
+    cx="6"
+    cy="6"
+    fill="none"
+    r="5.5"
+    stroke="#D2D8DD"
+  />
+</Svg>
+`;
+
+exports[`Radio should render correctly when selected 1`] = `
+<Svg
+  height="12"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 12 12"
+  width="12"
+>
+  <Circle
+    cx="6"
+    cy="6"
+    fill="none"
+    r="4"
+    stroke="#037dd6"
+    strokeWidth="4"
+  />
+</Svg>
+`;
diff --git a/app/components/UI/Radio/index.js b/app/components/UI/Radio/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Svg, { Circle } from 'react-native-svg';
+import { colors } from '../../../../app/styles/common';
+
+const Radio = ({ selected }) => (
+	<Svg width="12" height="12" viewBox="0 0 12 12">
+		{selected ? (
+			<Circle cx="6" cy="6" r="4" stroke={colors.blue} strokeWidth="4" fill="none" />
+		) : (
+			<Circle cx="6" cy="6" r="5.5" stroke="#D2D8DD" fill="none" />
+		)}
+	</Svg>
+);
+
+Radio.propTypes = {
+	selected: PropTypes.bool
+};
+
+export default Radio;
diff --git a/app/components/UI/Radio/index.test.js b/app/components/UI/Radio/index.test.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Radio from './';
+
+describe('Radio', () => {
+	it('should render correctly', () => {
+		const wrapper = shallow(<Radio />);
+		expect(wrapper).toMatchSnapshot();
+	});
+	it('should render correctly when selected', () => {
+		const wrapper = shallow(<Radio selected />);
+		expect(wrapper).toMatchSnapshot();
+	});
+});
diff --git a/app/components/UI/StyledButton/__snapshots__/index.test.js.snap b/app/components/UI/StyledButton/__snapshots__/index.test.js.snap
@@ -6,7 +6,7 @@ exports[`StyledButton should render correctly on Android the button with type ca
     style={
       Array [
         Object {
-          "borderRadius": 4,
+          "borderRadius": 100,
           "justifyContent": "center",
           "padding": 15,
         },
@@ -29,7 +29,7 @@ exports[`StyledButton should render correctly on Android the button with type co
     style={
       Array [
         Object {
-          "borderRadius": 4,
+          "borderRadius": 100,
           "justifyContent": "center",
           "padding": 15,
         },
@@ -51,7 +51,7 @@ exports[`StyledButton should render correctly on Android the button with type no
     style={
       Array [
         Object {
-          "borderRadius": 4,
+          "borderRadius": 100,
           "justifyContent": "center",
           "padding": 15,
         },
@@ -74,7 +74,7 @@ exports[`StyledButton should render correctly on Android the button with type or
     style={
       Array [
         Object {
-          "borderRadius": 4,
+          "borderRadius": 100,
           "justifyContent": "center",
           "padding": 15,
         },
@@ -94,7 +94,7 @@ exports[`StyledButton should render correctly on iOS the button with type cancel
   containerStyle={
     Array [
       Object {
-        "borderRadius": 4,
+        "borderRadius": 100,
         "justifyContent": "center",
         "padding": 15,
       },
@@ -129,7 +129,7 @@ exports[`StyledButton should render correctly on iOS the button with type confir
   containerStyle={
     Array [
       Object {
-        "borderRadius": 4,
+        "borderRadius": 100,
         "justifyContent": "center",
         "padding": 15,
       },
@@ -163,7 +163,7 @@ exports[`StyledButton should render correctly on iOS the button with type normal
   containerStyle={
     Array [
       Object {
-        "borderRadius": 4,
+        "borderRadius": 100,
         "justifyContent": "center",
         "padding": 15,
       },
@@ -198,7 +198,7 @@ exports[`StyledButton should render correctly on iOS the button with type orange
   containerStyle={
     Array [
       Object {
-        "borderRadius": 4,
+        "borderRadius": 100,
         "justifyContent": "center",
         "padding": 15,
       },

diff --git a/app/components/UI/StyledButton/styledButtonStyles.js b/app/components/UI/StyledButton/styledButtonStyles.js
@@ -4,7 +4,7 @@ import { colors, fontStyles } from '../../../styles/common';
 const styles = StyleSheet.create({
 	container: {
 		padding: 15,
-		borderRadius: 4,
+		borderRadius: 100,
 		justifyContent: 'center'
 	},
 	text: {
@@ -66,17 +66,15 @@ const styles = StyleSheet.create({
 		color: colors.grey400
 	},
 	warning: {
-		backgroundColor: colors.white,
-		borderWidth: 1,
-		borderColor: colors.red
+		backgroundColor: colors.red
 	},
 	info: {
 		backgroundColor: colors.white,
 		borderWidth: 1,
 		borderColor: colors.blue
 	},
 	warningText: {
-		color: colors.red
+		color: colors.white
 	},
 	neutral: {
 		backgroundColor: colors.white,