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

519
ts/components/Avatar.md
View file

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