Update view layouts and content

src/css/popup.scss

@@ -14,30 +14,33 @@ html {
     #moco-bx-root {
       min-width: 516px;
 
+      h1 {
+        font-weight: normal;
+        line-height: 1.2;
+        margin-top: 1rem;
+        margin-bottom: 3rem;
+      }
+
       .text-red {
         color: $red;
       }
 
+      .text-secondary {
+        color: $gray-base;
+      }
+
       .moco-bx-app-container {
         width: 324px;
         padding: 3rem 6rem;
 
         .moco-bx-logo__container {
-          display: flex;
-          justify-content: center;
           margin-bottom: 3rem;
           text-align: center;
 
           img.moco-bx-logo {
-            flex: 0 0 48px;
             width: 48px;
             height: 48px;
           }
-
-          h1 {
-            line-height: 48px;
-            margin: 0;
-          }
         }
 
         .moco-bx-calendar {
@@ -97,19 +100,12 @@ html {
           margin-top: 3rem;
 
           h1 {
-            font-weight: normal;
-            line-height: 1.2;
-            margin: 0;
+            margin-bottom: 0;
           }
-
           p {
             margin-top: 0.6rem;
           }
 
-          .text-secondary {
-            color: $gray-base;
-          }
-
           .timer {
             margin-top: 2.5rem;
           }
@@ -130,35 +126,30 @@ html {
       }
 
       .moco-bx-error-container {
-        font-size: 18px;
         line-height: 1.5;
         width: 420px;
         padding: 3rem;
         text-align: center;
 
-        h1 {
-          font-size: 35px;
-          font-weight: normal;
-          margin-top: 0;
-          line-height: 1.3;
-        }
-
         img {
-          width: auto;
-          max-width: 100%;
+          margin-top: 1.5rem;
+          margin-bottom: 2rem;
+          width: 44%;
 
           &.moco-bx-logo {
             width: 48px;
             margin-bottom: 2rem;
           }
-        }
 
-        ol {
-          text-align: left;
+          &.firefox-addons {
+            margin-top: 0;
+            width: auto;
+          }
         }
 
         button {
           margin-top: 1.5rem;
+          margin-bottom: 1.5rem;
         }
       }
     }

src/js/components/Errors/InvalidConfigurationError.js

@@ -3,25 +3,23 @@ import settingsUrl from "images/settings.png"
 
 const InvalidConfigurationError = () => (
   <div className="moco-bx-error-container">
-    <h1>Bitte Einstellungen aktualisieren</h1>
-    <ol>
-      <li>Internetadresse eintragen</li>
-      <li>Persönlichen API-Schlüssel eintragen</li>
-    </ol>
-    <button
-      className="moco-bx-btn"
-      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
-    >
-      Einstellungen öffnen
-    </button>
-    <br />
-    <br />
+    <h1>MOCO verbinden</h1>
+    <p>
+      Dazu trägst Du in den Einstellungen Deine Account-Internetadresse und Deinen API-Schlüssel
+      ein.
+    </p>
     <img
       src={chrome.extension.getURL(settingsUrl)}
       alt="Browser extension configuration settings"
       style={{ cursor: "pointer" }}
       onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
     />
+    <button
+      className="moco-bx-btn"
+      onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}
+    >
+      Weiter zu den Einstellungen
+    </button>
   </div>
 )
 

src/js/components/Errors/UnknownError.js

@@ -7,8 +7,6 @@ const UnknownError = ({ message = "Unbekannter Fehler" }) => (
     <img className="moco-bx-logo" src={logo} alt="MOCO logo" />
     <h1>Ups, es ist ein Fehler passiert!</h1>
     <p>Bitte überprüfe deine Internetverbindung.</p>
-    <p>Wir wurden per Email benachrichtigt und untersuchen den Vorfall.</p>
-    <br />
     <p>Fehlermeldung:</p>
     <pre>{message}</pre>
   </div>

src/js/components/Errors/UpgradeRequiredError.js

@@ -6,7 +6,7 @@ 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" />
-    <h1>Upgrade erforderlich</h1>
+    <h1>Bitte aktualisieren</h1>
     <p>Die installierte MOCO Browser-Erweiterung ist veraltet &mdash; bitte aktualisieren.</p>
     {isChrome() ? (
       <button
@@ -17,7 +17,6 @@ const UpgradeRequiredError = () => (
       </button>
     ) : (
       <>
-        <br />
         <p>Unter folgender URL:</p>
         <img className="firefox-addons" src={firefoxAddons} alt="about:addons" />
       </>

src/js/components/Popup.js

@@ -9,14 +9,16 @@ function getStyles(errorType) {
     width: "516px",
     height:
       errorType === ERROR_UNAUTHORIZED
-        ? "834px"
+        ? "590px"
         : errorType === ERROR_UPGRADE_REQUIRED
         ? isChrome()
-          ? "369px"
-          : "461px"
+          ? "429px"
+          : "472px"
         : errorType === ERROR_UNKNOWN
-        ? "550px"
-        : "558px",
+        ? "408px"
+        : isChrome()
+        ? "558px"
+        : "574px",
   }
 }