From e3dbebdecdb7ce02ea3e0e406584b6069f6b2fc0 Mon Sep 17 00:00:00 2001
From: Amol Khanolkar <amolskh@gmail.com>
Date: Fri, 8 Apr 2016 19:39:24 +0530
Subject: [PATCH 1/2] final fixes

---
 components/Prize/PrizeExamples.jsx  |  5 ++++-
 components/Prize/PrizeExamples.scss |  1 +
 components/Prize/PrizeItem.scss     | 16 ++++++++--------
 components/Prize/PrizeItems.jsx     |  6 +++---
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/components/Prize/PrizeExamples.jsx b/components/Prize/PrizeExamples.jsx
index 62ecebde9..92b02a997 100644
--- a/components/Prize/PrizeExamples.jsx
+++ b/components/Prize/PrizeExamples.jsx
@@ -3,6 +3,8 @@ import PrizeItems from './PrizeItems'
 
 require('./PrizeExamples.scss')
 
+
+
 const prizeItems = {
   type : 'prize',
   title : 'Prizes',
@@ -48,7 +50,8 @@ const bonusItems = {
     },
     {
       title : 'Checkin',
-      subText : '$50 x 5'
+      subText : '$50',
+      count: '6'
     }
   ]
 }
diff --git a/components/Prize/PrizeExamples.scss b/components/Prize/PrizeExamples.scss
index bb4753110..85a82f118 100644
--- a/components/Prize/PrizeExamples.scss
+++ b/components/Prize/PrizeExamples.scss
@@ -2,4 +2,5 @@
    background-color: #47474F;
    padding: 15px;
    width: 400px;
+   height: 200px !important;
 }
diff --git a/components/Prize/PrizeItem.scss b/components/Prize/PrizeItem.scss
index 0080ac6bb..3255cba7a 100644
--- a/components/Prize/PrizeItem.scss
+++ b/components/Prize/PrizeItem.scss
@@ -13,14 +13,14 @@ $accent: #59A7FF;
   height: 20px;
   margin-right: 15px;
 
