From 0d6aacf2632659883a12f06bf09fb2a4bedbf64d Mon Sep 17 00:00:00 2001
From: GleidsonDaniel <gleidson10daniel@hotmail.com>
Date: Mon, 18 Mar 2024 15:22:04 -0300
Subject: [PATCH] wip: colors

---
 .../HeaderButton/HeaderButtons.stories.tsx    |  2 +-
 .../IncomingCallNotification/style.tsx        |  2 +-
 .../InAppNotification/NotifierComponent.tsx   |  2 +-
 app/containers/List/ListSeparator.tsx         |  2 +-
 .../RoomHeader/RoomHeader.stories.tsx         |  2 +-
 app/containers/RoomHeader/RoomHeader.tsx      |  2 +-
 app/containers/RoomItem/Actions.tsx           | 10 +++--
 app/containers/RoomItem/Wrapper.tsx           |  2 +-
 app/containers/SearchHeader.tsx               |  2 +-
 app/containers/StatusBar.tsx                  |  2 +-
 app/containers/Toast.tsx                      |  2 +-
 app/containers/UIKit/DatePicker.tsx           |  2 +-
 app/containers/UIKit/MultiSelect/Input.tsx    |  2 +-
 app/containers/UIKit/Select.tsx               |  2 +-
 .../Components/CollapsibleQuote/index.tsx     |  6 +--
 app/containers/message/Message.tsx            |  2 +-
 app/containers/message/Video.tsx              |  2 +-
 app/lib/constants/colors.ts                   | 41 +------------------
 app/lib/methods/helpers/navigation/index.ts   |  8 ++--
 app/lib/methods/helpers/openLink.ts           |  4 +-
 app/lib/methods/helpers/theme.ts              |  2 +-
 .../Dropdown/index.tsx                        |  2 +-
 app/views/CannedResponsesListView/index.tsx   |  2 +-
 app/views/CloseLivechatView.tsx               |  2 +-
 app/views/CreateChannelView/index.tsx         |  4 +-
 app/views/DirectoryView/Options.tsx           |  4 +-
 app/views/DirectoryView/index.tsx             |  4 +-
 app/views/DiscussionsView/index.tsx           |  2 +-
 .../ChangePassword.tsx                        |  2 +-
 app/views/E2EEncryptionSecurityView/index.tsx |  2 +-
 app/views/ForwardMessageView/index.tsx        |  2 +-
 app/views/InviteUsersView/index.tsx           |  2 +-
 app/views/NewServerView/ServerInput/index.tsx |  2 +-
 app/views/ReadReceiptView/index.tsx           |  2 +-
 .../RoomInfoEditView/SwitchContainer.tsx      |  2 +-
 app/views/RoomInfoEditView/index.tsx          |  6 +--
 app/views/RoomView/LeftButtons.tsx            |  2 +-
 app/views/RoomView/RightButtons.tsx           |  2 +-
 app/views/RoomsListView/Header/Header.tsx     |  4 +-
 app/views/RoomsListView/ServerDropdown.tsx    |  4 +-
 app/views/SearchMessagesView/index.tsx        |  2 +-
 app/views/SelectedUsersView/index.tsx         |  2 +-
 app/views/ShareListView/Header/Header.ios.tsx |  4 +-
 app/views/ShareListView/Header/Header.tsx     |  2 +-
 app/views/ShareListView/Header/SearchBox.tsx  |  4 +-
 app/views/TeamChannelsView.tsx                |  2 +-
 .../ThreadMessagesView/Dropdown/index.tsx     |  2 +-
 app/views/ThreadMessagesView/index.tsx        |  2 +-
 48 files changed, 68 insertions(+), 105 deletions(-)

diff --git a/app/containers/HeaderButton/HeaderButtons.stories.tsx b/app/containers/HeaderButton/HeaderButtons.stories.tsx
index 5a0db9a44..df28ca672 100644
--- a/app/containers/HeaderButton/HeaderButtons.stories.tsx
+++ b/app/containers/HeaderButton/HeaderButtons.stories.tsx
@@ -33,7 +33,7 @@ const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
 		title={title}
 		headerLeft={left}
 		headerRight={right}
-		headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />}
+		headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.surfaceNeutral }} />}
 	/>
 );
 
