diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css index ac0fb515a53fb80ccc6a0ff3487a31acfcd8b7e5..059d5938680078875434cee03977aee3bdf1482d 100644 --- a/src/Components/Acessibility/ContrastBar.css +++ b/src/Components/Acessibility/ContrastBar.css @@ -18,50 +18,62 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> .contrastButton{ - border: none; - padding: 0; - background: none; - background-color: white; + border: none; + padding: 0; + background: none; + background-color: white; } .contrastButton:active { - border: none; - padding: 0; - background: none; - background-color: white; + border: none; + padding: 0; + background: none; + background-color: white; } .bar{ - background-color: white; - width: 100%; - height: 18px; + background-color: white; + width: 100%; + height: 18px; + border-bottom: 1px solid #666; } .Contrastbar{ - background-color: black; - width: 100%; - height: 18px; - border-bottom: 1px solid white; + background-color: black; + width: 100%; + height: 18px; + border-bottom: 1px solid white; } .Contrasttext{ - color: yellow; - text-decoration: underline; - cursor: pointer; - width: 140px; - font-size: 13px; - padding-left: 10px; - padding-right: 10px; - text-align: center; - vertical-align: middle; + color: yellow; + text-decoration: underline; + cursor: pointer; + width: 140px; + font-size: 13px; + padding-left: 10px; + padding-right: 10px; + text-align: center; + vertical-align: middle; } +.text{ + color: #666; + cursor: pointer; + width: 140px; + font-size: 13px; + padding-left: 10px; + padding-right: 10px; + text-align: center; + vertical-align: middle; + } + .textRight { - float:right; - height:100%; - display: flex; - font-size: 13px; + float:right; + height:100%; + display: flex; + font-size: 13px; } .textLeft { - float:left; - height:100%; - font-size: 13px; + float:left; + height:100%; + font-size: 13px; } \ No newline at end of file diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js index 7ee0adc8d723138a5429cacedc2fc199cc80b546..8aac1361f186d2c997b2ce4be288181de9ba9ba6 100644 --- a/src/Components/Acessibility/ContrastBar.js +++ b/src/Components/Acessibility/ContrastBar.js @@ -16,7 +16,7 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React from 'react'; +import React, { useEffect } from 'react'; import './ContrastBar.css'; import ContrastImageOn from '../../img/OnContrastIcon.png'; import ContrastImageOff from '../../img/OffContrastIcon.png'; @@ -31,18 +31,22 @@ function ContrastBar() { // Hook to set contrast context const { state, dispatch } = React.useContext(Store); + useEffect(() => { + setContrastAction(''); + }, []); + const setContrastAction = (newContrast) => { localStorage.setItem('@portalmec/contrast', newContrast) return dispatch({ - type: 'SET_CONTRAST', - payload: newContrast + type: 'SET_CONTRAST', + payload: newContrast }) } const setFontSizeAction = (newFontSize) => { return dispatch({ - type: 'SET_FONT_SIZE', - payload: newFontSize + type: 'SET_FONT_SIZE', + payload: newFontSize }) } @@ -68,39 +72,38 @@ function ContrastBar() { return ( <React.Fragment> - <div className={`${state.contrast}bar`}> - <div className='textLeft hide-on-small-and-down'> - <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1"> - Conteúdo 1 - </a> - <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2"> - Menu 2 - </a> - <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3"> - Rodapé 3 - </a> - </div> - <div className='textRight'> - <div> - <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte"> - A+ - </a> - <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte"> - A- - </a> - <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte"> - A - </a> - </div> - <div onClick={toggleContrast}> - <a className={`${state.contrast}text`} title="Ativar modo de alto contraste"> - <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" /> - Contraste - </a> - </div> - + <div className={`${state.contrast}bar`}> + <div className='textLeft hide-on-small-and-down'> + <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1"> + Conteúdo 1 + </a> + <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2"> + Menu 2 + </a> + <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3"> + Rodapé 3 + </a> + </div> + <div className='textRight'> + <div> + <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte"> + A+ + </a> + <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte"> + A- + </a> + <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte"> + A + </a> + </div> + <div onClick={toggleContrast}> + <a className={`${state.contrast}text`} title="Ativar modo de alto contraste"> + <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" /> + Contraste + </a> + </div> + </div> </div> - </div> </React.Fragment> );