verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

chore: Merge 4.48.0 into single-server (#5672)

This commit is contained in:
Diego Mello 2024-04-30 13:44:24 -03:00 committed by GitHub
parent c00d768f88 83d433a2d5
commit 29ef8e2af7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
446 changed files with 9175 additions and 1698 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.detoxrc.js
View File

@ -19,13 +19,13 @@ module.exports = {
type: 'ios.app', type: 'ios.app',
binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/Rocket.Chat Experimental.app', binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/Rocket.Chat Experimental.app',
build: build:
'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build' 'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Debug -destination \'generic/platform=iphonesimulator\' -derivedDataPath ios/build'
}, },
'ios.release': { 'ios.release': {
type: 'ios.app', type: 'ios.app',
binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/Rocket.Chat Experimental.app', binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/Rocket.Chat Experimental.app',
build: build:
'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Release -sdk iphonesimulator -derivedDataPath ios/build' 'xcodebuild -workspace ios/RocketChatRN.xcworkspace -scheme RocketChatRN -configuration Release -destination \'generic/platform=iphonesimulator\' -derivedDataPath ios/build'
}, },
'android.debug': { 'android.debug': {
type: 'android.apk', type: 'android.apk',

2
.storybook/preview.js
View File

@ -30,7 +30,7 @@ export const decorators = [
onReactionPress: () => {}, onReactionPress: () => {},
onDiscussionPress: () => {}, onDiscussionPress: () => {},
onReactionLongPress: () => {}, onReactionLongPress: () => {},
threadBadgeColor: themes.light.tunreadColor threadBadgeColor: themes.light.fontInfo
}} }}
> >
<Story /> <Story />

2
__tests__/containers/Avatar/__snapshots__/Avatar.stories.storyshot
View File

@ -12,7 +12,7 @@ exports[`Storyshots Avatar Avatar Url 1`] = `"{\\"type\\":\\"View\\",\\"props\\"
exports[`Storyshots Avatar Channel 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/@general?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`; exports[`Storyshots Avatar Channel 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/@general?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;
exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#f5455c\\"},[{\\"lineHeight\\":24},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10}]]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`; exports[`Storyshots Avatar Children 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":24,\\"color\\":\\"#DA1F37\\"},[{\\"lineHeight\\":24},[{\\"width\\":24,\\"height\\":24,\\"textAlignVertical\\":\\"center\\"},[{\\"position\\":\\"absolute\\",\\"bottom\\":-2,\\"right\\":-2,\\"borderRadius\\":10}]]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}"`;
exports[`Storyshots Avatar Custom Border Radius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`; exports[`Storyshots Avatar Custom Border Radius 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28},null],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":56,\\"height\\":56,\\"borderRadius\\":28}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/Avatar?format=png&size=112\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]}"`;

8
__tests__/containers/BackgroundContainer/__snapshots__/index.stories.storyshot
View File

@ -2,13 +2,13 @@
exports[`Storyshots BackgroundContainer Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]}]}"`; exports[`Storyshots BackgroundContainer Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]}]}"`;
exports[`Storyshots BackgroundContainer Black Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`; exports[`Storyshots BackgroundContainer Black Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#9EA2A8\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer Black Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`; exports[`Storyshots BackgroundContainer Black Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_black\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9EA2A8\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer Dark Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#f9f9f9\\"},\\"children\\":null}]}"`; exports[`Storyshots BackgroundContainer Dark Theme Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#9EA2A8\\"},\\"children\\":null}]}"`;
exports[`Storyshots BackgroundContainer Dark Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#f9f9f9\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`; exports[`Storyshots BackgroundContainer Dark Theme Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_dark\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9EA2A8\\"}]},\\"children\\":[\\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries\\"]}]}"`;
exports[`Storyshots BackgroundContainer Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#6C727A\\"},\\"children\\":null}]}"`; exports[`Storyshots BackgroundContainer Loading 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessibilityIgnoresInvertColors\\":true,\\"style\\":{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\",\\"position\\":\\"absolute\\"}},\\"children\\":[{\\"type\\":\\"Image\\",\\"props\\":{\\"source\\":{\\"uri\\":\\"message_empty_light\\"},\\"style\\":[{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},{\\"width\\":\\"100%\\",\\"height\\":\\"100%\\"},null]},\\"children\\":null}]},{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"top\\":60,\\"left\\":0,\\"right\\":0,\\"fontSize\\":16,\\"paddingHorizontal\\":24,\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},\\"color\\":\\"#6C727A\\"},\\"children\\":null}]}"`;

12
__tests__/containers/Button/__snapshots__/Button.stories.storyshot
View File

@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Button Custom Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"purple\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"yellow\\",\\"fontSize\\":18},[{\\"textAlign\\":\\"left\\"}]]},\\"children\\":[\\"Press me!\\"]}]}"`; exports[`Storyshots Button Custom Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"purple\\",\\"padding\\":10,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"yellow\\",\\"fontSize\\":18},[{\\"textAlign\\":\\"left\\"}]]},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button Disabled Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null]},\\"children\\":[\\"Press me!\\"]}]}"`; exports[`Storyshots Button Disabled Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#D1EBFE\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#CBCED1\\",\\"fontSize\\":16},null]},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button Disabled Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":0.3}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`; exports[`Storyshots Button Disabled Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#D1EBFE\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#FFFFFF\\"},\\"children\\":null}]}"`;
exports[`Storyshots Button Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#ffffff\\"},\\"children\\":null}]}"`; exports[`Storyshots Button Loading Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":true},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#D1EBFE\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"ActivityIndicator\\",\\"props\\":{\\"style\\":[{\\"padding\\":16,\\"flex\\":1},null],\\"color\\":\\"#FFFFFF\\"},\\"children\\":null}]}"`;
exports[`Storyshots Button Primary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#1d74f5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#ffffff\\",\\"fontSize\\":16},null]},\\"children\\":[\\"Press me!\\"]}]}"`; exports[`Storyshots Button Primary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#156FF5\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#FFFFFF\\",\\"fontSize\\":16},null]},\\"children\\":[\\"Press me!\\"]}]}"`;
exports[`Storyshots Button Secondary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"accessibilityState\\":{\\"disabled\\":false},\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#ffffff\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\",\\"fontSize\\":16},null]},\\"children\\":[\\"Press me!\\"]}]}"`; exports[`Storyshots Button Secondary Button 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityLabel\\":\\"Press me!\\",\\"testID\\":\\"testButton\\",\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"paddingHorizontal\\":14,\\"justifyContent\\":\\"center\\",\\"height\\":48,\\"borderRadius\\":4,\\"marginBottom\\":12,\\"backgroundColor\\":\\"#E4E7EA\\",\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"textAlign\\":\\"center\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2F343D\\",\\"fontSize\\":16},null]},\\"children\\":[\\"Press me!\\"]}]}"`;

10
__tests__/containers/Chip/__snapshots__/Chip.stories.storyshot
View File

@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Chip Chip Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4},{\\"marginRight\\":8,\\"marginVertical\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=56\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Rocket.Cat\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":16},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; exports[`Storyshots Chip Chip Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#F2F3F5\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4},{\\"marginRight\\":8,\\"marginVertical\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=56\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2F343D\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Rocket.Cat\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#2F343D\\"},[{\\"lineHeight\\":16},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
exports[`Storyshots Chip Chip With Short Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4},{\\"marginRight\\":8,\\"marginVertical\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=56\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Short\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":16},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; exports[`Storyshots Chip Chip With Short Text 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#F2F3F5\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4},{\\"marginRight\\":8,\\"marginVertical\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=56\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2F343D\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Short\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#2F343D\\"},[{\\"lineHeight\\":16},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
exports[`Storyshots Chip Chip Without Avatar 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Avatar\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":16},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; exports[`Storyshots Chip Chip Without Avatar 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":false},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#F2F3F5\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2F343D\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Avatar\\"]}]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":16,\\"color\\":\\"#2F343D\\"},[{\\"lineHeight\\":16},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
exports[`Storyshots Chip Chip Without Avatar And Icon 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":true},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Avatar and Icon\\"]}]}]}]}]}"`; exports[`Storyshots Chip Chip Without Avatar And Icon 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":true},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#F2F3F5\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2F343D\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Avatar and Icon\\"]}]}]}]}]}"`;
exports[`Storyshots Chip Chip Without Icon 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":true},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#efeff4\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4},{\\"marginRight\\":8,\\"marginVertical\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=56\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2f343d\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Icon\\"]}]}]}]}]}"`; exports[`Storyshots Chip Chip Without Icon 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"accessibilityState\\":{\\"disabled\\":true},\\"focusable\\":true,\\"style\\":[{\\"paddingHorizontal\\":8,\\"marginRight\\":8,\\"borderRadius\\":4,\\"justifyContent\\":\\"center\\",\\"maxWidth\\":192},{\\"backgroundColor\\":\\"#F2F3F5\\"},null],\\"collapsable\\":false},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4},{\\"marginRight\\":8,\\"marginVertical\\":8}],\\"testID\\":\\"avatar\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"overflow\\":\\"hidden\\"},{\\"width\\":28,\\"height\\":28,\\"borderRadius\\":4}]},\\"children\\":[{\\"type\\":\\"FastImageView\\",\\"props\\":{\\"style\\":{\\"position\\":\\"absolute\\",\\"left\\":0,\\"right\\":0,\\"top\\":0,\\"bottom\\":0},\\"source\\":{\\"uri\\":\\"https://open.rocket.chat/avatar/rocket.cat?format=png&size=56\\",\\"headers\\":{\\"User-Agent\\":\\"RC Mobile; ios unknown; vunknown (unknown)\\"},\\"priority\\":\\"high\\"},\\"resizeMode\\":\\"cover\\"},\\"children\\":null}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"marginRight\\":8,\\"maxWidth\\":120}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#2F343D\\"}],\\"numberOfLines\\":1},\\"children\\":[\\"Without Icon\\"]}]}]}]}]}"`;

2
__tests__/containers/CollapsibleText/__snapshots__/CollapsibleText.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Collapsible Text Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":20}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Lorem ipsum dolor sit amet\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"textAlignVertical\\":\\"center\\"},{\\"color\\":\\"#2f343d\\",\\"height\\":0}],\\"testID\\":\\"collapsible-text-Lorem ipsum dolor sit amet\\"},\\"children\\":[\\"Lorem ipsum dolor sit amet\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"linesToTruncate: 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"textAlignVertical\\":\\"center\\"},{\\"color\\":\\"#2f343d\\",\\"height\\":0}],\\"testID\\":\\"collapsible-text-linesToTruncate: 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"},\\"children\\":[\\"linesToTruncate: 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"linesToTruncate: 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"textAlignVertical\\":\\"center\\"},{\\"color\\":\\"#2f343d\\",\\"height\\":0}],\\"testID\\":\\"collapsible-text-linesToTruncate: 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"},\\"children\\":[\\"linesToTruncate: 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"]}]}"`; exports[`Storyshots Collapsible Text Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":20}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"Lorem ipsum dolor sit amet\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"textAlignVertical\\":\\"center\\"},{\\"color\\":\\"#2F343D\\",\\"height\\":0}],\\"testID\\":\\"collapsible-text-Lorem ipsum dolor sit amet\\"},\\"children\\":[\\"Lorem ipsum dolor sit amet\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"linesToTruncate: 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"textAlignVertical\\":\\"center\\"},{\\"color\\":\\"#2F343D\\",\\"height\\":0}],\\"testID\\":\\"collapsible-text-linesToTruncate: 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"},\\"children\\":[\\"linesToTruncate: 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"accessibilityLabel\\":\\"linesToTruncate: 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\",\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"textAlignVertical\\":\\"center\\"},{\\"color\\":\\"#2F343D\\",\\"height\\":0}],\\"testID\\":\\"collapsible-text-linesToTruncate: 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"},\\"children\\":[\\"linesToTruncate: 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel vestibulum neque. Proin dignissim neque in urna nec.\\"]}]}"`;

10
__tests__/containers/HeaderButton/__snapshots__/HeaderButtons.stories.storyshot
View File

File diff suppressed because one or more lines are too long

28
__tests__/containers/List/__snapshots__/List.stories.storyshot
View File

File diff suppressed because one or more lines are too long

4
__tests__/containers/LoginServices/__snapshots__/LoginServices.stories.storyshot
View File

File diff suppressed because one or more lines are too long

4
__tests__/containers/ReactionsList/__snapshots__/ReactionsList.stories.storyshot
View File

File diff suppressed because one or more lines are too long

10
__tests__/containers/RoomHeader/__snapshots__/RoomHeader.stories.storyshot
View File

File diff suppressed because one or more lines are too long

22
__tests__/containers/RoomItem/__snapshots__/RoomItem.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
__tests__/containers/RoomTypeIcon/__snapshots__/RoomTypeIcon.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots RoomTypeIcon All 1`] = `"[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#cbced1\\"},[{\\"lineHeight\\":30},[{\\"width\\":30,\\"height\\":30,\\"textAlignVertical\\":\\"center\\"},[{\\"marginRight\\":4},null]]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#2de0a5\\"},[{\\"lineHeight\\":30},[{\\"width\\":30,\\"height\\":30,\\"textAlignVertical\\":\\"center\\"},[{\\"marginRight\\":4},null]]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#ffd21f\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#0d0e12\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},{\\"margin\\":10}]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]"`; exports[`Storyshots RoomTypeIcon All 1`] = `"[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":30},[{\\"width\\":30,\\"height\\":30,\\"textAlignVertical\\":\\"center\\"},[{\\"marginRight\\":4},null]]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#158D65\\"},[{\\"lineHeight\\":30},[{\\"width\\":30,\\"height\\":30,\\"textAlignVertical\\":\\"center\\"},[{\\"marginRight\\":4},null]]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#AC892F\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":30,\\"color\\":\\"#1F2329\\"},[{\\"lineHeight\\":30},[{\\"marginRight\\":4},{\\"margin\\":10}]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]"`;

2
__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\",\\"style\\":{\\"backgroundColor\\":\\"#ffffff\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"paddingHorizontal\\":16,\\"paddingVertical\\":10,\\"borderWidth\\":1,\\"borderRadius\\":4},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"lineHeight\\":20},[{\\"position\\":\\"absolute\\"},{\\"right\\":12}]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`; exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\",\\"style\\":{\\"backgroundColor\\":\\"#FFFFFF\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#1F2329\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"paddingHorizontal\\":16,\\"paddingVertical\\":10,\\"borderWidth\\":1,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#FFFFFF\\",\\"borderColor\\":\\"#CBCED1\\",\\"color\\":\\"#1F2329\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9EA2A8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2F343D\\"},[{\\"lineHeight\\":20},[{\\"position\\":\\"absolute\\"},{\\"right\\":12}]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;

6
__tests__/containers/ServerItem/__snapshots__/ServerItem.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
__tests__/containers/Status/__snapshots__/Status.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Status All 1`] = `"[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#2de0a5\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#f5455c\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#ffd21f\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#9ea2a8\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#F38C39\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#cbced1\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#cbced1\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":60,\\"color\\":\\"#2de0a5\\"},[{\\"lineHeight\\":60},[{\\"width\\":60,\\"height\\":60,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]"`; exports[`Storyshots Status All 1`] = `"[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#158D65\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#DA1F37\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#AC892F\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#F38C39\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":32,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":32},[{\\"width\\":32,\\"height\\":32,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":60,\\"color\\":\\"#158D65\\"},[{\\"lineHeight\\":60},[{\\"width\\":60,\\"height\\":60,\\"textAlignVertical\\":\\"center\\"},null]],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]"`;

10
__tests__/containers/TextInput/__snapshots__/TextInput.stories.storyshot
View File

File diff suppressed because one or more lines are too long

10
__tests__/containers/UnreadBadge/__snapshots__/UnreadBadge.stories.storyshot
View File

File diff suppressed because one or more lines are too long

24
__tests__/containers/markdown/__snapshots__/Markdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

24
__tests__/containers/markdown/new/__snapshots__/NewMarkdown.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
__tests__/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots CollapsibleQuote Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},[{\\"lineHeight\\":22},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`; exports[`Storyshots CollapsibleQuote Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"collapsable\\":false,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#F7F8FA\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#EBECEF\\",\\"borderRightColor\\":\\"#EBECEF\\",\\"borderBottomColor\\":\\"#EBECEF\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#9EA2A8\\"},[{\\"lineHeight\\":22},null],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;

86
__tests__/containers/message/__snapshots__/Message.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
__tests__/views/CannedResponsesListView/__snapshots__/CannedResponseItem.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
__tests__/views/CreateChannelView/RoomSettings/__snapshots__/SwitchItem.stories.storyshot
View File

@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots SwitchItem Switch 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"minHeight\\":54,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"space-between\\",\\"flexDirection\\":\\"row\\",\\"maxHeight\\":80,\\"marginBottom\\":12},{\\"backgroundColor\\":\\"#ffffff\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#0d0e12\\"}]},\\"children\\":[\\"[missing \\\\\\"en.Onboarding_title\\\\\\" translation]\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"testID\\":\\"create-channel-switch-id-hint\\",\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#9ca2a8\\"}]},\\"children\\":[\\"Only authorized users can write new messages\\"]}]},{\\"type\\":\\"RCTSwitch\\",\\"props\\":{\\"testID\\":\\"create-channel-switch-id\\",\\"disabled\\":false,\\"onTintColor\\":\\"#2de0a5\\",\\"style\\":{\\"height\\":31,\\"width\\":51},\\"tintColor\\":\\"#f5455c\\",\\"value\\":false,\\"accessibilityRole\\":\\"switch\\"},\\"children\\":null}]}]}"`; exports[`Storyshots SwitchItem Switch 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"alignItems\\":\\"flex-start\\",\\"padding\\":16}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"minHeight\\":54,\\"alignItems\\":\\"center\\",\\"justifyContent\\":\\"space-between\\",\\"flexDirection\\":\\"row\\",\\"maxHeight\\":80,\\"marginBottom\\":12},{\\"backgroundColor\\":\\"#FFFFFF\\"}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"marginRight\\":8}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#1F2329\\"}]},\\"children\\":[\\"[missing \\\\\\"en.Onboarding_title\\\\\\" translation]\\"]},{\\"type\\":\\"Text\\",\\"props\\":{\\"testID\\":\\"create-channel-switch-id-hint\\",\\"style\\":[{\\"fontSize\\":14,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Only authorized users can write new messages\\"]}]},{\\"type\\":\\"RCTSwitch\\",\\"props\\":{\\"testID\\":\\"create-channel-switch-id\\",\\"disabled\\":false,\\"onTintColor\\":\\"#0D5940\\",\\"style\\":{\\"height\\":31,\\"width\\":51},\\"tintColor\\":\\"#BB0B21\\",\\"value\\":false,\\"accessibilityRole\\":\\"switch\\"},\\"children\\":null}]}]}"`;

