new components!! textarea stuff and configure bugs

client/coral-admin/src/containers/Configure/Configure.css

@@ -78,6 +78,8 @@
   border-color: #ccc;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
+  font-size: 14px;
+  text-align: center;
 }
 
 .charCountTexfieldEnabled {
@@ -174,4 +176,13 @@
     line-height: 1.2;
     max-width: 600px;
   }
+
+  .descriptionBox {
+    margin-top: 15px;
+    max-width: 550px;
+
+    input {
+      height: 150px;
+    }
+  }
 }

client/coral-admin/src/containers/Configure/StreamSettings.js

@@ -3,8 +3,8 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {Textfield, Checkbox} from 'react-mdl';
-import {Card, Icon} from 'coral-ui';
+import {Checkbox} from 'react-mdl';
+import {Card, Icon, TextArea, Textfield} from 'coral-ui';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -108,12 +108,11 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div className={styles.content}>
-              <Textfield
+            <div>
+              <TextArea
+                className={styles.descriptionBox}
                 onChange={updateInfoBoxContent(updateSettings)}
                 value={settings.infoBoxContent}
-                label={lang.t('configure.include-text')}
-                rows={3}
               />
             </div>
           </div>
@@ -123,11 +122,10 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
         <div className={styles.content}>
           {lang.t('configure.closed-comments-desc')}
           <div>
-          <Textfield
-            onChange={updateClosedMessage(updateSettings)}
-            value={settings.closedMessage}
-            label={lang.t('configure.closed-comments-label')}
-            rows={3}/>
+            <TextArea className={styles.descriptionBox}
+              onChange={updateClosedMessage(updateSettings)}
+              value={settings.closedMessage}
+            />
           </div>
         </div>
       </Card>

client/coral-ui/components/TextArea.css

@@ -0,0 +1,15 @@
+.textArea {
+  textarea {
+    width: 100%;
+    display: block;
+    outline: none;
+    border: 1px solid rgba(0,0,0,.12);
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin: 5px auto;
+    min-height: 175px;
+    font-size: 14px;
+    resize: none;
+  }
+}

client/coral-ui/components/TextArea.js

@@ -0,0 +1,14 @@
+import React, {PropTypes} from 'react';
+import styles from './TextArea.css';
+
+const TextArea = ({className, value = '', ...props}) => (
+  <div className={`${styles.textArea} ${className ? className : ''}`} {...props}>
+    <textarea value={value} />
+  </div>
+);
+
+TextArea.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default TextArea;

client/coral-ui/index.js

@@ -22,3 +22,5 @@ export {default as WizardNav} from './components/WizardNav';
 export {default as Select} from './components/Select';
 export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
+export {default as Textfield} from './components/Textfield';
+export {default as TextArea} from './components/TextArea';