Following the screenshot below I'm trying to move the cursor through the string which I have no idea how to do.
I'm trying to achieve the effect of an old-phone UI. I'm already managed to make it blink.
I'm using ReactJs and styled-components. Follow the code below:
import console from 'console';
import { useContext, useEffect, useState } from 'react'
import { PhonewordsContext } from '../../PhonewordsContext';
import { Container, Keyboard, Screen, Cursor } from './styles'
export function Phone() {
const { getWords } = useContext(PhonewordsContext);
const [number, setNumber] = useState<string>('');
const [position, setPosition] = useState<number>(0);
useEffect(() => {
getWords(number)
},[number]); // #todo: warning
function onBtnClicked(char: string) {
// in case is not in the end of string add substring in the index
if (position !== number.length){
setNumber(number.slice(0, position) + char + number.slice(position))
} else {
setNumber(`${number}${char}`)
}
setPosition(position +1)
}
function onRemoveChar() {// #todo: how remove words box when empty. re-render?
const rightPosition = position - 1
if (position > 0) {
// concatenate slices of the string before and after the current index
setNumber(number.slice(0, rightPosition) + number.slice(rightPosition + 1))
setPosition(position -1)
}
}
function onUpClicked() {
// position never be negative
if (position > 0)setPosition(position - 1)
}
function onDownClicked() {
// check for max position
if (position < number.length) setPosition(position + 1)
}
return (
<Container>
<Screen>
{/* MOVE CURSOR */}
<span>
{number.split('').map(i =>
alert(`here ${i}`)
)}
</span>
<Cursor />
{number}
</Screen>
{position}
<Keyboard>
<button onClick={() => onUpClicked()}>⬆</button>
<button onClick={() => onDownClicked()}>⬇</button>
<button onClick={() => onRemoveChar()}>⌫</button>
<button disabled>1</button>
<button onClick={() => onBtnClicked('2')}>2 abc</button>
<button onClick={() => onBtnClicked('3')}>3 def</button>
<button onClick={() => onBtnClicked('4')}>4 ghi</button>
<button onClick={() => onBtnClicked('5')}>5 jkl</button>
<button onClick={() => onBtnClicked('6')}>6 mno</button>
<button onClick={() => onBtnClicked('7')}>7 pqrs</button>
<button onClick={() => onBtnClicked('8')}>8 tuv</button>
<button onClick={() => onBtnClicked('9')}>9 wxyz</button>
<button disabled>*</button>
<button disabled>0 ⌴</button>
<button disabled>#</button>
</Keyboard>
</Container>
)
}
and the css file using styled-components:
import styled from "styled-components"
export const Container = styled.div`
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
`
export const Screen = styled.div`
padding: 1rem 2rem;
border: 0;
border-radius: 0.25rem;
background: var(--white);
width: 15rem;
height: 8rem;
`
export const Keyboard = styled.div`
display: grid;
padding: 2rem 0;
grid-template-columns: repeat(3, 64px);
grid-template-rows: 32px repeat(4, 64px);
gap: 8px;
button {
border-radius: 0.25rem;
border: 0;
box-shadow: #777 2px 1px 10px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
transition: 0.4s;
&:active {
box-shadow: 2px 2px 2px #777;
transform: translateY(3px);
}
}
`
export const Cursor = styled.span`
animation: blink 1.5s linear infinite alternate;
border-color: #333;
border-left: 1px solid;
margin-left: -1px;
#keyframes blink {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
`
Thanks for any help!
You should substring number based Cursor position.
if (position == 0)
<Cursor /> {number}
else if(position > 0)
{number.substring(0, position)} <Cursor /> {number.substring(position + 1, number.length)}
like this.
<Screen>
{/* MOVE CURSOR */
<span>{number.slice(0, position)} <Cursor /> {number.slice(position)}</span>
</Screen>
Managed to implement it using the solution above!
Related
I've created a horizontal carousel element myself for use in a React application. I want the currently active card in the carousel to be centered in the center of the viewport so that this implementation works responsively for any device.
import React, { useState } from "react";
import styles from "./styles.module.scss";
const data = [
{
name: "1"
},
{
name: "2"
},
{
name: "3"
}
];
const Testimonial: React.FC = (): JSX.Element => {
const [activeIndex, setActiveIndex] = useState(0);
const determinePlacement = (): number => {
const width = 260;
const startingOffset =
(Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
) -
width) /
2;
if (activeIndex === 0) return startingOffset;
return -(activeIndex * width) + startingOffset;
};
const isActive = (i: number): null | string => {
return activeIndex === i ? styles.active : null;
};
return (
<>
<div className={styles.container}>
<div
className={styles["card-wrapper"]}
style={{ transform: `translateX(${determinePlacement()}px)` }}
>
{data.map((card, i) => {
return (
<div
onClick={(): void => setActiveIndex(i)}
className={styles.card}
key={i}
>
{`Card ${i + 1}`}
</div>
);
})}
</div>
</div>
<div className={styles["circles-wrapper"]}>
{data.map((_, i) => {
return (
<div
key={i}
onClick={(): void => setActiveIndex(i)}
className={[styles.circles, isActive(i)].join(" ")}
/>
);
})}
</div>
</>
);
};
export default Testimonial;
$cardWidth: 260px;
.circles-wrapper {
display: flex;
justify-content: center;
margin-top: 24px;
.circles {
width: 16px;
height: 16px;
border-radius: 16px;
background-color: hsla(207, 73%, 95%, 1);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
margin-right: 8px;
transition: all 0.5s ease;
&.active {
background-color: hsla(207, 73%, 57%, 1);
}
}
}
.container {
display: flex;
position: relative;
flex-direction: column;
margin-top: 32px;
margin-bottom: 32px;
.card-wrapper {
display: flex;
transition: all 1s ease;
.card {
display: flex;
flex-direction: column;
width: $cardWidth;
height: 100%;
background-color: hsla(207, 73%, 95%, 1);
border-radius: 20px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
padding: 32px;
margin: 0 10px;
}
}
}
I can't quite figure out why when I re-create this implementation, simplified in a code sandbox (you can view it here https://codesandbox.io/s/currying-wind-krgx7k?file=/src/app.tsx), the elements correctly center in the middle of the viewport but when I run this app locally in dev tools (f12) on mobile devices the spacing is wrong and the elements end up too far to the right?
I'm assuming this has something to do with a lack of understanding on my part about how document.documentElement.clientWidth and window.innerWidth work or something to do with viewport widths. Can anyone enlighten me here please?
Edit: turns out the codesandbox example I provided also doesn't work as expected and I'm imagining things.
So question is: how do you reliably center the active carousel card for any viewport?
For those interested, I figured out how to solve this and included a codesandbox below with a working solution.
https://codesandbox.io/s/zen-parm-e5yyn9?file=/src/App.js&resolutionWidth=1024&resolutionHeight=765
In the end, I decided trying to calculate the viewport width and the gap between the start of the viewport and the card was the wrong approach.
I used CSS flex to center a wrapper container for all cards (or boxes, in latest example) which would then be transformed on the x-axis. You need to remember to account for things like margin between elements.
The solution is far simpler, cleaner and works responsively now.
THE PHOTO BELOW SHOWS WHAT I WANT TO ACHIEVE. Basically I have a component where when I hover some arrows (up and down) appears but when the user click those arrows the background color changes, but just on the click itself. and the background color does not remain clicked. I tried to achieve that with a setTimeout on the click event. I can let the timer work on the click but the clearTimeout is not working. Any clues? the code is also below (after the photo).
THIS IS MY CODE:
//rafce
import React, { useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowUp, IoIosArrowDown } from 'react-icons/io';
const DurationIntervalComponent = () => {
const [hours, setHours] = useState('0');
const [showHoursArrows, setShowHourArrows] = useState(false);
const [arrowActiveUp, setArrowActiveUp] = useState(false);
const [arrowActiveDown, setArrowActiveDown] = useState(false);
const incrementHours = (value) => {
let timer = setTimeout(() => setArrowActiveUp(true), 500);
clearTimeout(timer, 1000)
setHours((prevHours) => {
// if there is nothing
if (!prevHours) {
return '0';
} else if (+prevHours >= 24) {
return '0';
} else {
return String(+prevHours + 1);
}
});
};
const decrementHours = (value) => {
setArrowActiveDown(true);
setHours((prevHours) => {
// if there is nothing
if (!prevHours) {
return '0';
} else if (+prevHours <= 0) {
return '24';
} else {
return String(+prevHours - 1);
}
});
};
return (
<Container>
<Row>
<p> Interval* </p>
<Inputs>
<Selection
onMouseEnter={() => setShowHourArrows(true)}
onMouseLeave={() => setShowHourArrows(false)}
>
{showHoursArrows && (
<p
className="icon"
onClick={incrementHours}
style={
arrowActiveUp
? { backgroundColor: 'red' }
: { backgroundColor: 'none' }
}
>
<IoIosArrowUp />
</p>
)}
<SquareInput value={hours} />
<p>hours</p>
{showHoursArrows && (
<p className="icon" onClick={decrementHours}>
<IoIosArrowDown />
</p>
)}
</Selection>
<div>
<SquareInput />
<p>minutes</p>
</div>
</Inputs>
</Row>
<hr />
<Row>
<p> Duration* </p>
<Inputs>
<SquareInput />
<p>:</p>
<SquareInput />
<p>to</p>
<SquareInput />
<p>:</p>
<SquareInput />
</Inputs>
</Row>
</Container>
);
};
const Container = styled.div`
border: 1px solid #c5c5c5;
border-radius: 15px;
`;
const Row = styled.div`
display: flex;
align-items: center;
height: 150px;
justify-content: space-between;
padding: 20px;
`;
const Inputs = styled.div`
display: flex;
align-items: center;
p {
margin-right: 5px;
font-size: 0.8em;
text-align: center;
}
`;
const Selection = styled.div`
.icon {
font-size: 1.2em;
padding: 0;
}
`;
const SquareInput = styled.input`
width: 50px;
height: 50px;
border: 1px solid #c5c5c5;
border-radius: 10px;
outline: none;
margin-right: 5px;
font-size: 1.5em;
text-align: center;
`;
export default DurationIntervalComponent;
I am currently building a React project, so I made a search Input and when I type something in that Input field my hole component re-renders causing an API recall and deleting the text in my Input. I tried merging both the search component with Home component and the same problem appears.
I want my component to call the api only one time, and I am trying to filter the response depending on the input type.
please help!!
Here is my Home component:
import { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import CountryThumb from '../Components/CountryThumb';
import ThemeContext from '../Components/ColorPalette';
import { Themes } from '../Components/ColorPalette';
import Search from '../Components/Search';
import Filter from '../Components/Filter';
const Grid = styled.main`
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 60px;
row-gap: 40px;
#media (max-width: 375px) {
grid-template-columns: repeat(1, 1fr);
}
`;
export default function Home() {
const [Countries, setCountries] = useState([]);
const [SearchTerms, setSearchTerms] = useState('');
const { Theme } = useContext(ThemeContext);
const style = Theme == 'light' ? Themes.light : Themes.dark;
useEffect(() => {
getCountries();
}, []);
const Main = styled.main`
display: flex;
flex-wrap: wrap;
padding: 20px 100px;
background-color: ${Theme == 'light' ? style.background : style.background};
#media (max-width: 375px) {
padding: 40px 25px;
}
`;
const getCountries = () => {
axios
.get('https://restcountries.eu/rest/v2/all')
.then((res) => setCountries(res.data))
.catch((err) => console.log(err));
};
return (
<>
<Main>
<Search handleSearch={(e) => setSearchTerms(e.target.value)} />
<Filter />
<Grid>
{Countries.slice(0, 12)
.filter((e) => {
if (SearchTerms == '') {
return e;
} else if (
e.name.toLowerCase().includes(SearchTerms.toLowerCase())
) {
return e;
}
})
.map((e) => (
<CountryThumb props={e} />
))}
</Grid>
</Main>
</>
);
}
And here is my Search component:
import { useContext, useState } from 'react';
import styled from 'styled-components';
import ThemeContext, { Themes } from './ColorPalette';
function Search({ handleSearch }) {
const { Theme } = useContext(ThemeContext);
const style = Theme == 'light' ? Themes.light : Themes.dark;
const Svg = styled.svg`
width: 24px;
height: 24px;
color: ${style.text};
`;
const Wrapper = styled.div`
background-color: ${style.element};
border-radius: 5px;
box-shadow: 0 5px 10px ${style.shadow};
display: flex;
align-items: center;
padding: 0 20px;
margin: 40px 0;
`;
const CInput = styled.input`
border: none;
outline: none;
padding: 15px 120px 15px 20px;
font-size: 1rem;
color: ${style.text};
background: none;
`;
return (
<>
<Wrapper>
<Svg
xmlns='http://www.w3.org/2000/svg'
class='h-6 w-6'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
/>
</Svg>
<CInput
type='text'
name='Search'
onInput={handleSearch}
placeholder='Search for a country ...'
/>
</Wrapper>
</>
);
}
export default Search;
Whenever you change anything in state your component will rerender so it is normal behaviour. However you have dependency array in useEffect that calls api so this function should run only one time, maybe you didnt have array before and forgot to save.
Given :
function App() {
const [xPos, setXPos ] = React.useState(0);
const [style, setStyle] = React.useState({transform: `translateX(${xPos}px)`});
const onClick =(direction) => {
(direction === "left") ? setXPos(x => x-100) : setXPos(x => x +100);
setStyle({transform: `translateX(${xPos}px)`});
console.log(xPos)
}
return (
<div className="main_container">
<button className="left_button" onClick={() => onClick("left")}>slide left</button>
<div className="forecast_slider" >
<div className="forecast_container" style={style} >
{forecastBuilder()}
</div>
</div>
<button className="right_button" onClick={() => onClick("right")}>slide right</button>
</div>
)
}
const forecastBuilder = () => {
const cell = [];
for(var i = 1 ; i < 8 ; i++){
cell.push(
<div className={i}>
{i}
<img src="https://imgs.michaels.com/MAM/assets/1/5E3C12034D34434F8A9BAAFDDF0F8E1B/img/0E9397ED92304202B4A25D7387A74515/M10118706_2.jpg" width="100" height="80" border="1px solid black" />
<br></br>
<span>day {i}</span>
</div>
)
}
return cell;
}
ReactDOM.render(<App />, document.querySelector("#app"));
.main_container {
display:flex;
}
.forecast_container {
display: flex;
width: 510px;
height: 130px;
margin-left: auto;
margin-right: auto;
align-items: center;
text-align: center;
transition: transform 250ms;
}
.forecast_slider {
background-color: black;
color: white;
overflow:hidden;
float:right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
with JSFiddle link here ,
I want to make the translateX() animation increment and decrement normally. Currently, I have to click twice a button to change the direction. I have no clue why this is happening. I tried setting the initial style's transform parameter to 0px. I haven't tried other things since honestly, I am short of ideas, this bug is beyond my understanding of React.
Does anyone have any idea how I could solve this?
The problem is you try to use the updated xPos state in your onClick handler right after you "updated" it: setStyle({transform: `translateX(${xPos}px)`})
Don't forget that useState is asynchronous just like setState in class components. You can't update the state on one line and assume it's already changed on the next one. You'll likely use the unchanged state.
Create a new variable and update both states using that one:
function App() {
const [xPos, setXPos] = React.useState(0);
const [style, setStyle] = React.useState({
transform: `translateX(${xPos}px)`,
});
const onClick = (direction) => {
let x = direction === 'left' ? xPos - 100 : xPos + 100
setXPos(x)
setStyle({ transform: `translateX(${x}px)` });
console.log(xPos);
};
return (
<div className="main_container">
<button className="left_button" onClick={() => onClick('left')}>
slide left
</button>
<div className="forecast_slider">
<div className="forecast_container" style={style}>
{forecastBuilder()}
</div>
</div>
<button className="right_button" onClick={() => onClick('right')}>
slide right
</button>
</div>
);
}
const forecastBuilder = () => {
const cell = [];
for (var i = 1; i < 8; i++) {
cell.push(
<div className={i}>
{i}
<img
src="https://imgs.michaels.com/MAM/assets/1/5E3C12034D34434F8A9BAAFDDF0F8E1B/img/0E9397ED92304202B4A25D7387A74515/M10118706_2.jpg"
width="100"
height="80"
border="1px solid black"
/>
<br></br>
<span>day {i}</span>
</div>
);
}
return cell;
};
ReactDOM.render(<App />, document.querySelector('#app'));
.main_container {
display: flex;
}
.forecast_container {
display: flex;
width: 510px;
height: 130px;
margin-left: auto;
margin-right: auto;
align-items: center;
text-align: center;
transition: transform 250ms;
}
.forecast_slider {
background-color: black;
color: white;
overflow: hidden;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Also, you could simply get rid of the useStyles hook as it's just some extra fluff around xPos:
function App() {
const [xPos, setXPos] = React.useState(0);
return (
<div className="main_container">
<button className="left_button" onClick={() => setXPos(xPos - 100)}>
slide left
</button>
<div className="forecast_slider">
<div className="forecast_container" style={{ transform: `translateX(${xPos}px)` }}>
{forecastBuilder()}
</div>
</div>
<button className="right_button" onClick={() => setXPos(xPos + 100)}>
slide right
</button>
</div>
);
}
const forecastBuilder = () => {
const cell = [];
for (var i = 1; i < 8; i++) {
cell.push(
<div className={i}>
{i}
<img
src="https://imgs.michaels.com/MAM/assets/1/5E3C12034D34434F8A9BAAFDDF0F8E1B/img/0E9397ED92304202B4A25D7387A74515/M10118706_2.jpg"
width="100"
height="80"
border="1px solid black"
/>
<br></br>
<span>day {i}</span>
</div>
);
}
return cell;
};
ReactDOM.render(<App />, document.querySelector('#app'));
.main_container {
display: flex;
}
.forecast_container {
display: flex;
width: 510px;
height: 130px;
margin-left: auto;
margin-right: auto;
align-items: center;
text-align: center;
transition: transform 250ms;
}
.forecast_slider {
background-color: black;
color: white;
overflow: hidden;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Answer was found.
Setting a state is not synchronous and there is no reason to store style in an additional state hook since it's just one parameter and can be passed in the render function imemdiately.
const [xPos, setXPos ] = React.useState(0);
const onClick =(direction) => {
(direction === "left") ? setXPos(x => x-100) : setXPos(x => x +100);
}
return (
<div className="main_container">
<button className="left_button" onClick={() => onClick("left")}>slide left</button>
<div className="forecast_slider" >
<div className="forecast_container" style={{transform : `translateX(${xPos}px)`}} >
{forecastBuilder()}
</div>
</div>
<button className="right_button" onClick={() => onClick("right")}>slide right</button>
</div>
)
fixes the problem.
I am using a js library react-dropzone to allow users to drag and drop files.
The user can click a button to open an overlay to drag and drop files, but I also want the ability to allow the user to drag onto the window to then display the window.
At the moment, this does not work as it does not recognise the onDragOver event listener as currently the overlay is set to display: none so there is no inherited height so I'm dragging onto the screen but to the overlay as it's currently got a height and width of 0.
Here is my UploadOverlay component using react-dropzone
import React, { useCallback, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "./UploadOverlay.scss";
import CloseIcon from "./CloseIcon";
import UploadIcon from "./UploadIcon";
import Dropzone from "react-dropzone";
import axios from "axios";
const UploadOverlay = props => {
const [dragEnter, setDragEnter] = useState(false);
const [active, setActive] = useState(props.active);
const MODAL_OPEN_CLASS = "UploadOverlay--Open";
const config = {
onUploadProgress: progressEvent => {
let progress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
if (progress === 100) {
props.onClose();
}
}
};
const onDrop = useCallback(acceptedFiles => {
setDragEnter(false);
if (acceptedFiles.length === 0) {
props.onClose();
} else {
var formData = new FormData();
formData.append("file", acceptedFiles[0]);
//handle 500 errors.
axios
.post("/api/website-user/avatar", formData, config)
.then(response => {
props.onSuccess(response);
});
}
}, []);
useEffect(() => {
if (props.active) {
window.scroll({
top: 0,
left: 0,
behavior: "smooth"
});
document.body.classList.add(MODAL_OPEN_CLASS);
} else {
document.body.classList.remove(MODAL_OPEN_CLASS);
}
setActive(props.active);
}, [props]);
const onDragEnter = () => {
setDragEnter(true);
};
const handleDropzoneClick = event => {};
const handleCloseClick = event => {
event.stopPropagation();
props.onClose();
};
const content = (
<Dropzone
accept="image/jpeg, image/png"
onDrop={onDrop}
onDragEnter={onDragEnter}
onDragOver={() => {
document.body.classList.add(MODAL_OPEN_CLASS);
setActive(true);
}}
onDragLeave={() => {
document.body.classList.remove(MODAL_OPEN_CLASS);
setActive(false);
}}
>
{({ getRootProps, getInputProps }) => (
<div
className={
"UploadOverlay " +
(active ? "UploadOverlay--Active" : "") +
(dragEnter ? " UploadOverlay-DragEnter" : "") +
" UploadOverlay--Desktop"
}
{...getRootProps({
onClick: handleDropzoneClick
})}
>
<input {...getInputProps()} />
<a className="UploadOverlay--CloseIcon" onClick={handleCloseClick}>
<CloseIcon />
</a>
<div className="UploadOverlay--Content">
<UploadIcon />
<h1>Upload a Photo</h1>
<h2 className="UploadOverlay--ContentMsgDesktop">
Drag and Drop your image to upload it to your profile.
</h2>
<h2 className="UploadOverlay--ContentMsgMobile">
Tap anywhere to upload an image to your profile.
</h2>
</div>
</div>
)}
</Dropzone>
);
return ReactDOM.createPortal(content, document.body);
};
export default UploadOverlay;
Here is my css
.UploadOverlay {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
display:none;
}
body.UploadOverlay--Open {
position: relative;
overflow: hidden;
}
.UploadOverlay.UploadOverlay--Active {
background:rgba(216, 216, 216, 0.75);
width:100%;
height:100%;
z-index:99;
display:block;
}
.UploadOverlay.UploadOverlay-DragEnter {
background:rgba(255, 255, 255, 0.75);
}
.UploadOverlay .UploadOverlay--CloseIcon {
position: absolute;
right:25px;
top:25px;
cursor: pointer;
}
.UploadOverlay .UploadOverlay--Content {
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
-ms-flex-flow: column wrap;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
flex-flow: column;
}
.UploadOverlay .UploadOverlay--Content h1 {
text-transform: uppercase;
font-size: 44px;
line-height:44px;
font-weight: bold;
color: #666666;
margin:35px 0px 35px 0px;
padding:0px;
text-align: center;
}
.UploadOverlay .UploadOverlay--Content h2 {
margin:0px;
padding:0px;
color: #666666;
max-width:325px;
text-align: center;
}
I'm at a bit of a loss at the moment. I've had tried setting the opacity of .UploadOverlay to 0 but then I cannot click on any elements on the screen other than the overlay. I then tried setting the z-index of .UploadOverlay to -1 then I could not drag onto the screen.
Perhaps, I am going the wrong way around this structurally? Any help would be greatly appreciated.
I have a CodeSandbox if you would like to try it out for yourself.