diff --git a/src/Components/Header.js b/src/Components/Header.js index 361645e47b00b59106bc9cdb4ad7db45a6568536..f423fca081ecdf213bd4c5895ca71f18e312f89a 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -32,57 +32,57 @@ import MuiAlert from '@material-ui/lab/Alert'; // boxShadow :none; //` function Alert(props) { - return <MuiAlert elevation={6} variant="filled" {...props} />; + return <MuiAlert elevation={6} variant="filled" {...props} />; } -export default function Header(props){ - const { state, dispatch } = useContext(Store) - const [signUpOpen, setSignUp] = useState(false) - const [loginOpen, setLogin] = useState(false) - const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) - const [modalColaborar, setModalColaborar] = useState(false) +export default function Header(props) { + const { state, dispatch } = useContext(Store) + const [signUpOpen, setSignUp] = useState(false) + const [loginOpen, setLogin] = useState(false) + const [successfulLoginOpen, handleSuccessfulLogin] = useState(false) + const [modalColaborar, setModalColaborar] = useState(false) - const toggleSnackbar = (event, reason) => { - if (reason === 'clickaway') { - return; - } + const toggleSnackbar = (event, reason) => { + if (reason === 'clickaway') { + return; + } - handleSuccessfulLogin(false); - } + handleSuccessfulLogin(false); + } - const handleSignUp = () => { - setSignUp(!signUpOpen) - } + const handleSignUp = () => { + setSignUp(!signUpOpen) + } - const handleLogin = () => { - setLogin(!loginOpen) - } + const handleLogin = () => { + setLogin(!loginOpen) + } - const handleClickSearch = (open) => { - dispatch({ - type: "HANDLE_SEARCH_BAR", - opened: !state.searchOpen - }) - } + const handleClickSearch = (open) => { + dispatch({ + type: "HANDLE_SEARCH_BAR", + opened: !state.searchOpen + }) + } - return( - <> - <AcessibilityBar/> - <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar} - anchorOrigin = {{ vertical:'top', horizontal:'center' }} - > - <Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert> - </Snackbar> - <MenuBar openSearchBar={handleClickSearch} openSignUp = {handleSignUp} openLogin = {handleLogin}/> - { state.searchOpen && - <SearchBar/> - } - <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}/> - <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} - openSnackbar={() => {handleSuccessfulLogin(true)}}/> - <ColaborarModal open={modalColaborar} handleClose={() => {setModalColaborar(!modalColaborar)}} /> + return ( + <> + <AcessibilityBar /> + <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleSnackbar} + anchorOrigin={{ vertical: 'top', horizontal: 'center' }} + > + <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert> + </Snackbar> + <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} /> + {state.searchOpen && + <SearchBar /> + } + <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin} /> + <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp} + openSnackbar={() => { handleSuccessfulLogin(true) }} /> + <ColaborarModal open={modalColaborar} handleClose={() => { setModalColaborar(!modalColaborar) }} /> - </> - ) + </> + ) } diff --git a/src/Components/SearchSection.js b/src/Components/SearchSection.js index c82035cc368fb52601ce32dc3ebb4cae30d5a9c5..aa88b181c811c7425a8ff6cfee5a224e069156c2 100644 --- a/src/Components/SearchSection.js +++ b/src/Components/SearchSection.js @@ -16,73 +16,74 @@ 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, {Component} from 'react'; +import React, { Component } from 'react'; import '../App.css'; import banner from '../img/bannerBusca.jpg'; // import SearchBar from './SearchBar'; -import {Row} from 'react-grid-system'; -import {MdInfoOutline} from "react-icons/md" -import { FaRegPlayCircle} from "react-icons/fa"; +import { Row } from 'react-grid-system'; +import { MdInfoOutline } from "react-icons/md" +import { FaRegPlayCircle } from "react-icons/fa"; -const bannerStyle={ - width: "100%", - backgroundImage: `url(${banner})`, - backgroundSize: "cover", - textAlign: "center" +const bannerStyle = { + width: "100%", + backgroundImage: `url(${banner})`, + backgroundSize: "cover", + textAlign: "center" } -const titleStyle={ - color: "white", - paddingTop: "5%" +const titleStyle = { + color: "white", + paddingTop: "5%" } -const buttonStyle={ - alignItems: "flex-start", - fontSize: "0.7em", - textAlign: "center", - cursor: "pointer", - borderTopLeftRadius: "15px", - borderTopRightRadius: "15px", - lineHeight: 1.42857143, - width: "20%", - marginTop: "1%", - color: "white", - padding: "1.2%", - borderWidth: "5%", - borderStyle: "none", - borderImage: "initial" +const buttonStyle = { + alignItems: "flex-start", + fontSize: "0.7em", + textAlign: "center", + cursor: "pointer", + borderTopLeftRadius: "15px", + borderTopRightRadius: "15px", + lineHeight: 1.42857143, + width: "20%", + marginTop: "1%", + color: "white", + padding: "1.2%", + borderWidth: "5%", + borderStyle: "none", + borderImage: "initial" } -class SearchSection extends Component{ - constructor(props){ - super(props); - this.state={ - color: "#ff7f00" - };} +class SearchSection extends Component { + constructor(props) { + super(props); + this.state = { + color: "#ff7f00" + }; + } - render(){ - return( - <div style={bannerStyle}> - <div style={titleStyle}> - <h2>Plataforma MEC de Recursos Educacionais Digitais</h2> - <h3 style={{fontWeight: "100"}}> - Encontre e compartilhe vÃdeos, animações e muitos outros Recursos - </h3> - </div> - {/* <Container style={{backgroundColor: "white" ,width: "50%" ,float: "center", alignItems: "center", borderRadius: "5px", color: this.state.color}}> + render() { + return ( + <div style={bannerStyle}> + <div style={titleStyle}> + <h2>Plataforma MEC de Recursos Educacionais Digitais</h2> + <h3 style={{ fontWeight: "100" }}> + Encontre e compartilhe vÃdeos, animações e muitos outros Recursos + </h3> + </div> + {/* <Container style={{backgroundColor: "white" ,width: "50%" ,float: "center", alignItems: "center", borderRadius: "5px", color: this.state.color}}> <SearchBar/> </Container> */} - <div style={{paddingBottom: "100px", color: "white"}}> - <a href="sobre" style={{color:"#fff",textDecoration: "none", outline:"none"}}><MdInfoOutline size="24px" style={{verticalAlign: "middle"}} />SOBRE A PLATAFORMA</a> - <a href="#apresentacao" style={{color:"#fff",textDecoration: "none"}}> <FaRegPlayCircle size="20px" style={{verticalAlign: "middle"}} />VÃDEO DE APRESENTAÇÃO</a> - </div> - <Row justify="center"> - <button style={{...buttonStyle, ...{backgroundColor: "#ff7f00",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Recursos")}}>Recursos Educacionais Digitais</button> - <button style={{...buttonStyle, ...{backgroundColor: "#e81f4f",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Materiais")}}>Materiais de Formação</button> - <button style={{...buttonStyle, ...{backgroundColor: "#673ab7",fontSize:"1.14em", outline:"none"}}} onClick={()=> {this.props.function("Colecoes")}}>Coleções dos Usuários</button> - </Row> - </div> - ); - } + <div style={{ paddingBottom: "100px", color: "white" }}> + <a href="sobre" style={{ color: "#fff", textDecoration: "none", outline: "none" }}><MdInfoOutline size="24px" style={{ verticalAlign: "middle" }} />SOBRE A PLATAFORMA</a> + <a href="#apresentacao" style={{ color: "#fff", textDecoration: "none" }}> <FaRegPlayCircle size="20px" style={{ verticalAlign: "middle" }} />VÃDEO DE APRESENTAÇÃO</a> + </div> + <Row justify="center"> + <button style={{ ...buttonStyle, ...{ backgroundColor: "#ff7f00", fontSize: "1.14em", outline: "none" } }} onClick={() => { this.props.function("Recursos") }}>Recursos Educacionais Digitais</button> + <button style={{ ...buttonStyle, ...{ backgroundColor: "#e81f4f", fontSize: "1.14em", outline: "none" } }} onClick={() => { this.props.function("Materiais") }}>Materiais de Formação</button> + <button style={{ ...buttonStyle, ...{ backgroundColor: "#673ab7", fontSize: "1.14em", outline: "none" } }} onClick={() => { this.props.function("Colecoes") }}>Coleções dos Usuários</button> + </Row> + </div> + ); + } } export default SearchSection;