verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[IMPROVEMENT] Match background and text mention colors (#2723)

This commit is contained in:
Diego Mello 2020-12-17 14:39:45 -03:00 committed by GitHub
parent e64e2787f5
commit 6a026235ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 44 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
__tests__/__snapshots__/Storyshots.test.js.snap
View File

@ -10480,7 +10480,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DB0C27", "color": "#F5455C",
}, },
] ]
} }
@ -10526,7 +10526,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }
@ -10571,7 +10571,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -10616,7 +10616,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -10727,7 +10727,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DB0C27", "color": "#F5455C",
}, },
] ]
} }
@ -10773,7 +10773,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }
@ -10818,7 +10818,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -10863,7 +10863,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -10974,7 +10974,7 @@ exports[`Storyshots Markdown list Markdown 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }
@ -21634,7 +21634,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }
@ -21681,7 +21681,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DB0C27", "color": "#F5455C",
}, },
] ]
} }
@ -21727,7 +21727,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -21773,7 +21773,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -21820,7 +21820,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }
@ -22050,7 +22050,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }
@ -22097,7 +22097,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DB0C27", "color": "#F5455C",
}, },
] ]
} }
@ -22143,7 +22143,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -22189,7 +22189,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#E26D0E", "color": "#F38C39",
}, },
] ]
} }
@ -22236,7 +22236,7 @@ exports[`Storyshots Message list message 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#DFAC00", "color": "#F3BE08",
}, },
] ]
} }

12
app/constants/colors.js
View File

