icon fixes

Author: vogievetsky

src/client/components/immutable-list/immutable-list.scss

@@ -23,13 +23,12 @@
   top: 5px;
   bottom: 5px;
   left: 24px;
-  right: 0;
+  width: 400px;
 
   .list-title {
     display: flex;
     height: $list-title-height;
     padding-top: 12px;
-    width: 400px;
     border-bottom: 1px solid $border-super-light;
 
     .label {
@@ -63,7 +62,7 @@
   .empty-container {
     position: absolute;
     top: 50%;
-    left: 10%;
+    left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     color: $text-light;

src/client/components/simple-list/simple-list.tsx

@@ -99,24 +99,21 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
     const { onEdit, onRemove, onReorder } = this.props;
     const { draggedItem, dropIndex } = this.state;
 
-    const svgize = (iconName: string) => iconName ? <SvgIcon svg={require(`../../icons/${iconName}.svg`)}/> : null;
-
     return rows.map((row, i) => {
       let {title, description, icon} = row;
 
       let dragHandle = <div className="drag-handle">
         <SvgIcon svg={require('../../icons/dragger.svg')}/>
       </div>;
 
-      let svg = svgize(icon);
       let text = <div className="text">
         <div className="title">{title}</div>
         <div className="description">{description}</div>
       </div>;
 
       let actions = <div className="actions">
-        <button onClick={onEdit.bind(this, i)}>{svgize('full-edit')}</button>
-        <button onClick={onRemove.bind(this, i)}>{svgize('full-remove')}</button>
+        <button onClick={onEdit.bind(this, i)}><SvgIcon svg={require(`../../icons/full-edit.svg`)}/></button>
+        <button onClick={onRemove.bind(this, i)}><SvgIcon svg={require(`../../icons/full-remove.svg`)}/></button>
       </div>;
 
       const isBeingDragged = draggedItem === row;
@@ -141,7 +138,7 @@ export class SimpleList extends React.Component<SimpleListProps, SimpleListState
         onDragStart={this.dragStart.bind(this, row)}
       >
         {onReorder ? dragHandle : null}
-        {svg}
+        {icon ? <SvgIcon svg={icon}/> : null}
         {text}
         {actions}
       </div>;

src/client/components/simple-table/simple-table.tsx

@@ -120,7 +120,7 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
         className='cell action'
         key={`action-${i}`}
         onClick={action.callback.bind(this, row)}
-      ><SvgIcon svg={require(`../../icons/${action.icon}.svg`)}/></div>);
+      ><SvgIcon svg={action.icon}/></div>);
     }
 
     return items;
@@ -240,7 +240,7 @@ export class SimpleTable extends React.Component<SimpleTableProps, SimpleTableSt
           key={`icon-${j}`}
           style={{width: ACTION_WIDTH}}
         >
-          <SvgIcon svg={require(`../../icons/${action.icon}.svg`)}/>
+          <SvgIcon svg={action.icon}/>
         </div>;
       });
 

src/client/views/settings-view/clusters/clusters.tsx

@@ -109,8 +109,8 @@ export class Clusters extends React.Component<ClustersProps, ClustersState> {
     ];
 
     const actions: SimpleTableAction[] = [
-      {icon: 'full-edit', callback: this.editCluster.bind(this)},
-      {icon: 'full-remove', callback: this.removeCluster.bind(this)}
+      {icon: require(`../../../icons/full-edit.svg`), callback: this.editCluster.bind(this)},
+      {icon: require(`../../../icons/full-remove.svg`), callback: this.removeCluster.bind(this)}
     ];
 
     return <div className="clusters">

src/client/views/settings-view/data-cube-edit/data-cube-edit.tsx

@@ -254,7 +254,7 @@ export class DataCubeEdit extends React.Component<DataCubeEditProps, DataCubeEdi
       return {
         title: dimension.title,
         description: dimension.expression.toString(),
-        icon: `dim-${dimension.kind}`
+        icon: require(`../../../icons/dim-${dimension.kind}`)
       };
     });
 
@@ -325,7 +325,7 @@ export class DataCubeEdit extends React.Component<DataCubeEditProps, DataCubeEdi
       return {
         title: measure.title,
         description: measure.expression.toString(),
-        icon: `measure`
+        icon: require(`../../icons/measures.svg`)
       };
     });
 

src/client/views/settings-view/data-cubes/data-cubes.tsx

@@ -110,8 +110,8 @@ export class DataCubes extends React.Component<DataCubesProps, DataCubesState> {
     ];
 
     const actions: SimpleTableAction[] = [
-      {icon: 'full-edit', callback: this.editCube.bind(this)},
-      {icon: 'full-remove', callback: this.removeCube.bind(this)}
+      {icon: require(`../../../icons/full-edit.svg`), callback: this.editCube.bind(this)},
+      {icon: require(`../../../icons/full-remove.svg`), callback: this.removeCube.bind(this)}
     ];
 
     return <div className="data-cubes">