Better Autobuyers tab design

- Added unavailable style for upgrades
- Changed AD/ID/TD autobuyers' name from long (`first`) to short (`1st`)

javascripts/core/autobuyers/antimatter-dimension-autobuyer.js

@@ -8,7 +8,7 @@ class AntimatterDimensionAutobuyerState extends UpgradeableAutobuyerState {
   }
 
   get name() {
-    return AntimatterDimension(this.tier).displayName;
+    return AntimatterDimension(this.tier).shortDisplayName;
   }
 
   get fullName() {

javascripts/core/autobuyers/infinity-dimension-autobuyer.js

@@ -12,7 +12,7 @@ class InfinityDimensionAutobuyerState extends IntervaledAutobuyerState {
   }
 
   get name() {
-    return this.dimension.displayName;
+    return this.dimension.shortDisplayName;
   }
 
   get fullName() {

javascripts/core/autobuyers/time-dimension-autobuyer.js

@@ -6,7 +6,7 @@ class TimeDimensionAutobuyerState extends IntervaledAutobuyerState {
   }
 
   get name() {
-    return TimeDimension(this.tier).displayName;
+    return TimeDimension(this.tier).shortDisplayName;
   }
 
   get fullName() {

public/stylesheets/styles.css

@@ -4236,6 +4236,16 @@ br {
   border-color: var(--color-infinity);
 }
 
+.o-autobuyer-btn--unavailable {
+  background: var(--color-disabled);
+  cursor: auto;
+}
+
+.o-autobuyer-btn--unavailable:hover {
+  color: black;
+  background-color: var(--color-disabled);
+}
+
 .t-dark .o-autobuyer-btn,
 .t-s6 .o-autobuyer-btn,
 .t-s10 .o-autobuyer-btn {

src/components/tabs/autobuyers/AutobuyerIntervalButton.vue

@@ -20,7 +20,7 @@ export default {
       return {
         "o-autobuyer-btn": true,
         "l-autobuyer-box__button": true,
-        "o-non-clickable": !this.isAffordable
+        "o-autobuyer-btn--unavailable": !this.isAffordable
       };
     }
   },
@@ -50,14 +50,12 @@ export default {
   </button>
   <button
     v-else-if="!isMaxed"
-    class="o-autobuyer-btn l-autobuyer-box__button o-non-clickable"
+    class="o-autobuyer-btn l-autobuyer-box__button o-autobuyer-btn--unavailable"
   >
     Complete the challenge to upgrade interval
   </button>
 </template>
 
 <style scoped>
-.o-non-clickable {
-  cursor: auto;
-}
+
 </style>

src/components/tabs/autobuyers/DimensionAutobuyerBox.vue

@@ -26,7 +26,7 @@ export default {
       return Autobuyer.antimatterDimension(this.tier);
     },
     name() {
-      return `${AntimatterDimension(this.tier).displayName} Dimension Autobuyer`;
+      return `${AntimatterDimension(this.tier).shortDisplayName} Dimension Autobuyer`;
     },
     modeDisplay() {
       switch (this.mode) {

src/components/tabs/autobuyers/DimensionBulkButton.vue

@@ -29,7 +29,8 @@ export default {
     classObject() {
       return {
         "o-autobuyer-btn": true,
-        "o-non-clickable": !this.isAffordable || this.hasMaxedBulk
+        "o-autobuyer-btn--unavailable": !this.isAffordable && !this.hasMaxedBulk,
+        "o-non-clickable": this.hasMaxedBulk
       };
     }
   },
@@ -65,7 +66,7 @@ export default {
   </button>
   <button
     v-else-if="hasMaxedInterval && !bulkUnlimited"
-    class="o-autobuyer-btn l-autobuyer-box__button o-non-clickable"
+    class="o-autobuyer-btn l-autobuyer-box__button o-autobuyer-btn--unavailable"
   >
     Complete the challenge to upgrade bulk
   </button>

src/components/tabs/autobuyers/TickspeedAutobuyerBox.vue

@@ -56,7 +56,7 @@ export default {
       </button>
       <button
         v-else
-        class="o-autobuyer-btn o-non-clickable"
+        class="o-autobuyer-btn o-autobuyer-btn--unavailable"
       >
         Complete the challenge to change mode
       </button>
@@ -65,7 +65,5 @@ export default {
 </template>
 
 <style scoped>
-.o-non-clickable {
-  cursor: auto;
-}
+
 </style>