4
__tests__/views/DiscussionsView/__snapshots__/Item.stories.storyshot
View File

File diff suppressed because one or more lines are too long

8
__tests__/views/RoomView/LoadMore/__snapshots__/LoadMore.stories.storyshot
View File

File diff suppressed because one or more lines are too long

6
__tests__/views/ThreadMessagesView/__snapshots__/Item.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
android/app/build.gradle
View File

@ -147,7 +147,7 @@ android {
minSdkVersion rootProject.ext.minSdkVersion minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
versionCode VERSIONCODE as Integer versionCode VERSIONCODE as Integer
versionName "4.47.2" versionName "4.48.0"
vectorDrawables.useSupportLibrary = true vectorDrawables.useSupportLibrary = true
if (!isFoss) { if (!isFoss) {
manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String] manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

2
app/containers/ActionSheet/ActionSheet.tsx
View File

@ -161,7 +161,7 @@ const ActionSheet = React.memo(
handleComponent={renderHandle} handleComponent={renderHandle}
enablePanDownToClose enablePanDownToClose
style={{ ...styles.container, ...bottomSheet }} style={{ ...styles.container, ...bottomSheet }}
backgroundStyle={{ backgroundColor: colors.focusedBackground }} backgroundStyle={{ backgroundColor: colors.surfaceLight }}
onChange={index => index === -1 && onClose()} onChange={index => index === -1 && onClose()}
// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker // We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
enableContentPanningGesture={data?.enableContentPanningGesture ?? true} enableContentPanningGesture={data?.enableContentPanningGesture ?? true}

12
app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
View File

@ -48,13 +48,13 @@ const FooterButtons = ({
return ( return (
<View style={styles.footerButtonsContainer}> <View style={styles.footerButtonsContainer}>
<Button <Button
style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.cancelButton }]} style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }]}
color={colors.backdropColor} color={colors.backdropColor}
title={cancelTitle} title={cancelTitle}
onPress={cancelAction} onPress={cancelAction}
/> />
<Button <Button
style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.dangerColor }} style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.buttonBackgroundDangerDefault }}
title={confirmTitle} title={confirmTitle}
onPress={confirmAction} onPress={confirmAction}
disabled={disabled} disabled={disabled}
@ -100,12 +100,12 @@ const ActionSheetContentWithInputAndSubmit = ({
<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'> <View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
<> <>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null} {iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
<Text style={[styles.titleContainerText, { color: colors.passcodePrimary, paddingLeft: iconName ? 16 : 0 }]}> <Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
{title} {title}
</Text> </Text>
</View> </View>
<Text style={[styles.subtitleText, { color: colors.titleText }]}>{description}</Text> <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text>
{customText} {customText}
</> </>
{showInput ? ( {showInput ? (
@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
/> />
) : null} ) : null}
<FooterButtons <FooterButtons
confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor} confirmBackgroundColor={confirmBackgroundColor || colors.fontHint}
cancelAction={onCancel || hideActionSheet} cancelAction={onCancel || hideActionSheet}
confirmAction={() => onSubmit(inputValue)} confirmAction={() => onSubmit(inputValue)}
cancelTitle={i18n.t('Cancel')} cancelTitle={i18n.t('Cancel')}

8
app/containers/ActionSheet/BottomSheetContent.tsx
View File

@ -27,10 +27,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
hasCancel ? ( hasCancel ? (
<Touch <Touch
onPress={hide} onPress={hide}
style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]} style={[styles.button, { backgroundColor: colors.surfaceHover }]}
accessibilityLabel={I18n.t('Cancel')} accessibilityLabel={I18n.t('Cancel')}
> >
<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text> <Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
</Touch> </Touch>
) : null; ) : null;
@ -45,10 +45,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
keyExtractor={item => item.title} keyExtractor={item => item.title}
bounces={false} bounces={false}
renderItem={renderItem} renderItem={renderItem}
style={{ backgroundColor: colors.focusedBackground }} style={{ backgroundColor: colors.strokeExtraDark }}
keyboardDismissMode='interactive' keyboardDismissMode='interactive'
indicatorStyle='black' indicatorStyle='black'
contentContainerStyle={{ paddingBottom: bottom }} contentContainerStyle={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListHeaderComponent={List.Separator} ListHeaderComponent={List.Separator}
ListFooterComponent={renderFooter} ListFooterComponent={renderFooter}

2
app/containers/ActionSheet/Handle.tsx
View File

@ -9,7 +9,7 @@ export const Handle = React.memo(() => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View style={styles.handle} testID='action-sheet-handle'> <View style={styles.handle} testID='action-sheet-handle'>
<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} /> <View style={[styles.handleIndicator, { backgroundColor: themes[theme].fontSecondaryInfo }]} />
</View> </View>
); );
}); });

