Updated all basic components

removed unnecessary components, combined where necessary
added each component to a folder, added individual css style modules
optimized some component rendering flows
removed functional components in favor of pure components
linted and formatted all of the files

app/javascript/gabsocial/components/trending_item/index.js

@@ -0,0 +1,47 @@
+import { Sparklines, SparklinesCurve } from 'react-sparklines';
+import { FormattedMessage } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import Permalink from '../permalink';
+import { shortNumberFormat } from '../../utils/numbers';
+
+import './index.scss';
+
+export default class TrendingItem extends ImmutablePureComponent {
+
+  static propTypes = {
+    hashtag: ImmutablePropTypes.map.isRequired,
+  };
+
+  render() {
+    return (
+      <div className='trending-item'>
+        <div className='trending-item__text'>
+          <Permalink href={hashtag.get('url')} to={`/tags/${hashtag.get('name')}`}>
+            #<span>{hashtag.get('name')}</span>
+          </Permalink>
+
+          <FormattedMessage
+            id='trends.count_by_accounts'
+            defaultMessage='{count} {rawCount, plural, one {person} other {people}} talking'
+            values={{
+              rawCount: hashtag.getIn(['history', 0, 'accounts']),
+              count: <strong>{shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))}</strong>,
+            }}
+          />
+        </div>
+
+        <div className='trending-item__uses'>
+          {shortNumberFormat(hashtag.getIn(['history', 0, 'uses']))}
+        </div>
+
+        <div className='trending-item__sparkline'>
+          <Sparklines width={50} height={28} data={hashtag.get('history').reverse().map(day => day.get('uses')).toArray()}>
+            <SparklinesCurve style={{ fill: 'none' }} />
+          </Sparklines>
+        </div>
+      </div>
+    );
+  }
+
+}

app/javascript/gabsocial/components/trending_item/index.scss

@@ -0,0 +1,55 @@
+.trending-item {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &__name {
+    flex: 1 1 auto;
+    color: $dark-text-color;
+
+    @include text-overflow(nowrap);
+
+    strong {
+      font-weight: 500;
+    }
+
+    a {
+      display: block;
+      color: $darker-text-color;
+      text-decoration: none;
+
+      @include text-sizing(14px, 500);
+      @include text-overflow(nowrap);
+
+      &:hover,
+      &:focus,
+      &:active {
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  &__uses {
+    flex: 0 0 auto;
+    width: 100px;
+    color: $secondary-text-color;
+
+    @include text-sizing(24px, 500, 36px, center);
+  }
+
+  &__sparkline {
+    flex: 0 0 auto;
+    width: 50px;
+
+    path {
+      stroke: lighten($highlight-text-color, 6%) !important;
+    }
+  }
+}