fix(ux): Room header encrypted key icon - very low contrast (#36058)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Co-authored-by: Douglas Fabris <devfabris@gmail.com>

Author: 3 people

apps/meteor/client/views/room/Header/icons/Encrypted.tsx

@@ -1,5 +1,4 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import { HeaderState } from '@rocket.chat/ui-client';
 import { useSetting } from '@rocket.chat/ui-contexts';
 import { memo } from 'react';
@@ -8,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 const Encrypted = ({ room }: { room: IRoom }) => {
 	const { t } = useTranslation();
 	const e2eEnabled = useSetting('E2E_Enable');
-	return e2eEnabled && room?.encrypted ? <HeaderState title={t('Encrypted')} icon='key' color={colors.g500} /> : null;
+	return e2eEnabled && room?.encrypted ? <HeaderState title={t('Encrypted')} icon='key' color='status-font-on-success' /> : null;
 };
 
 export default memo(Encrypted);