diff --git a/app/containers/InAppNotification/IncomingCallNotification/style.tsx b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
index d55f9fc92..aa0149784 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/style.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
@@ -14,7 +14,7 @@ export const useStyle = () => {
 			borderWidth: StyleSheet.hairlineWidth,
 			borderRadius: 4,
 			backgroundColor: colors.surfaceLight,
-			borderColor: colors.separatorColor,
+			borderColor: colors.strokeLight,
 			flex: 1
 		},
 		small: {
diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 602e2f92b..3c02a76cc 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -104,7 +104,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				isMasterDetail && styles.small,
 				{
 					backgroundColor: themes[theme].surfaceLight,
-					borderColor: themes[theme].separatorColor,
+					borderColor: themes[theme].strokeLight,
 					marginTop: insets.top
 				}
 			]}
diff --git a/app/containers/List/ListSeparator.tsx b/app/containers/List/ListSeparator.tsx
index d0e8d1cdd..2f2c36496 100644
--- a/app/containers/List/ListSeparator.tsx
+++ b/app/containers/List/ListSeparator.tsx
@@ -17,7 +17,7 @@ interface IListSeparator {
 const ListSeparator = React.memo(({ style }: IListSeparator) => {
 	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';
diff --git a/app/containers/RoomHeader/RoomHeader.stories.tsx b/app/containers/RoomHeader/RoomHeader.stories.tsx
index 0e54650a1..f502c3dc0 100644
--- a/app/containers/RoomHeader/RoomHeader.stories.tsx
+++ b/app/containers/RoomHeader/RoomHeader.stories.tsx
@@ -14,7 +14,7 @@ export default {
 
 const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
 	// 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 }) => (
diff --git a/app/containers/RoomHeader/RoomHeader.tsx b/app/containers/RoomHeader/RoomHeader.tsx
index 8b5b60ff5..6e410c47e 100644
--- a/app/containers/RoomHeader/RoomHeader.tsx
+++ b/app/containers/RoomHeader/RoomHeader.tsx
@@ -110,7 +110,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
 	const { colors } = useTheme();
-	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.headerTitleColor };
+	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
 	if (!tmid && !prid) {
 		return (
 			<Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}>
diff --git a/app/containers/RoomItem/Actions.tsx b/app/containers/RoomItem/Actions.tsx
index 79ab46ced..2aab3bffa 100644
--- a/app/containers/RoomItem/Actions.tsx
+++ b/app/containers/RoomItem/Actions.tsx
@@ -21,6 +21,8 @@ import I18n from '../../i18n';
 const CONDENSED_ICON_SIZE = 24;
 const EXPANDED_ICON_SIZE = 28;
 
+const starColor = '#f5d100';
+
 export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPress, displayMode }: ILeftActionsProps) => {
 	const { colors } = useTheme();
 
@@ -118,14 +120,14 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					styles.actionRightButtonContainer,
 					{
 						width,
-						backgroundColor: colors.favoriteBackground,
+						backgroundColor: starColor,
 						left: '100%'
 					},
 					viewHeight,
 					animatedFavStyles
 				]}
 			>
-				<RectButton style={[styles.actionButton, { backgroundColor: colors.favoriteBackground }]} onPress={toggleFav}>
+				<RectButton style={[styles.actionButton, { backgroundColor: starColor }]} onPress={toggleFav}>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name={favorite ? 'star-filled' : 'star'}
@@ -138,14 +140,14 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					styles.actionRightButtonContainer,
 					{
 						width: width * 2,
-						backgroundColor: colors.hideBackground,
+						backgroundColor: colors.buttonBackgroundSecondaryPress,
 						left: '100%'
 					},
 					isCondensed && { height: ROW_HEIGHT_CONDENSED },
 					animatedHideStyles
 				]}
 			>
-				<RectButton style={[styles.actionButton, { backgroundColor: colors.hideBackground }]} onPress={onHidePress}>
+				<RectButton style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]} onPress={onHidePress}>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name='unread-on-top-disabled'
diff --git a/app/containers/RoomItem/Wrapper.tsx b/app/containers/RoomItem/Wrapper.tsx
index b2d96c592..51a9da4cd 100644
--- a/app/containers/RoomItem/Wrapper.tsx
+++ b/app/containers/RoomItem/Wrapper.tsx
@@ -19,7 +19,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
 				style={[
 					styles.centerContainer,
 					{
-						borderColor: colors.separatorColor
+						borderColor: colors.strokeLight
 					}
 				]}
 			>
