Improving styling a little bit

4 files changed, 17 insertions, 11 deletions

diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx
index 71455967f..8cc4afc99 100644
--- a/app/assets/javascripts/components/components/composer_drawer.jsx
+++ b/app/assets/javascripts/components/components/composer_drawer.jsx
@@ -29,7 +29,7 @@ const ComposerDrawer = React.createClass({
 
   render () {
     return (
-      <div style={{ width: '380px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}>
+      <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}>
         <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx
index 0b541c0cf..35960a40a 100644
--- a/app/assets/javascripts/components/components/relative_timestamp.jsx
+++ b/app/assets/javascripts/components/components/relative_timestamp.jsx
@@ -4,17 +4,17 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 moment.updateLocale('en', {
   relativeTime : {
     future: "in %s",
-    past:   "%s ago",
-    s:  "s",
-    m:  "a minute",
+    past:   "%s",
+    s:  "%ds",
+    m:  "1m",
     mm: "%dm",
-    h:  "an hour",
+    h:  "1h",
     hh: "%dh",
-    d:  "a day",
+    d:  "1d",
     dd: "%dd",
-    M:  "a month",
+    M:  "1mo",
     MM: "%dmo",
-    y:  "a year",
+    y:  "1y",
     yy: "%dy"
   }
 });
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index c6d57aced..29b9ebd98 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -21,7 +21,7 @@ const Status = React.createClass({
         <Avatar src={status.getIn(['account', 'avatar'])} />
 
         <div style={{ flex: '1 1 auto', marginLeft: '10px' }}>
-          <div style={{ overflow: 'hidden' }}>
+          <div style={{ overflow: 'hidden', fontSize: '15px' }}>
             <div style={{ float: 'right' }}>
               <a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a>
             </div>
@@ -29,7 +29,7 @@ const Status = React.createClass({
             <DisplayName account={status.get('account')} />
           </div>
 
-          <div className='status__content' dangerouslySetInnerHTML={content} style={{ fontSize: '14px' }} />
+          <div className='status__content' dangerouslySetInnerHTML={content} />
         </div>
       </div>
     );
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 0bec9ba80..b63ec7154 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,6 +1,12 @@
 .status__content {
+  font-size: 15px;
+  line-height: 20px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-weight: 300;
+
   a {
-    color: #2b90d9;
+    color: #d9e1e8;
     text-decoration: none;
 
     &:hover {