Feature/issue 74

App.js

@@ -62,6 +62,7 @@ function App() {
   const [hasCheckedTmpUser, setHasCheckedTmpUser] = useState(false);
   const [activeCoupon, setActiveCoupon] = useState();
   const [isAnonymousRegister, setIsAnonymousRegister] = useState(false);
+  const [theme, setTheme] = useState(null);
 
   const [dropdownOptions, setDropdownOptions] = useState({
     isOpen: false,
@@ -184,6 +185,8 @@ function App() {
     setActiveCoupon,
     isAnonymousRegister,
     setIsAnonymousRegister,
+    theme,
+    setTheme,
   };
 
   return (
@@ -192,21 +195,22 @@ function App() {
         <QueryClientProvider client={queryClient}>
           <SafeAreaProvider>
             <View style={styles.flex1} onLayout={onLayoutRootView}>
-              <Navigation />
-              <RequireRegistration
-                handleContinue={handleRegisterRedirection}
-                isOpen={isRegistrationModalOpan}
-                onClose={handleRegistrationModalClose}
-              />
-              <DropdownBackdrop
-                onClose={() =>
-                  setDropdownOptions((options) => ({
-                    ...options,
-                    isOpen: false,
-                  }))
-                }
-                {...dropdownOptions}
-              />
+              <Navigation contextTheme={theme} setTheme={setTheme}>
+                <DropdownBackdrop
+                  onClose={() =>
+                    setDropdownOptions((options) => ({
+                      ...options,
+                      isOpen: false,
+                    }))
+                  }
+                  {...dropdownOptions}
+                />
+                <RequireRegistration
+                  handleContinue={handleRegisterRedirection}
+                  isOpen={isRegistrationModalOpan}
+                  onClose={handleRegistrationModalClose}
+                />
+              </Navigation>
             </View>
           </SafeAreaProvider>
           <FlashMessage position="top" />

i18n.js

@@ -62,7 +62,6 @@ import {
   SOSCenter as SOSCenterScreen,
   LocalAuthenticationScreen,
   MyQA as MyQAScreen,
-  ChangeLanguage,
 } from "./src/screens/locales.js";
 
 import {
@@ -156,7 +155,6 @@ const resources = {
     "share-platform-screen": SharePlatformScreen.en,
     "sos-center-screen": SOSCenterScreen.en,
     "my-qa-screen": MyQAScreen.en,
-    "change-language": ChangeLanguage.en,
 
     // Backdrops
     "cancel-consultation": CancelConsultation.en,
@@ -248,7 +246,6 @@ const resources = {
     "share-platform-screen": SharePlatformScreen.ru,
     "sos-center-screen": SOSCenterScreen.ru,
     "my-qa-screen": MyQAScreen.ru,
-    "change-language": ChangeLanguage.ru,
 
     // Backdrops
     "cancel-consultation": CancelConsultation.ru,
@@ -340,7 +337,6 @@ const resources = {
     "share-platform-screen": SharePlatformScreen.kk,
     "sos-center-screen": SOSCenterScreen.kk,
     "my-qa-screen": MyQAScreen.kk,
-    "change-language": ChangeLanguage.kk,
 
     // Backdrops
     "cancel-consultation": CancelConsultation.kk,

src/backdrops/FilterProviders/FilterProviders.jsx

@@ -246,10 +246,8 @@ export const FilterProviders = ({
         dropdownId="filterLanguage"
       />
       <View style={styles.toggleContainer}>
-        <AppText style={styles.label}>
-          {t("providers_free_consultation_label")}
-        </AppText>
         <Toggle
+          label={t("providers_free_consultation_label")}
           isToggled={data.onlyFreeConsultation}
           handleToggle={(checked) =>
             handleSelect("onlyFreeConsultation", checked)

src/backdrops/SelectConsultation/SelectConsultation.jsx

@@ -132,7 +132,6 @@ export const SelectConsultation = ({
         name="free-slots"
         selected={selectedSlot}
         setSelected={handleChooseSlot}
-        classes="select-consultation__radio-button-selector-group"
       />
     );
   };
@@ -201,19 +200,19 @@ export const SelectConsultation = ({
           loading={isCouponLoading}
           style={{
             width: appStyles.screenWidth * 0.4,
-            minWidth: 'auto',
+            minWidth: "auto",
             borderRadius: 40,
             paddingVertical: 10,
           }}
         />
       </View>
-        {couponError && <Error style={styles.error} message={couponError} />}
+      {couponError && <Error style={styles.error} message={couponError} />}
       {providerDataQuery.isLoading ? (
         <View style={{ alignItems: "center" }}>
           <Loading size="lg" />
         </View>
       ) : (
-        <View style={{marginTop: 20}}>
+        <View style={{ marginTop: 20 }}>
           <Header
             handleDayChange={handleDayChange}
             setStartDate={setStartDate}
@@ -248,7 +247,6 @@ const styles = StyleSheet.create({
     flex: 1,
     marginBottom: 16,
     height: 90,
-
   },
   couponInput: { width: "50%", marginRight: 12 },
   error: {

src/blocks/ActivityHistory/ActivityHistory.jsx

@@ -19,6 +19,7 @@ import { useGetChatData, useGetAllChatHistoryData, useDebounce } from "#hooks";
 import { systemMessageTypes } from "#utils";
 
 import Config from "react-native-config";
+import { useGetTheme } from "#hooks";
 const { AMAZON_S3_BUCKET } = Config;
 
 export const ActivityHistory = ({
@@ -28,6 +29,7 @@ export const ActivityHistory = ({
   providerId,
 }) => {
   const { t } = useTranslation("activity-history");
+  const { colors } = useGetTheme();
 
   const [shownMessages, setShownMessages] = useState();
   const messagesContainerRef = useRef();
@@ -144,16 +146,7 @@ export const ActivityHistory = ({
   };
   return (
     <>
-      <Block
-        style={{
-          paddingBottom: 10,
-          position: "absolute",
-          top: 0,
-          height: "28%",
-          backgroundColor: "white",
-          zIndex: 1,
-        }}
-      >
+      <Block style={[styles.block, { backgroundColor: colors.background }]}>
         <View style={[styles.container]}>
           <TouchableOpacity onPress={() => navigation.goBack()}>
             <Icon
@@ -228,6 +221,14 @@ export const ActivityHistory = ({
 };
 
 const styles = StyleSheet.create({
+  block: {
+    paddingBottom: 10,
+    position: "absolute",
+    top: 0,
+    height: "28%",
+    backgroundColor: "white",
+    zIndex: 1,
+  },
   container: { flexDirection: "row", alignItems: "center" },
   avatar: { width: 42, height: 42, borderRadius: 100, marginHorizontal: 16 },
   messagesContainer: {

src/blocks/ArticleView/ArticleView.jsx

@@ -3,10 +3,9 @@ import { View, StyleSheet, Image } from "react-native";
 import Markdown from "react-native-markdown-display";
 
 import { Icon, Label, Block, AppText } from "#components";
-
 import { appStyles } from "#styles";
-
 import articlePlaceholder from "#assets";
+import { useGetTheme } from "#hooks";
 
 /**
  * ArticleView
@@ -16,6 +15,8 @@ import articlePlaceholder from "#assets";
  * @return {jsx}
  */
 export const ArticleView = ({ articleData }) => {
+  const { colors } = useGetTheme();
+
   return (
     <>
       <View style={styles.imageContainer}>
@@ -47,7 +48,10 @@ export const ArticleView = ({ articleData }) => {
           </AppText>
 
           <View style={styles.categoryContainer}>
-            <AppText namedStyle="smallText" style={styles.categoryText}>
+            <AppText
+              namedStyle="smallText"
+              style={[styles.categoryText, { color: colors.text }]}
+            >
               {articleData.categoryName}
             </AppText>
           </View>
@@ -59,7 +63,40 @@ export const ArticleView = ({ articleData }) => {
           })}
         </View>
 
-        <Markdown style={styles}>{articleData.body}</Markdown>
+        <Markdown
+          style={{
+            ...styles,
+            heading3: {
+              fontSize: 20,
+              lineHeight: 24,
+              fontFamily: "Nunito_600SemiBold",
+              color: colors.text,
+              marginTop: 20,
+              marginBottom: 8,
+            },
+            heading4: {
+              fontSize: 16,
+              lineHeight: 24,
+              fontFamily: "Nunito_600SemiBold",
+              color: colors.text,
+              marginTop: 12,
+            },
+            paragraph: {
+              color: colors.textSecondary,
+              fontSize: 16,
+              fontFamily: "Nunito_400Regular",
+              lineHeight: 24,
+            },
+            list_item: {
+              color: colors.textSecondary,
+              fontSize: 16,
+              fontFamily: "Nunito_400Regular",
+              lineHeight: 24,
+            },
+          }}
+        >
+          {articleData.body}
+        </Markdown>
       </Block>
     </>
   );
@@ -86,35 +123,8 @@ const styles = StyleSheet.create({
     borderRadius: 25,
     justifyContent: "center",
   },
-  heading3: {
-    fontSize: 20,
-    lineHeight: 24,
-    fontFamily: "Nunito_600SemiBold",
-    color: appStyles.colorBlue_3d527b,
-    marginTop: 20,
-    marginBottom: 8,
-  },
-  heading4: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontFamily: "Nunito_600SemiBold",
-    color: appStyles.colorBlue_3d527b,
-    marginTop: 12,
-  },
-  paragraph: {
-    color: appStyles.colorGray_66768d,
-    fontSize: 16,
-    fontFamily: "Nunito_400Regular",
-    lineHeight: 24,
-  },
   categoryText: {
     fontFamily: appStyles.fontBold,
     color: appStyles.colorBlue_3d527b,
   },
-  list_item: {
-    color: appStyles.colorGray_66768d,
-    fontSize: 16,
-    fontFamily: "Nunito_400Regular",
-    lineHeight: 24,
-  },
 });

src/blocks/Consultations/Consultations.jsx

@@ -3,9 +3,7 @@ import { useTranslation } from "react-i18next";
 import { StyleSheet, View } from "react-native";
 
 import { AppText, Block, Consultation, TabsUnderlined } from "#components";
-
 import { ONE_HOUR, showToast } from "#utils";
-
 import {
   useGetAllConsultations,
   useAcceptConsultation,

src/blocks/ConsultationsDashboard/ConsultationsDashboard.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { View, StyleSheet, TouchableOpacity } from "react-native";
 
@@ -12,7 +12,7 @@ import {
 } from "#components";
 import { appStyles } from "#styles";
 
-import { userSvc } from "#services";
+import { useGetTheme } from "#hooks";
 
 /**
  * ConsultationsDashboard
@@ -32,6 +32,7 @@ export const ConsultationsDashboard = ({
   handleRegistrationModalOpen,
   isTmpUser,
 }) => {
+  const { isDarkMode } = useGetTheme();
   const { t } = useTranslation("consultations-dashboard");
   const width = appStyles.screenWidth * 0.96;
 
@@ -81,7 +82,7 @@ export const ConsultationsDashboard = ({
         <View style={styles.buttonContainer}>
           <AppButton
             label={t("schedule_consultation_label")}
-            type="secondary"
+            type={isDarkMode ? "primary" : "secondary"}
             size="lg"
             onPress={handleScheduleConsultation}
           />

src/blocks/MoodTracker/MoodTracker.jsx

@@ -4,13 +4,9 @@ import { StyleSheet, View, TouchableOpacity } from "react-native";
 import { useTranslation } from "react-i18next";
 
 import { Block, Emoticon, AppText, Textarea, AppButton } from "#components";
-
-import { useAddMoodTrack } from "#hooks";
-
+import { useAddMoodTrack, useGetTheme } from "#hooks";
 import { showToast } from "#utils";
-
 import { appStyles } from "#styles";
-
 import { Context } from "#services";
 
 /**
@@ -21,6 +17,7 @@ import { Context } from "#services";
  * @return {jsx}
  */
 export const MoodTracker = ({ navigation }) => {
+  const { colors } = useGetTheme();
   const { t, i18n } = useTranslation("mood-tracker");
   const { isTmpUser, handleRegistrationModalOpen } = useContext(Context);
   const queryClient = useQueryClient();
@@ -77,7 +74,7 @@ export const MoodTracker = ({ navigation }) => {
           <AppText
             numberOfLines={1}
             namedStyle="smallText"
-            style={styles.textSelected}
+            style={[styles.textSelected, { color: colors.textTertiary }]}
           >
             {emoticon.label}
           </AppText>