Resized ward pins

Author: dartharaknus

src/components/Match/VisionMap.jsx

@@ -5,6 +5,7 @@ import {
   extractTransitionClasses,
 } from 'utility';
 import Measure from 'react-measure';
+import strings from 'strings';
 import styles from './Match.css';
 
 // with the actual game size, the width parameters is optional
@@ -20,23 +21,27 @@ const style = (width, iconSize, ward) => {
 const WardLogPin = ({ width, iconSize, log }) => {
   const stroke = log.entered.player_slot < 5 ? styles.green : styles.red;
   const fill = log.type === 'observer' ? styles.yelor : styles.blue;
+
+  const strokeWidth = log.type === 'observer' ? '2.5' : '2';
+  const wardSize = log.type === 'observer' ? iconSize * (1600/850) : iconSize;
+
   return (
     <svg
-      style={style(width, iconSize, log.entered)}
-      width={iconSize}
-      height={iconSize}
+      style={style(width, wardSize, log.entered)}
+      width={wardSize}
+      height={wardSize}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g>
-        <title>Observer</title>
+        <title>{log.type === 'observer' ? strings.th_ward_observer : strings.th_ward_sentry}</title>
         <circle
           fill={fill}
-          strokeWidth="2"
+          strokeWidth={strokeWidth}
           stroke={stroke}
-          r={iconSize * 0.4}
-          cy={iconSize / 2}
-          cx={iconSize / 2}
-          fillOpacity="0.4"
+          r={wardSize * 0.4}
+          cy={wardSize / 2}
+          cx={wardSize / 2}
+          fillOpacity="0.3"
         />
       </g>
       <defs>

src/components/Match/matchPages.jsx

@@ -141,10 +141,7 @@ const matchPages = [Overview, {
   name: strings.tab_vision,
   key: 'vision',
   parsed: true,
-  content: match => (<div>
-    <Heading title={strings.heading_vision} />
-    <VisionPage match={match} />
-  </div>),
+  content: match => <VisionPage match={match} />,
 }, {
   name: strings.tab_actions,
   key: 'actions',