Added icons to seacrh and clean input

src/Components/IframeOverlay/SearchInput.js

@@ -5,6 +5,8 @@ import IconButton from '@material-ui/core/IconButton';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import FormControl from '@material-ui/core/FormControl';
+import Divider from '@material-ui/core/Divider';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 
 export default function SearchInput(props) {
 	const [text, setText] = useState(props.stdin);
@@ -17,31 +19,56 @@ export default function SearchInput(props) {
 		props.search(text);
 	}
 
+	const handleCleanInput = () => {
+		setText("");
+	}
+
+	const handleKeyUp = (event) => {
+		if (event.key === "Enter")
+			handleClickSearch()
+	}
+
 	return (
 		<Wrapper>
-			<FormControl variant="outlined" style={{width: '100%'}}>
+			<FormControl variant="outlined" style={{ width: '100%' }}>
 				<OutlinedInput
 					type="text"
 					value={text}
+					placeholder="O quê você está buscando?"
 					onChange={handleChange}
+					onKeyUp={handleKeyUp}
 					endAdornment={
-						<InputAdornment position="end">
-							<IconButton
-								onClick={handleClickSearch}
-								edge="end"
-							>
-								<SearchIcon />
-							</IconButton>
-						</InputAdornment>
+						<>
+							<InputAdornment position="end">
+								<IconButton
+									onClick={handleCleanInput}
+									edge="end"
+								>
+									<CloseRoundedIcon />
+								</IconButton>
+							</InputAdornment>
+							<SizedWidhtBox />
+							<Divider orientation="vertical" flexItem />
+							<InputAdornment position="end">
+								<IconButton
+									onClick={handleClickSearch}
+									edge="end"
+								>
+									<SearchIcon style={{ fill: "#00bcd4" }} />
+								</IconButton>
+							</InputAdornment>
+						</>
 					}
 				/>
 			</FormControl>
 		</Wrapper>
 	);
 }
-const Wrapper=styled.div`
+const Wrapper = styled.div`
 	background-color: white;
 	border-radius: 5px;
 	margin: 20px;	
-
+`
+const SizedWidhtBox = styled.div`
+	margin-right : 22px;
 `