Dyanically set iframe height

src/css/popup.scss

@@ -13,6 +13,8 @@ html {
 
     #moco-bx-root {
       min-width: 516px;
+      min-height: 300px;
+      transition: height 2s ease-out;
 
       h1 {
         font-weight: normal;
@@ -99,11 +101,16 @@ html {
           text-align: center;
           margin-top: 3rem;
 
-          h1 {
-            margin-bottom: 0;
+          h2 {
+            font-weight: normal;
+            font-size: 24px;
+            line-height: 1.2;
+            margin-top: 0.5rem;
+            margin-bottom: 0.5rem;
           }
+
           p {
-            margin-top: 0.6rem;
+            margin-top: 0.5rem;
           }
 
           .timer {
@@ -134,7 +141,6 @@ html {
         img {
           margin-top: 1.5rem;
           margin-bottom: 2rem;
-          width: 44%;
 
           &.moco-bx-logo {
             width: 48px;

src/js/components/App.js

@@ -110,6 +110,9 @@ class App extends Component {
 
   componentDidMount() {
     window.addEventListener("keydown", this.handleKeyDown)
+    console.log(window.document.body.scrollHeight)
+    console.log(window.document.body)
+    parent.postMessage(window.document.body.scrollHeight, "*")
     chrome.runtime.onMessage.addListener(this.handleSetFormErrors)
   }
 

src/js/components/App/TimerView.js

@@ -10,11 +10,8 @@ export default function TimerView({ timedActivity, onStopTimer }) {
 
   return (
     <div className="moco-bx-timer-view">
-      <h1>
-        {timedActivity.assignment_name}
-        <br />
-        {timedActivity.task_name}
-      </h1>
+      <h2>{timedActivity.assignment_name}</h2>
+      <h2>{timedActivity.task_name}</h2>
       <p className="text-secondary">{timedActivity.customer_name}</p>
       <Timer
         className="timer text-red"

src/js/components/Errors/InvalidConfigurationError.js

@@ -11,7 +11,7 @@ const InvalidConfigurationError = () => (
     <img
       src={chrome.extension.getURL(settingsUrl)}
       alt="Browser extension configuration settings"
-      style={{ cursor: "pointer" }}
+      style={{ cursor: "pointer", width: "185px", height: "195px" }}
       onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
     />
     <button

src/js/components/Errors/UnknownError.js

@@ -4,7 +4,12 @@ import logo from "images/moco-159x159.png"
 
 const UnknownError = ({ message = "Unbekannter Fehler" }) => (
   <div className="moco-bx-error-container">
-    <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
+    <img
+      className="moco-bx-logo"
+      src={logo}
+      style={{ width: "48px", height: "48px" }}
+      alt="MOCO logo"
+    />
     <h1>Ups, es ist ein Fehler passiert!</h1>
     <p>Bitte überprüfe deine Internetverbindung.</p>
     <p>Fehlermeldung:</p>

src/js/components/Errors/UpgradeRequiredError.js

@@ -5,7 +5,12 @@ import firefoxAddons from "images/firefox_addons.png"
 
 const UpgradeRequiredError = () => (
   <div className="moco-bx-error-container">
-    <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
+    <img
+      className="moco-bx-logo"
+      src={logo}
+      style={{ width: "48px", height: "48px" }}
+      alt="MOCO logo"
+    />
     <h1>Bitte aktualisieren</h1>
     <p>Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte aktualisieren.</p>
     {isChrome() ? (
@@ -18,7 +23,12 @@ const UpgradeRequiredError = () => (
     ) : (
       <>
         <p>Unter folgender URL:</p>
-        <img className="firefox-addons" src={firefoxAddons} alt="about:addons" />
+        <img
+          className="firefox-addons"
+          src={firefoxAddons}
+          style={{ width: "292px", height: "40px" }}
+          alt="about:addons"
+        />
       </>
     )}
   </div>

src/js/components/Popup.js

@@ -1,41 +1,24 @@
-import React, { Component } from "react"
+import React, { useEffect, useRef } from "react"
 import PropTypes from "prop-types"
 import queryString from "query-string"
-import { ERROR_UNKNOWN, ERROR_UNAUTHORIZED, ERROR_UPGRADE_REQUIRED, serializeProps } from "utils"
-import { isChrome } from "utils/browser"
+import { serializeProps } from "utils"
 
-function getStyles(errorType) {
-  return {
-    width: "516px",
-    height:
-      errorType === ERROR_UNAUTHORIZED
-        ? "590px"
-        : errorType === ERROR_UPGRADE_REQUIRED
-        ? isChrome()
-          ? "429px"
-          : "472px"
-        : errorType === ERROR_UNKNOWN
-        ? "408px"
-        : isChrome()
-        ? "558px"
-        : "574px",
-  }
-}
+function Popup(props) {
+  const iFrameRef = useRef()
 
-class Popup extends Component {
-  static propTypes = {
-    service: PropTypes.object,
-    errorType: PropTypes.string,
-    onRequestClose: PropTypes.func.isRequired,
-  }
-
-  handleRequestClose = event => {
+  const handleRequestClose = event => {
     if (event.target.classList.contains("moco-bx-popup")) {
-      this.props.onRequestClose()
+      props.onRequestClose()
     }
   }
 
-  componentDidMount() {
+  const handleMessage = event => {
+    if (iFrameRef.current) {
+      iFrameRef.current.style.height = `${event.data}px`
+    }
+  }
+
+  useEffect(() => {
     // Document might lose focus when clicking the browser action.
     // Document might be out of focus when hitting the shortcut key.
     // This puts the focus back to the document and ensures that:
@@ -43,9 +26,12 @@ class Popup extends Component {
     // - the ESC key closes the popup without closing anything else
     window.focus()
     document.activeElement?.blur()
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
     }
+  }, [])
 
-  render() {
   const serializedProps = serializeProps([
     "loading",
     "service",
@@ -60,22 +46,25 @@ class Popup extends Component {
     "toDate",
     "errorType",
     "errorMessage",
-    ])(this.props)
-
-    const styles = getStyles(this.props.errorType)
+  ])(props)
 
   return (
-      <div className="moco-bx-popup" onClick={this.handleRequestClose}>
-        <div className="moco-bx-popup-content" style={styles}>
+    <div className="moco-bx-popup" onClick={handleRequestClose}>
+      <div className="moco-bx-popup-content" style={{ width: "516px", minHeight: "300px" }}>
         <iframe
+          ref={iFrameRef}
           src={chrome.extension.getURL(`popup.html?${queryString.stringify(serializedProps)}`)}
-            width={styles.width}
-            height={styles.height}
+          width="516px"
         />
       </div>
     </div>
   )
 }
+
+Popup.propTypes = {
+  service: PropTypes.object,
+  errorType: PropTypes.string,
+  onRequestClose: PropTypes.func.isRequired,
 }
 
 export default Popup