Merge pull request #464 from JS-Demi/bugfix-faq-theme

Fix bug #462
hexlet-rus · Apr 16, 2024 · 06fc7d3 · 06fc7d3
2 parents bb948f6 + 90f6bda
commit 06fc7d3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/frontend/src/pages/landing/Faq.jsx b/frontend/src/pages/landing/Faq.jsx
@@ -1,12 +1,13 @@
 import { useContext } from 'react';
 import {
   Accordion,
-  Row,
+  AccordionContext,
   Col,
+  Row,
   useAccordionButton,
-  AccordionContext,
 } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { useTernaryDarkMode } from 'usehooks-ts';
 
 function CustomToggle({ children, eventKey }) {
   const { activeEventKey } = useContext(AccordionContext);
@@ -15,9 +16,8 @@ function CustomToggle({ children, eventKey }) {
 
   const isCurrentEventKey = activeEventKey === eventKey;
 
-  const theme = document.documentElement.getAttribute('data-bs-theme');
-
-  const colorForEl = theme === 'light' ? 'black' : 'white';
+  const { isDarkMode } = useTernaryDarkMode();
+  const colorForEl = isDarkMode ? 'white' : 'black';
 
   return (
     <div

diff --git a/frontend/src/pages/landing/Landing.jsx b/frontend/src/pages/landing/Landing.jsx
@@ -1,28 +1,28 @@
-import { Link, useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
 
 import { Button, Col, Container, Image, Row } from 'react-bootstrap';
 
 import { useAuth } from '../../hooks';
 import routes from '../../routes.js';
 import { actions } from '../../slices/modalSlice';
 import Faq from './Faq.jsx';
-import Header from './Header.jsx';
 import Footer from './Footer.jsx';
-import './landing.scss';
+import Header from './Header.jsx';
 import './assets/fonts/NunitoSans_10pt-Light.ttf';
+import './landing.scss';
 
-import Code from './assets/Icons=Code.svg';
-import Devices from './assets/Icons=Devices.svg';
-import Share from './assets/Icons=Share.svg';
 import ImageCarousel1 from './assets/DisplayWithCode1.jpeg';
 import ImageCarousel2 from './assets/DisplayWithCode2.jpeg';
 import ImageCarousel3 from './assets/DisplayWithCode3.jpeg';
 import ImageCarousel4 from './assets/DisplayWithCode4.jpeg';
 import ImageCarousel5 from './assets/DisplayWithCode5.jpeg';
+import Code from './assets/Icons=Code.svg';
+import Devices from './assets/Icons=Devices.svg';
 import Languages from './assets/Icons=Languages.svg';
+import Share from './assets/Icons=Share.svg';
 import TeamWork from './assets/Icons=TeamWork.svg';
 import Template from './assets/Icons=Template.svg';
 import ImageUnderCarousel from './assets/ReadyAssets.jpeg';
@@ -171,7 +171,7 @@ function NewLanding() {
             ref={advantagesRef}
             className="d-none d-lg-inline-flex my-5 overflow-auto flex-nowrap advantages-horizontal-scroll"
           >
-            <Col clssaName="col-12" lg={{ offset: 1, span: 11 }}>
+            <Col className="col-12" lg={{ offset: 1, span: 11 }}>
               <figure className="d-flex flex-row gap-5 align-items-center m-0 justify-content-center me-5">
                 <Col>
                   <Image
@@ -190,7 +190,7 @@ function NewLanding() {
                 </Col>
               </figure>
             </Col>
-            <Col clssaName="col-12" lg={{ offset: 1, span: 11 }}>
+            <Col className="col-12" lg={{ offset: 1, span: 11 }}>
               <figure className="d-flex flex-row gap-5 align-items-center m-0 justify-content-center mx-5">
                 <Col>
                   <Image
@@ -209,7 +209,7 @@ function NewLanding() {
                 </Col>
               </figure>
             </Col>
-            <Col clssaName="col-12" lg={{ offset: 1, span: 11 }}>
+            <Col className="col-12" lg={{ offset: 1, span: 11 }}>
               <figure className="d-flex flex-row gap-5 align-items-center m-0 justify-content-center mx-5">
                 <Col>
                   <Image
@@ -228,7 +228,7 @@ function NewLanding() {
                 </Col>
               </figure>
             </Col>
-            <Col clssaName="col-12" lg={{ offset: 1, span: 11 }}>
+            <Col className="col-12" lg={{ offset: 1, span: 11 }}>
               <figure className="d-flex flex-row gap-5 align-items-center m-0 justify-content-center mx-5">
                 <Col>
                   <Image
@@ -247,7 +247,7 @@ function NewLanding() {
                 </Col>
               </figure>
             </Col>
-            <Col clssaName="col-12" lg={{ offset: 1, span: 11 }}>
+            <Col className="col-12" lg={{ offset: 1, span: 11 }}>
               <figure className="d-flex flex-row gap-5 align-items-center m-0 justify-content-center">
                 <Col>
                   <Image