Add Voice Wave Animation for recording and show recorded text

src/Core.js

@@ -1,12 +1,15 @@
 import React from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { Box, Button, Clock } from "grommet";
+import { Box, Button, Clock, Text } from "grommet";
 
 import { setPlugin, selectCore } from "./coreSlice";
+import { selectVoice } from "./voiceSlice";
+import VoiceBars from "./components/VoiceBars";
 import plugins from "./plugins";
 
 function Core() {
 	const coreState = useSelector(selectCore);
+	const voiceState = useSelector(selectVoice);
 	const dispatch = useDispatch();
 	const plugin = plugins[coreState.plugin];
 	const props = {
@@ -15,6 +18,12 @@ function Core() {
 	};
 	const dummyButtons = ["Maps", "Home Devices", "Phone"];
 	return <>
+		<Box height="5vh" background="light-1" justify="center" direction="row">
+			{voiceState.recording ? <VoiceBars style={{height: "100%"}}/>:
+				voiceState.text === null ? null:
+					<Text style={{paddingTop: "1em"}}>{voiceState.text}</Text>
+			}
+		</Box>
 		{plugin ? React.createElement(plugin, props, null) : (
 			<Box
 				align="center"
@@ -23,10 +32,10 @@ function Core() {
 				justify="center"
 				direction="column"
 				alignContent="center"
-				height="100vh"
+				height="95vh"
 			>
 				<Clock size="xxlarge" />
-				<Clock size="xxlarge" type="digital" />
+				<Clock size="xxlarge" type="digital" /> :
 				<Box direction="row" margin="1.5em" wrap={true}>
 					<Button onClick={() => dispatch(setPlugin("petMode"))} primary
 						label="Pet Mode" />

src/components/VoiceBars.js

@@ -0,0 +1,79 @@
+import React from "react";
+
+function VoiceBars() {
+	return (
+		<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px"}}>
+			<svg width="100vw" fill="none" version="1.1"
+				xmlns="http://www.w3.org/2000/svg">
+				<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+					<stop offset="0%" stopColor="#00B4DB" />
+					<stop offset="50%" stopColor="#224488" />
+					<stop offset="100%" stopColor="#0083B0" />
+				</linearGradient>
+				<path
+					fill="url(#grad1)"
+					d="
+					M0 67
+					C 273,183
+					822,-40
+					1920.00,106
+
+					V 359
+					H 0
+					V 67
+					Z">
+					<animate
+						repeatCount="indefinite"
+						fill="url(#grad1)"
+						attributeName="d"
+						dur="5s"
+						attributeType="XML"
+						values="
+						M0 77
+						C 473,283
+						822,-40
+						1920,116
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 473,-40
+						1222,283
+						1920,136
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 973,260
+						1722,-53
+						1920,120
+
+						V 359
+						H 0
+						V 67
+						Z;
+
+						M0 77
+						C 473,283
+						822,-40
+						1920,116
+
+						V 359
+						H 0
+						V 67
+						Z
+						">
+					</animate>
+				</path>
+			</svg>
+		</div>
+	);
+}
+
+export default VoiceBars;

src/plugins/Accident.js

@@ -56,7 +56,7 @@ function Accident(props) {
 			justify="center"
 			direction="column"
 			alignContent="center"
-			height="100vh"
+			height="95vh"
 		>
 			{
 				time === 0 ?

src/plugins/GenericPageWithIcon.js

@@ -11,7 +11,7 @@ function GenericPageWithIcon(props) {
 			justify="center"
 			direction="column"
 			alignContent="center"
-			height="100vh"
+			height="95vh"
 		>
 			{props.icon}
 			<Heading>{props.title}</Heading>