diff --git a/app/containers/SearchHeader.tsx b/app/containers/SearchHeader.tsx
index e4a0672c4..21928b851 100644
--- a/app/containers/SearchHeader.tsx
+++ b/app/containers/SearchHeader.tsx
@@ -32,7 +32,7 @@ const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.E
 		<View style={styles.container}>
 			<TextInput
 				autoFocus
-				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }]}
+				style={[styles.title, isLight && { color: themes[theme].fontTitlesLabels }]}
 				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				testID={testID}
diff --git a/app/containers/StatusBar.tsx b/app/containers/StatusBar.tsx
index 996603a87..4643ed46b 100644
--- a/app/containers/StatusBar.tsx
+++ b/app/containers/StatusBar.tsx
@@ -21,7 +21,7 @@ const StatusBar = ({ barStyle, backgroundColor }: IStatusBar) => {
 			barStyle = 'dark-content';
 		}
 	}
-	return <StatusBarRN backgroundColor={backgroundColor ?? colors.headerBackground} barStyle={barStyle} animated />;
+	return <StatusBarRN backgroundColor={backgroundColor ?? colors.surfaceNeutral} barStyle={barStyle} animated />;
 };
 
 export default StatusBar;
diff --git a/app/containers/Toast.tsx b/app/containers/Toast.tsx
index 508627430..781ad5b59 100644
--- a/app/containers/Toast.tsx
+++ b/app/containers/Toast.tsx
@@ -46,7 +46,7 @@ const Toast = (): React.ReactElement => {
 			ref={getToastRef}
 			// @ts-ignore
 			position='center'
-			style={[styles.toast, { backgroundColor: colors.toastBackground }]}
+			style={[styles.toast, { backgroundColor: colors.surfaceDark }]}
 			textStyle={[styles.text, { color: colors.fontWhite }]}
 			opacity={0.9}
 		/>
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index a1b8b3558..58d0453da 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -69,7 +69,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 				style={{ backgroundColor: themes[theme].surfaceRoom }}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
-				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
+				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].strokeLight }]}>
 					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
 					</Text>
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index 41d599ae5..e39446c09 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -26,7 +26,7 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 			background={Touchable.Ripple(colors.bannerBackground)}
 			disabled={disabled}
 		>
