Properly style countdown icon in iOS light/dark themes
This commit is contained in:
parent
ffd40d41fe
commit
006700f9a2
2 changed files with 32 additions and 2 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue