Dynamic sizing for prompt time and notes

Use patched fit text package, see issue #38:
  malte-wessel/react-textfit#38

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@wootencl/react-textfit": "^1.1.3",
     "emotion": "^9.2.8",
     "react": "^16.5.1",
     "react-audio-player": "^0.10.0",
@@ -11,7 +12,6 @@
     "react-redux": "^5.0.7",
     "react-scripts": "1.1.4",
     "react-textarea-autosize": "^7.0.4",
-    "react-textfit": "^1.1.0",
     "redux": "^4.0.0",
     "redux-persist": "^5.10.0",
     "redux-state-sync": "^1.1.1",

src/BigClock.js

@@ -28,11 +28,11 @@ export default connect(
 
 const Monospace = styled('div')`
   font-family: 'IBM Plex Mono', monospace;
-  font-size: 18vw;
   font-weight: 600;
   text-align: center;
   width: 100%;
   line-height: 1;
+  white-space: nowrap;
 `;
 
 const Deemphasized = styled('span')`

src/InterviewerMode.js

@@ -2,27 +2,25 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import styled from 'react-emotion';
 import BigClock from './BigClock';
-import { Textfit } from 'react-textfit';
+import { Textfit } from '@wootencl/react-textfit';
 
 const mapStateToProps = state => ({
   latestNotes: state.notes.filter(note => note.type === 'interviewer').reverse(),
 });
 
 class InterviewerMode extends Component {
   render() {
+    const noteExists = this.props.latestNotes.length > 0 && !this.props.latestNotes[0].action;
     return (
       <Screen>
-        <BigClock />
-
-        {this.props.latestNotes.length > 0 && !this.props.latestNotes[0].action &&
-          <PromptType>
-            <Textfit
-              min={40}
-              max={1000}
-            >
-              {this.props.latestNotes[0].note}
-            </Textfit>
-          </PromptType>
+        <ClockSize min={40} max={1000} noteExists={noteExists}>
+          <BigClock />
+        </ClockSize>
+
+        {noteExists &&
+          <PromptTextFit min={40} max={1000}>
+            {this.props.latestNotes[0].note}
+          </PromptTextFit>
         }
       </Screen>
     );
@@ -38,20 +36,19 @@ const Screen = styled('div')`
   height: 100vh;
   background: #000;
   color: #fff;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
   padding: 48px;
   overflow: hidden;
 `;
 
-const PromptType = styled('div')`
-  flex: 1;
-  line-height: 1.2;
+const ClockSize = styled(Textfit)`
+  height: ${props => props.noteExists ? 'calc(15vh - 24px)' : 'calc(100vh - 48px)'};
+
+  * { height: 100%; }
+`;
+
+const PromptTextFit = styled(Textfit)`
+  line-height: 1;
+  height: calc(85vh - 24px);
   font-weight: 600;
   white-space: pre-wrap;
-
-  &:empty {
-    display: none;
-  }
 `;

yarn.lock

@@ -67,6 +67,14 @@
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.1.tgz#f3a81587ad8d0ef33cdad6f3b4310774fcc1053e"
 
+"@wootencl/react-textfit@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@wootencl/react-textfit/-/react-textfit-1.1.3.tgz#9815b88103ac6162ca1b59d5b1ae991e35f803e3"
+  dependencies:
+    process "^0.11.9"
+    prop-types "^15.5.10"
+    resize-observer-polyfill "^1.5.0"
+
 abab@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
@@ -5743,13 +5751,6 @@ react-textarea-autosize@^7.0.4:
   dependencies:
     prop-types "^15.6.0"
 
-react-textfit@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/react-textfit/-/react-textfit-1.1.0.tgz#088855580f2e7aad269efc81b734bf636877d0e1"
-  dependencies:
-    process "^0.11.9"
-    prop-types "^15.5.10"
-
 react@^16.5.1:
   version "16.5.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.1.tgz#8cb8e9f8cdcb4bde41c9a138bfbf907e66132372"
@@ -6009,6 +6010,10 @@ requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"