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

12
app/constants/colors.js
View File

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

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

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

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

@ -13,7 +13,7 @@ const testsForTheme = (theme) => {
expect(getUnreadStyleUtil({
unread: 1
})).toEqual({
backgroundColor: themes[theme].unreadBackground,
backgroundColor: themes[theme].unreadColor,
color: themes[theme].buttonText
});
});
@ -22,7 +22,7 @@ const testsForTheme = (theme) => {
expect(getUnreadStyleUtil({
tunread: [1]
})).toEqual({
backgroundColor: themes[theme].tunreadBackground,
backgroundColor: themes[theme].tunreadColor,
color: themes[theme].buttonText
});
});
@ -32,7 +32,7 @@ const testsForTheme = (theme) => {
unread: 1,
userMentions: 1
})).toEqual({
backgroundColor: themes[theme].mentionMeBackground,
backgroundColor: themes[theme].mentionMeColor,
color: themes[theme].buttonText
});
});
@ -42,7 +42,7 @@ const testsForTheme = (theme) => {
unread: 1,
groupMentions: 1
})).toEqual({
backgroundColor: themes[theme].mentionGroupBackground,
backgroundColor: themes[theme].mentionGroupColor,
color: themes[theme].buttonText
});
});
@ -54,7 +54,7 @@ const testsForTheme = (theme) => {
groupMentions: 1,
tunread: [1]
})).toEqual({
backgroundColor: themes[theme].mentionMeBackground,
backgroundColor: themes[theme].mentionMeColor,
color: themes[theme].buttonText
});
expect(getUnreadStyleUtil({
@ -62,14 +62,14 @@ const testsForTheme = (theme) => {
groupMentions: 1,
tunread: [1]
})).toEqual({
backgroundColor: themes[theme].mentionGroupBackground,
backgroundColor: themes[theme].mentionGroupColor,
color: themes[theme].buttonText
});
expect(getUnreadStyleUtil({
unread: 1,
tunread: [1]
})).toEqual({
backgroundColor: themes[theme].tunreadBackground,
backgroundColor: themes[theme].tunreadColor,
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 }) => {
if (subscription?.tunreadUser?.includes(messageId)) {
return themes[theme].mentionMeBackground;
return themes[theme].mentionMeColor;
}
if (subscription?.tunreadGroup?.includes(messageId)) {
return themes[theme].mentionGroupBackground;
return themes[theme].mentionGroupColor;
}
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', () => (
<>
<BaseItem
badgeColor={themes.light.mentionMeBackground}
badgeColor={themes.light.mentionMeColor}
/>
<List.Separator />
<BaseItem
badgeColor={themes.light.mentionGroupBackground}
badgeColor={themes.light.mentionGroupColor}
/>
<List.Separator />
<BaseItem
badgeColor={themes.light.tunreadBackground}
badgeColor={themes.light.tunreadColor}
/>
<BaseItem
item={{
msg: longText
}}
badgeColor={themes.light.tunreadBackground}
badgeColor={themes.light.tunreadColor}
/>
</>
));
@ -129,7 +129,7 @@ const ThemeStory = ({ theme }) => (
value={{ theme }}
>
<BaseItem
badgeColor={themes[theme].mentionMeBackground}
badgeColor={themes[theme].mentionMeColor}
/>
</ThemeContext.Provider>
);

2
storybook/stories/index.js
View File

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