12
app/containers/ActionSheet/Item.tsx
View File

@ -27,19 +27,19 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
} }
}; };
let textColor = colors.bodyText; let color = colors.fontDefault;
if (item.danger) { if (item.danger) {
textColor = colors.dangerColor; color = colors.fontDanger;
} }
if (!enabled) { if (!enabled) {
textColor = colors.fontDisabled; color = colors.fontDisabled;
} }
return ( return (
<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.focusedBackground }]} testID={item.testID}> <Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
{item.icon ? <CustomIcon name={item.icon} size={20} color={textColor} /> : null} {item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<Text numberOfLines={1} style={[styles.title, { color: textColor, marginLeft: item.icon ? 16 : 0 }]}> <Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
{item.title} {item.title}
</Text> </Text>
</View> </View>

2
app/containers/ActivityIndicator.tsx
View File

@ -27,7 +27,7 @@ const styles = StyleSheet.create({
const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => { const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} /> <ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].fontSecondaryInfo} {...props} />
); );
}; };

2
app/containers/AppVersion.tsx
View File

@ -23,7 +23,7 @@ const styles = StyleSheet.create({
const AppVersion = React.memo(({ theme }: { theme: TSupportedThemes }) => ( const AppVersion = React.memo(({ theme }: { theme: TSupportedThemes }) => (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}> <Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>
{I18n.t('Version_no', { version: '' })} {I18n.t('Version_no', { version: '' })}
<Text style={styles.bold}>{getReadableVersion}</Text> <Text style={styles.bold}>{getReadableVersion}</Text>
</Text> </Text>

4
app/containers/AudioPlayer/PlayButton.tsx
View File

@ -31,10 +31,10 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
customIconName = 'play-shape-filled'; customIconName = 'play-shape-filled';
} }
return <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />; return <CustomIcon name={customIconName} size={24} color={disabled ? colors.buttonBackgroundPrimaryDisabled : colors.buttonFontPrimary} />;
}; };
const PlayButton = ({ onPress, disabled = false, audioState }: IButton) => { const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.ReactElement => {
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (

2
app/containers/AudioPlayer/Seek.tsx
View File

@ -101,7 +101,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
} as TextInputProps; } as TextInputProps;
}, [timeLabel, duration, currentTime]); }, [timeLabel, duration, currentTime]);
const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled; const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled;
// TouchableNativeFeedback is avoiding do a long press message when seeking the audio // TouchableNativeFeedback is avoiding do a long press message when seeking the audio
return ( return (

3
app/containers/Avatar/AvatarWithEdit.tsx
View File

@ -69,12 +69,11 @@ const AvatarWithEdit = ({
<Button <Button
title={I18n.t('Edit')} title={I18n.t('Edit')}
type='secondary' type='secondary'
backgroundColor={colors.editAndUploadButtonAvatar}
onPress={handleEdit} onPress={handleEdit}
testID='avatar-edit-button' testID='avatar-edit-button'
style={styles.editAvatarButton} style={styles.editAvatarButton}
styleText={styles.textButton} styleText={styles.textButton}
color={colors.titleText} color={colors.fontTitlesLabels}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
/> />
) : null} ) : null}

4
app/containers/BackgroundContainer/index.tsx
View File

@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} /> <ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null} {text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null} {loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
</View> </View>
); );
}; };

48
app/containers/Button/index.tsx
View File

@ -9,7 +9,7 @@ import ActivityIndicator from '../ActivityIndicator';
interface IButtonProps extends PlatformTouchableProps { interface IButtonProps extends PlatformTouchableProps {
title: string; title: string;
onPress: () => void; onPress: () => void;
type?: string; type?: string; // primary | secondary
backgroundColor?: string; backgroundColor?: string;
loading?: boolean; loading?: boolean;
color?: string; color?: string;
@ -34,10 +34,10 @@ const styles = StyleSheet.create({
} }
}); });
const Button = ({ const Button: React.FC<IButtonProps> = ({
type = 'primary', type = 'primary',
disabled = false, disabled,
loading = false, loading,
fontSize = 16, fontSize = 16,
title, title,
onPress, onPress,
@ -46,33 +46,29 @@ const Button = ({
style, style,
styleText, styleText,
...otherProps ...otherProps
}: IButtonProps): React.ReactElement => { }) => {
const { colors } = useTheme(); const { colors } = useTheme();
const isPrimary = type === 'primary'; const isPrimary = type === 'primary';
const isDisabled = disabled || loading;
let textColor = isPrimary ? colors.buttonText : colors.bodyText; const defaultBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundSecondaryDefault;
if (color) { const disabledBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDisabled : colors.buttonBackgroundSecondaryDisabled;
textColor = color;
} const resolvedBackgroundColor = backgroundColor || defaultBackgroundColor;
const resolvedTextColor = color || (isPrimary ? colors.fontWhite : colors.fontDefault);
const containerStyle = [
styles.container,
{ backgroundColor: isDisabled ? disabledBackgroundColor : resolvedBackgroundColor },
isDisabled && backgroundColor ? styles.disabled : {},
style
];
const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
return ( return (
<Touchable <Touchable onPress={onPress} disabled={isDisabled} style={containerStyle} accessibilityLabel={title} {...otherProps}>
onPress={onPress} {loading ? <ActivityIndicator color={resolvedTextColor} /> : <Text style={textStyle}>{title}</Text>}
disabled={disabled || loading}
style={[
styles.container,
backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
disabled && styles.disabled,
style
]}
accessibilityLabel={title}
{...otherProps}
>
{loading ? (
<ActivityIndicator color={textColor} />
) : (
<Text style={[styles.text, { color: textColor, fontSize }, styleText]}>{title}</Text>
)}
</Touchable> </Touchable>
); );
}; };

12
app/containers/CallHeader.tsx
View File

@ -30,11 +30,11 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
const handleColors = (enabled: boolean) => { const handleColors = (enabled: boolean) => {
if (calling) { if (calling) {
if (enabled) return { button: colors.conferenceCallCallBackButton, icon: colors.gray300 }; if (enabled) return { button: colors.buttonBackgroundSecondaryDisabled, icon: colors.strokeExtraDark };
return { button: 'transparent', icon: colors.gray100 }; return { button: 'transparent', icon: colors.strokeLight };
} }
if (enabled) return { button: colors.conferenceCallEnabledIconBackground, icon: colors.conferenceCallEnabledIcon }; if (enabled) return { button: colors.strokeHighlight, icon: colors.surfaceLight };
return { button: 'transparent', icon: colors.conferenceCallDisabledIcon }; return { button: 'transparent', icon: colors.strokeExtraDark };
}; };
return ( return (
@ -81,7 +81,7 @@ function useStyle() {
actionSheetHeaderTitle: { actionSheetHeaderTitle: {
fontSize: 14, fontSize: 14,
...sharedStyles.textBold, ...sharedStyles.textBold,
color: colors.n900 color: colors.fontDefault
}, },
actionSheetHeaderButtons: { flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' }, actionSheetHeaderButtons: { flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' },
iconCallContainer: { iconCallContainer: {
@ -97,7 +97,7 @@ function useStyle() {
actionSheetUsername: { actionSheetUsername: {
fontSize: 16, fontSize: 16,
...sharedStyles.textBold, ...sharedStyles.textBold,
color: colors.passcodePrimary, color: colors.fontDefault,
flexShrink: 1 flexShrink: 1
}, },
rowContainer: { flexDirection: 'row' }, rowContainer: { flexDirection: 'row' },

2
app/containers/Check.tsx
View File

@ -15,7 +15,7 @@ const styles = StyleSheet.create({
const Check = React.memo(() => { const Check = React.memo(() => {
const { theme } = useTheme(); const { theme } = useTheme();
return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />; return <CustomIcon style={styles.icon} color={themes[theme].badgeBackgroundLevel2} size={22} name='check' />;
}); });
export default Check; export default Check;

8
app/containers/Chip/index.tsx
View File

@ -49,24 +49,24 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
style={({ pressed }) => [ style={({ pressed }) => [
styles.pressable, styles.pressable,
{ {
backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
}, },
style style
]} ]}
disabled={!onPress} disabled={!onPress}
onPress={() => onPress?.()} onPress={() => onPress?.()}
android_ripple={{ android_ripple={{
color: colors.bannerBackground color: colors.surfaceNeutral
}} }}
> >
<View style={styles.container}> <View style={styles.container}>
{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null} {avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
<View style={styles.textContainer}> <View style={styles.textContainer}>
<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}> <Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
{text} {text}
</Text> </Text>
</View> </View>
{onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null} {onPress ? <CustomIcon name='close' size={16} /> : null}
</View> </View>
</Pressable> </Pressable>
); );

8
app/containers/CollapsibleText/index.tsx
View File

@ -39,10 +39,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
if (truncatedText && showTruncated) { if (truncatedText && showTruncated) {
return ( return (
<Text testID={`collapsible-text-truncated-${m}`}> <Text testID={`collapsible-text-truncated-${m}`}>
<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.bodyText }, ...style]}> <Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
{`${truncatedText}... `} {`${truncatedText}... `}
</Text> </Text>
<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.actionTintColor }]}> <Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.fontHint }]}>
{I18n.t('Show_more')} {I18n.t('Show_more')}
</Text> </Text>
</Text> </Text>
@ -52,7 +52,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
return ( return (
<Text <Text
accessibilityLabel={m} accessibilityLabel={m}
style={[styles.text, { color: colors.bodyText, height: !showTruncated ? undefined : 0 }, ...style]} style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
testID={`collapsible-text-${m}`} testID={`collapsible-text-${m}`}
onTextLayout={event => { onTextLayout={event => {
const { lines } = event.nativeEvent; const { lines } = event.nativeEvent;
@ -74,7 +74,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
<Text <Text
testID='collapsible-text-show-less' testID='collapsible-text-show-less'
onPress={() => setShowTruncated(true)} onPress={() => setShowTruncated(true)}
style={[styles.textInfo, { color: colors.actionTintColor }]} style={[styles.textInfo, { color: colors.fontHint }]}
> >
{` ${I18n.t('Show_less')}`} {` ${I18n.t('Show_less')}`}
</Text> </Text>

16
app/containers/CustomIcon/index.tsx
View File

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons'; import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import { TextProps } from 'react-native'; import type { IconProps } from 'react-native-vector-icons/Icon';
import { mappedIcons } from './mappedIcons'; import { mappedIcons } from './mappedIcons';
import { useTheme } from '../../theme';
const icoMoonConfig = require('./selection.json'); const icoMoonConfig = require('./selection.json');
@ -10,14 +11,15 @@ export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom
export type TIconsName = keyof typeof mappedIcons; export type TIconsName = keyof typeof mappedIcons;
export interface ICustomIcon extends TextProps { export interface ICustomIcon extends IconProps {
name: TIconsName; name: TIconsName;
size: number; size: number;
color: string; color?: string;
} }
const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon) => ( const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => {
// @ts-ignore TODO remove this after update @types/react-native to 0.65.0 const { colors } = useTheme();
<IconSet name={name} size={size} color={color} style={[{ lineHeight: size }, style]} {...props} /> return <IconSet name={name} size={size} color={color || colors.fontDefault} style={[{ lineHeight: size }, style]} {...props} />;
); };
export { CustomIcon }; export { CustomIcon };

8
app/containers/DirectoryItem/index.tsx
View File

@ -33,7 +33,7 @@ const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) =>
if (!text) { if (!text) {
return null; return null;
} }
return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>; return <Text style={[styles.directoryItemLabel, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>;
}); });
const DirectoryItem = ({ const DirectoryItem = ({
@ -50,20 +50,20 @@ const DirectoryItem = ({
}: IDirectoryItem): React.ReactElement => { }: IDirectoryItem): React.ReactElement => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}> <Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}> <View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} /> <Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
<View style={styles.directoryItemTextContainer}> <View style={styles.directoryItemTextContainer}>
<View style={styles.directoryItemTextTitle}> <View style={styles.directoryItemTextTitle}>
{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null} {type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.directoryItemName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
{title} {title}
</Text> </Text>
</View> </View>
{description ? ( {description ? (
<MarkdownPreview <MarkdownPreview
msg={description} msg={description}
style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]} style={[styles.directoryItemUsername, { color: themes[theme].fontSecondaryInfo }]}
numberOfLines={1} numberOfLines={1}
/> />
) : null} ) : null}

2
app/containers/DotsLoader/index.tsx
View File

@ -31,7 +31,7 @@ function Dot({ active }: { active: boolean }): JSX.Element {
width: SIZE, width: SIZE,
borderRadius: SIZE / 2, borderRadius: SIZE / 2,
marginHorizontal: MARGIN, marginHorizontal: MARGIN,
backgroundColor: active ? colors.dotActiveBg : colors.dotBg backgroundColor: active ? colors.badgeBackgroundLevel2 : colors.badgeBackgroundLevel1
}; };
return <Animated.View style={[style, animatedStyle]} />; return <Animated.View style={[style, animatedStyle]} />;

4
app/containers/EmojiPicker/Footer.tsx
View File

@ -20,7 +20,7 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
]} ]}
testID='emoji-picker-search' testID='emoji-picker-search'
> >
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' /> <CustomIcon size={24} name='search' />
</Pressable> </Pressable>
<Pressable <Pressable
@ -32,7 +32,7 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
]} ]}
testID='emoji-picker-backspace' testID='emoji-picker-backspace'
> >
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' /> <CustomIcon size={24} name='backspace' />
</Pressable> </Pressable>
</View> </View>
); );

