refinments on alltype card

src/components/Cards/AlltypeCard.css

@@ -1,4 +1,4 @@
-.root {
+.cardContent {
   white-space: nowrap;
   text-align: center;
   font-weight: 500;

src/components/Cards/AlltypeCard.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { Card } from '../UI';
 import ScaledLine from './ScaledLine';
-
+import styles from './AlltypeCard.css';
 
 export default class AlltypeCard extends React.Component {
 
@@ -9,14 +9,14 @@ export default class AlltypeCard extends React.Component {
   // http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/
   renderInscription(inscription) {
 
-    var idealCharPerLine = 22;
+    const idealCharPerLine = 22;
 
     // segment the text into lines
-    var words = inscription.split(' ');
-    var preText, postText, finalText;
-    var preDiff, postDiff;
-    var wordIndex = 0;
-    var lineText = [];
+    const words = inscription.split(' ');
+    let preText, postText, finalText;
+    let preDiff, postDiff;
+    let wordIndex = 0;
+    const lineText = [];
 
     // while we still have words left, build the next line
     while (wordIndex < words.length) {
@@ -65,13 +65,12 @@ export default class AlltypeCard extends React.Component {
     const { onClick, text } = this.props;
     return (
       <Card onClick={onClick}>
-        <div>{this.renderInscription(text)}</div>
+        <div className={styles.cardContent}>{this.renderInscription(text)}</div>
       </Card>
     );
   }
 }
 
-
 AlltypeCard.propTypes = {
   onClick: PropTypes.func,
   text: PropTypes.string.isRequired

src/components/Cards/ScaledLine.js

@@ -1,12 +1,10 @@
 import React, { PropTypes } from 'react';
-import styles from './ScaledLine.css';
 
 export default class ScaledLine extends React.Component {
   constructor(props) {
     super(props);
     this._content = null;
     this.state = {
-      contentWidth: 0,
       ratio: 1,
     };
   }
@@ -15,7 +13,6 @@ export default class ScaledLine extends React.Component {
     const actualContent = this._content.children[0];
 
     this.setState({
-      contentWidth: actualContent.offsetWidth,
       ratio: this.props.toWidth / actualContent.offsetWidth,
     });
   }
@@ -24,21 +21,19 @@ export default class ScaledLine extends React.Component {
     const { ratio } = this.state;
     const { children } = this.props;
 
-    var baseFontSize = 15;
-
-    var inlineStyles = {
+    const styles = {
+      fontSize: ratio.toFixed(3) + 'em'
     };
-    inlineStyles.fontSize = Math.round((baseFontSize * ratio)*1000)/1000
 
     return (
-      <div ref={(c) => this._content = c} style={inlineStyles} className={styles.root}>
+      <div ref={(c) => this._content = c} style={styles}>
         <span>{children}</span>
       </div>
-    )
+    );
   }
-};
+}
 
 ScaledLine.propTypes = {
-  toWidth: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  toWidth: PropTypes.number.isRequired
 };