Inline wall icon svg to align on mac and PC (microsoft#6332)

shakao · abchatra · commit 06eeab4ef23c · 2019-12-16T11:33:47.000-08:00
diff --git a/theme/image-editor/tilePalette.less b/theme/image-editor/tilePalette.less
@@ -77,20 +77,23 @@
 
 .tile-palette-swatch.wall {
     box-sizing: content-box;
-    padding: .375rem .5rem;
-    font-size: 2rem;
-    line-height: 2.3rem;
-    color: var(--sidebar-icon-inactive-color);
+    padding: .5rem;
+    height: 2rem;
+    width: 2rem;
+
+    svg {
+        width: 100%;
+        height: 100%;
+        fill: var(--sidebar-icon-inactive-color);
+    }
 }
 
 .tile-palette-swatch.wall.selected {
     background-color: var(--wall-color);
-    color: var(--sidebar-icon-active-color);
-}
 
-.tile-palette-swatch.wall > .xicon {
-    position: relative;
-    top: 0.35rem;
+    svg {
+        fill: var(--sidebar-icon-active-color);
+    }
 }
 
 .tile-palette-swatch .image-editor-button {
diff --git a/webapp/src/components/ImageEditor/tilemap/TilePalette.tsx b/webapp/src/components/ImageEditor/tilemap/TilePalette.tsx
@@ -133,7 +133,9 @@ class TilePaletteImpl extends React.Component<TilePaletteProps,{}> {
                     onClick={this.wallClickHandler}
                     title={lf("Draw walls")}
                     role="button">
-                    <span className="xicon wall" />
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000">
+                        <path d="M 968.49289,108.05443 771.30518,3.7581533 183.65231,166.0694 l 2.58963,202.62638 -156.247366,54.4148 0.872799,492.65563 179.544267,81.08212 758.08125,-222.4989 z M 765.6275,42.836761 916.79721,122.02922 412.26526,262.35026 250.08966,187.43643 Z M 934.62189,739.077 234.56171,946.92199 233.81426,554.79578 422.38222,493.25053 423.42046,300.4059 934.62189,157.54989 Z M 204.96854,402.33519 361.49056,473.98651 222.88861,518.46222 75.008408,444.5191 Z" />
+                    </svg>
                 </div>
             </div>
             <Pivot options={tabs} selected={galleryOpen ? 1 : 0} onChange={this.pivotHandler} />
