RocketChat · ghulamghousdev · Jun 24, 2021 · Jun 25, 2021 · Jun 25, 2021 · Jun 25, 2021
diff --git a/.loki/reference/chrome_Components_Alert_custom_color.png b/.loki/reference/chrome_Components_Alert_custom_color.png
diff --git a/.loki/reference/chrome_Components_Alert_default.png b/.loki/reference/chrome_Components_Alert_default.png
diff --git a/.loki/reference/chrome_Components_Alert_error.png b/.loki/reference/chrome_Components_Alert_error.png
diff --git a/.loki/reference/chrome_Components_Alert_success.png b/.loki/reference/chrome_Components_Alert_success.png
diff --git a/.loki/reference/chrome_Components_Alert_warning.png b/.loki/reference/chrome_Components_Alert_warning.png
diff --git a/.loki/reference/chrome_Components_Alert_with_long_text_content.png b/.loki/reference/chrome_Components_Alert_with_long_text_content.png
diff --git a/.loki/reference/chrome_Components_Alert_without_timeout.png b/.loki/reference/chrome_Components_Alert_without_timeout.png
diff --git a/.loki/reference/chrome_Components_Footer_simple.png b/.loki/reference/chrome_Components_Footer_simple.png
diff --git a/.loki/reference/chrome_Components_Footer_with_Composer_and_options.png b/.loki/reference/chrome_Components_Footer_with_Composer_and_options.png
diff --git a/.loki/reference/chrome_Components_Header_for_user_chat.png b/.loki/reference/chrome_Components_Header_for_user_chat.png
diff --git a/.loki/reference/chrome_Components_Header_with_custom_field.png b/.loki/reference/chrome_Components_Header_with_custom_field.png
diff --git a/.loki/reference/chrome_Components_Header_with_custom_field_and_alert.png b/.loki/reference/chrome_Components_Header_with_custom_field_and_alert.png
diff --git a/.loki/reference/chrome_Components_Header_with_multiple_alerts.png b/.loki/reference/chrome_Components_Header_with_multiple_alerts.png
diff --git a/.loki/reference/chrome_Components_Header_with_theme.png b/.loki/reference/chrome_Components_Header_with_theme.png
diff --git a/.loki/reference/chrome_Components_Header_with_title_and_subtitle.png b/.loki/reference/chrome_Components_Header_with_title_and_subtitle.png
diff --git a/.loki/reference/chrome_Components_Icons_accessibility.png b/.loki/reference/chrome_Components_Icons_accessibility.png
diff --git a/.loki/reference/chrome_Components_Icons_accessibilty_dark.png b/.loki/reference/chrome_Components_Icons_accessibilty_dark.png
diff --git a/.loki/reference/chrome_Components_Icons_all.png b/.loki/reference/chrome_Components_Icons_all.png
diff --git a/.loki/reference/chrome_Components_Modal_alert.png b/.loki/reference/chrome_Components_Modal_alert.png
diff --git a/.loki/reference/chrome_Components_Modal_animated.png b/.loki/reference/chrome_Components_Modal_animated.png
diff --git a/.loki/reference/chrome_Components_Modal_confirm.png b/.loki/reference/chrome_Components_Modal_confirm.png
diff --git a/.loki/reference/chrome_Components_Modal_disallow_dismiss_by_overlay.png b/.loki/reference/chrome_Components_Modal_disallow_dismiss_by_overlay.png
diff --git a/.loki/reference/chrome_Components_Modal_normal.png b/.loki/reference/chrome_Components_Modal_normal.png
diff --git a/.loki/reference/chrome_Components_Modal_timeout.png b/.loki/reference/chrome_Components_Modal_timeout.png
diff --git a/.loki/reference/chrome_Components_Screen_Footer_empty.png b/.loki/reference/chrome_Components_Screen_Footer_empty.png
diff --git a/.loki/reference/chrome_Components_Screen_Footer_with_children.png b/.loki/reference/chrome_Components_Screen_Footer_with_children.png
diff --git a/.loki/reference/chrome_Components_Screen_Footer_with_options.png b/.loki/reference/chrome_Components_Screen_Footer_with_options.png
diff --git a/.loki/reference/chrome_Components_Screen_expanded.png b/.loki/reference/chrome_Components_Screen_expanded.png
diff --git a/.loki/reference/chrome_Components_Screen_normal.png b/.loki/reference/chrome_Components_Screen_normal.png
diff --git a/.loki/reference/chrome_Components_Screen_windowed.png b/.loki/reference/chrome_Components_Screen_windowed.png
diff --git a/.loki/reference/chrome_Components_Screen_with_agent.png b/.loki/reference/chrome_Components_Screen_with_agent.png
diff --git a/.loki/reference/chrome_Components_Screen_with_agent_email.png b/.loki/reference/chrome_Components_Screen_with_agent_email.png
diff --git a/.loki/reference/chrome_Components_Screen_with_agent_phone.png b/.loki/reference/chrome_Components_Screen_with_agent_phone.png
diff --git a/.loki/reference/chrome_Components_Screen_with_hidden_agent.png b/.loki/reference/chrome_Components_Screen_with_hidden_agent.png
diff --git a/.loki/reference/chrome_Components_Screen_with_multiple_alerts.png b/.loki/reference/chrome_Components_Screen_with_multiple_alerts.png
diff --git a/.loki/reference/chrome_Messages_FileAttachment_for_doc.png b/.loki/reference/chrome_Messages_FileAttachment_for_doc.png
diff --git a/.loki/reference/chrome_Messages_FileAttachment_for_pdf.png b/.loki/reference/chrome_Messages_FileAttachment_for_pdf.png
diff --git a/.loki/reference/chrome_Messages_FileAttachment_for_ppt.png b/.loki/reference/chrome_Messages_FileAttachment_for_ppt.png
diff --git a/.loki/reference/chrome_Messages_FileAttachment_for_unknown_extension.png b/.loki/reference/chrome_Messages_FileAttachment_for_unknown_extension.png
diff --git a/.loki/reference/chrome_Messages_FileAttachment_for_xls.png b/.loki/reference/chrome_Messages_FileAttachment_for_xls.png
diff --git a/.loki/reference/chrome_Messages_FileAttachment_for_zip.png b/.loki/reference/chrome_Messages_FileAttachment_for_zip.png
diff --git a/.loki/reference/chrome_Messages_MessageList_normal.png b/.loki/reference/chrome_Messages_MessageList_normal.png
diff --git a/...reference/chrome_Messages_MessageList_with_hidden_agent_info_system_message.png b/...reference/chrome_Messages_MessageList_with_hidden_agent_info_system_message.png
diff --git a/.loki/reference/chrome_Messages_MessageList_with_system_message.png b/.loki/reference/chrome_Messages_MessageList_with_system_message.png
diff --git a/.loki/reference/chrome_Messages_MessageList_with_typing_users.png b/.loki/reference/chrome_Messages_MessageList_with_typing_users.png
diff --git a/.loki/reference/chrome_Messages_MessageSeparator_default.png b/.loki/reference/chrome_Messages_MessageSeparator_default.png
diff --git a/.loki/reference/chrome_Messages_MessageTime_today.png b/.loki/reference/chrome_Messages_MessageTime_today.png
diff --git a/.loki/reference/chrome_Messages_MessageTime_yesterday.png b/.loki/reference/chrome_Messages_MessageTime_yesterday.png
diff --git a/.loki/reference/chrome_Messages_Message_default.png b/.loki/reference/chrome_Messages_Message_default.png
diff --git a/.loki/reference/chrome_Messages_Message_grouping.png b/.loki/reference/chrome_Messages_Message_grouping.png
diff --git a/.loki/reference/chrome_Messages_Message_markdown.png b/.loki/reference/chrome_Messages_Message_markdown.png
diff --git a/.loki/reference/chrome_Messages_Message_me.png b/.loki/reference/chrome_Messages_Message_me.png
diff --git a/.loki/reference/chrome_Messages_Message_with_UiKit_blocks.png b/.loki/reference/chrome_Messages_Message_with_UiKit_blocks.png
diff --git a/.loki/reference/chrome_Messages_Message_with_files_attachments.png b/.loki/reference/chrome_Messages_Message_with_files_attachments.png
diff --git a/.loki/reference/chrome_Messages_Message_with_image_attachment.png b/.loki/reference/chrome_Messages_Message_with_image_attachment.png
diff --git a/.loki/reference/chrome_Messages_Message_with_quotation.png b/.loki/reference/chrome_Messages_Message_with_quotation.png
diff --git a/.loki/reference/chrome_Messages_TypingIndicator_default.png b/.loki/reference/chrome_Messages_TypingIndicator_default.png
diff --git a/.loki/reference/chrome_Messages_TypingIndicator_with_avatars.png b/.loki/reference/chrome_Messages_TypingIndicator_with_avatars.png
diff --git a/.loki/reference/chrome_Routes_ChatFinished_normal.png b/.loki/reference/chrome_Routes_ChatFinished_normal.png
diff --git a/.loki/reference/chrome_Routes_ChatFinished_with_custom_messages.png b/.loki/reference/chrome_Routes_ChatFinished_with_custom_messages.png
diff --git a/.loki/reference/chrome_Routes_Chat_loading.png b/.loki/reference/chrome_Routes_Chat_loading.png
diff --git a/.loki/reference/chrome_Routes_Chat_normal.png b/.loki/reference/chrome_Routes_Chat_normal.png
diff --git a/.loki/reference/chrome_Routes_Chat_with_trigger_messages.png b/.loki/reference/chrome_Routes_Chat_with_trigger_messages.png
diff --git a/.loki/reference/chrome_Routes_Chat_with_typing_user.png b/.loki/reference/chrome_Routes_Chat_with_typing_user.png
diff --git a/.loki/reference/chrome_Routes_GDPRAgreement_normal.png b/.loki/reference/chrome_Routes_GDPRAgreement_normal.png
diff --git a/.loki/reference/chrome_Routes_Leave_a_message_loading.png b/.loki/reference/chrome_Routes_Leave_a_message_loading.png
diff --git a/.loki/reference/chrome_Routes_Leave_a_message_normal.png b/.loki/reference/chrome_Routes_Leave_a_message_normal.png
diff --git a/.loki/reference/chrome_Routes_Leave_a_message_unavailable.png b/.loki/reference/chrome_Routes_Leave_a_message_unavailable.png
diff --git a/.loki/reference/chrome_Routes_Register_loading.png b/.loki/reference/chrome_Routes_Register_loading.png
diff --git a/.loki/reference/chrome_Routes_Register_normal.png b/.loki/reference/chrome_Routes_Register_normal.png
diff --git a/.loki/reference/chrome_Routes_Register_with_custom_fields.png b/.loki/reference/chrome_Routes_Register_with_custom_fields.png
diff --git a/.loki/reference/chrome_Routes_SwitchDepartment_loading.png b/.loki/reference/chrome_Routes_SwitchDepartment_loading.png
diff --git a/.loki/reference/chrome_Routes_SwitchDepartment_normal.png b/.loki/reference/chrome_Routes_SwitchDepartment_normal.png
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,15 +1,13 @@
-import { addDecorator, addParameters } from '@storybook/react';
+import { addParameters } from '@storybook/react';
 import 'loki/configure-react';
 import 'emoji-mart/css/emoji-mart.css';
 import '../src/styles/index.scss';
 
 addParameters({
-  grid: {
-    cellSize: 4,
-  },
-  options: {
-    storySort: ([, a], [, b]) => {
-      return a.kind.localeCompare(b.kind);
-    },
-  },
+	grid: {
+		cellSize: 4,
+	},
+	options: {
+		storySort: ([, a], [, b]) => a.kind.localeCompare(b.kind),
+	},
 });
