Properly style countdown icon in iOS light/dark themes

stylesheets/_ios.scss

@@ -125,6 +125,14 @@
     color: $color-light-90;
   }
 
+  .module-expire-timer {
+    background-color: $color-white-07;
+  }
+
+  .module-expire-timer--incoming {
+    background-color: $color-light-45;
+  }
+
   .module-quote--incoming {
     background-color: $color-signal-blue-025;
     border-left-color: $color-signal-blue;
@@ -286,6 +294,10 @@
       color: $color-white;
     }
 
+    .module-expire-timer--incoming {
+      background-color: $color-white-07;
+    }
+
     .module-quote__primary__author {
       color: $color-light-90;
     }

ts/components/conversation/ExpireTimer.md

@@ -1,13 +1,14 @@
 ### Countdown at different rates
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="cyan"
       direction="incoming"
       text="10 second timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 10 * 1000}
       expirationLength={10 * 1000}
       expirationTimestamp={Date.now() + 10 * 1000}
     />
@@ -18,6 +19,7 @@
       authorColor="cyan"
       text="30 second timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 30 * 1000}
       expirationLength={30 * 1000}
       expirationTimestamp={Date.now() + 30 * 1000}
     />
@@ -28,6 +30,7 @@
       direction="incoming"
       text="1 minute timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 55 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 55 * 1000}
     />
@@ -38,6 +41,7 @@
       direction="incoming"
       text="5 minute timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 5 * 60 * 1000}
       expirationLength={5 * 60 * 1000}
       expirationTimestamp={Date.now() + 5 * 60 * 1000}
     />
@@ -48,13 +52,14 @@
 ### Timer calculations
 
 ```jsx
-<util.ConversationContext theme={util.theme}>
+<util.ConversationContext theme={util.theme} ios={util.ios}>
   <li>
     <Message
       authorColor="cyan"
       direction="incoming"
       text="Full timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 60 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 60 * 1000}
     />
@@ -65,6 +70,7 @@
       status="delivered"
       text="Full timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 60 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 60 * 1000}
     />
@@ -75,6 +81,7 @@
       direction="incoming"
       text="55 timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 55 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 55 * 1000}
     />
@@ -85,6 +92,7 @@
       status="delivered"
       text="55 timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 55 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 55 * 1000}
     />
@@ -95,6 +103,7 @@
       direction="incoming"
       text="30 timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 30 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 30 * 1000}
     />
@@ -105,6 +114,7 @@
       status="delivered"
       text="30 timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 30 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 30 * 1000}
     />
@@ -115,6 +125,7 @@
       direction="incoming"
       text="5 timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 5 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 5 * 1000}
     />
@@ -125,6 +136,7 @@
       status="delivered"
       text="5 timer"
       i18n={util.i18n}
+      timestamp={Date.now() + 5 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 5 * 1000}
     />
@@ -135,6 +147,7 @@
       direction="incoming"
       text="Expired timer"
       i18n={util.i18n}
+      timestamp={Date.now()}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now()}
     />
@@ -145,6 +158,7 @@
       status="delivered"
       text="Expired timer"
       i18n={util.i18n}
+      timestamp={Date.now()}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now()}
     />
@@ -155,6 +169,7 @@
       direction="incoming"
       text="Expiration is too far away"
       i18n={util.i18n}
+      timestamp={Date.now() + 120 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 120 * 1000}
     />
@@ -165,6 +180,7 @@
       status="delivered"
       text="Expiration is too far away"
       i18n={util.i18n}
+      timestamp={Date.now() + 120 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() + 120 * 1000}
     />
@@ -175,6 +191,7 @@
       direction="incoming"
       text="Already expired"
       i18n={util.i18n}
+      timestamp={Date.now() - 20 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() - 20 * 1000}
     />
@@ -185,6 +202,7 @@
       status="delivered"
       text="Already expired"
       i18n={util.i18n}
+      timestamp={Date.now() - 20 * 1000}
       expirationLength={60 * 1000}
       expirationTimestamp={Date.now() - 20 * 1000}
     />