hotfix/2.2.7-altera-o-tema-de-acordo-com-tipo-de-rota

RJ-SMTR · Dec 29, 2022 · 73c10f1 · 73c10f1
1 parent 42b16e5
commit 73c10f1
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 35 deletions.
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
@@ -6,27 +6,26 @@
     padding: 0;
     box-sizing: border-box;
 }
-     
+
 :root {
     --white: #FFFFFF;
+    --body-bg: #F0EFEF;
     --gray-100: #F0EFEF;
     --items-bg: #F8AC04;
     --black: #010101
 }
-   [data-theme="brt"] {
+[data-theme="brt"] {
     --items-bg: #F8AC04
-
-
-   }
-   [data-theme="sppo"] {
+}
+[data-theme="sppo"] {
     --items-bg: #004a80;
+    --body-bg: #004a80;
     --text-color: #fff
-
-   }
+}
 
 
 body {
-    background: #004a80;
+    background: var(--body-bg);
     color: var(--black-900);
     max-height: 100vh;
 }
@@ -57,7 +56,7 @@ a {
     justify-content: center;
 }
 .inputShadow{
-        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.27);
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.27);
 }
 .z-1000{
     z-index: 1000 !important;

diff --git a/src/components/HeaderSearch/Header.jsx b/src/components/HeaderSearch/Header.jsx
@@ -1,16 +1,27 @@
 import { useContext } from 'react'
 import logo from '../../assets/imgs/logoPrefeitura.png'
 import triangles from '../../assets/imgs/trianglesSppo.svg'
+import logoBrt from '../../assets/imgs/light_logo.png'
+import trianglesBrt from '../../assets/imgs/triangles.svg'
 import { ThemeContext } from '../../hooks/getTheme'
 import styles from './styles.module.scss'
 export function Header() {
     const {theme} = useContext(ThemeContext)
     return (
-        <header>
-            <img className="absolute top-0 z-0 w-full " src={triangles} alt="" />
-            <div className="flex justify-end p-4">
-                <img src={logo} alt="" className={styles.logo} />
-            </div>
-        </header>
+        <>
+            {theme ? <header>
+                <img className="absolute top-0 z-0 w-full " src={triangles} alt="" />
+                <div className="flex justify-end p-4">
+                    <img src={logo} alt="" className={styles.logo} />
+                </div>
+            </header > :
+                <header>
+                    <img className="absolute top-0 z-0 w-full " src={trianglesBrt} alt="" />
+                    <div className="flex justify-end p-4">
+                        <img src={logoBrt} alt="" className={styles.logo} />
+                    </div>
+                </header>
+            }
+        </>
     )
 }
diff --git a/src/components/SequenceCard/SequenceCard.jsx b/src/components/SequenceCard/SequenceCard.jsx
@@ -27,10 +27,13 @@ export function SequenceCard() {
             <div className="fixed bottom-0 translate-x-1/2 right-1/2 w-11/12 z-[401]">
                 <div className={styles.sequenceCard}>
                     <div className='flex justify-end'>
-                    <button  onClick={() => clearMapInfo()}>
-                         <GrClose/>
-                    </button>
-                       </div>
+                        <button onClick={() => clearMapInfo()}>
+                            <GrClose />
+                        </button>
+                    </div>
+                    <div className={styles.directionBanner}>
+                        <p className='text-sm'>Dirija-se à <span className='font-bold'>porta direita</span> em Rio Centro</p>
+                    </div>
                     {!stopInfo ?
                         <div className='flex justify-center'>
                             <Oval
@@ -46,11 +49,9 @@ export function SequenceCard() {
                         </div>
                         :
                         <>
-                            <h1 className="text-xl font-semibold flex">
+                            <h1 className="text-xl font-semibold flex items-start">
                                 <div className={styles.routeHeader}>
-                                     {theme ? <img src={busSppo} alt="" /> :
-                                        <img src={bus} alt="" />
-                                    }
+                                    {theme ? <img src={busSppo} alt="" /> : <img src={bus} alt="" />}
                                     <p className='ml-2 font-semibold leading-none'>
                                         {stopInfo.trip_short_name}
                                     </p>
@@ -60,7 +61,7 @@ export function SequenceCard() {
 
                             <ul className={styles.timeline}>
                                 {sequenceInfo.map((e) => {
-                                    return <li key={e.id} className={`${styles.event} ${ e.stop_id.stop_id == stopId ? styles.active: ''}`} >
+                                    return <li key={e.id} className={`${styles.event} ${e.stop_id.stop_id == stopId ? styles.active : ''}`} >
                                         {e.stop_id.stop_name}
                                     </li>
                                 })}

diff --git a/src/hooks/getTheme.jsx b/src/hooks/getTheme.jsx
@@ -19,7 +19,7 @@ export function ThemeProvider({ children }) {
     useEffect(() => {
         api.get('/stop_times/?stop_id=' + stopId)
             .then(response => setRouteType(response.data.results[0].trip_id.route_id.route_type))
-    }, [code])
+    }, [stopId])
 
     const setBrt = () => {
         document.documentElement.setAttribute("data-theme", "brt");
@@ -30,14 +30,14 @@ export function ThemeProvider({ children }) {
     };
 
     useEffect(() => {
-        if (routeType != 702) {
+        if (routeType === 700 || routeType === 3) {
             setSppo();
             setTheme("sppo")
-        } else {
+        } else if (routeType === 702) {
             setBrt();
             setTheme("")
         }
-    }, [code])
+    }, [routeType])
 
     return (
         <ThemeContext.Provider value={{ theme }}>

diff --git a/src/pages/SearchMain.jsx b/src/pages/SearchMain.jsx
@@ -1,10 +1,11 @@
 import { Header } from '../components/HeaderSearch/Header'
 import qrCode from '../assets/imgs/qrCodeWhite.svg'
+import qrCodeBrt from '../assets/imgs/qrCode.svg'
 import { useState, useEffect, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useZxing } from "react-zxing";
 import { CodeContext } from '../hooks/getCode';
-import {toast } from 'react-toastify'
+import { ThemeContext } from '../hooks/getTheme';
 
 
 
@@ -13,6 +14,7 @@ export  function SearchMain() {
     const navigate = useNavigate()
     const [firstCode, setFirstCode] = useState("")
     const { active, setActive} = useContext(CodeContext)
+    const { theme } = useContext(ThemeContext)
     const { ref } = useZxing({
         onResult(result) {
             window.location.href = result;
@@ -35,7 +37,7 @@ export  function SearchMain() {
         <>
             <Header />
             <div className="px-4 mt-60 relative z-1">
-                <h1 className="text-xl text-center text-white mb-3">
+                <h1 className={theme ? 'text-xl text-center mb-3 text-white' : 'text-xl text-center mb-3 text-black'}>
                     Saiba quais linhas de ônibus passam nos pontos da cidade
                 </h1>
                 {/* Inputs */}
@@ -45,10 +47,17 @@ export  function SearchMain() {
                     </div>
                 </div>
                 {/* Inputs end */}
-                <button className="w-full rounded-lg bg-white uppercase py-3" onClick={() => setActive(true)}>
-                    <img className="inline-block mr-3" src={qrCode} alt="" />
-                    Usar qrcode
-                </button>
+                {theme ? 
+                    <button className="w-full rounded-lg bg-white uppercase py-3" onClick={() => setActive(true)}>
+                        <img className="inline-block mr-3" src={qrCode} alt="" />
+                        Usar qrcode
+                    </button>
+                    : <button className="w-full rounded-lg bg-black text-white uppercase py-3" onClick={() => setActive(true)}>
+                        <img className="inline-block mr-3" src={qrCodeBrt} alt="" />
+                        Usar qrcode
+                    </button>}
+
+
             </div>
 
             <video className={active ? 'mx-auto w-11/12 mt-5' : 'hidden'} ref={ref} />