diff --git a/src/components/Alert/styles.scss b/src/components/Alert/styles.scss
@@ -19,16 +19,27 @@ $alert-error-background-color: $color-red;
 
 	letter-spacing: 0;
 
-	color: $alert-color;
+	color: var(--alert-color, $alert-color);
 	background-color: $alert-background-color;
 
 	font-family: $alert-font-family;
-	font-size: 12px;
 	font-weight: 600;
 	line-height: 16px;
 	align-items: center;
 	justify-content: space-between;
 
+	&__text-font-small {
+		font-size: 10px;
+	}
+
+	&__text-font-normal {
+		font-size: 12px;
+	}
+
+	&__text-font-large {
+		font-size: 16px;
+	}
+
 	&__content {
 		overflow: hidden;
 
@@ -52,14 +63,14 @@ $alert-error-background-color: $color-red;
 	}
 
 	&--success {
-		background-color: $alert-success-background-color;
+		background-color: var(--alert-success-bg-color, $alert-success-background-color);
 	}
 
 	&--warning {
-		background-color: $alert-warning-background-color;
+		background-color: var(--alert-warning-bg-color, $color-yellow);
 	}
 
 	&--error {
-		background-color: $alert-error-background-color;
+		background-color: var(--alert-error-bg-color, $alert-error-background-color);
 	}
 }
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -8,9 +8,13 @@ import history from '../../history';
 import Connection from '../../lib/connection';
 import CustomFields from '../../lib/customFields';
 import Hooks from '../../lib/hooks';
