keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Ensure that blue group avatars are preserved in dark theme

Browse Source
pull/27/head^2
Scott Nonnenberg 7 years ago
parent fbaef50c4a
commit 2b5f6d8b5e
2 changed files with 265 additions and 257 deletions
Show Stats Download Patch File Download Diff File

3
stylesheets/_theme_dark.scss
Unescape Escape 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;
} }

173
ts/components/Avatar.md
Unescape Escape View File

@ -1,300 +1,304 @@
### With avatar ### With avatar
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
color="pink" color="pink"
name="John Smith" name="John Smith"
avatarPath={util.gifObjectUrl} avatarPath={util.gifObjectUrl}
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="pink" color="pink"
name="Puppies" name="Puppies"
avatarPath={util.gifObjectUrl} avatarPath={util.gifObjectUrl}
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### With only name ### With only name
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
color="blue" color="blue"
name="John" name="John"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="green" color="green"
name="John Smith" name="John Smith"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="red" color="red"
name="Puppies" name="Puppies"
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Just phone number ### Just phone number
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
color="pink" color="pink"
phoneNumber="(555) 353-3433" phoneNumber="(555) 353-3433"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### All colors ### All colors
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
color="signal-blue" color="signal-blue"
name="Group" name="Group"
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="red" color="red"
name="Red" name="Red"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="deep_orange" color="deep_orange"
name="Deep Orange" name="Deep Orange"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="brown" color="brown"
name="Broen" name="Broen"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="pink" color="pink"
name="Pink" name="Pink"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="purple" color="purple"
name="Purple" name="Purple"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="indigo" color="indigo"
name="Indigo" name="Indigo"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="blue" color="blue"
name="Blue" name="Blue"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="teal" color="teal"
name="Teal" name="Teal"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="green" color="green"
name="Green" name="Green"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="light_green" color="light_green"
name="Light Green" name="Light Green"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={28} size={28}
color="blue_grey" color="blue_grey"
name="Blue Grey" name="Blue Grey"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### 36px ### 36px
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={36} size={36}
color="teal" color="teal"
name="John Smith" name="John Smith"
avatarPath={util.gifObjectUrl} avatarPath={util.gifObjectUrl}
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={36} size={36}
color="teal" color="teal"
name="John" name="John"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={36} size={36}
color="teal" color="teal"
name="John Smith" name="John Smith"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
size={36} <Avatar
color="teal"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar
size={36} size={36}
color="teal" color="teal"
name="Pupplies" name="Pupplies"
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### 48px ### 48px
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={48} size={48}
color="teal" color="teal"
name="John Smith" name="John Smith"
avatarPath={util.gifObjectUrl} avatarPath={util.gifObjectUrl}
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={48} size={48}
color="teal" color="teal"
name="John" name="John"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={48} size={48}
color="teal" color="teal"
name="John Smith" name="John Smith"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
size={48} <Avatar
color="teal"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar
size={48} size={48}
color="teal" color="teal"
name="Pupplies" name="Pupplies"
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### 80px ### 80px
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={80} size={80}
color="teal" color="teal"
name="John Smith" name="John Smith"
avatarPath={util.gifObjectUrl} avatarPath={util.gifObjectUrl}
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={80} size={80}
color="teal" color="teal"
name="John" name="John"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar
size={80} size={80}
color="teal" color="teal"
name="John Smith" name="John Smith"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
<Avatar <Avatar size={80} color="teal" conversationType="direct" i18n={util.i18n} />
size={80} <Avatar
color="teal"
conversationType="direct"
i18n={util.i18n}
/>
<Avatar
size={80} size={80}
color="teal" color="teal"
name="Pupplies" name="Pupplies"
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Broken color ### Broken color
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
color="fake" color="fake"
name="F" name="F"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Broken image ### Broken image
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
color="pink" color="pink"
name="John Smith" name="John Smith"
avatarPath="nonexistent" avatarPath="nonexistent"
conversationType="direct" conversationType="direct"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```
### Broken image for group ### Broken image for group
```jsx ```jsx
<Avatar <util.ConversationContext theme={util.theme} ios={util.ios}>
<Avatar
size={28} size={28}
avatarPath="nonexistent" avatarPath="nonexistent"
color="pink" color="pink"
@ -302,5 +306,6 @@
avatarPath="nonexistent" avatarPath="nonexistent"
conversationType="group" conversationType="group"
i18n={util.i18n} i18n={util.i18n}
/> />
</util.ConversationContext>
``` ```

Write Preview
Loading…
Cancel
Save