less hacking way of pulling poe data

app/components/price-list-item/price-list-item.scss

@@ -1,23 +1,22 @@
-@import '~open-color/open-color.scss';
+@import '../../scss/variables.scss';
 
 .pli {
-  padding: 20px;
+  padding: 10px;
   border-radius: 4px;
-  background: $oc-gray-3;
-  border-color: $oc-gray-5;
+  background: $dark3;
+  border: 1px solid $dark1;
   display: flex;
   flex-direction: row;
   width: 300px;
   word-break: break-word;
 
   & + & {
-    margin-top: 20px;
+    margin-top: 10px;
   }
 
   &__img {
-    max-width: 100px;
+    max-width: 50px;
     max-height: 50px;
-    padding-right: 20px;
-    cursor: pointer;
+    padding-right: 10px;
   }
 }

app/components/price-list-item/price-list-item.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
+import { FrameType } from '../../model/frame-type';
+import { IItem } from '../../model/item';
+import { RarityColor } from '../../model/rarity-color';
+import { ItemTextService } from '../../services';
 import './price-list-item.scss';
 
 interface IProps {
-  data: any;
+  data: IItem;
 }
 
 interface IState {
@@ -18,16 +22,23 @@ export class PriceListItem extends React.Component<IProps, IState> {
   componentDidMount() {}
 
   render() {
-    const { fullText, icon, priceInfo, typeLine } = this.props.data;
+    const { icon, priceInfo, stackSize, typeLine, frameType } = this.props.data;
+    const name = ItemTextService.filterName(typeLine);
+    const fullText = ItemTextService.parseItem(this.props.data);
+
+    const rarityColor = RarityColor[(FrameType[frameType] || '').toLowerCase()];
 
     return (
-      <div className="pli" title={fullText}>
-        <div style={{ width: '100px' }}>
-          <img src={icon} className="pli__img" />
+      <div className="pli" onClick={() => console.log(this.props.data)}>
+        <div style={{ width: '60px' }}>
+          <img title={fullText} src={icon} className="pli__img" />
         </div>
-        <div style={{ flex: 1 }}>
+        <div style={{ flex: 1 }} className="ellipsis">
           <div style={{ marginBottom: '10px' }}>
-            <b>{typeLine}</b>
+            <div className="ellipsis" title={name} style={{ color: rarityColor }}>
+              {name}
+            </div>
+            <div className="text-secondary">{stackSize && <small>Stack Size: {stackSize}</small>}</div>
           </div>
           <div>
             {priceInfo ? `${priceInfo.min || priceInfo.min_price} ${priceInfo.currency || priceInfo.currency_rec}` : ''}