Merge pull request #52 from UNICEFECAR/feature/issue_74

Feature/issue 74
UNICEFECAR · Dec 22, 2023 · 7eeb1aa · 7eeb1aa
2 parents f7db659 + 50c4d10
commit 7eeb1aa
Show file tree

Hide file tree

Showing 24 changed files with 202 additions and 71 deletions.
diff --git a/src/backdrops/ConfirmConsultation/ConfirmConsultation.jsx b/src/backdrops/ConfirmConsultation/ConfirmConsultation.jsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Backdrop } from "@USupport-components-library/src";
 import { mascotHappyOrange } from "@USupport-components-library/assets";
 import {
   getTimeAsString,
   getMonthName,
+  ThemeContext,
 } from "@USupport-components-library/utils";
 import { useTranslation } from "react-i18next";
 
@@ -20,6 +21,7 @@ import { useNavigate } from "react-router-dom";
 export const ConfirmConsultation = ({ isOpen, onClose, consultation }) => {
   const navigate = useNavigate();
   const { t } = useTranslation("confirm-consultation");
+  const { theme } = useContext(ThemeContext);
 
   const handleContinue = () => {
     onClose();
@@ -46,7 +48,12 @@ export const ConfirmConsultation = ({ isOpen, onClose, consultation }) => {
           src={mascotHappyOrange}
           className="confirm-consultation__content__mascot"
         />
-        <h4 className="confirm-consultation__content__heading">
+        <h4
+          className={[
+            "confirm-consultation__content__heading",
+            theme === "dark" && "confirm-consultation__content__heading--dark",
+          ].join(" ")}
+        >
           {t("heading")}
         </h4>
         <p className="text confirm-consultation__content__text">

diff --git a/src/backdrops/ConfirmConsultation/confirm-consultation.scss b/src/backdrops/ConfirmConsultation/confirm-consultation.scss
@@ -18,6 +18,10 @@
     &__heading {
       margin-top: $spacing_5_4;
       color: $color_blue_3d527b;
+
+      &--dark {
+        color: $color_gray_d2dcde;
+      }
     }
 
     &__text {

diff --git a/src/backdrops/FilterProviders/FilterProviders.jsx b/src/backdrops/FilterProviders/FilterProviders.jsx
@@ -172,14 +172,12 @@ export const FilterProviders = ({
             setOptions={setProviderSex}
           />
           <div>
-            <p className="filter-providers__content__inputs-container__free-text text">
-              {t("providers_free_consultation_label")}
-            </p>
             <Toggle
               isToggled={data.onlyFreeConsultation}
               setParentState={(checked) =>
                 handleSelect("onlyFreeConsultation", checked)
               }
+              label={t("providers_free_consultation_label")}
             />
           </div>
           <DateInput

diff --git a/src/blocks/ActivityHistory/activity-history.scss b/src/blocks/ActivityHistory/activity-history.scss
@@ -4,7 +4,7 @@
   @include full-height-page-navbar;
 
   &__header-block {
-    background-color: $color_white_ff;
+    @include themify($themes, "background-color", "color_white_ff");
     left: 0;
     padding: $spacing_2_0;
     padding-bottom: 0;
@@ -101,17 +101,19 @@
     }
   }
 
-  &__main__button-container {
-    padding: $spacing_2_0 0;
-    padding-bottom: calc(10vh);
-    position: sticky;
-    bottom: 0;
-    background: $gradient_transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    z-index: $z_index_emergency_button;
+  &__main {
+    &__button-container {
+      padding: $spacing_2_0 0;
+      padding-bottom: calc(10vh);
+      position: sticky;
+      bottom: 0;
+      // background: $gradient_transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      z-index: $z_index_emergency_button;
+    }
   }
 
   &__main__content {

diff --git a/src/blocks/Login/Login.jsx b/src/blocks/Login/Login.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -13,8 +13,14 @@ import {
 } from "@USupport-components-library/src";
 import { userSvc } from "@USupport-components-library/services";
 import { useError } from "#hooks";
-import { getCountryFromTimezone } from "@USupport-components-library/utils";
-import { logoVerticalSvg } from "@USupport-components-library/assets";
+import {
+  getCountryFromTimezone,
+  ThemeContext,
+} from "@USupport-components-library/utils";
+import {
+  logoVerticalSvg,
+  logoVerticalDarkSvg,
+} from "@USupport-components-library/assets";
 
 import "./login.scss";
 
@@ -29,6 +35,7 @@ export const Login = () => {
   const { t } = useTranslation("login");
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const { theme } = useContext(ThemeContext);
 
   const [data, setData] = useState({
     email: "",
@@ -108,7 +115,7 @@ export const Login = () => {
               {t("heading")}
             </h2>
             <img
-              src={logoVerticalSvg}
+              src={theme === "dark" ? logoVerticalDarkSvg : logoVerticalSvg}
               alt="Logo"
               className="welcome__grid__logo-item__logo"
             />

diff --git a/src/blocks/MascotHeaderMyQA/MascotHeaderMyQA.jsx b/src/blocks/MascotHeaderMyQA/MascotHeaderMyQA.jsx
@@ -45,8 +45,8 @@ export const MascotHeaderMyQA = ({ classes, handleSeeHowItWorksClick }) => {
         >
           <Grid>
             <GridItem xs={4} md={6} lg={8}>
-              <h4 className="heading">{t("heading")}</h4>
-              <p className="text subheading heading">
+              <h4 className="mascot-header-my-qa__heading">{t("heading")}</h4>
+              <p className="text mascot-header-my-qa__subheading">
                 {t("subheading_its")} <b>{t("subheading_anonymous")}</b>!{" "}
                 {t("subheading_text1")} <b>{t("subheading_not")}</b>{" "}
                 {t("subheading_text2")}

diff --git a/src/blocks/MascotHeaderMyQA/mascot-header-my-qa.scss b/src/blocks/MascotHeaderMyQA/mascot-header-my-qa.scss
@@ -46,16 +46,28 @@
       }
     }
 
-    & .heading {
-      color: $color_blue_263238;
-    }
-
-    & .subheading {
-      padding-top: $spacing_1_6;
-    }
-
     &__span {
       text-transform: capitalize;
     }
   }
+
+  &__heading {
+    @include themifyCustom(
+      $themes,
+      "color",
+      "color_blue_3d527b",
+      "color_3d527b_white"
+    );
+  }
+
+  &__subheading {
+    padding-top: $spacing_1_6;
+
+    @include themifyCustom(
+      $themes,
+      "color",
+      "color_blue_3d527b",
+      "color_3d527b_white"
+    );
+  }
 }
diff --git a/src/blocks/MascotWelcomeHeader/MascotWelcomeHeader.jsx b/src/blocks/MascotWelcomeHeader/MascotWelcomeHeader.jsx
@@ -72,8 +72,10 @@ export const MascotWelcomeHeader = ({
             </>
           ) : (
             <>
-              <h4 className="heading">{t("welcome", { name })}</h4>
-              <p className="text subheading heading">
+              <h4 className="mascot-welcome-header__heading">
+                {t("welcome", { name })}
+              </h4>
+              <p className="text mascot-welcome-header__subheading">
                 {t("next_consultation")}
               </p>
               <ConsultationDashboard

diff --git a/src/blocks/MascotWelcomeHeader/mascot-welcome-header.scss b/src/blocks/MascotWelcomeHeader/mascot-welcome-header.scss
@@ -37,14 +37,6 @@
       padding-top: $spacing_5_0;
     }
 
-    & .heading {
-      color: $color_blue_263238;
-    }
-
-    & .subheading {
-      padding-top: $spacing_1_6;
-    }
-
     & > button {
       margin-top: $spacing_1_6;
       align-self: center;
@@ -54,4 +46,24 @@
       margin-top: $spacing_1_6;
     }
   }
+
+  &__heading {
+    @include themifyCustom(
+      $themes,
+      "color",
+      "color_blue_3d527b",
+      "color_3d527b_white"
+    );
+  }
+
+  &__subheading {
+    padding-top: $spacing_1_6;
+
+    @include themifyCustom(
+      $themes,
+      "color",
+      "color_blue_3d527b",
+      "color_3d527b_white"
+    );
+  }
 }
diff --git a/src/blocks/MoodTracker/MoodTracker.jsx b/src/blocks/MoodTracker/MoodTracker.jsx
@@ -10,6 +10,7 @@ import {
   Textarea,
 } from "@USupport-components-library/src";
 import { useAddMoodTrack } from "#hooks";
+import { ThemeContext } from "@USupport-components-library/utils";
 
 import { RootContext } from "#routes";
 
@@ -23,6 +24,7 @@ import "./mood-tracker.scss";
  * @return {jsx}
  */
 export const MoodTracker = ({ classes, isTmpUser }) => {
+  const { theme } = useContext(ThemeContext);
   const { handleRegistrationModalOpen } = useContext(RootContext);
 
   const navigate = useNavigate();
@@ -58,7 +60,8 @@ export const MoodTracker = ({ classes, isTmpUser }) => {
         <div
           className={[
             "mood-tracker__rating__emoticon-container",
-            !emoticon.isSelected && "not-selected",
+            !emoticon.isSelected &&
+              "mood-tracker__rating__emoticon-container--not-selected",
           ].join(" ")}
           key={index}
           onClick={() => handleEmoticonClick(emoticon.value)}
@@ -68,9 +71,12 @@ export const MoodTracker = ({ classes, isTmpUser }) => {
             size={emoticon.isSelected ? "lg" : "sm"}
           />
           <p
-            className={["small-text", emoticon.isSelected && "selected"].join(
-              " "
-            )}
+            className={[
+              "small-text",
+              emoticon.isSelected &&
+                theme !== "dark" &&
+                "mood-tracker__rating__emoticon-container__text--selected",
+            ].join(" ")}
           >
             {t(emoticon.value)}
           </p>

diff --git a/src/blocks/MoodTracker/mood-tracker.scss b/src/blocks/MoodTracker/mood-tracker.scss
@@ -46,14 +46,16 @@
       width: 6rem;
       height: 9rem;
       cursor: pointer;
-    }
 
-    & .not-selected {
-      opacity: 0.5;
-    }
+      &--not-selected {
+        opacity: 0.5;
+      }
 
-    & .selected {
-      color: $color_black_37;
+      &__text--selected {
+        &.small-text {
+          color: $color_black_37;
+        }
+      }
     }
   }
 }
diff --git a/src/blocks/NotificationPreferences/notification-preferences.scss b/src/blocks/NotificationPreferences/notification-preferences.scss
@@ -27,6 +27,7 @@
 
       & > .paragraph {
         color: $color_blue_3d527b;
+        @include themify($themes, "color", "color_3d527b_white");
         padding-bottom: $spacing_1_6;
       }
     }

diff --git a/src/blocks/Page/Page.jsx b/src/blocks/Page/Page.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import { useQueryClient, useQuery } from "@tanstack/react-query";
@@ -14,18 +14,16 @@ import {
   PasswordModal,
   Box,
 } from "@USupport-components-library/src";
-
 import {
   userSvc,
   countrySvc,
   languageSvc,
 } from "@USupport-components-library/services";
-
 import {
   useWindowDimensions,
   getCountryFromTimezone,
+  ThemeContext,
 } from "@USupport-components-library/utils";
-
 import { RequireRegistration } from "#modals";
 import {
   useIsLoggedIn,
@@ -231,6 +229,27 @@ export const Page = ({
     }
   };
 
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  const toggleTheme = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const themeButton = () => {
+    return (
+      <Icon
+        name={theme === "light" ? "dark-mode-switch" : "light-mode"}
+        size="lg"
+        classes="page__theme-button"
+        onClick={toggleTheme}
+      />
+    );
+  };
+
   const handleRegistrationModalClose = () => setIsRegistrationModalOpen(false);
   const handleRegistrationModalOpen = () => setIsRegistrationModalOpen(true);
   const handleRegisterRedirection = () => {
@@ -406,6 +425,7 @@ export const Page = ({
 
         {children}
       </div>
+      {themeButton()}
       {showEmergencyButton && (
         <CircleIconButton
           iconName="phone-emergency"