From 240d05206ad0f18f015a2418378adc18297b846e Mon Sep 17 00:00:00 2001
From: ntr <ntr@smokestack.io>
Date: Sun, 9 Jun 2019 16:33:47 +1000
Subject: [PATCH] icon changes

---
 client/assets/styles/instance.css             | 18 +--------
 client/assets/styles/styles.css               |  2 +-
 client/assets/styles/styles.mobile.css        |  4 +-
 client/src/components/svgs/circle.jsx         | 24 +++++-------
 client/src/components/svgs/diamond.jsx        | 14 +++----
 client/src/components/svgs/square.jsx         | 28 ++++++--------
 client/src/components/svgs/triangle.jsx       | 21 +++++-----
 client/src/components/svgs/trippy.square.jsx  | 38 +++++++++++++++++++
 .../src/components/svgs/trippy.triangle.jsx   | 36 ++++++++++++++++++
 9 files changed, 114 insertions(+), 71 deletions(-)
 create mode 100644 client/src/components/svgs/trippy.square.jsx
 create mode 100644 client/src/components/svgs/trippy.triangle.jsx

diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css
index cb58bbce..7340377f 100644
--- a/client/assets/styles/instance.css
+++ b/client/assets/styles/instance.css
@@ -312,20 +312,6 @@
     border: 2px solid #222;
 }
 
-.equip .highlight {
-    animation: equip-bg 1s infinite ease-in-out alternate;
-}
-
-@keyframes equip-bg {
-    0% {
-        background-color: black;
-    }
-
-    100% {
-        background-color: #181818;
-    }
-}
-
 .equip .skills button {
     color: whitesmoke;
     font-size: 1em;
@@ -347,7 +333,7 @@
     height: 2px;
     transform-origin: center;
     background-color: whitesmoke;
-    animation: equipping-skill 1s infinite linear alternate;
+    animation: equipping-skill 2s infinite ease alternate;
     opacity: 0;
 }
 
@@ -360,7 +346,7 @@
     height: 2px;
     transform-origin: center;
     background-color: whitesmoke;
-    animation: equipping-skill 1s infinite linear alternate;
+    animation: equipping-skill 2s infinite ease alternate;
     opacity: 0;
     animation-delay: 0.75s
 }
diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css
index a9112f48..34ebe29d 100644
--- a/client/assets/styles/styles.css
+++ b/client/assets/styles/styles.css
@@ -494,7 +494,7 @@ figure.gray {
 
 .stats svg, .specs svg {
     height: 2em;
-    stroke-width: 5px;
+    stroke-width: 7px;
     fill: none;
 }
 
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css
index 0b7715c3..4746019c 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.css
@@ -1,7 +1,7 @@
 @media (max-width: 800px) {
     #mnml {
         font-size: 10pt;
-        padding: 0;
+        padding: 1em 0 0 0;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr min-content;
         grid-template-areas:
@@ -26,7 +26,7 @@
     }
 
     #mnml.nav-visible nav {
-        padding-left: 0;
+        padding: 0.5em;
         margin: 0;
         display: block;
         grid-area: main;
diff --git a/client/src/components/svgs/circle.jsx b/client/src/components/svgs/circle.jsx
index ce388243..c5a229ed 100644
--- a/client/src/components/svgs/circle.jsx
+++ b/client/src/components/svgs/circle.jsx
@@ -4,11 +4,9 @@ module.exports = function circle(colours) {
     if (colours.length === 1) {
         return (
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 198.13 199.94" >
-                <ellipse class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
-                <path class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
-                <path class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
-                <path class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
-                <path class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
+                <ellipse class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
+                <ellipse class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
+                <ellipse class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
             </svg>
         );
     }
@@ -22,17 +20,13 @@ module.exports = function circle(colours) {
                 <rect x="100" y="0" width="100" height="200" />
             </clipPath>
 
-            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
-            <path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
-            <path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
-            <path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
-            <path clip-path="url(#firstColour)" class={colours[0]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
+            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
+            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
+            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
 
-            <ellipse clip-path="url(#secondColour)" class={colours[1]} cx="99.07" cy="99.97" rx="97.6" ry="98.5"/>
-            <path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,177.35c-42.28,0-76.67-34.71-76.67-77.38s34.4-77.38,76.67-77.38c42.28,0,76.67,34.71,76.67,77.38 S141.34,177.35,99.07,177.35z"/>
-            <path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,156.23c-30.74,0-55.75-25.24-55.75-56.26S68.33,43.7,99.07,43.7s55.75,25.24,55.75,56.26 S129.81,156.23,99.07,156.23z"/>
-            <path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,135.11c-19.2,0-34.82-15.77-34.82-35.15s15.62-35.15,34.82-35.15c19.2,0,34.83,15.77,34.83,35.15 S118.27,135.11,99.07,135.11z"/>
-            <path clip-path="url(#secondColour)" class={colours[1]} d="M99.07,114c-7.66,0-13.9-6.29-13.9-14.03s6.23-14.03,13.9-14.03s13.9,6.29,13.9,14.03S106.73,114,99.07,114z"/>
+            <ellipse clip-path="url(#secondColour)" class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
+            <ellipse clip-path="url(#secondColour)" class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
+            <ellipse clip-path="url(#secondColour)" class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
         </svg>
     );
 };
diff --git a/client/src/components/svgs/diamond.jsx b/client/src/components/svgs/diamond.jsx
index 8bdd4f39..736a13af 100644
--- a/client/src/components/svgs/diamond.jsx
+++ b/client/src/components/svgs/diamond.jsx
@@ -2,15 +2,11 @@ const preact = require('preact');
 
 module.exports = function triangle(classes) {
     return (
-        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
-        	 viewBox="0 0 202.45 205.43" style="enable-background:new 0 0 202.45 205.43;" class={classes} >
-        <g>
-        	<polygon class="st0" points="101.23,203.83 1.58,102.72 101.23,1.6 200.87,102.72 	"/>
-        	<polygon class="st0" points="21.92,102.72 101.23,22.24 180.53,102.72 101.23,183.19 	"/>
-        	<polygon class="st0" points="42.26,102.72 101.23,42.88 160.19,102.72 101.23,162.55 	"/>
-        	<polygon class="st0" points="62.6,102.72 101.23,63.52 139.86,102.72 101.23,141.91 	"/>
-        	<polygon class="st0" points="82.94,102.72 101.23,84.16 119.52,102.72 101.23,121.27 	"/>
-        </g>
+        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 200 200" class={classes} transform="rotate(45)" >
+            <rect x="10" y="10" width="180" height="180"/>
+            <rect x="40" y="40" width="120" height="120"/>
+            <rect x="70" y="70" width="60" height="60"/>
         </svg>
     );
 };
diff --git a/client/src/components/svgs/square.jsx b/client/src/components/svgs/square.jsx
index 0cacc7a2..6565fe80 100644
--- a/client/src/components/svgs/square.jsx
+++ b/client/src/components/svgs/square.jsx
@@ -4,19 +4,17 @@ module.exports = function square(colours) {
     if (colours.length === 1) {
         return (
             <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-                 viewBox="0 0 199.33 199.99" >
-                <rect x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
-                <rect x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
-                <rect x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
-                <rect x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
-                <rect x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
+                 viewBox="0 0 200 200" >
+                <rect x="10" y="10" class={colours[0]} width="180" height="180"/>
+                <rect x="40" y="40" class={colours[0]} width="120" height="120"/>
+                <rect x="70" y="70" class={colours[0]} width="60" height="60"/>
             </svg>
         );
     }
 
     return (
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-        	 viewBox="0 0 199.33 199.99" >
+        	 viewBox="0 0 200 200" >
             <clipPath id="firstColour">
                 <rect x="0" y="0" width="100" height="200" />
             </clipPath>
@@ -24,17 +22,13 @@ module.exports = function square(colours) {
                 <rect x="100" y="0" width="100" height="200" />
             </clipPath>
 
-            <rect clip-path="url(#firstColour)" x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
-            <rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
-            <rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
-            <rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
-            <rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
+            <rect clip-path="url(#firstColour)" x="10" y="10" class={colours[0]} width="180" height="180"/>
+            <rect clip-path="url(#firstColour)" x="40" y="40" class={colours[0]} width="120" height="120"/>
+            <rect clip-path="url(#firstColour)" x="70" y="70" class={colours[0]} width="60" height="60"/>
 
-            <rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
-            <rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
-            <rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
-            <rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
-            <rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
+            <rect clip-path="url(#secondColour)" x="10" y="10" class={colours[0]} width="180" height="180"/>
+            <rect clip-path="url(#secondColour)" x="40" y="40" class={colours[0]} width="120" height="120"/>
+            <rect clip-path="url(#secondColour)" x="70" y="70" class={colours[0]} width="60" height="60"/>
         </svg>
     );
 }
diff --git a/client/src/components/svgs/triangle.jsx b/client/src/components/svgs/triangle.jsx
index 95d0a468..b76076e8 100644
--- a/client/src/components/svgs/triangle.jsx
+++ b/client/src/components/svgs/triangle.jsx
@@ -3,12 +3,11 @@ const preact = require('preact');
 module.exports = function triangle(colours) {
     if (colours.length === 1) {
         return (
-            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
-                <polygon class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
-                <polygon class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
-                <polygon class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21   "/>
-                <polygon class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19  "/>
-                <polygon class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17  "/>
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                 viewBox="0 0 200 200" >
+                <rect x="10" y="10" class={colours[0]} width="180" height="180"/>
+                <rect x="40" y="40" class={colours[0]} width="120" height="120"/>
+                <rect x="70" y="70" class={colours[0]} width="60" height="60"/>
             </svg>
         );
     }
@@ -22,11 +21,11 @@ module.exports = function triangle(colours) {
                 <rect x="100" y="0" width="100" height="200" />
             </clipPath>
 
-        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25 	"/>
-        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 	"/>
-        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 	"/>
-        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 	"/>
-        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 	"/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21   "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19  "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17  "/>
 
             <polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
             <polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
diff --git a/client/src/components/svgs/trippy.square.jsx b/client/src/components/svgs/trippy.square.jsx
new file mode 100644
index 00000000..6680e57b
--- /dev/null
+++ b/client/src/components/svgs/trippy.square.jsx
@@ -0,0 +1,38 @@
+const preact = require('preact');
+
+module.exports = function square(colours) {
+    if (colours.length === 1) {
+        return (
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                 viewBox="0 0 199.33 199.99" >
+                <rect x="10" y="10" class={colours[0]} width="180" height="180"/>
+                <rect x="70" y="70" class={colours[0]} width="120" height="120"/>
+                <rect x="130" y="130" class={colours[0]} width="60" height="60"/>
+            </svg>
+        );
+    }
+
+    return (
+        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+             viewBox="0 0 199.33 199.99" >
+            <clipPath id="firstColour">
+                <rect x="0" y="0" width="100" height="200" />
+            </clipPath>
+            <clipPath id="secondColour">
+                <rect x="100" y="0" width="100" height="200" />
+            </clipPath>
+
+            <rect clip-path="url(#firstColour)" x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
+            <rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
+            <rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
+            <rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
+            <rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>
+
+            <rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
+            <rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
+            <rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
+            <rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
+            <rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
+        </svg>
+    );
+}
diff --git a/client/src/components/svgs/trippy.triangle.jsx b/client/src/components/svgs/trippy.triangle.jsx
new file mode 100644
index 00000000..8578f9e1
--- /dev/null
+++ b/client/src/components/svgs/trippy.triangle.jsx
@@ -0,0 +1,36 @@
+const preact = require('preact');
+
+module.exports = function triangle(colours) {
+    if (colours.length === 1) {
+        return (
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" >
+                <polygon class={colours[0]} points="10,190    100,10   190,190"/>
+                <polygon class={colours[0]} points="40,160    100,10   190,190"/>
+                <polygon class={colours[0]} points="70,130    100,10   190,190"/>
+            </svg>
+        );
+    }
+
+    return (
+        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
+            <clipPath id="firstColour">
+                <rect x="0" y="0" width="100" height="200" />
+            </clipPath>
+            <clipPath id="secondColour">
+                <rect x="100" y="0" width="100" height="200" />
+            </clipPath>
+
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21   "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19  "/>
+            <polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17  "/>
+
+            <polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
+            <polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
+            <polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21   "/>
+            <polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19  "/>
+            <polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17  "/>
+        </svg>
+    );
+};