-			<View style={[styles.input, styles.inputBorder, { borderColor: colors.separatorColor }, innerInputStyle]}>
+			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>
 				{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
 				{loading ? (
 					<ActivityIndicator style={styles.icon} />
diff --git a/app/containers/UIKit/Select.tsx b/app/containers/UIKit/Select.tsx
index 7653720e5..03dd83b89 100644
--- a/app/containers/UIKit/Select.tsx
+++ b/app/containers/UIKit/Select.tsx
@@ -51,7 +51,7 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 	const pickerStyle = {
 		...styles.viewContainer,
 		...(isIOS ? styles.iosPadding : {}),
-		borderColor: themes[theme].separatorColor,
+		borderColor: themes[theme].strokeLight,
 		backgroundColor: themes[theme].surfaceRoom
 	};
 
diff --git a/app/containers/message/Components/CollapsibleQuote/index.tsx b/app/containers/message/Components/CollapsibleQuote/index.tsx
index b09a40003..7f22cc6b3 100644
--- a/app/containers/message/Components/CollapsibleQuote/index.tsx
+++ b/app/containers/message/Components/CollapsibleQuote/index.tsx
@@ -128,7 +128,7 @@ const CollapsibleQuote = React.memo(
 			chatComponentBackground: backgroundColor,
 			strokeLight,
 			strokeDark,
-			headerTintColor
+			fontSecondaryInfo
 		} = themes[theme];
 
 		try {
@@ -137,7 +137,7 @@ const CollapsibleQuote = React.memo(
 				borderColor = attachment.color;
 				strokeLight = attachment.color;
 				strokeDark = attachment.color;
-				headerTintColor = headerTintColor;
+				fontSecondaryInfo = fontSecondaryInfo;
 			}
 		} catch (e) {
 			// fallback to default
@@ -167,7 +167,7 @@ const CollapsibleQuote = React.memo(
 					<View style={styles.touchableContainer}>
 						<View style={styles.attachmentContainer}>
 							<View style={styles.authorContainer}>
-								<Text style={[styles.title, { color: headerTintColor }]}>{attachment.title}</Text>
+								<Text style={[styles.title, { color: fontSecondaryInfo }]}>{attachment.title}</Text>
 							</View>
 							{!collapsed && <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} />}
 						</View>
diff --git a/app/containers/message/Message.tsx b/app/containers/message/Message.tsx
index 2222403f3..e1f67233e 100644
--- a/app/containers/message/Message.tsx
+++ b/app/containers/message/Message.tsx
@@ -135,7 +135,7 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 		backgroundColor = themes[theme].statusBackgroundWarning2;
 	}
 	if (props.highlighted) {
-		backgroundColor = themes[theme].headerBackground;
+		backgroundColor = themes[theme].surfaceNeutral;
 	}
 
 	if (props.hasError) {
diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx
index 04e81be43..0f4e86259 100644
--- a/app/containers/message/Video.tsx
+++ b/app/containers/message/Video.tsx
@@ -224,7 +224,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
 			<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} style={[isReply && style]} theme={theme} />
 			<Touchable
 				onPress={onPress}
-				style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
+				style={[styles.button, { backgroundColor: themes[theme].surfaceDark }]}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<Thumbnail loading={loading} cached={cached} />
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index d3aa43319..49aa4fdca 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -190,7 +190,7 @@ const newColorsBlack = {
 	surfaceLight: '#0d0d0d',
 	surfaceTint: '#16181a',
 	surfaceRoom: '#000000',
-	surfaceNeutral: '#2F343D',
+	surfaceNeutral: '#2F343D', //#0d0d0d
 	// surfaceDisabled: '#24272E',
 	surfaceHover: '#080808',
 	// surfaceSelected: '#3C3F44',
@@ -292,19 +292,6 @@ export const colors = {
 		tintDisabled: '#88B4F5',
 		auxiliaryTintColor: '#6C727A',
 		actionTintColor: '#1d74f5',
-		separatorColor: '#cbcbcc',
-		navbarBackground: '#ffffff',
-		headerBorder: '#B2B2B2',
-		headerBackground: '#EEEFF1',
-		headerSecondaryBackground: '#ffffff',
-		headerTintColor: '#6C727A',
-		headerTitleColor: '#0C0D0F',
-		headerSecondaryText: '#1d74f5',
-		toastBackground: '#0C0D0F',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		buttonBackground: '#414852',
 		backdropOpacity: 0.3,
 		attachmentLoadingOpacity: 0.7,
 	},
@@ -321,19 +308,6 @@ export const colors = {
 		tintDisabled: '#88B4F5',
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1d74f5',
-		separatorColor: '#2b2b2d',
-		navbarBackground: '#0b182c',
-		headerBorder: '#2F3A4B',
-		headerBackground: '#0b182c',
-		headerSecondaryBackground: '#0b182c',
-		headerTintColor: '#f9f9f9',
-		headerTitleColor: '#f9f9f9',
-		headerSecondaryText: '#9297a2',
-		toastBackground: '#54585e',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		buttonBackground: '#414852',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
 	black: {
@@ -349,19 +323,6 @@ export const colors = {
 		tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1e9bfe',
-		separatorColor: '#272728',
-		navbarBackground: '#0d0d0d',
-		headerBorder: '#323232',
-		headerBackground: '#0d0d0d',
-		headerSecondaryBackground: '#0d0d0d',
-		headerTintColor: '#f9f9f9',
-		headerTitleColor: '#f9f9f9',
-		headerSecondaryText: '#b2b8c6',
-		toastBackground: '#54585e',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		buttonBackground: '#414852',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
 	},
diff --git a/app/lib/methods/helpers/navigation/index.ts b/app/lib/methods/helpers/navigation/index.ts
index 321b8b11a..a2d9f81d5 100644
--- a/app/lib/methods/helpers/navigation/index.ts
+++ b/app/lib/methods/helpers/navigation/index.ts
@@ -21,7 +21,7 @@ export const cardStyle = {
 
 export const borderBottom: any = (theme: TSupportedThemes) => ({
 	borderBottomWidth: StyleSheet.hairlineWidth,
-	borderBottomColor: themes[theme].headerBorder,
+	borderBottomColor: themes[theme].strokeDark,
 	elevation: 0
 });
 
@@ -35,10 +35,10 @@ export const headerHeight = isIOS ? 50 : 56;
 export const themedHeader = (theme: TSupportedThemes) => ({
 	headerStyle: {
 		...borderBottom(theme),
-		backgroundColor: themes[theme].headerBackground
+		backgroundColor: themes[theme].surfaceNeutral
 	},
-	headerTintColor: themes[theme].headerTintColor,
-	headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].headerTitleColor, fontSize: 18 }
+	headerTintColor: themes[theme].fontSecondaryInfo,
+	headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].fontTitlesLabels, fontSize: 18 }
 });
 
 export const navigationTheme = (theme: TSupportedThemes) => {
diff --git a/app/lib/methods/helpers/openLink.ts b/app/lib/methods/helpers/openLink.ts
index e4ade0a30..d571c6f8f 100644
--- a/app/lib/methods/helpers/openLink.ts
+++ b/app/lib/methods/helpers/openLink.ts
@@ -54,8 +54,8 @@ const openLink = async (url: string, theme: TSupportedThemes = 'light'): Promise
 		const browser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
 		if (browser === 'inApp') {
 			await WebBrowser.openBrowserAsync(url, {
-				toolbarColor: themes[theme].headerBackground,
-				controlsColor: themes[theme].headerTintColor,
+				toolbarColor: themes[theme].surfaceNeutral,
+				controlsColor: themes[theme].fontSecondaryInfo,
 				// https://github.com/expo/expo/pull/4923
 				enableBarCollapsing: true,
 				showTitle: true
diff --git a/app/lib/methods/helpers/theme.ts b/app/lib/methods/helpers/theme.ts
index 5bb73e924..50f0ec4e2 100644
--- a/app/lib/methods/helpers/theme.ts
+++ b/app/lib/methods/helpers/theme.ts
@@ -53,7 +53,7 @@ export const setNativeTheme = async (themePreferences: IThemePreference): Promis
 		const iconsLight = theme === 'light';
 		try {
 			// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
-			await changeNavigationBarColor(themes[theme].navbarBackground, iconsLight, true);
+			await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
 		} catch (error) {
 			// Do nothing
 		}
diff --git a/app/views/CannedResponsesListView/Dropdown/index.tsx b/app/views/CannedResponsesListView/Dropdown/index.tsx
index 79f54f214..7068f9cb4 100644
--- a/app/views/CannedResponsesListView/Dropdown/index.tsx
+++ b/app/views/CannedResponsesListView/Dropdown/index.tsx
@@ -81,7 +81,7 @@ class Dropdown extends React.Component<IDropdownProps> {
 						{
 							transform: [{ translateY }],
 							backgroundColor: themes[theme!].surfaceRoom,
-							borderColor: themes[theme!].separatorColor
+							borderColor: themes[theme!].strokeLight
 						}
 					]}
 				>
diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx
index 79dbad0dc..7815a25e6 100644
--- a/app/views/CannedResponsesListView/index.tsx
+++ b/app/views/CannedResponsesListView/index.tsx
@@ -243,7 +243,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme].fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
diff --git a/app/views/CloseLivechatView.tsx b/app/views/CloseLivechatView.tsx
index 77f1c884f..c021a157a 100644
--- a/app/views/CloseLivechatView.tsx
+++ b/app/views/CloseLivechatView.tsx
@@ -102,7 +102,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 								value={tagParamSelected}
 								context={BlockContext.FORM}
 								multiselect
-								inputStyle={{ borderColor: colors.separatorColor }}
+								inputStyle={{ borderColor: colors.strokeLight }}
 							/>
 						</>
 					) : null}
diff --git a/app/views/CreateChannelView/index.tsx b/app/views/CreateChannelView/index.tsx
index f25edfd19..02908c7b4 100644
--- a/app/views/CreateChannelView/index.tsx
+++ b/app/views/CreateChannelView/index.tsx
@@ -147,7 +147,7 @@ const CreateChannelView = () => {
 			<StatusBar />
 			<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='create-channel-view'>
 				<ScrollView {...scrollPersistTaps}>
-					<View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}>
+					<View style={[styles.containerTextInput, { borderColor: colors.strokeLight }]}>
 						<ControlledFormTextInput
 							label={isTeam ? I18n.t('Team_Name') : I18n.t('Channel_Name')}
 							testID='create-channel-name'
@@ -179,7 +179,7 @@ const CreateChannelView = () => {
 									styles.list,
 									{
 										backgroundColor: colors.surfaceRoom,
-										borderColor: colors.separatorColor
+										borderColor: colors.strokeLight
 									}
 								]}
 								contentContainerStyle={styles.invitedList}
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index 636289106..acde27754 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -98,7 +98,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 							style={[
 								styles.dropdownContainerHeader,
 								styles.dropdownItemContainer,
-								{ borderColor: themes[theme].separatorColor }
+								{ borderColor: themes[theme].strokeLight }
 							]}
 						>
 							<Text style={[styles.dropdownToggleText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Search_by')}</Text>
@@ -115,7 +115,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 					{this.renderItem('teams')}
 					{isFederationEnabled ? (
 						<>
-							<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].separatorColor }]} />
+							<View style={[styles.dropdownSeparator, { backgroundColor: themes[theme].strokeLight }]} />
 							<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
 								<View style={styles.globalUsersTextContainer}>
 									<Text style={[styles.dropdownItemText, { color: themes[theme].infoText }]}>
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 65fb4e25e..55eca1e19 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -219,7 +219,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 						style={[
 							sharedStyles.separatorVertical,
 							styles.toggleDropdownContainer,
-							{ borderColor: themes[theme].separatorColor }
+							{ borderColor: themes[theme].strokeLight }
 						]}
 					>
 						<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
@@ -244,7 +244,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		if (index === data.length - 1) {
 			style = {
 				...sharedStyles.separatorBottom,
-				borderColor: themes[theme].separatorColor
+				borderColor: themes[theme].strokeLight
 			};
 		}
 
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index beb125ef8..31d81be6e 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -130,7 +130,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={colors.headerTintColor}
+					tintColor={colors.fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
diff --git a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
index f55f4d216..3677127f4 100644
--- a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
+++ b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
@@ -74,7 +74,7 @@ const ChangePassword = () => {
 	return (
 		<>
 			<List.Section>
-				<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
+				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
 				<Text style={[styles.description, { color: colors.bodyText }]}>
 					{I18n.t('E2E_encryption_change_password_description')}
 				</Text>
diff --git a/app/views/E2EEncryptionSecurityView/index.tsx b/app/views/E2EEncryptionSecurityView/index.tsx
index f602bfb5c..27aa5a1a8 100644
--- a/app/views/E2EEncryptionSecurityView/index.tsx
+++ b/app/views/E2EEncryptionSecurityView/index.tsx
@@ -77,7 +77,7 @@ const E2EEncryptionSecurityView = () => {
 					<ChangePassword />
 
 					<List.Section>
-						<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
+						<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
 						<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
 						<Button
 							onPress={resetOwnKey}
diff --git a/app/views/ForwardMessageView/index.tsx b/app/views/ForwardMessageView/index.tsx
index 8953484b5..9d43c9d6d 100644
--- a/app/views/ForwardMessageView/index.tsx
+++ b/app/views/ForwardMessageView/index.tsx
@@ -46,7 +46,7 @@ const ForwardMessageView = () => {
 				<HeaderButton.Container>
 					<HeaderButton.Item
 						title={I18n.t('Send')}
-						color={isSendButtonEnabled ? colors.actionTintColor : colors.headerTintColor}
+						color={isSendButtonEnabled ? colors.actionTintColor : colors.fontSecondaryInfo}
 						disabled={!isSendButtonEnabled}
 						onPress={handlePostMessage}
 						testID='forward-message-view-send'
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
index d7b2f0ba6..069574f4f 100644
--- a/app/views/InviteUsersView/index.tsx
+++ b/app/views/InviteUsersView/index.tsx
@@ -95,7 +95,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 				<View style={styles.innerContainer}>
 					<FormTextInput label={I18n.t('Invite_Link')} value={invite && invite.url} editable={false} />
 					{renderExpiration()}
-					<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
+					<View style={[styles.divider, { backgroundColor: colors.strokeLight }]} />
 					<Button title={I18n.t('Share_Link')} type='primary' onPress={share} />
 					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} />
 				</View>
diff --git a/app/views/NewServerView/ServerInput/index.tsx b/app/views/NewServerView/ServerInput/index.tsx
index a56b3d7bb..bba2c2467 100644
--- a/app/views/NewServerView/ServerInput/index.tsx
+++ b/app/views/NewServerView/ServerInput/index.tsx
@@ -69,7 +69,7 @@ const ServerInput = ({
 				<View
 					style={[
 						styles.serverHistory,
-						{ backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].separatorColor }
+						{ backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].strokeLight }
 					]}
 				>
 					<FlatList
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index 6f086e822..7ce77320f 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -158,7 +158,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 						styles.list,
 						{
 							backgroundColor: themes[theme].surfaceTint,
-							borderColor: themes[theme].separatorColor
+							borderColor: themes[theme].strokeLight
 						}
 					]}
 					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].fontSecondaryInfo} />}
diff --git a/app/views/RoomInfoEditView/SwitchContainer.tsx b/app/views/RoomInfoEditView/SwitchContainer.tsx
index e042c6d9e..f27c89928 100644
--- a/app/views/RoomInfoEditView/SwitchContainer.tsx
+++ b/app/views/RoomInfoEditView/SwitchContainer.tsx
@@ -66,7 +66,7 @@ const SwitchContainer: React.FC<ISwitchContainer> = React.memo(
 				)}
 			</View>
 			{children}
