# Pontos Extras MonkChat
## Site Monkchat REACT

* Aluno: Matheus Rafael Morato Rocha
* Número: 40
* Turma: InfoC


### src/components/cabecalho/index.js

import { Barra, ContainerCabecalho } from "./styled";

export default function Cabecalho() {
  return (
    <ContainerCabecalho>
      <div class="f1-logo">
        <img src="/assets/images/logo1 1.png" alt="" />
      </div>
      <Barra />
      <div class="f1-texto"> MonkChat</div>
    </ContainerCabecalho>
  );
}

### src/components/cabecalho/styled.js

import styled from "styled-components";

const Barra = styled.div`
  width: 4px;
  height: 3em;
  background-color: #ba9d4c;

  margin-left: 1rem;
  margin-right: 1rem;
  @media (max-width: 800px)
  {
    display: none;
  }
`;

const ContainerCabecalho = styled.div`
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  align-items: center;

  .f1-texto {
    font: 700 2.2em Montserrat;
  }

  @media (max-width: 800px)
  {
    display: flex;
    flex-direction: column;
    .f1-texto {
        margin-top: 0.5rem;
        font-size: 2.5rem;
    }
  }
`

export { Barra, ContainerCabecalho };

### pages/monkchat/index.js

import { Container,ContainerConteudo,Botao,ChatInput,ChatTextarea } from "./styled";

import Cabecalho from "../../componentes/cabecalho";

export default function MonkChat() {
  return (
    <Container>
      <Cabecalho />
      <ContainerConteudo>
          <div class="f1-boxes">
              <div class="f1-box">
                  <div class="f1-info">
                      <div class="f1-sala">
                          <h1>Sala:</h1>
                          <div class="sala"><ChatInput/></div>
                      </div>

                      <div class="f1-nick">
                          <h1>Nick:</h1>
                          <div class="nick"><ChatInput/></div>
                      </div>

                      <div class="f1-botao">
                          <Botao>Criar</Botao>
                          <Botao>Entrar</Botao>
                      </div>
                  </div>
              </div>
              <div class="f1-box2">
                  <div class="f1-texto2">Mensagem:</div>
                  <div class="f1-batepapo">
                      <ChatTextarea/>
                  </div>
                  <div class="f1-botao2">
                  <Botao>Enviar</Botao>
                  </div>
              </div>    
          </div>
          <div class="f1-batepapos">    
                <div class="f1-reload"><img src="../../assets/images/Group 1.png" /></div>
                <div class="f1-conversas">    
                    <div class="f1-bate">
                        <div class="f1-papo1">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:03:25) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                        <div class="f1-papo">(15:02:01) <span>Bruno</span> entrou na sala...</div>
                    </div>    
                </div>
    
          </div>
      </ContainerConteudo>

    </Container>
  );
}

### pages/monkchat/styled.js

import styled from "styled-components";

const Container = styled.div`
    display: flex;
    flex-direction: column;

    background: #58388F;
    color: #fff;
    padding: 1em 5em 1.5em 3.5em;

    font-family: Montserrat;
    min-height: 20vh;
    min-width: 500px;

    @media (max-width: 800px)
    {
      justify-content: center;
      flex-direction: column;
      display: flex;
      align-content: center;
      align-items: center;
    }
    `

const ContainerConteudo = styled.div`
      display: flex;
      flex-direction: row;
      background: rgba(0,0,0,0.12);

      padding: 2em 6em;

    .f1-info {
      display: flex;
      flex-direction: column;
    }

    .f1-sala,.f1-nick {
      display: flex;
      flex-direction: row;
      align-items: center;
      color: white;
      font-family: Montserrat;
      font-size: 10px;
    }
    .f1-botao {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 4.5rem;
      margin-top: 0.5rem;
      border: 1rem;
  }
    .f1-sala {
      margin-bottom: 0.4rem;
    }

    .f1-nick h1 {
      margin-right: -0.3rem;
    }
    .f1-batepapo input {
      background-color: white;
      width: 220px;
      height: 200px;
      border: none;  
      border-radius: 5px;
      font-family: Montserrat;
      outline: none;
      margin: 0px;
    }  
    .f1-batepapos {
      margin-top: -3rem;
    }
    .f1-texto2 {
      color: white;
      font-family: Montserrat;
      font-size: 19px;
      margin-bottom: 1rem;
    }

    .f1-botao2 {
      margin-left: 9rem;
      margin-top: 0.8rem;
    }

    html, body {
      overflow: hidden;
      overflow-y: hidden;
    }

    .f1-box2 {
      display: flex;
      flex-direction: column;
      margin-top: 4.5rem;
      margin-bottom: 1.5rem;
    }
    .f1-conversas {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      background: rgba(192, 65, 224, 0.19);
      border-radius: 3px;
      width: 750px;
      height: 440px;
      margin-left: 2rem;
      margin-top: 1.5rem;
    }
    .f1-texto2 {
      font-weight: bold;
    }
    span {
      font-family: Montserrat ;
      font-size: 1rem;
      color: white;
      font-weight: bold;
      margin-left: 0.3rem;
      margin-right: 0.3rem;
    }

    .f1-papo {
      font-family: Montserrat;
      font-size: 1rem;
      flex-direction:row ;
      display: flex;
      color: white;
      margin-top: 1rem;
    }

    .f1-papo1 {
      font-family: Montserrat ;
      font-size: 1rem;
      flex-direction:row ;
      display: flex;
      color: white;
      margin-top: rem;
    }

    .f1-bate {
      margin-top: 2rem;
      margin-left: 2rem;
      overflow-y: auto;
    }

    .f1-bate::-webkit-scrollbar-track
    {
      border-radius: 10px;
      background-color: #3E006F;
    }

    .f1-bate::-webkit-scrollbar
    {
      width: 7.5px;
      border-radius: 10px;
      background-color: #3E006F;
    }

    .f1-bate::-webkit-scrollbar-thumb
    {
      border-radius: 10px;
      background-color: white;
    }

    .f1-reload img {
        margin-left: 47rem;
        align-content: center;
        margin-bottom: -1.5rem;
        align-items: center;
        margin-top: 1.5rem;
        cursor: pointer;
    }

    @media (max-width: 800px)
    {
          flex-direction: column;
          display: flex;
          align-content: center;
          align-items: center;
          justify-content: center;
          padding-bottom: 2rem;

      .f1-texto2 {
          margin-left: 4rem;
      }

      html, body {
          overflow: auto;
          overflow-y: auto;
      }
      .text textarea  {
          flex-direction: column;
          display: flex;
          align-content: center;
          align-items: center;
          justify-content: center;
          margin-left: 0.5rem;
          margin-right: 0rem;
      }

      .f1-conversas {
          display: flex;
          flex-direction: column;
          background: rgba(192, 65, 224, 0.19);
          border-radius: 3px;
          width: 410px;
          height: 250px;
          justify-content: center;
          align-content: center;
          margin-left: 0.2rem;
      }

      .f1-bate {
          margin-top: 0rem; 
          margin-left: 0rem; 
          overflow-y: auto;
      }
      .f1-boxes {
          margin-left: 0rem;
          margin-top: 3rem;
      }

      .f1-box2 {
          margin-top: 3rem;
      }

      .f1-texto2 {
          margin-left: 0px;
      }

      .f1-botao {
          flex-direction: column;
          display: flex;
          justify-content: center;
          margin-left: 0rem;
      }

      .f1-sala, .f1-nick {
          display: flex;
          flex-direction: row;
          align-items: center;
          color: white;
          font-family: Bold;
          font-size: 10px;
          margin-left: 0rem;
      }

      .f1-botao2  {
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: center;
          margin-left: 0px;
          margin-top: -1rem;
      }
      .f1-bate::-webkit-scrollbar-track
      {
      border-radius: 10px;
      background-color: #3E006F;
      display: none;
      }

      .f1-papo {
          text-align: justify;
          margin-top: 0.8rem;
          margin-left: 1rem;
      }

      .oi {
          margin-bottom: -1rem;
      }

      .f1-papo1 {
          margin-top: 0.8rem;
          margin-left: 1rem;
      }
      h1 {
        font-family: Montserrat;
      }
      .f1-reload img {
          margin-left: 24.3rem;
          align-content: center;
          align-items: center;
          margin-top: 5rem;
          cursor: pointer;
          margin-bottom: rem;
      }

      .f1-batepapos {
          flex-direction: column;
          display: flex;
      }
  }
`

const Botao = styled.button`
      background-color: #50B4BF;
      color: white;
      border-radius: 20px;
      border: none;
      font-size: 0.8rem;
      font-family: Montserrat;
      margin-left: 0.2rem;
      margin-right: 0.2rem;
      padding-left: 1.1rem;
      margin-top: 1rem;
      padding-right: 1.1rem;
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      cursor: pointer;

      &:hover {
          background-color: #93f1fc;
          transition: 0.5ms;
      }

      @media (max-width: 800px)
      {
          border-radius: 5px;
          margin-left: 0rem;
          margin-right: 0rem;
          padding-left: 1.1rem;
          padding-right: 1.1rem;
          padding-top: 0.6rem;
          padding-bottom: 0.6rem;
          font-size: 1rem;
          height: auto;
          width: 407px;
      }
`

const ChatInput = styled.input`
    background-color: white;
    width: 160px;
    height: 25px;
    border: none;  
    border-radius: 5px;
    font-family: Montserrat;
    outline: none;
    margin-left: 1rem;

    @media (max-width: 800px)
    {
        background-color: white;
        width: 335px;
        height: 35px;
        border: none;  
        border-radius: 5px;
        font-family: Montserrat;
        outline: none;
        margin-left: 1rem;
    }
`


const ChatTextarea = styled.textarea`
    background-color: white;
    border: none;  
    resize: none;
    border-radius: 5px;
    font-family: Montserrat;
    outline: none;
    height: 12em;
    width: 17em;
    margin: .5em 0em;


    @media (max-width: 800px)
    { 
        flex-direction: column;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        height: 20em;
        width: 30em;
    }
`


export { Container,ContainerConteudo,Botao,ChatInput,ChatTextarea }

### index.css

body {
  margin: o;
}

* {
  box-sizing: border-box;
  margin: 0px;
}

### index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import Routes from "./routes";

ReactDOM.render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
  document.getElementById("root")
);

### routes.js

import { BrowserRouter, Switch, Route } from 'react-router-dom'

import MonkChat from './pages/monkchat'

export default function Routes () {
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/" exact={ true } component={ MonkChat } />
        </Switch>    
      </BrowserRouter>      
        
    )
}