mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Ensure that blue group avatars are preserved in dark theme

Browse source
This commit is contained in:
Scott Nonnenberg 2018-10-18 15:41:05 -07:00
parent fbaef50c4a
commit 2b5f6d8b5e
2 changed files with 265 additions and 257 deletions
Download patch file Download diff file Expand all files Collapse all files

3
stylesheets/_theme_dark.scss
View file

@ -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;
}

41
ts/components/Avatar.md
View file

@ -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>
```