From 1e0e17ba85deebd6763ed9414f3cc2e2a23e1dbd Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 31 Aug 2016 16:48:21 +0200
Subject: [PATCH] Improving styling a little bit

---
 .../components/components/composer_drawer.jsx      |  2 +-
 .../components/components/relative_timestamp.jsx   | 14 +++++++-------
 .../javascripts/components/components/status.jsx   |  4 ++--
 app/assets/stylesheets/components.scss             |  8 +++++++-
 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 71455967f0..8cc4afc99a 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 0b541c0cf0..35960a40a1 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 c6d57acedc..29b9ebd986 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 0bec9ba802..b63ec71544 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 {