Add colors to more icons. Click upgrades get a two-icon combo

constants.js

@@ -315,7 +315,7 @@ function createTemplateUpgrades() {
 }
 
 const prodUpgradeCounts = [1, 25, 50, 75, 100];
-const prodUpgradeColors = ["#003f5c","#58508d","#bc5090","#ff6361","#ffa600"];
+const prodUpgradeColors = ['#00429d', '#73a2c6', '#ffffe0', '#f4777f', '#93003a'];
 
 function createProdUpgrades() {
   for (const [key, value] of Object.entries(prodUpgradeText)) {
@@ -326,7 +326,7 @@ function createProdUpgrades() {
         "name": contents.name,
         "desc": contents.desc,
         "icon": [
-          { icon: buildings[key].icon, color: prodUpgradeColors[counter] }
+          { icon: buildings[key].icon, color: prodUpgradeColors[counter - 1] }
         ],
         "cost": {
           "food": buildings[key].cost.food * 5 * Math.pow(10, counter - 1)
@@ -355,6 +355,8 @@ function createProdUpgrades() {
   }
 }
 
+const prodAllUpgradeColors = ['#00429d', '#3e67ae', '#618fbf', '#85b7ce', '#b1dfdb', '#ffcab9', '#fd9291', '#e75d6f', '#c52a52', '#93003a'];
+
 function createProdAllUpgrades() {
   let prefix = "prod-all-"
 
@@ -364,7 +366,9 @@ function createProdAllUpgrades() {
     upgrades[prefix + counter] = {
       "name": contents.name,
       "desc": contents.desc,
-      "icon": "fa-cogs",
+      "icon": [
+        { icon: "fa-cogs", color: prodAllUpgradeColors[counter - 1] }
+      ],
       "cost": {
         "food": 5 * Math.pow(10, counter + 1)
       },
@@ -391,6 +395,8 @@ function createProdAllUpgrades() {
   }
 }
 
+const clickUpgradeColors = ['#00429d', '#3e67ae', '#618fbf', '#85b7ce', '#b1dfdb', '#ffcab9', '#fd9291', '#e75d6f', '#c52a52', '#93003a'];
+
 function createClickUpgrades() {
   let prefix = "prod-click-";
 
@@ -400,7 +406,9 @@ function createClickUpgrades() {
     upgrades[prefix + counter] = {
       name: contents.name,
       desc: contents.desc,
-      icon: "fa-hand-pointer",
+      icon: [
+        { icon: "fa-hand-pointer", color: clickUpgradeColors[counter - 1] }
+      ],
       cost: {
         food: Math.pow(10, (counter * 2) + 1)
       },
@@ -485,7 +493,10 @@ function createClickVictimUpgrades() {
     upgrades[prefix + key] = {
       "name": text.name,
       "desc": text.desc,
-      "icon": buildings[key].icon,
+      "icon": [
+        { icon: buildings[key].icon, color: "#eee" },
+        { icon: "fa-hand-pointer", color: "red" }
+      ],
       "cost": {
         "food": 1000 * Math.pow(10, counter)
       },

gorge.css

@@ -308,6 +308,7 @@ button {
 }
 
 .upgrade-button {
+  position: relative;
   width: 80px;
   height: 80px;
   display: block;
@@ -321,9 +322,10 @@ button {
   width: 100px;
   height: 100px;
   font-size: 60px;
-  transform: translate(-10px, 10px);
-  opacity: 0.5;
+  transform: translate(-50px, 10px);
+  opacity: 0.8;
   pointer-events: none;
+  position: fixed;
 }
 
 .upgrade-button:hover {