4
app/containers/FormContainer.tsx
View File

@ -31,7 +31,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
return ( return (
<KeyboardView <KeyboardView
style={{ backgroundColor: themes[theme].backgroundColor }} style={{ backgroundColor: themes[theme].surfaceRoom }}
contentContainerStyle={sharedStyles.container} contentContainerStyle={sharedStyles.container}
keyboardVerticalOffset={128} keyboardVerticalOffset={128}
> >
@ -42,7 +42,7 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
{...scrollPersistTaps} {...scrollPersistTaps}
{...props} {...props}
> >
<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].surfaceRoom }}>
{children} {children}
<AppVersion theme={theme} /> <AppVersion theme={theme} />
</SafeAreaView> </SafeAreaView>

12
app/containers/HeaderButton/Common.tsx
View File

@ -5,19 +5,21 @@ import I18n from '../../i18n';
import { isIOS } from '../../lib/methods/helpers'; import { isIOS } from '../../lib/methods/helpers';
import Container from './HeaderButtonContainer'; import Container from './HeaderButtonContainer';
import Item, { IHeaderButtonItem } from './HeaderButtonItem'; import Item, { IHeaderButtonItem } from './HeaderButtonItem';
import { useTheme } from '../../theme';
interface IHeaderButtonCommon extends IHeaderButtonItem { interface IHeaderButtonCommon extends IHeaderButtonItem {
navigation?: any; // TODO: Evaluate proper type navigation?: any; // TODO: Evaluate proper type
} }
// Left // Left
export const Drawer = React.memo( export const Drawer = ({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => {
({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => ( const { colors } = useTheme();
return (
<Container left> <Container left>
<Item iconName='hamburguer' onPress={onPress} testID={testID} {...props} /> <Item iconName='hamburguer' onPress={onPress} testID={testID} color={colors.fontDefault} {...props} />
</Container> </Container>
) );
); };
export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => { export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
const { dispatch } = useNavigation(); const { dispatch } = useNavigation();

8
app/containers/HeaderButton/HeaderButtonItem.tsx
View File

@ -2,11 +2,11 @@ import React from 'react';
import { Platform, StyleSheet, Text } from 'react-native'; import { Platform, StyleSheet, Text } from 'react-native';
import { PlatformPressable } from '@react-navigation/elements'; import { PlatformPressable } from '@react-navigation/elements';
import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon'; import { CustomIcon, TIconsName } from '../CustomIcon';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | 'color'> { export interface IHeaderButtonItem {
title?: string; title?: string;
iconName?: TIconsName; iconName?: TIconsName;
onPress?: <T>(arg: T) => void; onPress?: <T>(arg: T) => void;
@ -57,9 +57,9 @@ const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...pro
> >
<> <>
{iconName ? ( {iconName ? (
<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} /> <CustomIcon name={iconName} size={24} color={color} {...props} />
) : ( ) : (
<Text style={[styles.title, { color: color || colors.headerTintColor }]} {...props}> <Text style={[styles.title, { color: color || colors.fontDefault }]} {...props}>
{title} {title}
</Text> </Text>
)} )}

4
app/containers/HeaderButton/HeaderButtons.stories.tsx
View File

@ -33,7 +33,7 @@ const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
title={title} title={title}
headerLeft={left} headerLeft={left}
headerRight={right} headerRight={right}
headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />} headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.surfaceNeutral }} />}
/> />
); );
@ -120,7 +120,7 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
<HeaderExample <HeaderExample
left={() => ( left={() => (
<HeaderButton.Container left> <HeaderButton.Container left>
<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />} /> <HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />} />
<HeaderButton.Item iconName='threads' /> <HeaderButton.Item iconName='threads' />
</HeaderButton.Container> </HeaderButton.Container>
)} )}

2
app/containers/ImageViewer/ImageViewer.tsx
View File

