tweak type indicators

dist/app.css

@@ -346,24 +346,39 @@
 
 .TypeEffectiveDisplay__multiplierWrapper__14os7 {
   position: relative;
-  width: 6.75rem; }
+  padding-top: 6px;
+  padding-right: 6px; }
+  .TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
+    position: absolute; }
   .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(1) {
+    position: inherit;
     z-index: 3; }
   .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(2) {
-    position: absolute;
+    top: 0;
-    top: -6px;
     left: 6px;
     z-index: 2; }
   .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(3) {
-    position: absolute;
-    top: -12px;
     left: 12px;
     z-index: 1; }
   .TypeEffectiveDisplay__multiplierWrapper__14os7 :nth-child(4) {
-    position: absolute;
+    left: 18px;
-    top: -12px;
-    left: 12px;
     z-index: 0; }
+  .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
+    padding-top: 12px;
+    padding-right: 12px; }
+    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(3) {
+      top: 0; }
+    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 :nth-child(2) {
+      top: 6px; }
+  .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
+    padding-top: 18px;
+    padding-right: 18px; }
+    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(4) {
+      top: 0; }
+    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(3) {
+      top: 6px; }
+    .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa :nth-child(2) {
+      top: 12px; }
 
 .TypeEffectiveDisplay__wrapper__1FFIj {
   margin: 0 1em; }
