update portrait layout pomodoro-calculator-react

pomodoro-clock-react/src/Break.js

@@ -1,31 +1,42 @@
 import React from 'react';
+import { connect } from "react-redux";
 
 import { colors } from './globals'
 import BreakControls from './BreakControls';
 
-const Break = () => {
-  const style = {
-    height: '100%',
-    width: '50%',
-  };
+const mapStateToProps = (state) => ({ ...state });
 
-  const breakTextStyle = {
-    height: '50%',
-    width: '90%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    textAlign: 'right',
-    marginRight: '10%',
-    color: colors.goldLeaf,
-  };
+class Break extends React.Component {
+  render() {
+    const width = this.props.innerWindowWidth;
+    const height = this.props.innerWindowHeight;
+    const style = {
+      height: '100%',
+      width: '50%',
+    };
 
-  return(
-    <div style={style}>
+    const breakTextStyle = {
+      height: '50%',
+      width: '90%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      textAlign: 'right',
+      marginRight: '10%',
+      color: colors.goldLeaf,
+    };
+
+    if (height > width && width < 380) {
+      breakTextStyle['fontSize'] = 20;
+    }
+
+    return(
+      <div style={style}>
       <div id="break-label" style={breakTextStyle}>Break Length</div>
       <BreakControls />
-    </div>
-  );
+      </div>
+    );
+  }
 };
 
-export default Break;
+export default connect(mapStateToProps)(Break);

pomodoro-clock-react/src/PomodoroClock.js

@@ -53,6 +53,7 @@ class PomodoroClock extends React.Component {
       style['height'] = Math.round(height * 0.75);
       style['maxHeight'] = maxHeight;
       clockContainerStyle['height'] = width > style['height'] ? style['height'] : width; 
+      clockContainerStyle['minHeight'] = '340px';
       clockContainerStyle['maxHeight'] = maxHeight;
       style['width'] = width - 6;
       style['maxWidth'] = maxWidth;
@@ -60,7 +61,7 @@ class PomodoroClock extends React.Component {
     }
 
     return(
-      <div style={style}>
+      <div id='pomodoroClock' style={style}>
         <div id='clockContainer' style={clockContainerStyle}>
           <Top />
           <Clock />

pomodoro-clock-react/src/Session.js

@@ -1,31 +1,42 @@
 import React from 'react';
+import { connect } from "react-redux";
 
 import { colors } from './globals'
 import SessionControls from './SessionControls';
 
-const Session = () => {
-  const style = {
-    height: '100%',
-    width: '50%',
-  };
+const mapStateToProps = (state) => ({ ...state });
 
-  const sessionTextStyle = {
-    height: '50%',
-    width: '90%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    textAlign: 'left',
-    marginLeft: '10%',
-    color: colors.goldLeaf,
-  };
+class Session extends React.Component {
+  render() {
+    const width = this.props.innerWindowWidth;
+    const height = this.props.innerWindowHeight;
+    const style = {
+      height: '100%',
+      width: '50%',
+    };
 
-  return(
-    <div style={style}>
+    const sessionTextStyle = {
+      height: '50%',
+      width: '90%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      textAlign: 'left',
+      marginLeft: '10%',
+      color: colors.goldLeaf,
+    };
+    if (height > width && width < 380) {
+      sessionTextStyle['fontSize'] = 20;
+    }
+
+
+    return(
+      <div style={style}>
       <div id="session-label" style={sessionTextStyle}>Session Length</div>
       <SessionControls />
-    </div>
-  );
+      </div>
+    );
+  }
 };
 
-export default Session;
+export default connect(mapStateToProps)(Session);

pomodoro-clock-react/src/Top.js

@@ -1,39 +1,49 @@
 import React from 'react';
+import { connect } from "react-redux";
 
 import Break from './Break';
 import Session from './Session';
 
-const Top = () => {
+const mapStateToProps = (state) => ({ ...state });
 
-  const style = {
-    height: '40%',
-    width: '100%',
-  }
+class Top extends React.Component {
+  render() {
+    const width = this.props.innerWindowWidth;
+    const height = this.props.innerWindowHeight;
+    const style = {
+      height: '40%',
+      width: '100%',
+    }
 
-  const titleStyle = {
-    height: '50%',
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    fontSize: 48,
-  }
+    const titleStyle = {
+      height: '50%',
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      fontSize: 48,
+    }
 
-  const breakAndSessionStyle = {
-    height: '50%',
-    width: '100%',
-    display: 'flex',
-  }
+    const breakAndSessionStyle = {
+      height: '50%',
+      width: '100%',
+      display: 'flex',
+    }
 
-  return(
-    <div style={style}>
+    if (height > width && width < 385) {
+      titleStyle['fontSize'] = 36;
+    }
+
+    return(
+      <div style={style}>
       <div style={titleStyle}>Pomodoro Clock</div>
       <div style={breakAndSessionStyle}>
-        <Break />
-        <Session />
+      <Break />
+      <Session />
       </div>
-    </div>
-  );
-}
+      </div>
+    );
+  };
+};
 
-export default Top;
+export default connect(mapStateToProps)(Top);