@ -114,7 +114,7 @@ export const ImageViewer = ({ uri = '', imageComponentType, width, height, ...pr
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<View style={[styles.flex, { width, height, backgroundColor: colors.previewBackground }]}> <View style={[styles.flex, { width, height, backgroundColor: colors.surfaceNeutral }]}>
<GestureDetector gesture={gesture}> <GestureDetector gesture={gesture}>
<Animated.View onLayout={onLayout} style={[styles.flex, style]}> <Animated.View onLayout={onLayout} style={[styles.flex, style]}>
<Component <Component

4
app/containers/InAppNotification/IncomingCallNotification/index.tsx
View File

@ -10,7 +10,6 @@ import i18n from '../../../i18n';
import { useAppSelector } from '../../../lib/hooks'; import { useAppSelector } from '../../../lib/hooks';
import { useEndpointData } from '../../../lib/hooks/useEndpointData'; import { useEndpointData } from '../../../lib/hooks/useEndpointData';
import { hideNotification } from '../../../lib/methods/helpers/notifications'; import { hideNotification } from '../../../lib/methods/helpers/notifications';
import { useTheme } from '../../../theme';
import { CustomIcon } from '../../CustomIcon'; import { CustomIcon } from '../../CustomIcon';
import { CallHeader } from '../../CallHeader'; import { CallHeader } from '../../CallHeader';
import { useStyle } from './style'; import { useStyle } from './style';
@ -41,7 +40,6 @@ const IncomingCallHeader = React.memo(
const isMasterDetail = useAppSelector(state => state.app.isMasterDetail); const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
const styles = useStyle(); const styles = useStyle();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const { colors } = useTheme();
return ( return (
<View <View
@ -73,7 +71,7 @@ const IncomingCallHeader = React.memo(
}} }}
style={styles.closeButton} style={styles.closeButton}
> >
<CustomIcon name='close' size={20} color={colors.gray300} /> <CustomIcon name='close' size={20} />
</Touchable> </Touchable>
<Touchable <Touchable
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}

10
app/containers/InAppNotification/IncomingCallNotification/style.tsx
View File

@ -13,8 +13,8 @@ export const useStyle = () => {
marginHorizontal: 10, marginHorizontal: 10,
borderWidth: StyleSheet.hairlineWidth, borderWidth: StyleSheet.hairlineWidth,
borderRadius: 4, borderRadius: 4,
backgroundColor: colors.focusedBackground, backgroundColor: colors.surfaceLight,
borderColor: colors.separatorColor, borderColor: colors.strokeLight,
flex: 1 flex: 1
}, },
small: { small: {
@ -26,7 +26,7 @@ export const useStyle = () => {
marginTop: 12 marginTop: 12
}, },
closeButton: { closeButton: {
backgroundColor: colors.passcodeButtonActive, backgroundColor: colors.buttonBackgroundSecondaryDefault,
marginRight: 8, marginRight: 8,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -36,7 +36,7 @@ export const useStyle = () => {
}, },
cancelButton: { cancelButton: {
borderRadius: 4, borderRadius: 4,
backgroundColor: colors.cancelCallButton, backgroundColor: colors.buttonBackgroundDangerDefault,
marginRight: 8, marginRight: 8,
flex: 2, flex: 2,
alignItems: 'center', alignItems: 'center',
@ -48,7 +48,7 @@ export const useStyle = () => {
}, },
acceptButton: { acceptButton: {
borderRadius: 4, borderRadius: 4,
backgroundColor: colors.acceptCallButton, backgroundColor: colors.buttonBackgroundSuccessDefault,
flex: 2, flex: 2,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'

10
app/containers/InAppNotification/NotifierComponent.tsx
View File

@ -103,8 +103,8 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
styles.container, styles.container,
isMasterDetail && styles.small, isMasterDetail && styles.small,
{ {
backgroundColor: themes[theme].focusedBackground, backgroundColor: themes[theme].surfaceLight,
borderColor: themes[theme].separatorColor, borderColor: themes[theme].strokeLight,
marginTop: insets.top marginTop: insets.top
} }
]} ]}
@ -119,17 +119,17 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
<> <>
<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} /> <Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
<View style={styles.inner}> <View style={styles.inner}>
<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
{title} {title}
</Text> </Text>
<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.message, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
{text} {text}
</Text> </Text>
</View> </View>
</> </>
</Touchable> </Touchable>
<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}> <Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
<CustomIcon name='close' size={20} color={themes[theme].titleText} style={styles.close} /> <CustomIcon name='close' size={20} style={styles.close} />
</Touchable> </Touchable>
</View> </View>
); );

2
app/containers/List/ListHeader.tsx
View File

@ -28,7 +28,7 @@ const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) =>
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}> <Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={1}>
{translateTitle ? I18n.t(title) : title} {translateTitle ? I18n.t(title) : title}
</Text> </Text>
</View> </View>

18
app/containers/List/ListIcon.tsx
View File

@ -1,14 +1,12 @@
import React from 'react'; import React from 'react';
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { themes } from '../../lib/constants';
import { CustomIcon, TIconsName } from '../CustomIcon'; import { CustomIcon, TIconsName } from '../CustomIcon';
import { useTheme } from '../../theme';
import { ICON_SIZE } from './constants'; import { ICON_SIZE } from './constants';
interface IListIcon { interface IListIcon {
name: TIconsName; name: TIconsName;
color?: string | null; color?: string;
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
testID?: string; testID?: string;
size?: number; size?: number;
@ -21,15 +19,11 @@ const styles = StyleSheet.create({
} }
}); });
const ListIcon = React.memo(({ name, color, style, testID, size }: IListIcon) => { const ListIcon = ({ name, color, style, testID, size }: IListIcon): React.ReactElement => (
const { theme } = useTheme(); <View style={[styles.icon, style]}>
<CustomIcon name={name} color={color} size={size ?? ICON_SIZE} testID={testID} />
return ( </View>
<View style={[styles.icon, style]}> );
<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={size ?? ICON_SIZE} testID={testID} />
</View>
);
});
ListIcon.displayName = 'List.Icon'; ListIcon.displayName = 'List.Icon';

2
app/containers/List/ListInfo.tsx
View File

@ -27,7 +27,7 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text> <Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
</View> </View>
); );
}); });

10
app/containers/List/ListItem.tsx
View File

@ -97,15 +97,15 @@ const Content = React.memo(
{left ? <View style={styles.leftContainer}>{left()}</View> : null} {left ? <View style={styles.leftContainer}>{left()}</View> : null}
<View style={styles.textContainer}> <View style={styles.textContainer}>
<View style={styles.textAlertContainer}> <View style={styles.textAlertContainer}>
<Text style={[styles.title, styleTitle, { color: color || themes[theme].titleText }]} numberOfLines={1}> <Text style={[styles.title, styleTitle, { color: color || themes[theme].fontTitlesLabels }]} numberOfLines={1}>
{translateTitle && title ? I18n.t(title) : title} {translateTitle && title ? I18n.t(title) : title}
</Text> </Text>
{alert ? ( {alert ? (
<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].dangerColor} style={styles.alertIcon} /> <CustomIcon name='info' size={ICON_SIZE} color={themes[theme].buttonBackgroundDangerDefault} style={styles.alertIcon} />
) : null} ) : null}
</View> </View>
{subtitle ? ( {subtitle ? (
<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}> <Text style={[styles.subtitle, { color: themes[theme].fontSecondaryInfo }]} numberOfLines={1}>
{translateSubtitle ? I18n.t(subtitle) : subtitle} {translateSubtitle ? I18n.t(subtitle) : subtitle}
</Text> </Text>
) : null} ) : null}
@ -136,7 +136,7 @@ interface IListItemButton {
const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => ( const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
<Touch <Touch
onPress={() => onPress(props.title)} onPress={() => onPress(props.title)}
style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} style={{ backgroundColor: backgroundColor || themes[props.theme].surfaceRoom }}
underlayColor={underlayColor} underlayColor={underlayColor}
enabled={!props.disabled} enabled={!props.disabled}
> >
@ -157,7 +157,7 @@ const ListItem = React.memo(({ ...props }: IListItem) => {
return <Button {...props} theme={theme} onPress={onPress} />; return <Button {...props} theme={theme} onPress={onPress} />;
} }
return ( return (
<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}> <View style={{ backgroundColor: props.backgroundColor || themes[theme].surfaceRoom }}>
<Content {...props} theme={theme} /> <Content {...props} theme={theme} />
</View> </View>
); );

2
app/containers/List/ListSeparator.tsx
View File

@ -17,7 +17,7 @@ interface IListSeparator {
const ListSeparator = React.memo(({ style }: IListSeparator) => { const ListSeparator = React.memo(({ style }: IListSeparator) => {
const { theme } = useTheme(); const { theme } = useTheme();
return <View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />; return <View style={[styles.separator, style, { backgroundColor: themes[theme].strokeLight }]} />;
}); });
ListSeparator.displayName = 'List.Separator'; ListSeparator.displayName = 'List.Separator';

6
app/containers/LoginServices/ButtonService.tsx
View File

@ -16,13 +16,13 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
onPress={onPress} onPress={onPress}
style={[styles.serviceButton, { backgroundColor }]} style={[styles.serviceButton, { backgroundColor }]}
activeOpacity={0.5} activeOpacity={0.5}
underlayColor={colors.buttonText} underlayColor={colors.fontWhite}
> >
<View style={styles.serviceButtonContainer}> <View style={styles.serviceButtonContainer}>
{authType === 'oauth' || authType === 'apple' ? ( {authType === 'oauth' || authType === 'apple' ? (
<CustomIcon name={icon} size={24} color={colors.titleText} style={styles.serviceIcon} /> <CustomIcon name={icon} size={24} style={styles.serviceIcon} />
) : null} ) : null}
<Text style={[styles.serviceText, { color: colors.titleText }]}>{buttonText}</Text> <Text style={[styles.serviceText, { color: colors.fontTitlesLabels }]}>{buttonText}</Text>
</View> </View>
</Touch> </Touch>
); );

2
app/containers/LoginServices/LoginServices.stories.tsx
View File

@ -84,7 +84,7 @@ export const ServiceList = () => (
<ButtonService <ButtonService
key={service._id} key={service._id}
onPress={() => {}} onPress={() => {}}
backgroundColor={colors[theme].chatComponentBackground} backgroundColor={colors[theme].surfaceTint}
buttonText={buttonText} buttonText={buttonText}
icon={icon} icon={icon}
name={service.name} name={service.name}

2
app/containers/LoginServices/Service.tsx
View File

@ -86,7 +86,7 @@ const Service = React.memo(
); );
} }
const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.chatComponentBackground; const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.buttonBackgroundSecondaryDefault;
return ( return (
<ButtonService <ButtonService

2
app/containers/LoginServices/ServicesSeparator.tsx
View File

@ -20,7 +20,7 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
type='secondary' type='secondary'
onPress={onPress} onPress={onPress}
style={styles.options} style={styles.options}
color={colors.actionTintColor} color={colors.fontHint}
/> />
<OrSeparator theme={theme} /> <OrSeparator theme={theme} />
</> </>

10
app/containers/MessageActions/Header.tsx
View File

@ -65,7 +65,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
<Touch <Touch
testID={`message-actions-emoji-${item}`} testID={`message-actions-emoji-${item}`}
onPress={() => onReaction({ emoji: item })} onPress={() => onReaction({ emoji: item })}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]} style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
> >
{typeof item === 'string' ? ( {typeof item === 'string' ? (
<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text> <Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
@ -79,9 +79,9 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
<Touch <Touch
testID='add-reaction' testID='add-reaction'
onPress={(param: any) => onReaction(param)} onPress={(param: any) => onReaction(param)}
style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]} style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
> >
<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} /> <CustomIcon name='reaction-add' size={24} />
</Touch> </Touch>
); );
@ -108,12 +108,12 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
} }
return ( return (
<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}> <View style={[styles.container, { backgroundColor: themes[theme].surfaceLight }]}>
<FlatList <FlatList
data={frequentlyUsed.slice(0, quantity)} data={frequentlyUsed.slice(0, quantity)}
renderItem={renderItem} renderItem={renderItem}
ListFooterComponent={renderFooter} ListFooterComponent={renderFooter}
style={{ backgroundColor: themes[theme].focusedBackground }} style={{ backgroundColor: themes[theme].surfaceLight }}
keyExtractor={item => (typeof item === 'string' ? item : item.name)} keyExtractor={item => (typeof item === 'string' ? item : item.name)}
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
scrollEnabled={false} scrollEnabled={false}

2
app/containers/MessageActions/index.tsx
View File

@ -131,7 +131,7 @@ const MessageActions = React.memo(
} }
const editOwn = isOwn(message); const editOwn = isOwn(message);
if (!(permissions.hasEditPermission || (Message_AllowEditing && editOwn))) { if (!(permissions.hasEditPermission || (Message_AllowEditing !== false && editOwn))) {
return false; return false;
} }
const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes; const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes;

228
app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
View File

