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;
|
||||
}
|
||||
|
||||
.module-avatar--signal-blue {
|
||||
background-color: $color-signal-blue;
|
||||
}
|
||||
.module-avatar--red {
|
||||
background-color: $color-conversation-red-shade;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
### With avatar
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
color="pink"
|
||||
|
@ -17,11 +18,13 @@
|
|||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### With only name
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
color="blue"
|
||||
|
@ -43,11 +46,13 @@
|
|||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Just phone number
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
color="pink"
|
||||
|
@ -55,11 +60,13 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### All colors
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
color="signal-blue"
|
||||
|
@ -144,11 +151,13 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### 36px
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={36}
|
||||
color="teal"
|
||||
|
@ -171,12 +180,7 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={36}
|
||||
color="teal"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||
<Avatar
|
||||
size={36}
|
||||
color="teal"
|
||||
|
@ -184,11 +188,13 @@
|
|||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### 48px
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={48}
|
||||
color="teal"
|
||||
|
@ -211,12 +217,7 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={48}
|
||||
color="teal"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||
<Avatar
|
||||
size={48}
|
||||
color="teal"
|
||||
|
@ -224,11 +225,13 @@
|
|||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### 80px
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={80}
|
||||
color="teal"
|
||||
|
@ -251,12 +254,7 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={80}
|
||||
color="teal"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||
<Avatar
|
||||
size={80}
|
||||
color="teal"
|
||||
|
@ -264,11 +262,13 @@
|
|||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Broken color
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
color="fake"
|
||||
|
@ -276,11 +276,13 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Broken image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
color="pink"
|
||||
|
@ -289,11 +291,13 @@
|
|||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### Broken image for group
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={28}
|
||||
avatarPath="nonexistent"
|
||||
|
@ -303,4 +307,5 @@
|
|||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue