Aligned icon and text in buttom sec1

src/Components/Modal.js

@@ -22,7 +22,7 @@ import Modal from '@material-ui/core/Modal';
 import { Carousel } from 'react-responsive-carousel';
 import Backdrop from '@material-ui/core/Backdrop';
 import Fade from '@material-ui/core/Fade';
-import VisibilityIcon from '@material-ui/icons/Visibility';
+import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 
@@ -90,7 +90,7 @@ export default function TransitionsModal() {
   return (
     <div style={{display:"flex", justifyContent: "center"}}>
       <button style = {{background: "none",border: "none", color:"#fff",verticalAlign:"center"}}   type="button" onClick={handleOpen}>
-        <VisibilityIcon/> VEJA A VERSÃO RESUMIDA
+        <VisibilityOutlinedIcon style={{verticalAlign:"middle"}}/> <spam style={{verticalAlign: "middle"}}>VEJA A VERSÃO RESUMIDA</spam>
       </button>
       <Modal
         aria-labelledby="transition-modal-title"

src/Pages/UserTerms.js

@@ -85,7 +85,7 @@ class UserTerms extends Component {
         <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet"/>
 
           <div style = {bannerStyle}>
-            <h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"9rem",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
+            <h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2>
             <Modal/>
           </div>