@ -119,7 +119,7 @@ exports[`MessageComposer Audio tap record 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -311,7 +311,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -421,7 +421,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -627,7 +627,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#2f343d", "color": "#2F343D",
}, },
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -728,7 +728,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -838,7 +838,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -1045,7 +1045,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#2f343d", "color": "#2F343D",
}, },
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1222,7 +1222,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#2f343d", "color": "#2F343D",
}, },
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1323,7 +1323,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -1433,7 +1433,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -1640,7 +1640,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#2f343d", "color": "#2F343D",
}, },
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1817,7 +1817,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
"textAlign": "left", "textAlign": "left",
}, },
Object { Object {
"color": "#2f343d", "color": "#2F343D",
}, },
Object { Object {
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1953,7 +1953,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2024,7 +2024,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2095,7 +2095,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2166,7 +2166,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2237,7 +2237,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2308,7 +2308,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2379,7 +2379,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2517,7 +2517,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2588,7 +2588,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2659,7 +2659,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2730,7 +2730,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2801,7 +2801,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2872,7 +2872,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -2943,7 +2943,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3081,7 +3081,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3152,7 +3152,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3223,7 +3223,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3294,7 +3294,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3365,7 +3365,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3436,7 +3436,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3507,7 +3507,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3645,7 +3645,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3716,7 +3716,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3787,7 +3787,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3858,7 +3858,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -3929,7 +3929,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4000,7 +4000,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4071,7 +4071,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4209,7 +4209,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4280,7 +4280,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4351,7 +4351,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4422,7 +4422,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4493,7 +4493,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4564,7 +4564,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4635,7 +4635,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4773,7 +4773,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4844,7 +4844,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4915,7 +4915,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -4986,7 +4986,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5057,7 +5057,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5128,7 +5128,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5199,7 +5199,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5337,7 +5337,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5408,7 +5408,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5479,7 +5479,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5550,7 +5550,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5621,7 +5621,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5692,7 +5692,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5763,7 +5763,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5901,7 +5901,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -5972,7 +5972,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6043,7 +6043,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6114,7 +6114,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6185,7 +6185,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6256,7 +6256,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6327,7 +6327,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6465,7 +6465,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6536,7 +6536,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6607,7 +6607,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6678,7 +6678,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6749,7 +6749,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6820,7 +6820,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -6891,7 +6891,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7029,7 +7029,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7100,7 +7100,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7171,7 +7171,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7242,7 +7242,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7313,7 +7313,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7384,7 +7384,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7455,7 +7455,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7593,7 +7593,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7664,7 +7664,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7735,7 +7735,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7806,7 +7806,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7877,7 +7877,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -7948,7 +7948,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8019,7 +8019,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8157,7 +8157,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8228,7 +8228,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8299,7 +8299,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8370,7 +8370,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8441,7 +8441,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8579,7 +8579,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8650,7 +8650,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8721,7 +8721,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8860,7 +8860,7 @@ Array [
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -8931,7 +8931,7 @@ Array [
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9002,7 +9002,7 @@ Array [
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9073,7 +9073,7 @@ Array [
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9144,7 +9144,7 @@ Array [
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9580,7 +9580,7 @@ exports[`MessageComposer renders correctly 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9690,7 +9690,7 @@ exports[`MessageComposer renders correctly 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9794,7 +9794,7 @@ exports[`MessageComposer renders correctly with audio recorder disabled 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -9943,7 +9943,7 @@ exports[`MessageComposer renders correctly with audio recorder disabled and with
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10092,7 +10092,7 @@ exports[`MessageComposer renders correctly without audio upload permissions 1`]
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10276,7 +10276,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10347,7 +10347,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10418,7 +10418,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10489,7 +10489,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10560,7 +10560,7 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10663,7 +10663,7 @@ exports[`MessageComposer send message 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [
@ -10773,7 +10773,7 @@ exports[`MessageComposer send message 1`] = `
style={ style={
Array [ Array [
Object { Object {
"color": "#6C727A", "color": "#2F343D",
"fontSize": 24, "fontSize": 24,
}, },
Array [ Array [

4
app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
View File

@ -9,7 +9,7 @@ import { NO_CANNED_RESPONSES } from '../../constants';
import { useStyle } from './styles'; import { useStyle } from './styles';
export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCannedResponse }) => { export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCannedResponse }) => {
const [styles, colors] = useStyle(); const [styles] = useStyle();
if (item.id === NO_CANNED_RESPONSES) { if (item.id === NO_CANNED_RESPONSES) {
return ( return (
<View style={styles.canned}> <View style={styles.canned}>
@ -17,7 +17,7 @@ export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCanned
<Text style={styles.cannedTitleText}> <Text style={styles.cannedTitleText}>
{I18n.t('No_match_found')} <Text style={sharedStyles.textSemibold}>{I18n.t('Check_canned_responses')}</Text> {I18n.t('No_match_found')} <Text style={sharedStyles.textSemibold}>{I18n.t('Check_canned_responses')}</Text>
</Text> </Text>
<CustomIcon name='chevron-right' size={24} color={colors.fontHint} /> <CustomIcon name='chevron-right' size={24} />
</View> </View>
</View> </View>
); );

2
app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
View File

@ -19,7 +19,7 @@ export const AutocompletePreview = ({ item, onPress }: IAutocompleteItemProps) =
item.preview.type === 'image' ? ( item.preview.type === 'image' ? (
<FastImage style={styles.previewImage} source={{ uri: item.preview.value }} resizeMode={FastImage.resizeMode.cover} /> <FastImage style={styles.previewImage} source={{ uri: item.preview.value }} resizeMode={FastImage.resizeMode.cover} />
) : ( ) : (
<CustomIcon name='attach' size={36} color={colors.fontInfo} /> <CustomIcon name='attach' size={36} />
); );
} }

18
app/containers/MessageComposer/components/Buttons/BaseButton.tsx
View File

@ -4,7 +4,6 @@ import { View, StyleSheet } from 'react-native';
import I18n from '../../../../i18n'; import I18n from '../../../../i18n';
import { CustomIcon, TIconsName } from '../../../CustomIcon'; import { CustomIcon, TIconsName } from '../../../CustomIcon';
import { useTheme } from '../../../../theme';
export interface IBaseButton { export interface IBaseButton {
testID: string; testID: string;
@ -21,16 +20,13 @@ export const hitSlop = {
left: 16 left: 16
}; };
export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => { export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => (
const { colors } = useTheme(); <BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
return ( <View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}> <CustomIcon name={icon} size={24} color={color} />
<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'> </View>
<CustomIcon name={icon} size={24} color={color || colors.fontSecondaryInfo} /> </BorderlessButton>
</View> );
</BorderlessButton>
);
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
button: { button: {

2
app/containers/MessageComposer/components/EmojiSearchbar.tsx
View File

@ -66,7 +66,7 @@ export const EmojiSearchbar = (): React.ReactElement | null => {
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
testID='openback-emoji-keyboard' testID='openback-emoji-keyboard'
> >
<CustomIcon name='chevron-left' size={24} color={colors.fontHint} /> <CustomIcon name='chevron-left' size={24} />
</Pressable> </Pressable>
<View style={styles.inputContainer}> <View style={styles.inputContainer}>
<EmojiSearch onBlur={closeEmojiKeyboard} onChangeText={handleTextChange} /> <EmojiSearch onBlur={closeEmojiKeyboard} onChangeText={handleTextChange} />

4
app/containers/MessageComposer/components/SendThreadToChannel.tsx
View File

@ -76,9 +76,9 @@ export const SendThreadToChannel = (): React.ReactElement | null => {
testID={alsoSendThreadToChannel ? 'send-to-channel-checked' : 'send-to-channel-unchecked'} testID={alsoSendThreadToChannel ? 'send-to-channel-checked' : 'send-to-channel-unchecked'}
name={alsoSendThreadToChannel ? 'checkbox-checked' : 'checkbox-unchecked'} name={alsoSendThreadToChannel ? 'checkbox-checked' : 'checkbox-unchecked'}
size={24} size={24}
color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.strokeDark} color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.fontDefault}
/> />
<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Message_composer_Send_to_channel')}</Text> <Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
); );
}; };

32
app/containers/MessageComposer/hooks/useAutoSaveDraft.ts
View File

@ -1,24 +1,28 @@
import { useRoute } from '@react-navigation/native';
import { useCallback, useEffect, useRef } from 'react'; import { useCallback, useEffect, useRef } from 'react';
import { saveDraftMessage } from '../../../lib/methods/draftMessage';
import { useRoomContext } from '../../../views/RoomView/context'; import { useRoomContext } from '../../../views/RoomView/context';
import { useFocused } from '../context'; import { useFocused } from '../context';
import { saveDraftMessage } from '../../../lib/methods/draftMessage';
export const useAutoSaveDraft = (text = '') => { export const useAutoSaveDraft = (text = '') => {
const route = useRoute();
const { rid, tmid, action, selectedMessages } = useRoomContext(); const { rid, tmid, action, selectedMessages } = useRoomContext();
const focused = useFocused(); const focused = useFocused();
const oldText = useRef(''); const oldText = useRef('');
const intervalRef = useRef(); const intervalRef = useRef();
const saveMessageDraft = useCallback(() => { const mounted = useRef(true);
if (action === 'edit') return;
const saveMessageDraft = useCallback(() => {
if (route.name === 'ShareView') return;
if (action === 'edit') return;
const draftMessage = selectedMessages?.length ? JSON.stringify({ quotes: selectedMessages, msg: text }) : text; const draftMessage = selectedMessages?.length ? JSON.stringify({ quotes: selectedMessages, msg: text }) : text;
if (oldText.current !== draftMessage) { if (oldText.current !== draftMessage || (oldText.current === '' && draftMessage === '')) {
oldText.current = draftMessage; oldText.current = draftMessage;
saveDraftMessage({ rid, tmid, draftMessage }); saveDraftMessage({ rid, tmid, draftMessage });
} }
}, [action, rid, tmid, text, selectedMessages?.length]); }, [action, rid, tmid, text, selectedMessages?.length, route.name]);
useEffect(() => { useEffect(() => {
if (focused) { if (focused) {
@ -29,7 +33,23 @@ export const useAutoSaveDraft = (text = '') => {
return () => { return () => {
clearInterval(intervalRef.current); clearInterval(intervalRef.current);
saveMessageDraft();
}; };
}, [focused, saveMessageDraft]); }, [focused, saveMessageDraft]);
// hack to call saveMessageDraft when component is unmounted
useEffect(() => {
() => {};
return () => {
mounted.current = false;
};
}, []);
useEffect(
() => () => {
if (!mounted.current) {
saveMessageDraft();
}
},
[saveMessageDraft]
);
}; };

4
app/containers/OrSeparator.tsx
View File

@ -29,8 +29,8 @@ interface IOrSeparator {
} }
const OrSeparator = React.memo(({ theme }: IOrSeparator) => { const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
const line = { backgroundColor: themes[theme].borderColor }; const line = { backgroundColor: themes[theme].strokeLight };
const text = { color: themes[theme].auxiliaryText }; const text = { color: themes[theme].fontSecondaryInfo };
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={[styles.line, line]} /> <View style={[styles.line, line]} />

13
app/containers/Passcode/Base/Button.tsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { Text, StyleProp, ViewStyle } from 'react-native'; import { Text, StyleProp, ViewStyle } from 'react-native';
import styles from './styles'; import styles from './styles';
import { themes } from '../../../lib/constants';
import Touch from '../../Touch'; import Touch from '../../Touch';
import { CustomIcon, TIconsName } from '../../CustomIcon'; import { CustomIcon, TIconsName } from '../../CustomIcon';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
@ -16,23 +15,19 @@ interface IPasscodeButton {
} }
const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => { const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
const { theme } = useTheme(); const { colors } = useTheme();
const press = () => onPress && onPress(text); const press = () => onPress && onPress(text);
return ( return (
<Touch <Touch
style={[styles.buttonView, { backgroundColor: 'transparent' }, style]} style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
underlayColor={themes[theme].passcodeButtonActive} underlayColor={colors.buttonBackgroundSecondaryDefault}
rippleColor={themes[theme].passcodeButtonActive} rippleColor={colors.buttonBackgroundSecondaryPress}
enabled={!disabled} enabled={!disabled}
onPress={press} onPress={press}
> >
{icon ? ( {icon ? <CustomIcon name={icon} size={36} /> : <Text style={[styles.buttonText, { color: colors.fontDefault }]}>{text}</Text>}
<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
) : (
<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
)}
</Touch> </Touch>
); );
}); });

7
app/containers/Passcode/Base/Dots.tsx
View File

@ -3,7 +3,6 @@ import { View } from 'react-native';
import range from 'lodash/range'; import range from 'lodash/range';
import styles from './styles'; import styles from './styles';
import { themes } from '../../../lib/constants';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
const SIZE_EMPTY = 12; const SIZE_EMPTY = 12;
@ -15,7 +14,7 @@ interface IPasscodeDots {
} }
const Dots = React.memo(({ passcode, length }: IPasscodeDots) => { const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
const { theme } = useTheme(); const { colors } = useTheme();
return ( return (
<View style={styles.dotsContainer}> <View style={styles.dotsContainer}>
@ -25,9 +24,9 @@ const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
const width = lengthSup ? SIZE_FULL : SIZE_EMPTY; const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
let backgroundColor = ''; let backgroundColor = '';
if (lengthSup && passcode.length > 0) { if (lengthSup && passcode.length > 0) {
backgroundColor = themes[theme].passcodeDotFull; backgroundColor = colors.strokeDark;
} else { } else {
backgroundColor = themes[theme].passcodeDotEmpty; backgroundColor = colors.strokeLight;
} }
const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2; const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10; const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;

9
app/containers/Passcode/Base/LockIcon.tsx
View File

@ -3,20 +3,19 @@ import { View } from 'react-native';
import { Row } from 'react-native-easy-grid'; import { Row } from 'react-native-easy-grid';
import styles from './styles'; import styles from './styles';
import { themes } from '../../../lib/constants';
import { CustomIcon } from '../../CustomIcon'; import { CustomIcon } from '../../CustomIcon';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
const LockIcon = React.memo(() => { const LockIcon = () => {
const { theme } = useTheme(); const { colors } = useTheme();
return ( return (
<Row style={styles.row}> <Row style={styles.row}>
<View style={styles.iconView}> <View style={styles.iconView}>
<CustomIcon name='auth' size={40} color={themes[theme].passcodeLockIcon} /> <CustomIcon name='auth' size={40} color={colors.fontSecondaryInfo} />
</View> </View>
</Row> </Row>
); );
}); };
export default LockIcon; export default LockIcon;

5
app/containers/Passcode/Base/Locked.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Grid } from 'react-native-easy-grid'; import { Grid } from 'react-native-easy-grid';
import { themes } from '../../../lib/constants';
import { resetAttempts } from '../../../lib/methods/helpers/localAuthentication'; import { resetAttempts } from '../../../lib/methods/helpers/localAuthentication';
import { TYPE } from '../constants'; import { TYPE } from '../constants';
import { getDiff, getLockedUntil } from '../utils'; import { getDiff, getLockedUntil } from '../utils';
@ -50,7 +49,7 @@ const Timer = React.memo(({ time, setStatus }: IPasscodeTimer) => {
const Locked = React.memo(({ setStatus }: IPasscodeLocked) => { const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
const [lockedUntil, setLockedUntil] = useState<Date | null>(null); const [lockedUntil, setLockedUntil] = useState<Date | null>(null);
const { theme } = useTheme(); const { colors } = useTheme();
const readItemFromStorage = async () => { const readItemFromStorage = async () => {
const l = await getLockedUntil(); const l = await getLockedUntil();
@ -62,7 +61,7 @@ const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
}, []); }, []);
return ( return (
<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}> <Grid style={[styles.grid, { backgroundColor: colors.strokeExtraLight }]}>
<LockIcon /> <LockIcon />
<Title text={I18n.t('Passcode_app_locked_title')} /> <Title text={I18n.t('Passcode_app_locked_title')} />
<Timer time={lockedUntil} setStatus={setStatus} /> <Timer time={lockedUntil} setStatus={setStatus} />

2
app/containers/Passcode/Base/Subtitle.tsx
View File

@ -16,7 +16,7 @@ const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
return ( return (
<Row style={styles.row}> <Row style={styles.row}>
<View style={styles.subtitleView}> <View style={styles.subtitleView}>
<Text style={[styles.textSubtitle, { color: themes[theme].passcodeSecondary }]}>{text}</Text> <Text style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</Text>
</View> </View>
</Row> </Row>
); );

5
app/containers/Passcode/Base/Title.tsx
View File

@ -3,7 +3,6 @@ import { Text, View } from 'react-native';
import { Row } from 'react-native-easy-grid'; import { Row } from 'react-native-easy-grid';
import styles from './styles'; import styles from './styles';
import { themes } from '../../../lib/constants';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
interface IPasscodeTitle { interface IPasscodeTitle {
@ -11,12 +10,12 @@ interface IPasscodeTitle {
} }
const Title = React.memo(({ text }: IPasscodeTitle) => { const Title = React.memo(({ text }: IPasscodeTitle) => {
const { theme } = useTheme(); const { colors } = useTheme();
return ( return (
<Row style={styles.row}> <Row style={styles.row}>
<View style={styles.titleView}> <View style={styles.titleView}>
<Text style={[styles.textTitle, { color: themes[theme].passcodePrimary }]}>{text}</Text> <Text style={[styles.textTitle, { color: colors.fontTitlesLabels }]}>{text}</Text>
</View> </View>
</Row> </Row>
); );

6
app/containers/Passcode/Base/index.tsx
View File

@ -9,7 +9,7 @@ import styles from './styles';
import Button from './Button'; import Button from './Button';
import Dots from './Dots'; import Dots from './Dots';
import { TYPE } from '../constants'; import { TYPE } from '../constants';
import { PASSCODE_LENGTH, themes } from '../../../lib/constants'; import { PASSCODE_LENGTH } from '../../../lib/constants';
import { useTheme } from '../../../theme'; import { useTheme } from '../../../theme';
import LockIcon from './LockIcon'; import LockIcon from './LockIcon';
import Title from './Title'; import Title from './Title';
@ -35,7 +35,7 @@ export interface IBase {
const Base = forwardRef<IBase, IPasscodeBase>( const Base = forwardRef<IBase, IPasscodeBase>(
({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => { ({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
const { theme } = useTheme(); const { colors } = useTheme();
const { height } = useDimensions(); const { height } = useDimensions();
// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height. // 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
@ -101,7 +101,7 @@ const Base = forwardRef<IBase, IPasscodeBase>(
return ( return (
<Animatable.View ref={rootRef} style={styles.container}> <Animatable.View ref={rootRef} style={styles.container}>
<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}> <Grid style={[styles.grid, { backgroundColor: colors.surfaceNeutral }]}>
<LockIcon /> <LockIcon />
<Title text={title} /> <Title text={title} />
{subtitle ? <Subtitle text={subtitle} /> : null} {subtitle ? <Subtitle text={subtitle} /> : null}

2
app/containers/RadioButton/index.tsx
View File

@ -10,7 +10,7 @@ export const RadioButton = ({ check, testID, size }: { check: boolean; testID?:
testID={testID} testID={testID}
selected={check} selected={check}
size={size || 20} size={size || 20}
color={check ? colors.tintActive : colors.auxiliaryTintColor} color={check ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled}
/> />
); );
}; };

4
app/containers/ReactionsList/AllTab.tsx
View File

@ -52,10 +52,10 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
getCustomEmoji={getCustomEmoji} getCustomEmoji={getCustomEmoji}
/> />
<View style={styles.textContainer}> <View style={styles.textContainer}>
<Text style={[styles.allListNPeopleReacted, { color: colors.bodyText }]}> <Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
</Text> </Text>
<Text style={[styles.allListWhoReacted, { color: colors.auxiliaryText }]}>{displayNames}</Text> <Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>
</View> </View>
</View> </View>
); );

6
app/containers/ReactionsList/ReactionsTabBar.tsx
View File

@ -37,7 +37,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
> >
<View style={styles.tabBarItem}> <View style={styles.tabBarItem}>
{tab._id === 'All' ? ( {tab._id === 'All' ? (
<Text style={[styles.allTabItem, { color: colors.auxiliaryTintColor }]}>{I18n.t('All')}</Text> <Text style={[styles.allTabItem, { color: colors.fontHint }]}>{I18n.t('All')}</Text>
) : ( ) : (
<> <>
<Emoji <Emoji
@ -46,7 +46,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
customEmojiStyle={styles.customEmojiStyle} customEmojiStyle={styles.customEmojiStyle}
getCustomEmoji={getCustomEmoji} getCustomEmoji={getCustomEmoji}
/> />
<Text style={[styles.reactionCount, { color: colors.auxiliaryTintColor }]}>{tab.usernames.length}</Text> <Text style={[styles.reactionCount, { color: colors.fontHint }]}>{tab.usernames.length}</Text>
</> </>
)} )}
</View> </View>
@ -68,7 +68,7 @@ const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactio
style={{ style={{
width: tabWidth, width: tabWidth,
borderBottomWidth: isActiveTab ? 2 : 1, borderBottomWidth: isActiveTab ? 2 : 1,
borderColor: isActiveTab ? colors.tintActive : colors.separatorColor borderColor: isActiveTab ? colors.strokeHighlight : colors.strokeLight
}} }}
key={tab.emoji} key={tab.emoji}
> >

4
app/containers/ReactionsList/UsersList.tsx
View File

@ -23,7 +23,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
contentContainerStyle={styles.listContainer} contentContainerStyle={styles.listContainer}
ListHeaderComponent={ ListHeaderComponent={
<View style={styles.emojiNameContainer}> <View style={styles.emojiNameContainer}>
<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'> <Text style={[styles.emojiName, { color: colors.fontSecondaryInfo }]} testID='usersListEmojiName'>
{emoji} {emoji}
</Text> </Text>
</View> </View>
@ -32,7 +32,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
<View style={styles.listItemContainer} testID='userItem'> <View style={styles.listItemContainer} testID='userItem'>
<Avatar text={item.username} size={36} /> <Avatar text={item.username} size={36} />
<View style={styles.textContainer}> <View style={styles.textContainer}>
<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}> <Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
{useRealName && item.name ? item.name : item.username} {useRealName && item.name ? item.name : item.username}
</Text> </Text>
</View> </View>

2
app/containers/RoomHeader/RoomHeader.stories.tsx
View File

@ -14,7 +14,7 @@ export default {
const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => ( const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
// Using View directly instead of Header from react-navigation because it's easier to test. // Using View directly instead of Header from react-navigation because it's easier to test.
<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].headerBackground }}>{title()}</View> <View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].surfaceNeutral }}>{title()}</View>
); );
const RoomHeader = ({ ...props }) => ( const RoomHeader = ({ ...props }) => (

8
app/containers/RoomHeader/RoomHeader.tsx
View File

@ -88,7 +88,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
usersText = usersTyping.join(', '); usersText = usersTyping.join(', ');
} }
return ( return (
<Text style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} numberOfLines={1}> <Text style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} numberOfLines={1}>
<Text style={styles.typingUsers}>{usersText} </Text> <Text style={styles.typingUsers}>{usersText} </Text>
{usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing')}... {usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing')}...
</Text> </Text>
@ -102,7 +102,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
// subtitle // subtitle
if (subtitle) { if (subtitle) {
return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} />; return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;
} }
return null; return null;
@ -110,7 +110,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => { const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
const { colors } = useTheme(); const { colors } = useTheme();
const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.headerTitleColor }; const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
if (!tmid && !prid) { if (!tmid && !prid) {
return ( return (
<Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}> <Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}>
@ -163,7 +163,7 @@ const Header = React.memo(
status={status} status={status}
teamMain={teamMain} teamMain={teamMain}
/> />
<Text style={[styles.subtitle, { color: colors.auxiliaryText }]} numberOfLines={1}> <Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
{parentTitle} {parentTitle}
</Text> </Text>
</View> </View>

16
app/containers/RoomItem/Actions.tsx
View File

@ -36,7 +36,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
<Animated.View <Animated.View
style={[ style={[
styles.actionLeftButtonContainer, styles.actionLeftButtonContainer,
{ width: width * 2, backgroundColor: colors.tintColor, right: '100%' }, { width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
viewHeight, viewHeight,
animatedStyles animatedStyles
]} ]}
@ -46,7 +46,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
<CustomIcon <CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE} size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name={isRead ? 'flag' : 'check'} name={isRead ? 'flag' : 'check'}
color={colors.buttonText} color={colors.fontWhite}
/> />
</RectButton> </RectButton>
</View> </View>
@ -118,18 +118,18 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
styles.actionRightButtonContainer, styles.actionRightButtonContainer,
{ {
width, width,
backgroundColor: colors.favoriteBackground, backgroundColor: colors.statusFontWarning,
left: '100%' left: '100%'
}, },
viewHeight, viewHeight,
animatedFavStyles animatedFavStyles
]} ]}
> >
<RectButton style={[styles.actionButton, { backgroundColor: colors.favoriteBackground }]} onPress={toggleFav}> <RectButton style={[styles.actionButton, { backgroundColor: colors.statusFontWarning }]} onPress={toggleFav}>
<CustomIcon <CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE} size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name={favorite ? 'star-filled' : 'star'} name={favorite ? 'star-filled' : 'star'}
color={colors.buttonText} color={colors.fontWhite}
/> />
</RectButton> </RectButton>
</Animated.View> </Animated.View>
@ -138,18 +138,18 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
styles.actionRightButtonContainer, styles.actionRightButtonContainer,
{ {
width: width * 2, width: width * 2,
backgroundColor: colors.hideBackground, backgroundColor: colors.buttonBackgroundSecondaryPress,
left: '100%' left: '100%'
}, },
isCondensed && { height: ROW_HEIGHT_CONDENSED }, isCondensed && { height: ROW_HEIGHT_CONDENSED },
animatedHideStyles animatedHideStyles
]} ]}
> >
<RectButton style={[styles.actionButton, { backgroundColor: colors.hideBackground }]} onPress={onHidePress}> <RectButton style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]} onPress={onHidePress}>
<CustomIcon <CustomIcon
size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE} size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
name='unread-on-top-disabled' name='unread-on-top-disabled'
color={colors.buttonText} color={colors.fontWhite}
/> />
</RectButton> </RectButton>
</Animated.View> </Animated.View>

2
app/containers/RoomItem/LastMessage.tsx
View File

@ -75,7 +75,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
username, username,
useRealName useRealName
})} })}
style={[styles.markdownText, { color: alert ? colors.bodyText : colors.auxiliaryText }, alignSelf]} style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
numberOfLines={2} numberOfLines={2}
/> />
); );

4
app/containers/RoomItem/Tag.tsx
View File

@ -14,8 +14,8 @@ const Tag = React.memo(({ name, testID }: ITag) => {
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}> <View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
<Text style={[styles.tagText, { color: themes[theme].infoText }]} numberOfLines={1} testID={testID}> <Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
{name} {name}
</Text> </Text>
</View> </View>

2
app/containers/RoomItem/Title.tsx
View File

@ -9,7 +9,7 @@ const Title = React.memo(({ name, hideUnreadStatus, alert }: ITitleProps) => {
const { colors } = useTheme(); const { colors } = useTheme();
return ( return (
<Text <Text
style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.titleText }]} style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.fontTitlesLabels }]}
ellipsizeMode='tail' ellipsizeMode='tail'
numberOfLines={1} numberOfLines={1}
> >

2
app/containers/RoomItem/Touchable.tsx
View File

@ -223,7 +223,7 @@ const Touchable = ({
onPress={handlePress} onPress={handlePress}
testID={testID} testID={testID}
style={{ style={{
backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor backgroundColor: isFocused ? colors.surfaceTint : colors.surfaceRoom
}} }}
> >
{children} {children}

4
app/containers/RoomItem/UpdatedAt.tsx
View File

@ -17,13 +17,13 @@ const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps
style={[ style={[
styles.date, styles.date,
{ {
color: colors.auxiliaryText color: colors.fontSecondaryInfo
}, },
alert && alert &&
!hideUnreadStatus && [ !hideUnreadStatus && [
styles.updateAlert, styles.updateAlert,
{ {
color: colors.tintColor color: colors.badgeBackgroundLevel2
} }
] ]
]} ]}

2
app/containers/RoomItem/Wrapper.tsx
View File

@ -19,7 +19,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
style={[ style={[
styles.centerContainer, styles.centerContainer,
{ {
borderColor: colors.separatorColor borderColor: colors.strokeLight
} }
]} ]}
> >

18
app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
View File

@ -2,10 +2,10 @@ import React, { useState } from 'react';
import { StyleProp, ViewStyle } from 'react-native'; import { StyleProp, ViewStyle } from 'react-native';
import { SvgUri } from 'react-native-svg'; import { SvgUri } from 'react-native-svg';
import { OmnichannelSourceType, IOmnichannelSource } from '../../definitions'; import { OmnichannelSourceType, IOmnichannelSource, TUserStatus } from '../../definitions';
import { STATUS_COLORS } from '../../lib/constants';
import { useAppSelector } from '../../lib/hooks'; import { useAppSelector } from '../../lib/hooks';
import { CustomIcon, TIconsName } from '../CustomIcon'; import { CustomIcon, TIconsName } from '../CustomIcon';
import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
interface IIconMap { interface IIconMap {
[key: string]: TIconsName; [key: string]: TIconsName;
@ -24,7 +24,7 @@ interface IOmnichannelRoomIconProps {
size: number; size: number;
type: string; type: string;
style?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>;
status?: string; status?: TUserStatus;
sourceType?: IOmnichannelSource; sourceType?: IOmnichannelSource;
} }
@ -33,15 +33,9 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
const [svgError, setSvgError] = useState(false); const [svgError, setSvgError] = useState(false);
const baseUrl = useAppSelector(state => state.server?.server); const baseUrl = useAppSelector(state => state.server?.server);
const connected = useAppSelector(state => state.meteor?.connected); const connected = useAppSelector(state => state.meteor?.connected);
const userStatusColor = useUserStatusColor(status || 'offline');
const customIcon = ( const customIcon = <CustomIcon name={iconMap[sourceType?.type || 'other']} size={size} style={style} color={userStatusColor} />;
<CustomIcon
name={iconMap[sourceType?.type || 'other']}
size={size}
style={style}
color={STATUS_COLORS[status || 'offline']}
/>
);
if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) { if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
return ( return (
@ -49,7 +43,7 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
<SvgUri <SvgUri
height={size} height={size}
width={size} width={size}
color={STATUS_COLORS[status || 'offline']} color={userStatusColor}
uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`} uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
style={style} style={style}
onError={() => setSvgError(true)} onError={() => setSvgError(true)}

2
app/containers/RoomTypeIcon/index.tsx
View File

@ -55,7 +55,7 @@ const RoomTypeIcon = React.memo(
icon = 'message'; icon = 'message';
} }
return <CustomIcon name={icon} size={size} color={themes[theme].titleText} style={iconStyle} />; return <CustomIcon name={icon} size={size} color={themes[theme].fontTitlesLabels} style={iconStyle} />;
} }
); );

2
app/containers/SafeAreaView.tsx
View File

@ -23,7 +23,7 @@ const SafeAreaView = React.memo(({ style, children, vertical = true, ...props }:
const { theme } = useTheme(); const { theme } = useTheme();
return ( return (
<SafeAreaContext <SafeAreaContext
style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]} style={[styles.view, { backgroundColor: themes[theme].surfaceHover }, style]}
edges={vertical ? ['right', 'left'] : undefined} edges={vertical ? ['right', 'left'] : undefined}
{...props} {...props}
> >

2
app/containers/SearchBox/index.tsx
View File

@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
}, []); }, []);
return ( return (
<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}> <View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
<FormTextInput <FormTextInput
autoCapitalize='none' autoCapitalize='none'
autoCorrect={false} autoCorrect={false}

Some files were not shown because too many files have changed in this diff Show More