fixed icon placement

src/components/collection/Attack.js

@@ -13,9 +13,9 @@ export default class Attack extends React.Component {
   	let attack = this.props.attack;
 
   	return(
-  	  <div style={{textAlign: 'left', display: 'flex'}}>
+  	  <div className="card">
 	      <img className="thumb" style={{float: 'left'}} src={API.base_image + (attack.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(attack.gsx$image)} />
-	      <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
+	      <div className="left">
 	        <Name name={attack.gsx$name} /><br />
           <Rarity set={attack.gsx$set} rarity={attack.gsx$rarity} /><br />
           <span>Build Points: {attack.gsx$bp}</span><br />
@@ -28,7 +28,7 @@ export default class Attack extends React.Component {
           </div>
 	      </div>
         <br />
-        <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
+        <div className="right" >
           <Ability ability={attack.gsx$ability} /><br />
           <Unique data={{unique: attack.gsx$unique, loyal: attack.gsx$loyal, legendary: attack.gsx$legendary}} /><br />
           <span className="flavortext">{attack.gsx$flavortext}</span>

src/components/collection/Battlegear.js

@@ -13,13 +13,13 @@ export default class Battlegear extends React.Component {
     let battlegear = this.props.battlegear;
 
     return(
-      <div style={{textAlign: 'left', display: 'flex'}}>
+      <div className="card">
         <img className="thumb" style={{float: 'left'}} src={API.base_image + (battlegear.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(battlegear.gsx$image)} />
-        <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
+        <div className="left">
           <Name name={battlegear.gsx$name} /><br />
           <Rarity set={battlegear.gsx$set} rarity={battlegear.gsx$rarity} /><br />
         </div>
-        <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
+        <div className="right" >
           <Ability ability={battlegear.gsx$ability} /><br />
           <Unique data={{unique: battlegear.gsx$unique, loyal: battlegear.gsx$loyal, legendary: battlegear.gsx$legendary}} /><br />
           <span className="flavortext">{battlegear.gsx$flavortext}</span>

src/components/collection/Creature.js

@@ -4,7 +4,7 @@ import API from '../SpreadsheetData';
 import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability} from './_Snippets';
+import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from './_Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Creature extends React.Component {
@@ -18,12 +18,12 @@ export default class Creature extends React.Component {
     }
 
   	return(
-  	  <div className="creature" style={{textAlign: 'left', display: 'flex'}}>
+  	  <div className="card">
   	    <img className="thumb" style={{float: 'left'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(creature.gsx$image)} />
-  	    <div style={{verticalAlign: 'text-top', float: 'left', width: '220px'}}>
+  	    <div className="left">
           <Name name={creature.gsx$name} /><br />
           <Rarity set={creature.gsx$set} rarity={creature.gsx$rarity} /><br />
-          <span><img className="icon16" style={{verticalAlign: 'middle'}} src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"} /> {creature.gsx$tribe} {creature.gsx$types}</span><br />
+          <span><Tribe tribe={creature.gsx$tribe} /> {creature.gsx$tribe} {creature.gsx$types}</span><br />
 	        <div>
             <Element element="fire" value={creature.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
             <Element element="air" value={creature.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
@@ -33,10 +33,10 @@ export default class Creature extends React.Component {
           <span>{mugic}</span>
 	      </div>
         <br />
-        <div style={{float: 'left', width: 'calc(100% - (100px + 230px + 50px))', borderLeft: '1px solid white', paddingLeft: '10px', 'whiteSpace': 'pre-line'}} >
+        <div className="right" style={{width: 'calc(100% - (100px + 230px + 50px))', 'whiteSpace': 'pre-line'}} >
           <Ability ability={creature.gsx$ability} tribe={creature.gsx$tribe} /><br />
-          <Ability type="brainwashed" tribe={creature.gsx$tribe} ability={creature.gsx$brainwashed+"\n"} />
-          <Unique data={{unique: creature.gsx$unique, loyal: creature.gsx$loyal, legendary: creature.gsx$legendary, tribe: creature.gsx$tribe}} /><br />
+          <Ability type="brainwashed" tribe={creature.gsx$tribe} ability={creature.gsx$brainwashed} /> {creature.gsx$brainwashed && <br />}
+          <Unique data={{unique: creature.gsx$unique, loyal: creature.gsx$loyal, legendary: creature.gsx$legendary, tribe: creature.gsx$tribe}} />
           <span className="flavortext">{creature.gsx$flavortext}</span>
         </div>
         <br />

src/components/collection/Location.js

@@ -13,14 +13,14 @@ export default class Location extends React.Component {
     let location = this.props.location;
 
     return(
-      <div style={{textAlign: 'left', display: 'flex'}}>
+      <div className="card">
         <img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (location.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(location.gsx$image)} />
-        <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
+        <div className="left">
           <Name name={location.gsx$name} /><br />
           <Rarity set={location.gsx$set} rarity={location.gsx$rarity} /><br />
           <Initiative initiative={location.gsx$initiative} /><br />
         </div>
-        <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
+        <div className="right">
           <Ability ability={location.gsx$ability} /><br />
           <span className="flavortext">{location.gsx$flavortext}</span>
         </div>

src/components/collection/Mugic.js

@@ -26,16 +26,16 @@ export default class Attack extends React.Component {
     }
 
     return(
-      <div style={{textAlign: 'left', display: 'flex'}}>
+      <div className="card">
         <img className="thumb" style={{float: 'left'}} src={API.base_image + (mugic.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(mugic.gsx$image)} />
-        <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
+        <div className="left">
           <Name name={mugic.gsx$name} /><br />
           <Rarity set={mugic.gsx$set} rarity={mugic.gsx$rarity} /> <br />
           <img height="20" className="icon16" src={"/src/img/icons/tribes/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} /> {mugic.gsx$tribe}<br />
           <span>{mugicCounters}</span><br />
         </div>
         <br />
-        <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
+        <div className="right" >
           <Ability ability={mugic.gsx$ability} tribe={mugic.gsx$tribe} /><br />
           <Unique data={{unique: mugic.gsx$unique, loyal: mugic.gsx$loyal, legendary: mugic.gsx$legendary}} /><br />
           <span className="flavortext">{mugic.gsx$flavortext}</span>

src/components/collection/_Snippets.js

@@ -33,7 +33,7 @@ export function Unique(props) {
   }
   string = string.replace(/,\s+$/, "");
   return (
-    <span style={{fontWeight: "Bold"}}>{string}</span>
+    <span style={{fontWeight: "Bold"}}>{string}{string && <br />}</span>
   );
 }
 
@@ -68,25 +68,29 @@ export function Discipline(props) {
   return <img className={props.size||"icon16"} src={"/src/img/icons/disciplines/"+props.discipline.toLowerCase()+".png"} />
 }
 
+export function Tribe(props) {
+  return <img className={props.size||"icon16"} src={"/src/img/icons/tribes/"+props.tribe.toLowerCase()+".png"} />
+}
+
 export function Ability(props) {
   const mugic_counters = {
     regex: /{{mc}}/i,
     fn: (key, result) => {
-      return (<Mugic key={key} tribe={props.tribe} size="icon16"/>);
+      return (<Mugic key={key} tribe={props.tribe} size="icon14"/>);
     }
   }
 
   const elements = {
     regex: /(fire)|(air)|(earth)|(water)/i,
     fn: (key, result) => {
-      return (<span key={key}><Element element={result[0]} value="true" size="icon16"/>{result[0]}</span>);
+      return (<span key={key}><Element element={result[0]} value="true" size="icon14"/>{result[0]}</span>);
     }
   }
 
   const disciplines = {
     regex: /(courage)|(power)|(wisdom)|(speed)/i,
     fn: (key, result) => {
-      return (<span key={key}><Discipline discipline={result[0]} />{result[0]}</span>);
+      return (<span key={key}><Discipline discipline={result[0]} size="icon14" />{result[0]}</span>);
     }
   }
 

src/css/collection.css

@@ -1,3 +1,31 @@
+.card {
+    text-align: left;
+    display: flex;
+}
+
+.card .left {
+    vertical-align: text-top;
+    float: left;
+    width: 220px;
+}
+
+.card .right {
+    float: left;
+    width: calc(100% - (100px + 230px));
+    border-left: 1px solid white;
+    padding-left: 10px;
+}
+
+.card .icon14, .card .icon16,
+.card .icon20, .card .icon24 {
+    vertical-align: middle;
+}
+
+.icon14 {
+    height: 14px;
+    padding-bottom: 2px;
+}
+
 .icon16 {
     height: 16px;
 }

src/css/portal.css

@@ -0,0 +1,15 @@
+.icon14 {
+    height: 14px;
+}
+
+.icon16 {
+    height: 16px;
+}
+
+.icon20 {
+    height: 20px;
+}
+
+.icon24 {
+    height: 24px;
+}