@@ -371,16 +386,22 @@
     margin-top: 1em; }
   .TypeEffectiveDisplay__wrapper__1FFIj h4 p {
     font-size: 0.7em;
-    color: #b6b6b6; }
+    color: #b6b6b6;
+    margin: 0; }
   .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY {
     display: flex;
-    flex-flow: row wrap; }
+    flex-flow: row wrap;
+    align-items: end; }
     .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > * {
       margin-right: 14px;
       height: 0%; }
     .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 {
-      margin-right: 21px;
+      width: auto;
-      margin-top: 3px; }
+      margin-right: 2px; }
+      .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX3__1SBG1 {
+        margin-right: -4px; }
+      .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7.TypeEffectiveDisplay__multiplierWrapperX4__2KqYa {
+        margin-right: -10px; }
     .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > *,
     .TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__multiplierWrapper__14os7 > * {
       flex-basis: unset;

dist/main-bundle.js

@@ -29619,7 +29619,7 @@ function pathToRegexp (path, keys, options) {
 /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js because of ./node_modules/react-redux/es/index.js */
 /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/extends.js because of ./node_modules/react-redux/es/index.js */
 /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js because of ./node_modules/react-redux/es/index.js */
-/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-measure/dist/index.esm.js */
+/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-redux/es/index.js */
 /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/react/index.js (<- Module is not an ECMAScript module) */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -38416,7 +38416,9 @@ function (_react_1$default$Comp) {
       var effectiveness = this.props.effectiveness;
       var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
       var indicatorWrapperCss = classnames_1.default(styles.indicatorWrapper);
-      var multiplierWrapperCss = classnames_1.default(styles.multiplierWrapper);
+      var multiplierWrapperX2Css = classnames_1.default(styles.multiplierWrapper);
+      var multiplierWrapperX3Css = classnames_1.default(styles.multiplierWrapper, styles.multiplierWrapperX3);
+      var multiplierWrapperX4Css = classnames_1.default(styles.multiplierWrapper, styles.multiplierWrapperX4);
       var superEffectiveX2 = [];
       var superEffective = [];
       var notVeryEffective = [];
@@ -38424,12 +38426,19 @@ function (_react_1$default$Comp) {
       var notVeryEffectiveX3 = [];
       var notVeryEffectiveX4 = [];
       effectiveness.forEach(function (value, key) {
-        var typeIndicator = value === Pokemon_1.TypeEffectiveness.SUPER_EFFECTIVE || value === Pokemon_1.TypeEffectiveness.NOT_VERY_EFFECTIVE ? react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+        var typeIndicator;
+
+        if (value === Pokemon_1.TypeEffectiveness.SUPER_EFFECTIVE || value === Pokemon_1.TypeEffectiveness.NOT_VERY_EFFECTIVE) {
+          typeIndicator = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
             key: key,
-          type: key
+            className: "test",
-        }) : react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
             type: key
           });
+        } else {
+          typeIndicator = react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
+            type: key
+          });
+        }
 
         switch (value) {
           case Pokemon_1.TypeEffectiveness.SUPER_EFFECTIVE_X2:
@@ -38467,29 +38476,29 @@ function (_react_1$default$Comp) {
       });
       return react_1.default.createElement("div", {
         className: wrapperCss
-      }, (notVeryEffective.length > 0 || notVeryEffectiveX2.length > 0 || notVeryEffectiveX3.length > 0 || notVeryEffectiveX4.length > 0) && react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("h4", null, "Strengths", react_1.default.createElement("p", null, "It's Not Very Effective...")), react_1.default.createElement("div", {
+      }, (notVeryEffective.length > 0 || notVeryEffectiveX2.length > 0 || notVeryEffectiveX3.length > 0 || notVeryEffectiveX4.length > 0) && react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("h4", null, "Resistances", react_1.default.createElement("p", null, "It's Not Very Effective...")), react_1.default.createElement("div", {
         className: indicatorWrapperCss
       }, notVeryEffectiveX4.length > 0 && notVeryEffectiveX4.map(function (element, index) {
         return react_1.default.createElement("div", {
           key: "-4x".concat(index),
-          className: multiplierWrapperCss
+          className: multiplierWrapperX4Css
         }, element, element, element, element);
       }), notVeryEffectiveX3.length > 0 && notVeryEffectiveX3.map(function (element, index) {
         return react_1.default.createElement("div", {
           key: "-3x".concat(index),
-          className: multiplierWrapperCss
+          className: multiplierWrapperX3Css
         }, element, element, element);
       }), notVeryEffectiveX2.length > 0 && notVeryEffectiveX2.map(function (element, index) {
         return react_1.default.createElement("div", {
           key: "-2x".concat(index),
-          className: multiplierWrapperCss
+          className: multiplierWrapperX2Css
         }, element, element);
       }), notVeryEffective.length > 0 && notVeryEffective)), (superEffective.length > 0 || superEffectiveX2.length > 0) && react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("h4", null, "Weaknesses", react_1.default.createElement("p", null, "It's Super Effective!")), react_1.default.createElement("div", {
         className: indicatorWrapperCss
       }, superEffectiveX2.length > 0 && superEffectiveX2.map(function (element, index) {
         return react_1.default.createElement("div", {
           key: "+2x".concat(index),
-          className: multiplierWrapperCss
+          className: multiplierWrapperX2Css
         }, element, element);
       }), superEffective.length > 0 && superEffective)));
     }
