fixes table styles and then moves away from a graphic for push notifications

fbshipit-source-id: 35b2d76

Author: jimmylee

global-styles/tables.js

@@ -3,31 +3,35 @@ import * as Constants from '~/common/constants';
 export const globalTables = `
   table {
     margin-bottom: 1rem;
-    font-size: 1rem;
-    line-height: 1.45rem;
+    font-size: 0.8rem;
+    line-height: 1.2rem;
     border-collapse: collapse;
-    border: 1px solid hsla(0,0%,0%,0.12);
+    border: 1px solid ${Constants.colors.border};
+    border-radius: 4px;
     width: 100%;
   }
 
   thead {
+    border-radius: 4px 4px 0 0;
     text-align: left;
   }
 
-  th, td {
+  td, th {
+    padding: 16px;
+    border-bottom: 1px solid ${Constants.colors.border};
+    border-right: 1px solid ${Constants.colors.border};
+
+    :last-child {
+      border-right: 0px;
+    }
+  }
+
+  td {
     text-align: left;
-    border-bottom: 1px solid hsla(0,0%,0%,0.12);
-    font-feature-settings: "tnum";
-    -moz-font-feature-settings: "tnum";
-    -ms-font-feature-settings: "tnum";
-    -webkit-font-feature-settings: "tnum";
-    padding-left: 0.96667rem;
-    padding-right: 0.96667rem;
-    padding-top: 0.725rem;
-    padding-bottom: calc(0.725rem - 1px);
   }
 
   th {
-    font-weight: bold;
+    font-family: ${Constants.fontFamilies.bold};
+    font-weight: 400;
   }
-`.replace(/\s/g, '');
+`;

versions/unversioned/guides/push-notifications.md

@@ -130,7 +130,13 @@ export default class AppContainer extends React.Component {
 
 It's not entirely clear from the above when your app will be able to handle the notification depending on it's state at the time the notification is received. For clarification, see the following table:
 
-![Timing of notifications](./receiving-push.png)
+| Push was received when...                       | Android           | iOS               |
+| ------------------------------------------------|:-----------------:| -----------------:|
+| App is open and foregrounded                    | Exponent.notification: origin: "received", data: Object | Same as Android
+| App is open and backgrounded                    | Can only be handled if the notification is selected. If it is dismissed, app cannot know it was received. | Same as Android
+| App is open and backgrounded, then foregrounded by selecting the notification | Exponent.notification: origin: "selected" | Exponent.notification: origin: "received" |
+| App was not open, and then opened by selecting the push notification | Passed as props.exp.notification on app root component | props.exp.notification: origin: "selected" | props.exp.notification | props.exp.notification: origin: "received" |
+| App was not open, and then opened by tapping the home screen icon | Can only be handled if the notification is selected. If it is dismissed, the app cannot know it was received. | Same as Android
 
 ## HTTP/2 API
 
@@ -140,9 +146,11 @@ Although there are server-side SDKs in several languages to help you send push n
 
 Send a POST request to `https://exp.host/--/api/v2/push/send` with the following HTTP headers:
 
-    accept: application/json
-    accept-encoding: gzip, deflate
-    content-type: application/json
+```
+accept: application/json
+accept-encoding: gzip, deflate
+content-type: application/json
+```
 
 This API currently does not require any authentication.
 

versions/v27.0.0/guides/push-notifications.md

@@ -130,7 +130,13 @@ export default class AppContainer extends React.Component {
 
 It's not entirely clear from the above when your app will be able to handle the notification depending on it's state at the time the notification is received. For clarification, see the following table:
 
-![Timing of notifications](./receiving-push.png)
+| Push was received when...                       | Android           | iOS               |
+| ------------------------------------------------|:-----------------:| -----------------:|
+| App is open and foregrounded                    | Exponent.notification: origin: "received", data: Object | Same as Android
+| App is open and backgrounded                    | Can only be handled if the notification is selected. If it is dismissed, app cannot know it was received. | Same as Android
+| App is open and backgrounded, then foregrounded by selecting the notification | Exponent.notification: origin: "selected" | Exponent.notification: origin: "received" |
+| App was not open, and then opened by selecting the push notification | Passed as props.exp.notification on app root component | props.exp.notification: origin: "selected" | props.exp.notification | props.exp.notification: origin: "received" |
+| App was not open, and then opened by tapping the home screen icon | Can only be handled if the notification is selected. If it is dismissed, the app cannot know it was received. | Same as Android
 
 ## HTTP/2 API
 
@@ -140,9 +146,11 @@ Although there are server-side SDKs in several languages to help you send push n
 
 Send a POST request to `https://exp.host/--/api/v2/push/send` with the following HTTP headers:
 
-    accept: application/json
-    accept-encoding: gzip, deflate
-    content-type: application/json
+```
+accept: application/json
+accept-encoding: gzip, deflate
+content-type: application/json
+```
 
 This API currently does not require any authentication.