From 403f9fafa25cf947456749c7a3dabf58c639740f Mon Sep 17 00:00:00 2001
From: manubo <manuel@bouza.ch>
Date: Mon, 30 Sep 2019 17:56:04 +0200
Subject: [PATCH] Improve styling

---
 src/css/popup.scss         | 9 +++++++--
 src/js/components/Form.js  | 3 +--
 src/js/components/Popup.js | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/css/popup.scss b/src/css/popup.scss
index 450b635..ddc36bc 100644
--- a/src/css/popup.scss
+++ b/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 {
diff --git a/src/js/components/Form.js b/src/js/components/Form.js
index 8bea598..1f64c91 100644
--- a/src/js/components/Form.js
+++ b/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",
diff --git a/src/js/components/Popup.js b/src/js/components/Popup.js
index 8d37ffd..f95c0a5 100644
--- a/src/js/components/Popup.js
+++ b/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)}`)}