From a4ad7f71e04d6baae5e4b890b9eb4eb3064a33c2 Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Fri, 16 Feb 2018 19:12:33 +0400
Subject: [PATCH 1/7] Move all outcome components to a single folder PM-407

---
 .../{ => Outcome}/OutcomeCategorical/index.js |  0
 .../outcomeCategorical.scss                   |  2 +-
 .../{ => Outcome}/OutcomeScalar/index.js      |  0
 .../OutcomeScalar/outcomeScalar.scss          |  2 +-
 .../WinningOutcome/WinningOutcome.scss        | 33 +++++++++++++++++
 .../{ => Outcome}/WinningOutcome/index.js     | 29 +++++++--------
 src/components/Outcome/index.js               |  9 ++---
 .../WinningOutcome/WinningOutcome.scss        | 35 -------------------
 webpack.dev.config.js                         |  7 +++-
 9 files changed, 61 insertions(+), 56 deletions(-)
 rename src/components/{ => Outcome}/OutcomeCategorical/index.js (100%)
 rename src/components/{ => Outcome}/OutcomeCategorical/outcomeCategorical.scss (97%)
 rename src/components/{ => Outcome}/OutcomeScalar/index.js (100%)
 rename src/components/{ => Outcome}/OutcomeScalar/outcomeScalar.scss (97%)
 create mode 100644 src/components/Outcome/WinningOutcome/WinningOutcome.scss
 rename src/components/{ => Outcome}/WinningOutcome/index.js (64%)
 delete mode 100644 src/components/WinningOutcome/WinningOutcome.scss

diff --git a/src/components/OutcomeCategorical/index.js b/src/components/Outcome/OutcomeCategorical/index.js
similarity index 100%
rename from src/components/OutcomeCategorical/index.js
rename to src/components/Outcome/OutcomeCategorical/index.js
diff --git a/src/components/OutcomeCategorical/outcomeCategorical.scss b/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
similarity index 97%
rename from src/components/OutcomeCategorical/outcomeCategorical.scss
rename to src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
index 473f75ce2..c31759473 100644
--- a/src/components/OutcomeCategorical/outcomeCategorical.scss
+++ b/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
@@ -1,4 +1,4 @@
-@import '../../scss/vars.scss';
+@import '../../../scss/vars.scss';
 
 
 $outcome-bar-height: 15px;
diff --git a/src/components/OutcomeScalar/index.js b/src/components/Outcome/OutcomeScalar/index.js
similarity index 100%
rename from src/components/OutcomeScalar/index.js
rename to src/components/Outcome/OutcomeScalar/index.js
diff --git a/src/components/OutcomeScalar/outcomeScalar.scss b/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
similarity index 97%
rename from src/components/OutcomeScalar/outcomeScalar.scss
rename to src/components/Outcome/OutcomeScalar/outcomeScalar.scss
index 6e9aa8e65..29e6495b8 100644
--- a/src/components/OutcomeScalar/outcomeScalar.scss
+++ b/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
@@ -1,4 +1,4 @@
-@import '../../scss/vars.scss';
+@import '../../../scss/vars.scss';
 
 $expandable-arrow-size: 7px;
 
