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

41
ts/components/Avatar.md
View file

@ -1,6 +1,7 @@
### With avatar ### With avatar
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
color="pink" color="pink"
@ -17,11 +18,13 @@
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### With only name ### With only name
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
color="blue" color="blue"
@ -43,11 +46,13 @@
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Just phone number ### Just phone number
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
color="pink" color="pink"
@ -55,11 +60,13 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### All colors ### All colors
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
color="signal-blue" color="signal-blue"
@ -144,11 +151,13 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### 36px ### 36px
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={36} size={36}
color="teal" color="teal"
@ -171,12 +180,7 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
size={36}
color="teal"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar <Avatar
size={36} size={36}
color="teal" color="teal"
@ -184,11 +188,13 @@
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### 48px ### 48px
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={48} size={48}
color="teal" color="teal"
@ -211,12 +217,7 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
size={48}
color="teal"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar <Avatar
size={48} size={48}
color="teal" color="teal"
@ -224,11 +225,13 @@
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### 80px ### 80px
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={80} size={80}
color="teal" color="teal"
@ -251,12 +254,7 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
size={80}
color="teal"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar <Avatar
size={80} size={80}
color="teal" color="teal"
@ -264,11 +262,13 @@
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Broken color ### Broken color
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
color="fake" color="fake"
@ -276,11 +276,13 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Broken image ### Broken image
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
color="pink" color="pink"
@ -289,11 +291,13 @@
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Broken image for group ### Broken image for group
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar <Avatar
size={28} size={28}
avatarPath="nonexistent" avatarPath="nonexistent"
@ -303,4 +307,5 @@
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```