LogBox - Better shadow for fatal button

Summary:
This diff lowers the intensity of the shadow on the fatal button based on user feedback that it's weird.

Changelog: [Internal]

Reviewed By: cpojer

Differential Revision: D18353498

fbshipit-source-id: 9133aae02e5609e181a55289f349ea6a9e9fdaf6

Author: rickhanlonii

Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -29,7 +29,7 @@ type Props = $ReadOnly<{|
 function LogBoxInspectorFooter(props: Props): React.Node {
   if (props.fatalType === 'fatal' || props.fatalType === 'syntax') {
     return (
-      <View style={styles.root}>
+      <View style={[styles.root, fatalStyles.root]}>
         <LogBoxButton
           backgroundColor={{
             default: LogBoxStyle.getFatalColor(),
@@ -83,6 +83,9 @@ function FooterButton(props: ButtonProps): React.Node {
 }
 
 const fatalStyles = StyleSheet.create({
+  root: {
+    shadowColor: LogBoxStyle.getBackgroundDarkColor(1),
+  },
   button: {
     flex: 1,
   },

Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap

@@ -3,18 +3,23 @@
 exports[`LogBoxInspectorFooter should render fatal button 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
-      "flexDirection": "row",
-      "shadowColor": "#000",
-      "shadowOffset": Object {
-        "height": -2,
-        "width": 0,
+    Array [
+      Object {
+        "backgroundColor": "rgba(51, 51, 51, 1)",
+        "elevation": 1,
+        "flexDirection": "row",
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": -2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.5,
+        "shadowRadius": 2,
       },
-      "shadowOpacity": 0.5,
-      "shadowRadius": 2,
-    }
+      Object {
+        "shadowColor": "rgba(34, 34, 34, 1)",
+      },
+    ]
   }
 >
   <LogBoxButton
@@ -77,18 +82,23 @@ exports[`LogBoxInspectorFooter should render fatal button 1`] = `
 exports[`LogBoxInspectorFooter should render fatal button for syntax erorr 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
-      "flexDirection": "row",
-      "shadowColor": "#000",
-      "shadowOffset": Object {
-        "height": -2,
-        "width": 0,
+    Array [
+      Object {
+        "backgroundColor": "rgba(51, 51, 51, 1)",
+        "elevation": 1,
+        "flexDirection": "row",
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": -2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.5,
+        "shadowRadius": 2,
       },
-      "shadowOpacity": 0.5,
-      "shadowRadius": 2,
-    }
+      Object {
+        "shadowColor": "rgba(34, 34, 34, 1)",
+      },
+    ]
   }
 >
   <LogBoxButton
@@ -151,18 +161,23 @@ exports[`LogBoxInspectorFooter should render fatal button for syntax erorr 1`] =
 exports[`LogBoxInspectorFooter should render fatal for warning with a fatal 1`] = `
 <View
   style={
-    Object {
-      "backgroundColor": "rgba(51, 51, 51, 1)",
-      "elevation": 1,
-      "flexDirection": "row",
-      "shadowColor": "#000",
-      "shadowOffset": Object {
-        "height": -2,
-        "width": 0,
+    Array [
+      Object {
+        "backgroundColor": "rgba(51, 51, 51, 1)",
+        "elevation": 1,
+        "flexDirection": "row",
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": -2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.5,
+        "shadowRadius": 2,
       },
-      "shadowOpacity": 0.5,
-      "shadowRadius": 2,
-    }
+      Object {
+        "shadowColor": "rgba(34, 34, 34, 1)",
+      },
+    ]
   }
 >
   <LogBoxButton