@ -11,13 +11,11 @@ export const SWITCH_TRACK_COLOR = {
}; };
const mentions = { const mentions = {
unreadBackground: '#6C727A', unreadColor: '#6C727A',
tunreadBackground: '#1d74f5', tunreadColor: '#1d74f5',
mentionMeColor: '#DB0C27', mentionMeColor: '#F5455C',
mentionMeBackground: '#F5455C', mentionGroupColor: '#F38C39',
mentionGroupColor: '#E26D0E', mentionOtherColor: '#F3BE08'
mentionGroupBackground: '#F38C39',
mentionOtherColor: '#DFAC00'
}; };
export const themes = { export const themes = {

8
app/presentation/UnreadBadge/getUnreadStyle.js
View File

@ -7,14 +7,14 @@ export const getUnreadStyle = ({
return {}; return {};
} }
let backgroundColor = themes[theme].unreadBackground; let backgroundColor = themes[theme].unreadColor;
const color = themes[theme].buttonText; const color = themes[theme].buttonText;
if (userMentions > 0 || tunreadUser?.length) { if (userMentions > 0 || tunreadUser?.length) {
backgroundColor = themes[theme].mentionMeBackground; backgroundColor = themes[theme].mentionMeColor;
} else if (groupMentions > 0 || tunreadGroup?.length) { } else if (groupMentions > 0 || tunreadGroup?.length) {
backgroundColor = themes[theme].mentionGroupBackground; backgroundColor = themes[theme].mentionGroupColor;
} else if (tunread?.length > 0) { } else if (tunread?.length > 0) {
backgroundColor = themes[theme].tunreadBackground; backgroundColor = themes[theme].tunreadColor;
} }
return { return {

14
app/presentation/UnreadBadge/getUnreadStyle.test.js
View File

@ -13,7 +13,7 @@ const testsForTheme = (theme) => {
expect(getUnreadStyleUtil({ expect(getUnreadStyleUtil({
unread: 1 unread: 1
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].unreadBackground, backgroundColor: themes[theme].unreadColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
}); });
@ -22,7 +22,7 @@ const testsForTheme = (theme) => {
expect(getUnreadStyleUtil({ expect(getUnreadStyleUtil({
tunread: [1] tunread: [1]
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].tunreadBackground, backgroundColor: themes[theme].tunreadColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
}); });
@ -32,7 +32,7 @@ const testsForTheme = (theme) => {
unread: 1, unread: 1,
userMentions: 1 userMentions: 1
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].mentionMeBackground, backgroundColor: themes[theme].mentionMeColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
}); });
@ -42,7 +42,7 @@ const testsForTheme = (theme) => {
unread: 1, unread: 1,
groupMentions: 1 groupMentions: 1
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].mentionGroupBackground, backgroundColor: themes[theme].mentionGroupColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
}); });
@ -54,7 +54,7 @@ const testsForTheme = (theme) => {
groupMentions: 1, groupMentions: 1,
tunread: [1] tunread: [1]
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].mentionMeBackground, backgroundColor: themes[theme].mentionMeColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
expect(getUnreadStyleUtil({ expect(getUnreadStyleUtil({
@ -62,14 +62,14 @@ const testsForTheme = (theme) => {
groupMentions: 1, groupMentions: 1,
tunread: [1] tunread: [1]
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].mentionGroupBackground, backgroundColor: themes[theme].mentionGroupColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
expect(getUnreadStyleUtil({ expect(getUnreadStyleUtil({
unread: 1, unread: 1,
tunread: [1] tunread: [1]
})).toEqual({ })).toEqual({
backgroundColor: themes[theme].tunreadBackground, backgroundColor: themes[theme].tunreadColor,
color: themes[theme].buttonText color: themes[theme].buttonText
}); });
}); });

6
app/utils/room.js
View File

@ -34,13 +34,13 @@ export const formatDateThreads = date => moment(date).calendar(null, {
export const getBadgeColor = ({ subscription, messageId, theme }) => { export const getBadgeColor = ({ subscription, messageId, theme }) => {
if (subscription?.tunreadUser?.includes(messageId)) { if (subscription?.tunreadUser?.includes(messageId)) {
return themes[theme].mentionMeBackground; return themes[theme].mentionMeColor;
} }
if (subscription?.tunreadGroup?.includes(messageId)) { if (subscription?.tunreadGroup?.includes(messageId)) {
return themes[theme].mentionGroupBackground; return themes[theme].mentionGroupColor;
} }
if (subscription?.tunread?.includes(messageId)) { if (subscription?.tunread?.includes(messageId)) {
return themes[theme].tunreadBackground; return themes[theme].tunreadColor;
} }
}; };

10
app/views/ThreadMessagesView/Item.stories.js
View File

@ -105,21 +105,21 @@ stories.add('content', () => (
stories.add('badge', () => ( stories.add('badge', () => (
<> <>
<BaseItem <BaseItem
badgeColor={themes.light.mentionMeBackground} badgeColor={themes.light.mentionMeColor}
/> />
<List.Separator /> <List.Separator />
<BaseItem <BaseItem
badgeColor={themes.light.mentionGroupBackground} badgeColor={themes.light.mentionGroupColor}
/> />
<List.Separator /> <List.Separator />
<BaseItem <BaseItem
badgeColor={themes.light.tunreadBackground} badgeColor={themes.light.tunreadColor}
/> />
<BaseItem <BaseItem
item={{ item={{
msg: longText msg: longText
}} }}
badgeColor={themes.light.tunreadBackground} badgeColor={themes.light.tunreadColor}
/> />
</> </>
)); ));
@ -129,7 +129,7 @@ const ThemeStory = ({ theme }) => (
value={{ theme }} value={{ theme }}
> >
<BaseItem <BaseItem
badgeColor={themes[theme].mentionMeBackground} badgeColor={themes[theme].mentionMeColor}
/> />
</ThemeContext.Provider> </ThemeContext.Provider>
); );

2
storybook/stories/index.js
View File

@ -64,7 +64,7 @@ const messageDecorator = story => (
onReactionPress: () => {}, onReactionPress: () => {},
onDiscussionPress: () => {}, onDiscussionPress: () => {},
onReactionLongPress: () => {}, onReactionLongPress: () => {},
threadBadgeColor: themes.light.tunreadBackground threadBadgeColor: themes.light.tunreadColor
}} }}
> >
{story()} {story()}