fix: github colored circles

frontend/app/components/Session_/Issues/IssueForm.js

@@ -7,7 +7,8 @@ import { addActivity, init, edit, fetchAssignments, fetchMeta } from 'Duck/assig
 const SelectedValue = ({ icon, text }) => {
   return(
     <div className="flex items-center">
-      <img className="mr-2" src={ icon } width="13" height="13" />
+      {/* <img className="mr-2" src={ icon } width="13" height="13" /> */}
+      { icon }
       <span>{ text }</span>
     </div>
   )
@@ -52,8 +53,9 @@ class IssueForm extends React.PureComponent {
     const { creating, projects, users, issueTypes, instance, closeHandler, metaLoading } = this.props;
     const projectOptions = projects.map(({name, id}) => ({text: name, value: id })).toArray();
     const userOptions = users.map(({name, id}) => ({text: name, value: id })).toArray();
-    const issueTypeOptions = issueTypes.map(({name, id, iconUrl }) => {
-      return {text: name, value: id, iconUrl, icon: <img className="pt-2" src={ iconUrl } /> }
+    
+    const issueTypeOptions = issueTypes.map(({name, id, iconUrl, color }) => {
+      return {text: name, value: id, iconUrl, color }
     }).toArray();
 
     const selectedIssueType = issueTypes.filter(issue => issue.id == instance.issueType).first();
@@ -80,6 +82,7 @@ class IssueForm extends React.PureComponent {
           <Dropdown
             selection
             name="issueType"
+            labeled
             options={ issueTypeOptions }
             value={ instance.issueType }
             fluid

frontend/app/components/Session_/Issues/IssueHeader.js

@@ -16,7 +16,8 @@ const IssueHeader = ({issue, typeIcon, assignee}) => {
       {/* <GotoSessionLink /> */}
       {/* <ActiveIssueClose /> */}
       <div className="flex leading-none mb-2 items-center">
-        <img className="mr-2" src={typeIcon} alt="" width={16} height={16} />
+        { typeIcon }
+        {/* <img className="mr-2" src={typeIcon} alt="" width={16} height={16} /> */}
         <span className="mr-2 font-medium">{ issue.id }</span>
         {/* <div className="text-gray-700 text-sm">{ '@ 00:13 Secs'}</div> */}
         { assignee && 

frontend/app/components/Session_/Issues/IssueListItem.js

@@ -11,7 +11,8 @@ const IssueListItem = ({ issue, onClick, icon, user, active }) => {
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center">
-          <img src={ icon } width="16" height="16" className="mr-3" />
+          { icon }
+          {/* <img src={ icon } width="16" height="16" className="mr-3" /> */}
           <span>{ issue.id }</span>
         </div>
         <div className="flex items-center">

frontend/app/duck/assignments.js

@@ -5,6 +5,7 @@ import withRequestState, { RequestTypes } from './requestStateCreator';
 import { createListUpdater, createItemInListUpdater } from './funcTools/tools';
 import { editType, initType } from './funcTools/crud/types';
 import { createInit, createEdit } from './funcTools/crud';
+import IssuesType from 'Types/issue/issuesType'
 
 const idKey = 'id';
 const name = 'assignment';
@@ -41,17 +42,20 @@ const reducer = (state = initialState, action = {}) => {
       return state.mergeIn([ 'instance' ], action.instance);
     case FETCH_PROJECTS.SUCCESS:
       return state.set('projects', List(action.data)).set('projectsFetched', true);
-    case FETCH_ASSIGNMENTS.SUCCESS:
-      return state.set('list', List(action.data).map(Assignment));
+    case FETCH_ASSIGNMENTS.SUCCESS:      
+      return state.set('list', List(action.data.issues).map(Assignment));
     case FETCH_ASSIGNMENT.SUCCESS:
       return state.set('activeIssue', Assignment({ ...action.data, users}));
     case FETCH_META.SUCCESS:
-      issueTypes = action.data.issueTypes;
+      issueTypes = List(action.data.issueTypes).map(IssuesType);
       var issueTypeIcons = {}
-      for (var i =0; i < issueTypes.length; i++) {
-        issueTypeIcons[issueTypes[i].id] = issueTypes[i].iconUrl
-      }
-      return state.set('issueTypes', List(issueTypes))
+      // for (var i =0; i < issueTypes.length; i++) {
+      //   issueTypeIcons[issueTypes[i].id] = issueTypes[i].iconUrl
+      // }
+      issueTypes.forEach(iss => {
+        issueTypeIcons[iss.id] = iss.iconUrl
+      })
+      return state.set('issueTypes', issueTypes)
         .set('users', List(action.data.users))
         .set('issueTypeIcons', issueTypeIcons)
     case ADD_ACTIVITY.SUCCESS:

frontend/app/types/issue/issuesType.js

@@ -2,7 +2,16 @@ import Record from 'Types/Record';
 
 export default Record({
   id: undefined,
+  color: undefined,
+  description: '',
   name: undefined,
   iconUrl: undefined
 }, {
+  fromJS: ({ iconUrl, color, ...issueType }) => ({
+    ...issueType,
+    color,
+    iconUrl: iconUrl ? 
+      <img className="mr-2" src={ iconUrl } width="13" height="13" /> :
+      <div className="mr-2 w-2 h-2 rounded-full float-left" style={{ backgroundColor: `#${color}`}} />,
+  }),
 })