@@ -38573,10 +38582,12 @@ function (_react_1$default$Comp) {
   _createClass(TypeIndicator, [{
     key: "render",
     value: function render() {
-      var type = this.props.type;
+      var _this$props = this.props,
+          className = _this$props.className,
+          type = _this$props.type;
       var containerCss = classnames_1.default('nes-container', 'with-title');
       var containerRoundCss = classnames_1.default(containerCss, 'is-rounded');
-      var pokemonTypeCss = classnames_1.default(containerRoundCss, styles.pokemonType);
+      var pokemonTypeCss = classnames_1.default(className, containerRoundCss, styles.pokemonType);
       return react_1.default.createElement("div", {
         className: "".concat(pokemonTypeCss, " ").concat(formatter_1.formatType(type))
       }, formatter_1.formatType(type));
@@ -38964,7 +38975,7 @@ module.exports = {"baseStatRow":"StatDisplay__baseStatRow__1B60A"};
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"multiplierWrapper":"TypeEffectiveDisplay__multiplierWrapper__14os7","wrapper":"TypeEffectiveDisplay__wrapper__1FFIj","indicatorWrapper":"TypeEffectiveDisplay__indicatorWrapper__2F3AY"};
+module.exports = {"multiplierWrapper":"TypeEffectiveDisplay__multiplierWrapper__14os7","multiplierWrapperX3":"TypeEffectiveDisplay__multiplierWrapperX3__1SBG1","multiplierWrapperX4":"TypeEffectiveDisplay__multiplierWrapperX4__2KqYa","wrapper":"TypeEffectiveDisplay__wrapper__1FFIj","indicatorWrapper":"TypeEffectiveDisplay__indicatorWrapper__2F3AY"};
 
 /***/ }),
 

src/ts/app/components/PokemonExplorer/TypeEffectiveDisplay.tsx

@@ -24,9 +24,17 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
         const indicatorWrapperCss = classNames(
             styles.indicatorWrapper,
         );
-        const multiplierWrapperCss = classNames(
+        const multiplierWrapperX2Css = classNames(
             styles.multiplierWrapper,
         );
+        const multiplierWrapperX3Css = classNames(
+            styles.multiplierWrapper,
+            styles.multiplierWrapperX3,
+        );
+        const multiplierWrapperX4Css = classNames(
+            styles.multiplierWrapper,
+            styles.multiplierWrapperX4,
+        );
 
         const superEffectiveX2 : Array<JSX.Element> = [];
         const superEffective : Array<JSX.Element> = [];
@@ -35,7 +43,15 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
         const notVeryEffectiveX3 : Array<JSX.Element> = [];
         const notVeryEffectiveX4 : Array<JSX.Element> = [];
         effectiveness.forEach((value, key) => {
-            const typeIndicator = value === TypeEffectiveness.SUPER_EFFECTIVE || value === TypeEffectiveness.NOT_VERY_EFFECTIVE ? <TypeIndicator  key={ key } type={ key } /> : <TypeIndicator type={ key } />;
+            let typeIndicator : JSX.Element;
+            if (value === TypeEffectiveness.SUPER_EFFECTIVE ||
+                value === TypeEffectiveness.NOT_VERY_EFFECTIVE
+            ) {
+                typeIndicator = <TypeIndicator key={ key } className="test" type={ key } />;
+            } else {
+                typeIndicator = <TypeIndicator type={ key } />;
+            }
+
             switch (value) {
                 case TypeEffectiveness.SUPER_EFFECTIVE_X2:
                     superEffectiveX2.push(typeIndicator);
@@ -68,16 +84,16 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
             <div className={ wrapperCss }>
                 { (notVeryEffective.length > 0 || notVeryEffectiveX2.length > 0 || notVeryEffectiveX3.length > 0 || notVeryEffectiveX4.length > 0) &&
                     <React.Fragment>
-                        <h4>Strengths<p>It's Not Very Effective...</p></h4>
+                        <h4>Resistances<p>It's Not Very Effective...</p></h4>
                         <div className={ indicatorWrapperCss }>
                             { notVeryEffectiveX4.length > 0 &&
-                                notVeryEffectiveX4.map((element, index) => <div key={ `-4x${index}` } className={ multiplierWrapperCss }>{ element }{ element }{ element }{ element }</div>)
+                                notVeryEffectiveX4.map((element, index) => <div key={ `-4x${index}` } className={ multiplierWrapperX4Css }>{ element }{ element }{ element }{ element }</div>)
                             }
                             { notVeryEffectiveX3.length > 0 &&
-                                notVeryEffectiveX3.map((element, index) => <div key={ `-3x${index}` } className={ multiplierWrapperCss }>{ element }{ element }{ element }</div>)
+                                notVeryEffectiveX3.map((element, index) => <div key={ `-3x${index}` } className={ multiplierWrapperX3Css }>{ element }{ element }{ element }</div>)
                             }
                             { notVeryEffectiveX2.length > 0 &&
-                                notVeryEffectiveX2.map((element, index) => <div key={ `-2x${index}` } className={ multiplierWrapperCss }>{ element }{ element }</div>)
+                                notVeryEffectiveX2.map((element, index) => <div key={ `-2x${index}` } className={ multiplierWrapperX2Css }>{ element }{ element }</div>)
                             }
                             { notVeryEffective.length > 0 &&
                                 notVeryEffective
@@ -90,7 +106,7 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
                         <h4>Weaknesses<p>It's Super Effective!</p></h4>
                         <div className={ indicatorWrapperCss }>
                             { superEffectiveX2.length > 0 &&
-                                superEffectiveX2.map((element, index) => <div key={ `+2x${index}` } className={ multiplierWrapperCss }>{ element }{ element }</div>)
+                                superEffectiveX2.map((element, index) => <div key={ `+2x${index}` } className={ multiplierWrapperX2Css }>{ element }{ element }</div>)
                             }
                             { superEffective.length > 0 &&
                                 superEffective

src/ts/app/components/PokemonExplorer/TypeIndicator.tsx

@@ -9,12 +9,13 @@ import { formatType } from 'app/utils/formatter';
 import * as styles from './styles/TypeIndicator.scss';
 
 export interface ITypeEffectiveDisplayProps {
+    className? : string;
     type : POGOProtos.Enums.PokemonType;
 }
 
 export class TypeIndicator extends React.Component<ITypeEffectiveDisplayProps> {
     public render() {
-        const { type } = this.props;
+        const { className, type } = this.props;
 
         const containerCss = classNames(
             'nes-container',
@@ -25,6 +26,7 @@ export class TypeIndicator extends React.Component<ITypeEffectiveDisplayProps> {
             'is-rounded',
         );
         const pokemonTypeCss = classNames(
+            className,
             containerRoundCss,
             styles.pokemonType,
         );

src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss

@@ -2,32 +2,63 @@
 
 .multiplierWrapper {
   position: relative;
-  width: 6.75rem;
+  padding-top: 6px;
+  padding-right: 6px;
+
+  & > * {
+    position: absolute;
+  }
 
   :nth-child(1) {
+    position: inherit;
     z-index: 3;
   }
 
   :nth-child(2) {
-    position: absolute;
+    top: 0;
-    top: -6px;
     left: 6px;
     z-index: 2;
   }
 
   :nth-child(3) {
-    position: absolute;
-    top: -12px;
     left: 12px;
     z-index: 1;
   }
 
   :nth-child(4) {
-    position: absolute;
+    left: 18px;
-    top: -12px;
-    left: 12px;
     z-index: 0;
   }
+
+  &.multiplierWrapperX3 {
+    padding-top: 12px;
+    padding-right: 12px;
+
+    :nth-child(3) {
+      top: 0;
+    }
+
+    :nth-child(2) {
+      top: 6px;
+    }
+  }
+
+  &.multiplierWrapperX4 {
+    padding-top: 18px;
+    padding-right: 18px;
+
+    :nth-child(4) {
+      top: 0;
+    }
+
+    :nth-child(3) {
+      top: 6px;
+    }
+
+    :nth-child(2) {
+      top: 12px;
+    }
+  }
 }
 
 .wrapper {
@@ -40,11 +71,13 @@
   h4 p {
     font-size: 0.7em;
     color: $main-font-secondary-color;
+    margin: 0;
   }
 
   .indicatorWrapper {
     display: flex;
     flex-flow: row wrap;
+    align-items: end;
 
     & > * {
       margin-right: 14px;
@@ -52,8 +85,16 @@
     }
 
     .multiplierWrapper {
-      margin-right: 21px;
+      width: auto;
-      margin-top: 3px;
+      margin-right: 2px;
+
+      &.multiplierWrapperX3 {
+        margin-right: -4px;
+      }
+
+      &.multiplierWrapperX4 {
+        margin-right: -10px;
+      }
     }
 
     & > *,

src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss.d.ts

@@ -2,4 +2,6 @@
 // Please do not change this file!
 export const indicatorWrapper: string;
 export const multiplierWrapper: string;
+export const multiplierWrapperX3: string;
+export const multiplierWrapperX4: string;
 export const wrapper: string;