-			<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+			<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
 		</>
 	)
 );
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index bd8e41200..acc9e9bc1 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -649,7 +649,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						{room.broadcast
 							? [
 									<Text style={styles.broadcast}>{I18n.t('Broadcast')}</Text>,
-									<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+									<View style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
 							  ]
 							: null}
 						{serverVersion && !compareServerVersion(serverVersion, 'lowerThan', '3.0.0') ? (
@@ -686,7 +686,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer,
-								{ backgroundColor: themes[theme].buttonBackground },
+								{ backgroundColor: themes[theme].buttonBackgroundSecondaryDefault },
 								!this.formIsChanged() && styles.buttonContainerDisabled
 							]}
 							onPress={this.submit}
@@ -734,7 +734,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								</Text>
 							</TouchableOpacity>
 						</View>
-						<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+						<View style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer_inverted,
diff --git a/app/views/RoomView/LeftButtons.tsx b/app/views/RoomView/LeftButtons.tsx
index 66aba42ad..030aa0b8a 100644
--- a/app/views/RoomView/LeftButtons.tsx
+++ b/app/views/RoomView/LeftButtons.tsx
@@ -68,7 +68,7 @@ const LeftButtons = ({
 				label={label}
 				labelVisible={isIOS}
 				onPress={goBack}
-				tintColor={themes[theme].headerTintColor}
+				tintColor={themes[theme].fontSecondaryInfo}
 				labelStyle={{ fontSize, marginLeft }}
 				style={styles.container}
 				testID='header-back'
diff --git a/app/views/RoomView/RightButtons.tsx b/app/views/RoomView/RightButtons.tsx
index 50bec628e..46fb9db95 100644
--- a/app/views/RoomView/RightButtons.tsx
+++ b/app/views/RoomView/RightButtons.tsx
@@ -388,7 +388,7 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 			<HeaderButton.Container>
 				{issuesWithNotifications || notificationsDisabled ? (
 					<HeaderButton.Item
-						color={issuesWithNotifications ? colors!.fontDanger : colors!.headerTintColor}
+						color={issuesWithNotifications ? colors!.fontDanger : colors!.fontSecondaryInfo}
 						iconName='notification-disabled'
 						onPress={this.navigateToNotificationOrPushTroubleshoot}
 						testID='room-view-push-troubleshoot'
diff --git a/app/views/RoomsListView/Header/Header.tsx b/app/views/RoomsListView/Header/Header.tsx
index 20ae7b60e..e518a635d 100644
--- a/app/views/RoomsListView/Header/Header.tsx
+++ b/app/views/RoomsListView/Header/Header.tsx
@@ -77,12 +77,12 @@ const Header = React.memo(
 			<View style={styles.container}>
 				<TouchableOpacity onPress={onPress} testID='rooms-list-header-server-dropdown-button'>
 					<View style={styles.button}>
-						<Text style={[styles.title, { color: colors.headerTitleColor }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{serverName}
 						</Text>
 						<CustomIcon
 							name='chevron-down'
-							color={colors.headerTintColor}
+							color={colors.fontSecondaryInfo}
 							style={[showServerDropdown && styles.upsideDown]}
 							size={18}
 						/>
diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx
index ee461bc53..d823314c6 100644
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@@ -207,12 +207,12 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						{
 							transform: [{ translateY }],
 							backgroundColor: themes[theme].surfaceRoom,
-							borderColor: themes[theme].separatorColor
+							borderColor: themes[theme].strokeLight
 						}
 					]}
 					testID='rooms-list-header-server-dropdown'
 				>
-					<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].separatorColor }]}>
+					<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].strokeLight }]}>
 						<Text style={[styles.serverHeaderText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Server')}</Text>
 						<TouchableOpacity onPress={this.addServer} testID='rooms-list-header-server-add'>
 							<Text style={[styles.serverHeaderAdd, { color: themes[theme].tintColor }]}>{I18n.t('Add_Server')}</Text>
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index 2e7e67589..918cdc9af 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -338,7 +338,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 						testID='search-message-view-input'
 					/>
 					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
-					<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
+					<View style={[styles.divider, { backgroundColor: themes[theme].strokeLight }]} />
 				</View>
 				{this.renderList()}
 			</SafeAreaView>
diff --git a/app/views/SelectedUsersView/index.tsx b/app/views/SelectedUsersView/index.tsx
index 6ebdee0a7..127964b40 100644
--- a/app/views/SelectedUsersView/index.tsx
+++ b/app/views/SelectedUsersView/index.tsx
@@ -165,7 +165,7 @@ const SelectedUsersView = () => {
 							onPress={() => _onPressItem(item)}
 							testID={`select-users-view-item-${item.name}`}
 							icon={isChecked(username) ? 'checkbox-checked' : 'checkbox-unchecked'}
-							iconColor={isChecked(username) ? colors.actionTintColor : colors.separatorColor}
+							iconColor={isChecked(username) ? colors.actionTintColor : colors.strokeLight}
 						/>
 					);
 				}}
