fix: adjust button and card styling

example/src/ButtonExample.js

@@ -62,7 +62,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.grey200,
-    padding: 8,
+    padding: 4,
   },
 
   row: {

example/src/CardExample.js

@@ -31,8 +31,8 @@ export default class CardExample extends Component {
             </Paragraph>
           </Card.Content>
           <Card.Actions>
+            <Button primary>Cancel</Button>
             <Button primary>Got it</Button>
-            <Button primary>Scary</Button>
           </Card.Actions>
         </Card>
       </ScrollView>
@@ -44,5 +44,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.grey200,
+    padding: 4,
   },
 });

src/components/Button.js

@@ -66,7 +66,7 @@ class Button extends PureComponent<void, Props, State> {
   _handlePressIn = () => {
     if (this.props.raised) {
       Animated.timing(this.state.elevation, {
-        toValue: 6,
+        toValue: 8,
         duration: 200,
       }).start();
     }
@@ -192,7 +192,7 @@ class Button extends PureComponent<void, Props, State> {
 
 const styles = StyleSheet.create({
   button: {
-    margin: 8,
+    margin: 4,
     minWidth: 88,
   },
   content: {

src/components/Card/Card.js

@@ -65,7 +65,7 @@ class Card extends Component<DefaultProps, Props, State> {
 
   _handlePressIn = () => {
     Animated.timing(this.state.elevation, {
-      toValue: 6,
+      toValue: 8,
       duration: 200,
     }).start();
   };
@@ -116,7 +116,7 @@ class Card extends Component<DefaultProps, Props, State> {
 const styles = StyleSheet.create({
   card: {
     backgroundColor: white,
-    margin: 8,
+    margin: 4,
   },
   container: {
     flex: 1,

src/components/Card/CardActions.js

@@ -23,6 +23,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
+    padding: 4,
   },
 });