Implement new stars

components/UncapIndicator/index.scss

@@ -7,4 +7,8 @@
     list-style: none;
     margin: 0;
     padding: 0;
+
+    &:hover {
+        cursor: pointer;
+    }
 }

components/UncapIndicator/index.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import classnames from 'classnames'
+import React, { useState } from 'react'
 import UncapStar from '~components/UncapStar'
 
 import './index.scss'
@@ -36,11 +35,14 @@ const UncapIndicator = (props: Props) => {
         <ul className="UncapIndicator">
             {
                 Array.from(Array(numStars)).map((x, i) => {
-                    if (props.type === 'character' && i > 3 ||
+                    if (props.type === 'character' && i > 4) {
+                        return <UncapStar ulb={true} key={`star_${i}`} />
+                    } else if (
+                        props.type === 'character' && i == 4 ||
                         props.type !== 'character' && i > 2) {
-                        return <UncapStar uncap={true} key={`star_${i}`} />
+                        return <UncapStar flb={true} key={`star_${i}`} />
                     } else {
-                        return <UncapStar uncap={false} key={`star_${i}`} />
+                        return <UncapStar key={`star_${i}`} />
                     }
                 })
             }

components/UncapStar/index.scss

@@ -1,7 +1,31 @@
 .UncapStar {
-    color: #FFA15E;
-}
+    background-repeat: no-repeat;
+    background-size: 18px 18px;
+    display: block;
+    height: 18px;
+    width: 18px;
 
-.UncapStar.uncap {
-    color: #65DAFF;
+    &:hover {
+        transform: scale(1.2);
+    }
+
+    &.empty {
+        background: url('/icons/uncap/empty.svg');
+    }
+
+    &.mlb {
+        background: url('/icons/uncap/yellow.svg')
+    }
+
+    &.special {
+        background: url('/icons/uncap/red.svg')
+    }
+
+    &.flb {
+        background: url('/icons/uncap/blue.svg')
+    }
+
+    &.ulb {
+        background: url('/icons/uncap/purple.svg')
+    }
 }

components/UncapStar/index.tsx

@@ -4,13 +4,19 @@ import classnames from 'classnames'
 import './index.scss'
 
 interface Props {
-    uncap: boolean
+    special: boolean
+    flb: boolean
+    ulb: boolean
 }
 
 const UncapStar = (props: Props) => {
     const classes = classnames({
-        UncapStar: true,
-        'uncap': props.uncap
+        UncapStar:  true,
+        'special':  props.special,
+        'mlb':      !props.special,
+        'flb':      props.flb,
+        'ulb':      props.ulb
+
     })
 
     return (
@@ -18,4 +24,10 @@ const UncapStar = (props: Props) => {
     )
 }
 
+UncapStar.defaultProps = {
+    special: false,
+    flb: false,
+    ulb: false
+}
+
 export default UncapStar