-  span {
+  .subText {
     font-family: "Roboto", Arial, Helvetica, sans-serif;
     font-size: 13px;
     line-height: 15px;
     color: $white;
     font-weight: 500;
   }
-  .prize-circle{
+  .tagged-value-bg{
     display: inline;
     padding: 1px 4px 1px 4px;
     min-width: 15px;
@@ -39,18 +39,18 @@ $accent: #59A7FF;
 
 .prize {
   .PrizeItem:nth-child(1) {
-    .prize-circle{
+    .tagged-value-bg {
       background: $gold;
     }
   }
   .PrizeItem:nth-child(2) {
-    .prize-circle{
+    .tagged-value-bg {
         background: $silver;
     }
   }
 
   .PrizeItem:nth-child(3) {
-    .prize-circle{
+    .tagged-value-bg {
         background: $bronze;
     }
   }
@@ -58,18 +58,18 @@ $accent: #59A7FF;
 
 .bonus {
   .PrizeItem:nth-child(1) {
-    .prize-circle {
+    .tagged-value-bg {
       background: $purple;
     }
   }
   .PrizeItem:nth-child(2) {
-    .prize-circle {
+    .tagged-value-bg {
         background: $purple;
     }
   }
 
   .PrizeItem:nth-child(3) {
-    .prize-circle {
+    .tagged-value-bg {
         background: $accent;
     }
   }
diff --git a/components/Prize/PrizeItems.jsx b/components/Prize/PrizeItems.jsx
index 96077475b..b98d58630 100644
--- a/components/Prize/PrizeItems.jsx
+++ b/components/Prize/PrizeItems.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import PrizeItem from './PrizeItem'
+import TaggedValue from '../TaggedValue/TaggedValue'
 
 require('./PrizeItem.scss')
 
@@ -15,14 +15,14 @@ const PrizeItems = ({type, title, items}) => {
         <div className="title">{title}</div>
         <div className={itemsClass}>
           {items.map((item, index) => {
-            return <PrizeItem title={item.title} subText={item.subText} key={index}/>
+            return <TaggedValue title={item.title} subText={item.subText} count={item.count} style="PrizeItem" key={index}/>
           })}
         </div>
     </div>
   )
 }
 
-PrizeItem.propTypes = {
+PrizeItems.propTypes = {
   type :  React.PropTypes.string,
   items :  React.PropTypes.array
 }

From 7d9f507b9f1b1d6d770322020c6d9355fa66c1ba Mon Sep 17 00:00:00 2001
From: Amol Khanolkar <amolskh@gmail.com>
Date: Sat, 9 Apr 2016 22:04:58 +0530
Subject: [PATCH 2/2] Using TaggedValueList component

---
 components/Prize/PrizeItem.jsx  | 18 ------------------
 components/Prize/PrizeItem.scss | 14 +++++++-------
 components/Prize/PrizeItems.jsx |  6 ++----
 3 files changed, 9 insertions(+), 29 deletions(-)
 delete mode 100644 components/Prize/PrizeItem.jsx

diff --git a/components/Prize/PrizeItem.jsx b/components/Prize/PrizeItem.jsx
deleted file mode 100644
index ecc70674c..000000000
--- a/components/Prize/PrizeItem.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-require('./PrizeItem.scss')
-
-const PrizeItem = ({title, subText}) => {
-  return (
-    <div className="PrizeItem">
-        <div className="prize-circle">{title}</div> <span>{subText}</span>
-    </div>
-  )
-}
-
-PrizeItem.propTypes = {
-  title :  React.PropTypes.string,
-  subText :  React.PropTypes.string
-}
-
-export default PrizeItem
diff --git a/components/Prize/PrizeItem.scss b/components/Prize/PrizeItem.scss
index 3255cba7a..374950d1c 100644
--- a/components/Prize/PrizeItem.scss
+++ b/components/Prize/PrizeItem.scss
@@ -8,7 +8,7 @@ $gray: #47474F;
 $purple: #B47DD6;
 $accent: #59A7FF;
 
-.PrizeItem {
+.TaggedValue {
   display:inline-block;
   height: 20px;
   margin-right: 15px;
@@ -38,18 +38,18 @@ $accent: #59A7FF;
 }
 
 .prize {
-  .PrizeItem:nth-child(1) {
+  .TaggedValue:nth-child(1) {
     .tagged-value-bg {
       background: $gold;
     }
   }
-  .PrizeItem:nth-child(2) {
+  .TaggedValue:nth-child(2) {
     .tagged-value-bg {
         background: $silver;
     }
   }
 
-  .PrizeItem:nth-child(3) {
+  .TaggedValue:nth-child(3) {
     .tagged-value-bg {
         background: $bronze;
     }
@@ -57,18 +57,18 @@ $accent: #59A7FF;
 }
 
 .bonus {
-  .PrizeItem:nth-child(1) {
+  .TaggedValue:nth-child(1) {
     .tagged-value-bg {
       background: $purple;
     }
   }
-  .PrizeItem:nth-child(2) {
+  .TaggedValue:nth-child(2) {
     .tagged-value-bg {
         background: $purple;
     }
   }
 
-  .PrizeItem:nth-child(3) {
+  .TaggedValue:nth-child(3) {
     .tagged-value-bg {
         background: $accent;
     }
diff --git a/components/Prize/PrizeItems.jsx b/components/Prize/PrizeItems.jsx
index b98d58630..bc3ce6311 100644
--- a/components/Prize/PrizeItems.jsx
+++ b/components/Prize/PrizeItems.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import classNames from 'classnames'
-import TaggedValue from '../TaggedValue/TaggedValue'
+import TaggedValueList from '../TaggedValue/TaggedValueList'
 
 require('./PrizeItem.scss')
 
@@ -14,9 +14,7 @@ const PrizeItems = ({type, title, items}) => {
     <div className="PrizeItems">
         <div className="title">{title}</div>
         <div className={itemsClass}>
-          {items.map((item, index) => {
-            return <TaggedValue title={item.title} subText={item.subText} count={item.count} style="PrizeItem" key={index}/>
-          })}
+          <TaggedValueList items={items} layout="wrap"/>   
         </div>
     </div>
   )