change positions according width

src/Components/UserPageComponents/Cover.js

@@ -27,6 +27,8 @@ import ModalAlterarCover from '../ModalAlterarCover/ModalAlterarCover.js'
 export default function Cover (props) {
     const {state} = useContext(Store)
 
+    const WIDTH = window.innerWidth; 
+
     const [currentCover, setCoverImg] = useState(state.currentUser.cover_file_name)
     const [tempCover, setTempCover] = useState('')
 
@@ -55,11 +57,21 @@ export default function Cover (props) {
                 {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
                 <input accept="image/*" style = {{display:"none"}} id="choose-cover-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
                 <label htmlFor="choose-cover-file">
+                {
+                    WIDTH >= 545 ? 
+                    <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
+                        <IconButton style={{position:"absolute",right:"0",bottom: "0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+                            <PhotoCamera />
+                        </IconButton>
+                    </Tooltip> 
+                    : 
                     <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
-                        <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+                        <IconButton style={{position:"absolute",left:"0",top: "0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
                             <PhotoCamera />
                         </IconButton>
                     </Tooltip>
+                }
+                    
                 </label>
             </CoverContainer>
         </>