+import { setIconsAccompanyingTextState, setDarkModeState,
+	setSmallDynamicTextState, setNormalDynamicTextState,
+	setLargeDynamicTextState, accessibleModeFalse, accessibleModeTrue } from '../../lib/main';
 import { parentCall } from '../../lib/parentCall';
 import Triggers from '../../lib/triggers';
 import userPresence from '../../lib/userPresence';
+import AccessibleMode from '../../routes/AccessibleMode';
 import { ChatConnector } from '../../routes/Chat';
 import ChatFinished from '../../routes/ChatFinished';
 import GDPRAgreement from '../../routes/GDPRAgreement';
@@ -157,6 +161,31 @@ export class App extends Component {
 		i18next.on('languageChanged', this.handleLanguageChange);
 	}
 
+	setDarkMode = async () => {
+		const { accessible: { darkMode } } = this.props;
+		const { body } = document;
+
+		if (darkMode) {
+			body.classList.add('dark');
+		} else {
+			body.classList.add('light');
+		}
+		if (darkMode) {
+			body.classList.replace('light', 'dark');
+		} else {
+			body.classList.replace('dark', 'light');
+		}
+	};
+
+	getConfigurations = async () => {
+		const { config: { settings: { allowAccessibleMode } } } = this.props;
+		if (!allowAccessibleMode) {
+			accessibleModeFalse();
+		} else {
+			accessibleModeTrue();
+		}
+	}
+
 	checkPoppedOutWindow() {
 		// Checking if the window is poppedOut and setting parent minimized if yes for the restore purpose
 		const { dispatch } = this.props;
@@ -176,7 +205,8 @@ export class App extends Component {
 		userPresence.init();
 		this.initWidget();
 		this.checkPoppedOutWindow();
-
+		await this.setDarkMode();
+		await this.getConfigurations();
 		this.setState({ initialized: true });
 		parentCall('ready');
 	}
@@ -198,6 +228,7 @@ export class App extends Component {
 	componentDidUpdate() {
 		const { i18n } = this.props;
 		document.dir = isRTL(i18n.t('yes')) ? 'rtl' : 'ltr';
+		this.setDarkMode();
 	}
 
 	render = ({
@@ -219,6 +250,11 @@ export class App extends Component {
 			sound,
 			alerts,
 			modal,
+			setIconsAccompanyingTextState,
+			setDarkModeState,
+			setSmallDynamicTextState,
+			setNormalDynamicTextState,
+			setLargeDynamicTextState,
 			onEnableNotifications: this.handleEnableNotifications,
 			onDisableNotifications: this.handleDisableNotifications,
 			onMinimize: this.handleMinimize,
@@ -236,6 +272,7 @@ export class App extends Component {
 				<LeaveMessage path='/leave-message' {...screenProps} />
 				<Register path='/register' {...screenProps} />
 				<SwitchDepartment path='/switch-department' {...screenProps} />
+				<AccessibleMode path='/accessible-mode' {...screenProps} />
 				<TriggerMessage path='/trigger-messages' {...screenProps} />
 			</Router>
 		);

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -17,6 +17,7 @@ const AppConnector = () => (
 					undocked,
 					minimized = true,
 					expanded = false,
+					accessible,
 					alerts,
 					modal,
 					dispatch,
@@ -31,6 +32,7 @@ const AppConnector = () => (
 						undocked={undocked}
 						minimized={minimized}
 						expanded={expanded}
+						accessible={accessible}
 						alerts={alerts}
 						modal={modal}
 						dispatch={dispatch}

diff --git a/src/components/Button/styles.scss b/src/components/Button/styles.scss
@@ -73,7 +73,7 @@ $button-icon-padding: 10px;
 	text-decoration: none;
 
 	color: var(--font-color, $button-color);
-	border: $button-border-width solid;
+	border: var(--default-border-width, 2px) solid;
 	border-radius: $button-border-radius;
 
 	font-family: $button-font-family;
@@ -98,16 +98,16 @@ $button-icon-padding: 10px;
 	&--secondary {
 		color: $button-color;
 
-		@include state($button-secondary-background-color);
+		@include state(var(--btn-secondary-bg-color, none));
 	}
 
 	&--outline {
-		background: none;
+		background: var(--btn-outline-bg-color, none);
 	}
 
 	&--nude {
 		border-color: transparent;
-		background: none;
+		background: var(--nude-button, none);
 
 		&:focus {
 			box-shadow: none;
@@ -127,6 +127,8 @@ $button-icon-padding: 10px;
 
 	&--stack {
 		width: 100%;
+
+		color: var(--color-text-lighter, #ffffff);
 	}
 
 	&--small {

diff --git a/src/components/Composer/styles.scss b/src/components/Composer/styles.scss
@@ -26,9 +26,9 @@ $composer-input-placeholder-color: $color-text-light;
 
 	transition: all $default-time-animation;
 
-	border: $composer-border-width solid $composer-border-color;
+	border: $composer-border-width solid var(--input-field-border, $composer-border-color);
 	border-radius: $composer-border-radius;
-	background-color: $composer-background-color;
+	background-color: var(--composer-bg-color, $composer-background-color);
 	align-items: flex-end;
 
 	&:focus-within {
@@ -48,7 +48,7 @@ $composer-input-placeholder-color: $color-text-light;
 		cursor: text;
 		word-wrap: break-word;
 
-		color: $composer-input-color;
+		color: var(--composer-input-color, $composer-input-color);
 
 		border: none;
 		outline: none;

diff --git a/src/components/FilesDropTarget/index.js b/src/components/FilesDropTarget/index.js
@@ -103,14 +103,17 @@ export class FilesDropTarget extends Component {
 			className={createClassName(styles, 'drop', { overlayed, dragover: dragLevel > 0 }, [className])}
 			style={style}
 		>
-			<input
-				ref={this.handleInputRef}
-				type='file'
-				accept={accept}
-				multiple={multiple}
-				onChange={this.handleInputChange}
-				className={createClassName(styles, 'drop__input')}
-			/>
+			<label>
+				<input
+					ref={this.handleInputRef}
+					type='file'
+					area-label='This input is for file drop'
+					accept={accept}
+					multiple={multiple}
+					onChange={this.handleInputChange}
+					className={createClassName(styles, 'drop__input')}
+				/>
+			</label>
 			{children}
 		</div>
 	)

diff --git a/src/components/FilesDropTarget/styles.scss b/src/components/FilesDropTarget/styles.scss
@@ -17,6 +17,8 @@ $drop-overlay-text-font-size: 1.375rem;
 	flex-direction: column;
 	flex: 1 1 auto;
 
+	color: var(--color-text-dark-gray);
+
 	&.drop--overlayed.drop--dragover {
 		&::before {
 			position: absolute;

diff --git a/src/components/Footer/styles.scss b/src/components/Footer/styles.scss
@@ -11,6 +11,7 @@
 	padding: 4px 8px;
 
 	color: $color-text-grey;
+	background-color: var(--background-color, #ffffff);
 
 	font-size: 0.625rem;
 	align-items: stretch;
@@ -22,6 +23,10 @@
 		padding: 4px 8px;
 	}
 
+	&__abc {
+		font-size: 40px;
+	}
+
 	&__options {
 		padding: 0;
 
@@ -35,13 +40,24 @@
 		border: none;
 		background: none;
 
-		font-size: 0.625rem;
 		font-weight: bold;
 		line-height: 1;
 
+		&--small {
+			font-size: 0.5rem;
+		}
+
+		&--normal {
+			font-size: 0.625rem;
+		}
+
+		&--large {
+			font-size: 0.75rem;
+		}
+
 		&:hover,
 		&:focus {
-			color: black;
+			color: var(--footer-options-text-color, black);
 		}
 
 		@include pressable-button(2px);
@@ -68,7 +84,7 @@
 	user-select: none;
 	text-align: end;
 
-	font-size: 10px;
+	font-size: 12px;
 	font-weight: 500;
 	align-self: flex-end;
 
@@ -82,7 +98,7 @@
 		}
 
 		&:hover :global(.text) {
-			fill: #2f343d;
+			fill: var(--footer-logo-text-color, #2f343d);
 		}
 
 		:global(.rocket) {

diff --git a/src/components/Form/FormField/index.js b/src/components/Form/FormField/index.js
@@ -12,14 +12,19 @@ export const FormField = ({
 	className,
 	style = {},
 	children,
+	dynamicTextState,
 }) => (
 	<div
 		className={createClassName(styles, 'form-field', { required, error: !!error }, [className])}
 		style={style}
 	>
 		<label className={createClassName(styles, 'form-field__label-wrapper')}>
 			{label
-				? <span className={createClassName(styles, 'form-field__label')}>{label}</span>
+				? <span className={createClassName(styles, 'form-field__label')}>
+					<span className={createClassName(styles, `form-field__label__font-${ dynamicTextState }`)}>
+						{label}
+					</span>
+				</span>
 				: null}
 			<span className={createClassName(styles, 'form-field__input')}>
 				{error

diff --git a/src/components/Form/FormField/styles.scss b/src/components/Form/FormField/styles.scss
@@ -1,9 +1,10 @@
 @import '../../../styles/colors';
 @import '../../../styles/variables';
 
-$form-field-label-color: $color-text-dark;
 $form-field-label-error-color: $color-red;
-$form-field-label-font-size: 0.75rem;
+$form-field-label-font-size-small: 0.6rem;
+$form-field-label-font-size-normal: 0.75rem;
+$form-field-label-font-size-large: 0.9rem;
 $form-field-label-font-weight: 600;
 $form-field-label-line-height: 1rem;
 
@@ -38,18 +39,33 @@ $form-field-error-border-color: $color-red;
 		flex: 0 0 auto;
 
 		transition: color $default-time-animation;
+
 		text-align: left;
 		white-space: nowrap;
 		letter-spacing: 0;
 		text-overflow: ellipsis;
 
-		color: $form-field-label-color;
+		color: var(--form-field-label-color, $color-text-dark);
+
+		font-size: $form-field-label-font-size-normal;
 
-		font-size: $form-field-label-font-size;
 		font-weight: $form-field-label-font-weight;
+
 		line-height: $form-field-label-line-height;
 	}
 
+	.form-field__label__font-small {
+		font-size: $form-field-label-font-size-small;
+	}
+
+	.form-field__label__font-normal {
+		font-size: $form-field-label-font-size-normal;
+	}
+
+	.form-field__label__font-large {
+		font-size: $form-field-label-font-size-large;
+	}
+
 	&__input {
 		display: flex;
 		flex: 1 0 auto;