Improve styling

src/css/popup.scss

@@ -13,7 +13,7 @@ html {
 
     #moco-bx-root {
       min-width: 516px;
-      min-height: 300px;
+      min-height: 420px;
       transition: height 2s ease-out;
 
       h1 {
@@ -102,8 +102,13 @@ html {
           text-align: center;
           margin-top: 3rem;
 
+          h1 {
+            margin: 0.75rem;
+            line-height: 1.2;
+          }
+
           p {
-            margin-top: 0.5rem;
+            margin-top: 0.75rem;
           }
 
           .timer {

src/js/components/Form.js

@@ -9,7 +9,7 @@ import stopWatch from "images/icons/stopwatch-light.svg"
 const StopWatch = () => (
   <i
     dangerouslySetInnerHTML={{ __html: stopWatch }}
-    style={{ width: "24px", color: "white", display: "inline-block" }}
+    style={{ width: "22px", color: "white", display: "inline-block" }}
   />
 )
 
@@ -53,7 +53,6 @@ class Form extends Component {
   buttonStyle() {
     const styleMap = {
       true: {
-        backgroundColor: "#a3a3a3",
         border: "none",
         borderRadius: "50%",
         width: "60px",

src/js/components/Popup.js

@@ -50,7 +50,7 @@ const Popup = forwardRef((props, ref) => {
 
   return (
     <div ref={ref} className="moco-bx-popup" onClick={handleRequestClose}>
-      <div className="moco-bx-popup-content" style={{ width: "516px", minHeight: "300px" }}>
+      <div className="moco-bx-popup-content" style={{ width: "516px", minHeight: "420px" }}>
         <iframe
           ref={iFrameRef}
           src={chrome.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}