diff --git a/src/components/Outcome/WinningOutcome/WinningOutcome.scss b/src/components/Outcome/WinningOutcome/WinningOutcome.scss
new file mode 100644
index 000000000..0b86b7ba3
--- /dev/null
+++ b/src/components/Outcome/WinningOutcome/WinningOutcome.scss
@@ -0,0 +1,33 @@
+.outcome {
+  display: flex;
+  margin: 10px 0 10px 3px;
+  align-items: center;
+  justify-content: flex-start;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.icon {
+  background: url('../../../assets/img/icons/icon_winningOutcome.svg');
+  background-size: contain;
+  width: 40px;
+  height: 40px;
+  margin-left: -10px;
+}
+
+.label {
+  color: #87949c;
+  font-size: 12px;
+}
+
+.textBox {
+  margin-left: 10px;
+  background-color: #87949c;
+  color: #fff;
+  border-radius: 6px;
+  padding: 5px 10px;
+}
+
+.unit {
+  text-transform: none;
+}
diff --git a/src/components/WinningOutcome/index.js b/src/components/Outcome/WinningOutcome/index.js
similarity index 64%
rename from src/components/WinningOutcome/index.js
rename to src/components/Outcome/WinningOutcome/index.js
index 54f513369..4d2dad660 100644
--- a/src/components/WinningOutcome/index.js
+++ b/src/components/Outcome/WinningOutcome/index.js
@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { OUTCOME_TYPES } from 'utils/constants'
+import cn from 'classnames'
 import Decimal from 'decimal.js'
-import { eventDescriptionShape, marketShape } from '../../utils/shapes'
-import './WinningOutcome.scss'
+import { eventDescriptionShape, marketShape } from 'utils/shapes'
+import style from './WinningOutcome.scss'
+
+const cx = cn.bind(style)
 
 const WinningOutcome = ({
   market: { eventDescription: { outcomes, unit, decimals }, oracle: { outcome: winningOutcome }, event: { type } },
@@ -16,21 +19,19 @@ const WinningOutcome = ({
       .div(10 ** decimals)
       .toString()
     outcomeText = (
-      <span>
-        {outcomeValue} <span className="outcome__winning--unit">{unit}</span>
-      </span>
+      <Fragment>
+        {outcomeValue} <span className={cx('unit')}>{unit}</span>
+      </Fragment>
     )
   }
 
   return (
-    <div className="outcome__winning">
-      <div className="outcome__winning--container">
-        <div className="outcome__winning--icon" />
-        <span className="outcome__winning--label">
-          Winning<br />outcome
-        </span>
-        <div className="outcome__winning--box">{outcomeText}</div>
-      </div>
+    <div className={cx('outcome')}>
+      <div className={cx('icon')} />
+      <span className={cx('label')}>
+        Winning<br />outcome
+      </span>
+      <div className={cx('textBox')}>{outcomeText}</div>
     </div>
   )
 }
diff --git a/src/components/Outcome/index.js b/src/components/Outcome/index.js
index 058bb7d70..200eaea84 100644
--- a/src/components/Outcome/index.js
+++ b/src/components/Outcome/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import OutcomeCategorical from 'components/OutcomeCategorical'
-import OutcomeScalar from 'components/OutcomeScalar'
-import WinningOutcome from 'components/WinningOutcome'
+import OutcomeCategorical from 'components/Outcome/OutcomeCategorical'
+import OutcomeScalar from 'components/Outcome/OutcomeScalar'
+import WinningOutcome from 'components/Outcome/WinningOutcome'
 import { OUTCOME_TYPES } from 'utils/constants'
 import { marketShape } from 'utils/shapes'
 import { isMarketResolved } from 'utils/helpers'
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types'
 
 const Outcome = ({ market, opts = { showOnlyTrendingOutcome: false } }) => {
   const { event: { type: eventType } } = market
+  const showWinningOutcome = isMarketResolved(market)
 
   let outcomeComponent = eventType === OUTCOME_TYPES.CATEGORICAL ? (
     <OutcomeCategorical market={market} opts={opts} />
@@ -16,7 +17,7 @@ const Outcome = ({ market, opts = { showOnlyTrendingOutcome: false } }) => {
     <OutcomeScalar market={market} opts={opts} />
   )
 
-  if (isMarketResolved(market)) {
+  if (showWinningOutcome) {
     outcomeComponent = <WinningOutcome market={market} />
   }
 
diff --git a/src/components/WinningOutcome/WinningOutcome.scss b/src/components/WinningOutcome/WinningOutcome.scss
deleted file mode 100644
index 2deda1e0e..000000000
--- a/src/components/WinningOutcome/WinningOutcome.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.outcome__winning {
-  &--container {
-    display: flex;
-    margin: 10px 0 10px 3px;
-    align-items: center;
-    justify-content: flex-start;
-    text-transform: uppercase;
-    font-weight: 500;
-  }
-
-  &--icon {
-    background: url("../../assets/img/icons/icon_winningOutcome.svg");
-    background-size: contain;
-    width: 40px;
-    height: 40px;
-    margin-left: -10px;
-  }
-
-  &--label {
-    color: #87949c;
-    font-size: 12px;
-  }
-
-  &--box {
-    margin-left: 10px;
-    background-color: #87949c;
-    color: #fff;
-    border-radius: 6px;
-    padding: 5px 10px;
-  }
-
-  &--unit {
-      text-transform: none;
-  }
-}
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index 2b25996e6..ae07a7a78 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -60,6 +60,8 @@ module.exports = {
             loader: 'css-loader',
             options: {
               sourceMap: true,
+              importLoaders: 2,
+              localIdentName: '[name]--[local]--[hash:base64:8]',
             },
           },
           {
@@ -68,7 +70,10 @@ module.exports = {
               sourceMap: true,
             },
           },
-          { loader: 'sass-loader', options: { sourceMap: true } },
+          {
+            loader: 'sass-loader',
+            options: { sourceMap: true, localIdentName: '[path][name]__[local]--[hash:base64:5]' },
+          },
         ],
       },
       {

From f582adf47414b3665ff4d499fe1f4259d3429be4 Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Tue, 20 Feb 2018 13:48:15 +0400
Subject: [PATCH 2/7] Add trendingOutcome component, use css modules in
 outcomeCategorical

---
 .../TrendingOutcome/index.js                  |  35 ++++++
 .../Outcome/OutcomeCategorical/index.js       |  40 +++----
 .../outcomeCategorical.scss                   | 105 ++++++++---------
 .../Outcome/OutcomeScalar/outcomeScalar.scss  | 108 +++++++++---------
 .../WinningOutcome/WinningOutcome.scss        |  10 +-
 .../Outcome/WinningOutcome/index.js           |  26 ++++-
 6 files changed, 181 insertions(+), 143 deletions(-)
 create mode 100644 src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js

diff --git a/src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js b/src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js
new file mode 100644
index 000000000..3bf3953ba
--- /dev/null
+++ b/src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import style from '../outcomeCategorical.scss'
+
+const cx = cn.bind(style)
+
+const TrendingOutcome = ({
+  entryStyle, outcome, percentage, resolutionDate,
+}) => (
+  <div className="outcomes outcomes--categorical">
+    <div className={cx('outcomeWrapper')}>
+      <div className="entry__color" style={entryStyle} />
+      <div className={cx('outcome')}>{outcome}</div>
+    </div>
+    <div>{percentage}%</div>
+    <div className={cx('date')}>{resolutionDate}</div>
+  </div>
+)
+
+TrendingOutcome.propTypes = {
+  entryStyle: PropTypes.object,
+  outcome: PropTypes.string,
+  percentage: PropTypes.string,
+  resolutionDate: PropTypes.string,
+}
+
+TrendingOutcome.defaultProps = {
+  entryStyle: {},
+  outcome: '',
+  percentage: '',
+  resolutionDate: '',
+}
+
+export default TrendingOutcome
diff --git a/src/components/Outcome/OutcomeCategorical/index.js b/src/components/Outcome/OutcomeCategorical/index.js
index d3ff1f741..ae0bf1387 100644
--- a/src/components/Outcome/OutcomeCategorical/index.js
+++ b/src/components/Outcome/OutcomeCategorical/index.js
@@ -1,13 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
+import moment from 'moment'
 
 import { COLOR_SCHEME_DEFAULT } from 'utils/constants'
 import { marketShape } from 'utils/shapes'
-import moment from 'moment'
-
+import TrendingOutcome from './TrendingOutcome'
 import { calcLMSRMarginalPrice } from 'api'
 
-import './outcomeCategorical.scss'
+import style from './outcomeCategorical.scss'
+
+const cx = cn.bind(style)
 
 const OutcomeCategorical = ({ market, opts = {} }) => {
   const renderOutcomes = market.eventDescription.outcomes
@@ -37,26 +40,19 @@ const OutcomeCategorical = ({ market, opts = {} }) => {
     const resolutionDateFormatted = showDate ? moment(market.eventDescription.resolutionDate).format(dateFormat) : ''
 
     return (
-      <div className="outcomes outcomes--categorical">
-        <div className="outcome__wrapper">
-          <div className="entry__color" style={outcomeEntryStyle} />
-          <div className="outcome">
-            {renderOutcomes[trendingOutcomeIndex]}
-          </div>
-        </div>
-        <div>{trendingMarginalPricePercent}%</div>
-        <div className="date">{resolutionDateFormatted}</div>
-      </div>
+      <TrendingOutcome
+        entryStyle={outcomeEntryStyle}
+        outcome={renderOutcomes[trendingOutcomeIndex]}
+        percentage={trendingMarginalPricePercent}
+        resolutionDate={resolutionDateFormatted}
+      />
     )
   }
 
   // show all outcomes
   return (
-    <div className={`${className} outcomes outcomes--categorical`}>
+    <div className={className}>
       {renderOutcomes.map((outcome, outcomeIndex) => {
-        if (market.oracle.isOutcomeSet && market.oracle.outcome !== outcomeIndex) {
-          return <div key={outcomeIndex} className="outcome" />
-        }
         const outcomeBarStyle = {
           width: `${tokenDistribution[outcomeIndex] * 100}%`,
           backgroundColor: COLOR_SCHEME_DEFAULT[outcomeIndex],
@@ -64,12 +60,12 @@ const OutcomeCategorical = ({ market, opts = {} }) => {
         const tokenDistributionPercent = `${Math.round(tokenDistribution[outcomeIndex] * 100).toFixed(0)}%`
 
         return (
-          <div key={outcomeIndex} className="outcome">
-            <div className="outcome__bar">
-              <div className="outcome__bar--inner" style={outcomeBarStyle}>
-                <div className="outcome__bar--label">
+          <div key={outcome} className={cx('outcome')}>
+            <div className={cx('outcomeBar')}>
+              <div className={cx('outcomeBarInner')} style={outcomeBarStyle}>
+                <div className={cx('outcomeBarLabel')}>
                   {renderOutcomes[outcomeIndex]}
-                  <div className="outcome__bar--value">{tokenDistributionPercent}</div>
+                  <div className={cx('outcomeBarValue')}>{tokenDistributionPercent}</div>
                 </div>
               </div>
             </div>
diff --git a/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss b/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
index c31759473..8b055183b 100644
--- a/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
+++ b/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
@@ -1,71 +1,62 @@
 @import '../../../scss/vars.scss';
 
-
 $outcome-bar-height: 15px;
 $outcome-bar-height-leading: 30px;
 
-.outcomes.outcomes--categorical {
-  .outcomes--categorical {
-    &--top-6 {
-      margin-top: 6px;
-    }
-  }
-
-  .outcome {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
+.outcome {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
 
-    &__wrapper {
-      max-width: 75%;
-    }
+.outcomeWrapper {
+  max-width: 75%;
+}
 
-    &__bar {
-      display: inline-block;
-      position: relative;
-      width: 30%;
-      margin: 5px 0;
+.outcomeBar {
+  display: inline-block;
+  position: relative;
+  width: 30%;
+  margin: 5px 0;
+}
 
-      &--inner {
-        height: $outcome-bar-height;
-        position: relative;
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+.outcomeBarInner {
+  height: $outcome-bar-height;
+  position: relative;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
-        transition: width 1s ease;
-      }
+  transition: width 1s ease;
+}
 
-      &--value {
-        line-height: $outcome-bar-height;
-        vertical-align: middle;
-        padding-left: 5px;
-        display: inline;
-        min-width: 30px;
-        color: $font-color-muted;
-        font-size: 10px;
-        letter-spacing: 0.5px;
-        text-transform: uppercase;
-      }
+.outcomeBarValue {
+  line-height: $outcome-bar-height;
+  vertical-align: middle;
+  padding-left: 5px;
+  display: inline;
+  min-width: 30px;
+  color: $font-color-muted;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+}
 
-      &--label {
-        margin-left: 100%;
-        padding-left: 5px;
-        line-height: $outcome-bar-height;
-        text-transform: uppercase;
-        font-size: 10px;
-        letter-spacing: 0.5px;
-      }
-    }
+.outcomeBarLabel {
+  margin-left: 100%;
+  padding-left: 5px;
+  line-height: $outcome-bar-height;
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.5px;
+}
 
-    &__label {
-      display: inline-block;
-    }
-  }
+.outcomeLabel {
+  display: inline-block;
+}
 
-  .date {
-    margin-left: 7px;
-  }
+.date {
+  margin-left: 7px;
 }
diff --git a/src/components/Outcome/OutcomeScalar/outcomeScalar.scss b/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
index 29e6495b8..e2a8f67d9 100644
--- a/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
+++ b/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
@@ -2,72 +2,72 @@
 
 $expandable-arrow-size: 7px;
 
-.outcomes.outcomes--scalar {
+.outcomeScalarContainer {
   margin-top: 40px;
-  
-  .outcome {
-    width: 50%;
-    display: table;
-    .outcome__bound {
-      display: table-cell;
-      width: 15%;
-      height: 30px;
-      vertical-align: middle;
-      font-size: 10px;
-      font-weight: 500;
-      letter-spacing: .5px;
-      &--lower {
-        text-align: left;
-      }
-      &--upper {
-        text-align: right;
-      }
+}
+
+.outcome {
+  width: 50%;
+  display: table;
+  .outcome__bound {
+    display: table-cell;
+    width: 15%;
+    height: 30px;
+    vertical-align: middle;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    &--lower {
+      text-align: left;
+    }
+    &--upper {
+      text-align: right;
     }
-    .outcome__currentPrediction {
-      position: relative;
-      height: 30px;
+  }
+  .outcome__currentPrediction {
+    position: relative;
+    height: 30px;
+    width: 100%;
+    .outcome__currentPrediction--line {
+      position: absolute;
+      background-color: $bg-color-muted;
+      height: 2px;
       width: 100%;
-      .outcome__currentPrediction--line {
-        position: absolute;
-        background-color: $bg-color-muted;
-        height: 2px;
-        width: 100%;
-        top: 50%;
-        transform: translateY(-1px);
-      }
-      .outcome__currentPrediction--value {
+      top: 50%;
+      transform: translateY(-1px);
+    }
+    .outcome__currentPrediction--value {
+      position: absolute;
+      background-color: $link-color;
+      padding: 5px;
+      border-radius: 5px;
+      color: white;
+      top: 50%;
+      transform: translate(-50%, -38px);
+      transition: left 1s ease;
+      left: 0;
+      &:after {
+        content: '';
         position: absolute;
-        background-color: $link-color;
-        padding: 5px;
-        border-radius: 5px;
-        color: white;
-        top: 50%;
-        transform: translate(-50%, -38px);
-        transition: left 1s ease;
-        left: 0;
-        &:after {
-          content: '';
-          position: absolute;
-          bottom: -5px;
-          left: 50%;
-          margin-left: -$expandable-arrow-size;
-          width: 0;
-          height: 0;
-          border-left: $expandable-arrow-size solid transparent;
-          border-right: $expandable-arrow-size solid transparent;
-          border-top: $expandable-arrow-size solid $link-color;
-        }
+        bottom: -5px;
+        left: 50%;
+        margin-left: -$expandable-arrow-size;
+        width: 0;
+        height: 0;
+        border-left: $expandable-arrow-size solid transparent;
+        border-right: $expandable-arrow-size solid transparent;
+        border-top: $expandable-arrow-size solid $link-color;
       }
     }
   }
 }
 
-.outcome__currentPrediction--value {  
+.outcome__currentPrediction--value {
   background-color: $link-color;
   padding: 5px;
   border-radius: 5px;
-  color: white;  
+  color: white;
   transform: translate(-50%, -38px);
   transition: left 1s ease;
   left: 0;
-}
\ No newline at end of file
+}
diff --git a/src/components/Outcome/WinningOutcome/WinningOutcome.scss b/src/components/Outcome/WinningOutcome/WinningOutcome.scss
index 0b86b7ba3..2639badcc 100644
--- a/src/components/Outcome/WinningOutcome/WinningOutcome.scss
+++ b/src/components/Outcome/WinningOutcome/WinningOutcome.scss
@@ -1,4 +1,4 @@
-.outcome {
+.winningOutcomeContainer {
   display: flex;
   margin: 10px 0 10px 3px;
   align-items: center;
@@ -7,7 +7,7 @@
   font-weight: 500;
 }
 
-.icon {
+.winningOutcomeIcon {
   background: url('../../../assets/img/icons/icon_winningOutcome.svg');
   background-size: contain;
   width: 40px;
@@ -15,12 +15,12 @@
   margin-left: -10px;
 }
 
-.label {
+.winningOutcomeLabel {
   color: #87949c;
   font-size: 12px;
 }
 
-.textBox {
+.winningOutcomeText {
   margin-left: 10px;
   background-color: #87949c;
   color: #fff;
@@ -28,6 +28,6 @@
   padding: 5px 10px;
 }
 
-.unit {
+.winningOutcomeUnit {
   text-transform: none;
 }
diff --git a/src/components/Outcome/WinningOutcome/index.js b/src/components/Outcome/WinningOutcome/index.js
index 4d2dad660..4a8fdc8a5 100644
--- a/src/components/Outcome/WinningOutcome/index.js
+++ b/src/components/Outcome/WinningOutcome/index.js
@@ -20,18 +20,18 @@ const WinningOutcome = ({
       .toString()
     outcomeText = (
       <Fragment>
-        {outcomeValue} <span className={cx('unit')}>{unit}</span>
+        {outcomeValue} <span className={cx('winningOutcomeUnit')}>{unit}</span>
       </Fragment>
     )
   }
 
   return (
-    <div className={cx('outcome')}>
-      <div className={cx('icon')} />
-      <span className={cx('label')}>
+    <div className={cx('winningOutcomeContainer')}>
+      <div className={cx('winningOutcomeIcon')} />
+      <span className={cx('winningOutcomeLabel')}>
         Winning<br />outcome
       </span>
-      <div className={cx('textBox')}>{outcomeText}</div>
+      <div className={cx('winningOutcomeText')}>{outcomeText}</div>
     </div>
   )
 }
@@ -50,4 +50,20 @@ WinningOutcome.propTypes = {
   decimals: PropTypes.string,
 }
 
+WinningOutcome.defaultProps = {
+  market: {
+    event: {
+      type: '',
+    },
+    eventDescription: {
+      outcomes: [],
+      unit: '',
+      decimals: '',
+    },
+    oracle: {
+      outcome: '',
+    },
+  },
+}
+
 export default WinningOutcome

From 1770729f4e5a770598c8e3481909a899605566c2 Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Tue, 20 Feb 2018 15:15:31 +0400
Subject: [PATCH 3/7] Add trendingOutcomeSCALAR pm-407

---
 .../index.js                                  |  8 +++---
 .../Outcome/OutcomeCategorical/index.js       |  7 +++--
 .../TredingOutcomeScalar/index.js             | 26 +++++++++++++++++++
 src/components/Outcome/OutcomeScalar/index.js | 19 +++++---------
 4 files changed, 39 insertions(+), 21 deletions(-)
 rename src/components/Outcome/OutcomeCategorical/{TrendingOutcome => TrendingOutcomeCategorical}/index.js (81%)
 create mode 100644 src/components/Outcome/OutcomeScalar/TredingOutcomeScalar/index.js

diff --git a/src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js b/src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js
similarity index 81%
rename from src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js
rename to src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js
index 3bf3953ba..3d86882a5 100644
--- a/src/components/Outcome/OutcomeCategorical/TrendingOutcome/index.js
+++ b/src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js
@@ -5,7 +5,7 @@ import style from '../outcomeCategorical.scss'
 
 const cx = cn.bind(style)
 
-const TrendingOutcome = ({
+const TrendingOutcomeCategorical = ({
   entryStyle, outcome, percentage, resolutionDate,
 }) => (
   <div className="outcomes outcomes--categorical">
@@ -18,18 +18,18 @@ const TrendingOutcome = ({
   </div>
 )
 
-TrendingOutcome.propTypes = {
+TrendingOutcomeCategorical.propTypes = {
   entryStyle: PropTypes.object,
   outcome: PropTypes.string,
   percentage: PropTypes.string,
   resolutionDate: PropTypes.string,
 }
 
-TrendingOutcome.defaultProps = {
+TrendingOutcomeCategorical.defaultProps = {
   entryStyle: {},
   outcome: '',
   percentage: '',
   resolutionDate: '',
 }
 
-export default TrendingOutcome
+export default TrendingOutcomeCategorical
diff --git a/src/components/Outcome/OutcomeCategorical/index.js b/src/components/Outcome/OutcomeCategorical/index.js
index ae0bf1387..cfeebc6a1 100644
--- a/src/components/Outcome/OutcomeCategorical/index.js
+++ b/src/components/Outcome/OutcomeCategorical/index.js
@@ -2,11 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import moment from 'moment'
-
+import { calcLMSRMarginalPrice } from 'api'
 import { COLOR_SCHEME_DEFAULT } from 'utils/constants'
 import { marketShape } from 'utils/shapes'
-import TrendingOutcome from './TrendingOutcome'
-import { calcLMSRMarginalPrice } from 'api'
+import TrendingOutcomeCategorical from './TrendingOutcomeCategorical'
 
 import style from './outcomeCategorical.scss'
 
@@ -40,7 +39,7 @@ const OutcomeCategorical = ({ market, opts = {} }) => {
     const resolutionDateFormatted = showDate ? moment(market.eventDescription.resolutionDate).format(dateFormat) : ''
 
     return (
-      <TrendingOutcome
+      <TrendingOutcomeCategorical
         entryStyle={outcomeEntryStyle}
         outcome={renderOutcomes[trendingOutcomeIndex]}
         percentage={trendingMarginalPricePercent}
diff --git a/src/components/Outcome/OutcomeScalar/TredingOutcomeScalar/index.js b/src/components/Outcome/OutcomeScalar/TredingOutcomeScalar/index.js
new file mode 100644
index 000000000..89cc2d613
--- /dev/null
+++ b/src/components/Outcome/OutcomeScalar/TredingOutcomeScalar/index.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import DecimalValue from 'components/DecimalValue'
+
+const TrendingOutcomeScalar = ({ predictedValue, unit, decimals }) => (
+  <div className="row">
+    <div className="col-md-6">
+      <DecimalValue value={predictedValue} decimals={decimals} className="outcome__currentPrediction--value" />
+      &nbsp;{unit}
+    </div>
+  </div>
+)
+
+TrendingOutcomeScalar.propTypes = {
+  predictedValue: PropTypes.string,
+  unit: PropTypes.string,
+  decimals: PropTypes.string,
+}
+
+TrendingOutcomeScalar.defaultProps = {
+  predictedValue: '0',
+  unit: '',
+  decimals: '0',
+}
+
+export default TrendingOutcomeScalar
diff --git a/src/components/Outcome/OutcomeScalar/index.js b/src/components/Outcome/OutcomeScalar/index.js
index 0f2325547..f72873159 100644
--- a/src/components/Outcome/OutcomeScalar/index.js
+++ b/src/components/Outcome/OutcomeScalar/index.js
@@ -1,12 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Decimal from 'decimal.js'
-
 import DecimalValue from 'components/DecimalValue'
-
 import { marketShape } from 'utils/shapes'
-
 import { calcLMSRMarginalPrice } from 'api'
+import TrendingOutcomeScalar from './TredingOutcomeScalar'
 
 import './outcomeScalar.scss'
 
@@ -35,16 +33,11 @@ const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
 
   if (showOnlyTrendingOutcome) {
     return (
-      <div className="row">
-        <div className="col-md-6">
-          <DecimalValue
-            value={value}
-            decimals={market.eventDescription.decimals}
-            className="outcome__currentPrediction--value"
-          />
-          &nbsp;{market.eventDescription.unit}
-        </div>
-      </div>
+      <TrendingOutcomeScalar
+        predictedValue={value}
+        decimals={market.eventDescription.decimals}
+        unit={market.eventDescription.unit}
+      />
     )
   }
 

From 1b765b16835dc458c65bc7bc3a7e88b5822582b5 Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Tue, 20 Feb 2018 16:23:02 +0400
Subject: [PATCH 4/7] use css modules in outcomeScalar PM-407

---
 src/components/Outcome/OutcomeScalar/index.js |  19 ++--
 .../Outcome/OutcomeScalar/outcomeScalar.scss  | 106 +++++++++---------
 2 files changed, 61 insertions(+), 64 deletions(-)

diff --git a/src/components/Outcome/OutcomeScalar/index.js b/src/components/Outcome/OutcomeScalar/index.js
index f72873159..df63f6d30 100644
--- a/src/components/Outcome/OutcomeScalar/index.js
+++ b/src/components/Outcome/OutcomeScalar/index.js
@@ -1,12 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import Decimal from 'decimal.js'
 import DecimalValue from 'components/DecimalValue'
 import { marketShape } from 'utils/shapes'
 import { calcLMSRMarginalPrice } from 'api'
 import TrendingOutcomeScalar from './TredingOutcomeScalar'
 
-import './outcomeScalar.scss'
+import style from './outcomeScalar.scss'
+
+const cx = cn.bind(style)
 
 const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
   let marginalPrice = calcLMSRMarginalPrice({
@@ -42,20 +45,20 @@ const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
   }
 
   return (
-    <div className="outcomes outcomes--scalar">
-      <div className="outcome">
-        <div className="outcome__bound outcome__bound--lower">
+    <div>
+      <div className={cx('scalarOutcome')}>
+        <div className={cx('outcomeBound', 'lower')}>
           <DecimalValue value={lowerBound} decimals={market.eventDescription.decimals} />
           &nbsp;{market.eventDescription.unit}
         </div>
-        <div className="outcome__currentPrediction">
-          <div className="outcome__currentPrediction--line" />
-          <div className="outcome__currentPrediction--value" style={{ left: `${marginalPrice.mul(100).toFixed(5)}%` }}>
+        <div className={cx('currentPrediction')}>
+          <div className={cx('currentPredictionLine')} />
+          <div className={cx('currentPredictionValue')} style={{ left: `${marginalPrice.mul(100).toFixed(5)}%` }}>
             <DecimalValue value={value} decimals={market.eventDescription.decimals} />
             &nbsp;{market.eventDescription.unit}
           </div>
         </div>
-        <div className="outcome__bound outcome__bound--upper">
+        <div className={cx('outcomeBound', 'upper')}>
           <DecimalValue value={upperBound} decimals={market.eventDescription.decimals} />
           &nbsp;{market.eventDescription.unit}
         </div>
diff --git a/src/components/Outcome/OutcomeScalar/outcomeScalar.scss b/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
index e2a8f67d9..5ea32b687 100644
--- a/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
+++ b/src/components/Outcome/OutcomeScalar/outcomeScalar.scss
@@ -2,72 +2,66 @@
 
 $expandable-arrow-size: 7px;
 
-.outcomeScalarContainer {
+.scalarOutcome {
+  width: 50%;
+  display: table;
   margin-top: 40px;
 }
 
-.outcome {
-  width: 50%;
-  display: table;
-  .outcome__bound {
-    display: table-cell;
-    width: 15%;
-    height: 30px;
-    vertical-align: middle;
-    font-size: 10px;
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    &--lower {
-      text-align: left;
-    }
-    &--upper {
-      text-align: right;
-    }
-  }
-  .outcome__currentPrediction {
-    position: relative;
-    height: 30px;
-    width: 100%;
-    .outcome__currentPrediction--line {
-      position: absolute;
-      background-color: $bg-color-muted;
-      height: 2px;
-      width: 100%;
-      top: 50%;
-      transform: translateY(-1px);
-    }
-    .outcome__currentPrediction--value {
-      position: absolute;
-      background-color: $link-color;
-      padding: 5px;
-      border-radius: 5px;
-      color: white;
-      top: 50%;
-      transform: translate(-50%, -38px);
-      transition: left 1s ease;
-      left: 0;
-      &:after {
-        content: '';
-        position: absolute;
-        bottom: -5px;
-        left: 50%;
-        margin-left: -$expandable-arrow-size;
-        width: 0;
-        height: 0;
-        border-left: $expandable-arrow-size solid transparent;
-        border-right: $expandable-arrow-size solid transparent;
-        border-top: $expandable-arrow-size solid $link-color;
-      }
-    }
-  }
+.currentPrediction {
+  position: relative;
+  height: 30px;
+  width: 100%;
 }
 
-.outcome__currentPrediction--value {
+
+.currentPredictionLine {
+  position: absolute;
+  background-color: $bg-color-muted;
+  height: 2px;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-1px);
+}
+
+.currentPredictionValue {
+  position: absolute;
   background-color: $link-color;
   padding: 5px;
   border-radius: 5px;
   color: white;
+  top: 50%;
   transform: translate(-50%, -38px);
   transition: left 1s ease;
   left: 0;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    margin-left: -$expandable-arrow-size;
+    width: 0;
+    height: 0;
+    border-left: $expandable-arrow-size solid transparent;
+    border-right: $expandable-arrow-size solid transparent;
+    border-top: $expandable-arrow-size solid $link-color;
+  }
+}
+
+.outcomeBound {
+  display: table-cell;
+  width: 15%;
+  height: 30px;
+  vertical-align: middle;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+
+  .lower {
+    text-align: left;
+  }
+  
+  .upper {
+    text-align: right;
+  }
 }

From 2b043e8b6e4921adf0f86b8a5d38be9dc9f402d9 Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Tue, 20 Feb 2018 16:25:28 +0400
Subject: [PATCH 5/7] add defaultprops for outcomeScalar and outcomeCategorical
 pm-407

---
 .../Outcome/OutcomeCategorical/index.js           | 14 ++++++++++++++
 src/components/Outcome/OutcomeScalar/index.js     | 15 ++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/Outcome/OutcomeCategorical/index.js b/src/components/Outcome/OutcomeCategorical/index.js
index cfeebc6a1..7013d85d3 100644
--- a/src/components/Outcome/OutcomeCategorical/index.js
+++ b/src/components/Outcome/OutcomeCategorical/index.js
@@ -85,4 +85,18 @@ OutcomeCategorical.propTypes = {
   }),
 }
 
+OutcomeCategorical.defaultProps = {
+  market: {
+    event: {},
+    oracle: {},
+    eventDescription: {},
+  },
+  opts: {
+    className: '',
+    showOnlyTrendingOutcome: false,
+    showDate: false,
+    dateFormat: '',
+  },
+}
+
 export default OutcomeCategorical
diff --git a/src/components/Outcome/OutcomeScalar/index.js b/src/components/Outcome/OutcomeScalar/index.js
index df63f6d30..d7c90cf06 100644
--- a/src/components/Outcome/OutcomeScalar/index.js
+++ b/src/components/Outcome/OutcomeScalar/index.js
@@ -69,7 +69,20 @@ const OutcomeScalar = ({ market, opts: { showOnlyTrendingOutcome } }) => {
 
 OutcomeScalar.propTypes = {
   market: marketShape,
-  opts: PropTypes.object,
+  opts: PropTypes.shape({
+    showOnlyTrendingOutcome: PropTypes.bool,
+  }),
+}
+
+OutcomeScalar.defaultProps = {
+  market: {
+    event: {},
+    eventDescription: {},
+    oracle: {},
+  },
+  opts: {
+    showOnlyTrendingOutcome: false,
+  },
 }
 
 export default OutcomeScalar

From a50719e85e19f7ae871b8428deba6e8bd268aa5c Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Tue, 20 Feb 2018 16:28:45 +0400
Subject: [PATCH 6/7] remove unnecessary props from dev config PM-407

---
 webpack.dev.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index ae07a7a78..8e409acf4 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -72,7 +72,7 @@ module.exports = {
           },
           {
             loader: 'sass-loader',
-            options: { sourceMap: true, localIdentName: '[path][name]__[local]--[hash:base64:5]' },
+            options: { sourceMap: true },
           },
         ],
       },

From f084edd42903f8b3fe5b2a1818d51e7a82f8ee8f Mon Sep 17 00:00:00 2001
From: Mikhail <mmvsha73@gmail.com>
Date: Thu, 22 Feb 2018 19:42:33 +0400
Subject: [PATCH 7/7] Add OutcomeColorBox, fix usage of unbound styles PM-407

---
 src/components/Dashboard/dashboard.scss       | 23 -------------------
 src/components/Dashboard/index.js             |  5 ++--
 src/components/MarketMySharesForm/index.js    |  3 ++-
 .../marketMySharesForm.scss                   | 12 ----------
 src/components/MarketMyTrades/index.js        |  3 ++-
 .../MarketMyTrades/marketMyTrades.scss        | 12 ----------
 .../TrendingOutcomeCategorical/index.js       | 10 +++++---
 .../outcomeCategorical.scss                   |  7 ++++++
 .../OutcomeColorBox/OutcomeColorBox.scss      |  6 +++++
 src/components/OutcomeColorBox/index.js       | 22 ++++++++++++++++++
 10 files changed, 49 insertions(+), 54 deletions(-)
 create mode 100644 src/components/OutcomeColorBox/OutcomeColorBox.scss
 create mode 100644 src/components/OutcomeColorBox/index.js

diff --git a/src/components/Dashboard/dashboard.scss b/src/components/Dashboard/dashboard.scss
index 962c8e42a..36132fd93 100644
--- a/src/components/Dashboard/dashboard.scss
+++ b/src/components/Dashboard/dashboard.scss
@@ -187,17 +187,6 @@ $dashboardmarket-left-column-value-color: black;
     border-bottom-right-radius: $market-border-radius;
   }
 
-  .outcomes {
-    &--categorical {
-      display: flex;
-      align-items: center;
-    }
-
-    .entry__color {
-      margin-bottom: 0;
-    }
-  }
-
   .outcome {
     margin-right: 10px;
     display: flex;
@@ -388,15 +377,3 @@ $dashboardmarket-left-column-value-color: black;
     }
   }
 }
-
-.entry {
-  &__color {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    margin-bottom: -5px;
-    margin-right: 5px;
-
-    border-radius: 4px;
-  }
-}
diff --git a/src/components/Dashboard/index.js b/src/components/Dashboard/index.js
index 1af0c17c0..a0fbdf778 100644
--- a/src/components/Dashboard/index.js
+++ b/src/components/Dashboard/index.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import autobind from 'autobind-decorator'
 import cn from 'classnames'
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import PageFrame from 'components/layout/PageFrame'
 import Block from 'components/layout/Block'
 import Title from 'components/layout/Title'
@@ -133,7 +134,7 @@ class Dashboard extends Component {
           <div className="dashboardMarket__title">{share.eventDescription.title}</div>
           <div className="outcome row">
             <div className="col-md-3">
-              <div className="entry__color" style={outcomeColorStyle} />
+              <OutcomeColorBox style={outcomeColorStyle} />
               <div className="dashboardMarket--highlight">{getOutcomeName(share, share.outcomeToken.index)}</div>
             </div>
             <div className="col-md-2 dashboardMarket--highlight">
@@ -187,7 +188,7 @@ class Dashboard extends Component {
           <div className="dashboardMarket__title">{market.eventDescription.title}</div>
           <div className="outcome row">
             <div className="col-md-3">
-              <div className="entry__color" style={outcomeColorStyle} />
+              <OutcomeColorBox style={outcomeColorStyle} />
               <div className="dashboardMarket--highlight">{getOutcomeName(market, trade.outcomeToken.index)}</div>
             </div>
             <div className="col-md-3 dashboardMarket--highlight">
diff --git a/src/components/MarketMySharesForm/index.js b/src/components/MarketMySharesForm/index.js
index 6d0a3b20c..05dd8e03e 100644
--- a/src/components/MarketMySharesForm/index.js
+++ b/src/components/MarketMySharesForm/index.js
@@ -7,6 +7,7 @@ import { calcLMSRMarginalPrice, calcLMSRProfit } from 'api'
 
 import InteractionButton from 'containers/InteractionButton'
 
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import DecimalValue from 'components/DecimalValue'
 import CurrencyName from 'components/CurrencyName'
 import FormSlider from 'components/FormSlider'
@@ -154,7 +155,7 @@ class MarketMySharesForm extends Component {
 
       tableRows.push(<tr className="marketMyShares__share" key={share.id}>
         <td>
-          <div className="shareOutcome__color" style={outcomeColorStyle} />
+          <OutcomeColorBox style={outcomeColorStyle} />
         </td>
         <td className="">{getOutcomeName(market, share.outcomeToken.index)}</td>
         <td>
diff --git a/src/components/MarketMySharesForm/marketMySharesForm.scss b/src/components/MarketMySharesForm/marketMySharesForm.scss
index 47ca9520b..36a753cf0 100644
--- a/src/components/MarketMySharesForm/marketMySharesForm.scss
+++ b/src/components/MarketMySharesForm/marketMySharesForm.scss
@@ -94,18 +94,6 @@ $groupWidth: 33%;
   }
 }
 
-.shareOutcome {
-  &__color {
-    display: inline-block;
-    vertical-align: middle;
-
-    width: 20px;
-    height: 20px;
-
-    border-radius: 4px;
-  }
-}
-
 .marketMySharesSellAmount {
   &__input {
     font-size: 14px;
diff --git a/src/components/MarketMyTrades/index.js b/src/components/MarketMyTrades/index.js
index 46fe37b88..0dbfb0af8 100644
--- a/src/components/MarketMyTrades/index.js
+++ b/src/components/MarketMyTrades/index.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Decimal from 'decimal.js'
 import moment from 'moment'
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import { decimalToText } from 'components/DecimalValue'
 import CurrencyName from 'components/CurrencyName'
 import { RESOLUTION_TIME, COLOR_SCHEME_SCALAR, COLOR_SCHEME_DEFAULT, OUTCOME_TYPES } from 'utils/constants'
@@ -47,7 +48,7 @@ class MarketMyTrades extends Component {
       return (
         <tr className="marketMyTrades__share" key={trade.id}>
           <td>
-            <div className="shareOutcome__color" style={outcomeColorStyle} />
+            <OutcomeColorBox style={outcomeColorStyle} />
           </td>
           <td>{trade.orderType}</td>
           <td>{getOutcomeName(market, trade.outcomeToken.index)}</td>
diff --git a/src/components/MarketMyTrades/marketMyTrades.scss b/src/components/MarketMyTrades/marketMyTrades.scss
index 941fe60f4..9be5b9311 100644
--- a/src/components/MarketMyTrades/marketMyTrades.scss
+++ b/src/components/MarketMyTrades/marketMyTrades.scss
@@ -66,18 +66,6 @@ $groupWidth: 20%;
   }
 }
 
-.shareOutcome {
-  &__color {
-    display: inline-block;
-    vertical-align: middle;
-
-    width: 20px;
-    height: 20px;
-
-    border-radius: 4px;
-  }
-}
-
 .marketMyTradesSellAmount {
   &__input {
     font-size: 14px;
diff --git a/src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js b/src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js
index 3d86882a5..10de2aa0a 100644
--- a/src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js
+++ b/src/components/Outcome/OutcomeCategorical/TrendingOutcomeCategorical/index.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
+
+import OutcomeColorBox from 'components/OutcomeColorBox'
 import style from '../outcomeCategorical.scss'
 
 const cx = cn.bind(style)
@@ -8,9 +10,9 @@ const cx = cn.bind(style)
 const TrendingOutcomeCategorical = ({
   entryStyle, outcome, percentage, resolutionDate,
 }) => (
-  <div className="outcomes outcomes--categorical">
+  <div className={cx('trendingOutcomeCategoricalContainer')}>
     <div className={cx('outcomeWrapper')}>
-      <div className="entry__color" style={entryStyle} />
+      <OutcomeColorBox style={entryStyle} />
       <div className={cx('outcome')}>{outcome}</div>
     </div>
     <div>{percentage}%</div>
@@ -19,7 +21,9 @@ const TrendingOutcomeCategorical = ({
 )
 
 TrendingOutcomeCategorical.propTypes = {
-  entryStyle: PropTypes.object,
+  entryStyle: PropTypes.shape({
+    backgroundColor: PropTypes.string,
+  }),
   outcome: PropTypes.string,
   percentage: PropTypes.string,
   resolutionDate: PropTypes.string,
diff --git a/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss b/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
index 8b055183b..ad6356cdf 100644
--- a/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
+++ b/src/components/Outcome/OutcomeCategorical/outcomeCategorical.scss
@@ -12,6 +12,8 @@ $outcome-bar-height-leading: 30px;
 
 .outcomeWrapper {
   max-width: 75%;
+  display: flex;
+  align-items: center;
 }
 
 .outcomeBar {
@@ -60,3 +62,8 @@ $outcome-bar-height-leading: 30px;
 .date {
   margin-left: 7px;
 }
+
+.trendingOutcomeCategoricalContainer {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/components/OutcomeColorBox/OutcomeColorBox.scss b/src/components/OutcomeColorBox/OutcomeColorBox.scss
new file mode 100644
index 000000000..ef8293ead
--- /dev/null
+++ b/src/components/OutcomeColorBox/OutcomeColorBox.scss
@@ -0,0 +1,6 @@
+.OutcomeColorBox {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
diff --git a/src/components/OutcomeColorBox/index.js b/src/components/OutcomeColorBox/index.js
new file mode 100644
index 000000000..50f51a774
--- /dev/null
+++ b/src/components/OutcomeColorBox/index.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
+import styles from './OutcomeColorBox.scss'
+
+const cx = cn.bind(styles)
+
+const OutcomeColorBox = ({ style }) => <div className={cx('OutcomeColorBox')} style={style} />
+
+OutcomeColorBox.propTypes = {
+  style: PropTypes.shape({
+    backgroundColor: PropTypes.string,
+  }),
+}
+
+OutcomeColorBox.defaultProps = {
+  style: {
+    backgroundColor: '#fff',
+  },
+}
+
+export default OutcomeColorBox