Changes in theming

src/components/VoiceBars.js

@@ -2,7 +2,7 @@ import React from "react";
 
 function VoiceBars() {
 	return (
-		<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px"}}>
+		<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px", transition: "1s"}}>
 			<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%">

src/plugins/GenericPageWithIcon.js

@@ -12,10 +12,13 @@ function GenericPageWithIcon(props) {
 			direction="column"
 			alignContent="center"
 			height="95vh"
+			style={{
+				padding: "0 3em",
+			}}
 		>
 			{props.icon}
 			<Heading>{props.title}</Heading>
-			<Text>{props.description}</Text>
+			<Text style={{ textAlign: "center" }}>{props.description}</Text>
 			<Button primary size="large" onClick={props.close}
 				label="Dismiss" margin="1.5em" />
 		</Box>