diff --git a/app/views/ShareListView/Header/Header.ios.tsx b/app/views/ShareListView/Header/Header.ios.tsx
index fff5dc4bf..5a5d87a81 100644
--- a/app/views/ShareListView/Header/Header.ios.tsx
+++ b/app/views/ShareListView/Header/Header.ios.tsx
@@ -41,8 +41,8 @@ const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSe
 			style={[
 				styles.container,
 				{
-					borderColor: themes[theme].separatorColor,
-					backgroundColor: themes[theme].headerBackground
+					borderColor: themes[theme].strokeLight,
+					backgroundColor: themes[theme].surfaceNeutral
 				}
 			]}
 		>
diff --git a/app/views/ShareListView/Header/Header.tsx b/app/views/ShareListView/Header/Header.tsx
index 731aa6ff0..f835aa3e8 100644
--- a/app/views/ShareListView/Header/Header.tsx
+++ b/app/views/ShareListView/Header/Header.tsx
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
 });
 
 const Header = React.memo(({ searching, onChangeSearchText, theme }: IShareListHeader) => {
-	const titleColorStyle = { color: themes[theme].headerTintColor };
+	const titleColorStyle = { color: themes[theme].fontSecondaryInfo };
 	const isLight = theme === 'light';
 	if (searching) {
 		return (
diff --git a/app/views/ShareListView/Header/SearchBox.tsx b/app/views/ShareListView/Header/SearchBox.tsx
index badfdaa51..d120680cd 100644
--- a/app/views/ShareListView/Header/SearchBox.tsx
+++ b/app/views/ShareListView/Header/SearchBox.tsx
@@ -55,7 +55,7 @@ const CancelButton = ({ onCancelPress }: { onCancelPress?: () => void }) => {
 	const { theme } = useTheme();
 	return (
 		<Touchable onPress={onCancelPress} style={styles.cancel}>
-			<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
+			<Text style={[styles.cancelText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Cancel')}</Text>
 		</Touchable>
 	);
 };
@@ -66,7 +66,7 @@ const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox)
 		<View
 			style={[
 				styles.container,
-				{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
+				{ backgroundColor: isIOS ? themes[theme].surfaceNeutral : themes[theme].surfaceLight }
 			]}
 		>
 			<View style={[styles.searchBox, { backgroundColor: themes[theme].strokeExtraLight }]}>
diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx
index 7c40b36bc..1791f5a64 100644
--- a/app/views/TeamChannelsView.tsx
+++ b/app/views/TeamChannelsView.tsx
@@ -221,7 +221,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme].fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
diff --git a/app/views/ThreadMessagesView/Dropdown/index.tsx b/app/views/ThreadMessagesView/Dropdown/index.tsx
index fcc4a3f8a..5145d7b2b 100644
--- a/app/views/ThreadMessagesView/Dropdown/index.tsx
+++ b/app/views/ThreadMessagesView/Dropdown/index.tsx
@@ -81,7 +81,7 @@ class Dropdown extends React.Component<IDropdownProps> {
 						{
 							transform: [{ translateY }],
 							backgroundColor: themes[theme].surfaceRoom,
-							borderColor: themes[theme].separatorColor
+							borderColor: themes[theme].strokeLight
 						}
 					]}
 				>
diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx
index 972c0cae0..0b9d3db92 100644
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -137,7 +137,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme].fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),