Ensure that blue group avatars are preserved in dark theme
This commit is contained in:
parent
fbaef50c4a
commit
2b5f6d8b5e
2 changed files with 265 additions and 257 deletions
|
@ -1325,6 +1325,9 @@ body.dark-theme {
|
||||||
background-color: $color-conversation-grey-shade;
|
background-color: $color-conversation-grey-shade;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.module-avatar--signal-blue {
|
||||||
|
background-color: $color-signal-blue;
|
||||||
|
}
|
||||||
.module-avatar--red {
|
.module-avatar--red {
|
||||||
background-color: $color-conversation-red-shade;
|
background-color: $color-conversation-red-shade;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,306 +1,311 @@
|
||||||
### With avatar
|
### With avatar
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
color="pink"
|
size={28}
|
||||||
name="John Smith"
|
color="pink"
|
||||||
avatarPath={util.gifObjectUrl}
|
name="John Smith"
|
||||||
conversationType="direct"
|
avatarPath={util.gifObjectUrl}
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="pink"
|
size={28}
|
||||||
name="Puppies"
|
color="pink"
|
||||||
avatarPath={util.gifObjectUrl}
|
name="Puppies"
|
||||||
conversationType="group"
|
avatarPath={util.gifObjectUrl}
|
||||||
i18n={util.i18n}
|
conversationType="group"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
||||||
### With only name
|
### With only name
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
color="blue"
|
size={28}
|
||||||
name="John"
|
color="blue"
|
||||||
conversationType="direct"
|
name="John"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="green"
|
size={28}
|
||||||
name="John Smith"
|
color="green"
|
||||||
conversationType="direct"
|
name="John Smith"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="red"
|
size={28}
|
||||||
name="Puppies"
|
color="red"
|
||||||
conversationType="group"
|
name="Puppies"
|
||||||
i18n={util.i18n}
|
conversationType="group"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Just phone number
|
### Just phone number
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
color="pink"
|
size={28}
|
||||||
phoneNumber="(555) 353-3433"
|
color="pink"
|
||||||
conversationType="direct"
|
phoneNumber="(555) 353-3433"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
||||||
### All colors
|
### All colors
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
color="signal-blue"
|
size={28}
|
||||||
name="Group"
|
color="signal-blue"
|
||||||
conversationType="group"
|
name="Group"
|
||||||
i18n={util.i18n}
|
conversationType="group"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="red"
|
size={28}
|
||||||
name="Red"
|
color="red"
|
||||||
conversationType="direct"
|
name="Red"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="deep_orange"
|
size={28}
|
||||||
name="Deep Orange"
|
color="deep_orange"
|
||||||
conversationType="direct"
|
name="Deep Orange"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="brown"
|
size={28}
|
||||||
name="Broen"
|
color="brown"
|
||||||
conversationType="direct"
|
name="Broen"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="pink"
|
size={28}
|
||||||
name="Pink"
|
color="pink"
|
||||||
conversationType="direct"
|
name="Pink"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="purple"
|
size={28}
|
||||||
name="Purple"
|
color="purple"
|
||||||
conversationType="direct"
|
name="Purple"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="indigo"
|
size={28}
|
||||||
name="Indigo"
|
color="indigo"
|
||||||
conversationType="direct"
|
name="Indigo"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="blue"
|
size={28}
|
||||||
name="Blue"
|
color="blue"
|
||||||
conversationType="direct"
|
name="Blue"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="teal"
|
size={28}
|
||||||
name="Teal"
|
color="teal"
|
||||||
conversationType="direct"
|
name="Teal"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="green"
|
size={28}
|
||||||
name="Green"
|
color="green"
|
||||||
conversationType="direct"
|
name="Green"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="light_green"
|
size={28}
|
||||||
name="Light Green"
|
color="light_green"
|
||||||
conversationType="direct"
|
name="Light Green"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={28}
|
<Avatar
|
||||||
color="blue_grey"
|
size={28}
|
||||||
name="Blue Grey"
|
color="blue_grey"
|
||||||
conversationType="direct"
|
name="Blue Grey"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 36px
|
### 36px
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={36}
|
<Avatar
|
||||||
color="teal"
|
size={36}
|
||||||
name="John Smith"
|
color="teal"
|
||||||
avatarPath={util.gifObjectUrl}
|
name="John Smith"
|
||||||
conversationType="direct"
|
avatarPath={util.gifObjectUrl}
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={36}
|
<Avatar
|
||||||
color="teal"
|
size={36}
|
||||||
name="John"
|
color="teal"
|
||||||
conversationType="direct"
|
name="John"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={36}
|
<Avatar
|
||||||
color="teal"
|
size={36}
|
||||||
name="John Smith"
|
color="teal"
|
||||||
conversationType="direct"
|
name="John Smith"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={36}
|
<Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||||
color="teal"
|
<Avatar
|
||||||
conversationType="direct"
|
size={36}
|
||||||
i18n={util.i18n}
|
color="teal"
|
||||||
/>
|
name="Pupplies"
|
||||||
<Avatar
|
conversationType="group"
|
||||||
size={36}
|
i18n={util.i18n}
|
||||||
color="teal"
|
/>
|
||||||
name="Pupplies"
|
</util.ConversationContext>
|
||||||
conversationType="group"
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 48px
|
### 48px
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={48}
|
<Avatar
|
||||||
color="teal"
|
size={48}
|
||||||
name="John Smith"
|
color="teal"
|
||||||
avatarPath={util.gifObjectUrl}
|
name="John Smith"
|
||||||
conversationType="direct"
|
avatarPath={util.gifObjectUrl}
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={48}
|
<Avatar
|
||||||
color="teal"
|
size={48}
|
||||||
name="John"
|
color="teal"
|
||||||
conversationType="direct"
|
name="John"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={48}
|
<Avatar
|
||||||
color="teal"
|
size={48}
|
||||||
name="John Smith"
|
color="teal"
|
||||||
conversationType="direct"
|
name="John Smith"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={48}
|
<Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||||
color="teal"
|
<Avatar
|
||||||
conversationType="direct"
|
size={48}
|
||||||
i18n={util.i18n}
|
color="teal"
|
||||||
/>
|
name="Pupplies"
|
||||||
<Avatar
|
conversationType="group"
|
||||||
size={48}
|
i18n={util.i18n}
|
||||||
color="teal"
|
/>
|
||||||
name="Pupplies"
|
</util.ConversationContext>
|
||||||
conversationType="group"
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 80px
|
### 80px
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={80}
|
<Avatar
|
||||||
color="teal"
|
size={80}
|
||||||
name="John Smith"
|
color="teal"
|
||||||
avatarPath={util.gifObjectUrl}
|
name="John Smith"
|
||||||
conversationType="direct"
|
avatarPath={util.gifObjectUrl}
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={80}
|
<Avatar
|
||||||
color="teal"
|
size={80}
|
||||||
name="John"
|
color="teal"
|
||||||
conversationType="direct"
|
name="John"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={80}
|
<Avatar
|
||||||
color="teal"
|
size={80}
|
||||||
name="John Smith"
|
color="teal"
|
||||||
conversationType="direct"
|
name="John Smith"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
<Avatar
|
/>
|
||||||
size={80}
|
<Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||||
color="teal"
|
<Avatar
|
||||||
conversationType="direct"
|
size={80}
|
||||||
i18n={util.i18n}
|
color="teal"
|
||||||
/>
|
name="Pupplies"
|
||||||
<Avatar
|
conversationType="group"
|
||||||
size={80}
|
i18n={util.i18n}
|
||||||
color="teal"
|
/>
|
||||||
name="Pupplies"
|
</util.ConversationContext>
|
||||||
conversationType="group"
|
|
||||||
i18n={util.i18n}
|
|
||||||
/>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Broken color
|
### Broken color
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
color="fake"
|
size={28}
|
||||||
name="F"
|
color="fake"
|
||||||
conversationType="direct"
|
name="F"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Broken image
|
### Broken image
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
color="pink"
|
size={28}
|
||||||
name="John Smith"
|
color="pink"
|
||||||
avatarPath="nonexistent"
|
name="John Smith"
|
||||||
conversationType="direct"
|
avatarPath="nonexistent"
|
||||||
i18n={util.i18n}
|
conversationType="direct"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Broken image for group
|
### Broken image for group
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Avatar
|
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||||
size={28}
|
<Avatar
|
||||||
avatarPath="nonexistent"
|
size={28}
|
||||||
color="pink"
|
avatarPath="nonexistent"
|
||||||
name="Puppies"
|
color="pink"
|
||||||
avatarPath="nonexistent"
|
name="Puppies"
|
||||||
conversationType="group"
|
avatarPath="nonexistent"
|
||||||
i18n={util.i18n}
|
conversationType="group"
|
||||||
/>
|
i18n={util.i18n}
|
||||||
|
/>
|
||||||
|
</util.ConversationContext>
|
||||||
```
|
```
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue