feat(ui): Replace long labels with icons

oliversalzburg · Jul 17, 2021 · 1fe28a7 · 1fe28a7
1 parent d523063
commit 1fe28a7
Showing 1 changed file with 18 additions and 7 deletions.
diff --git a/packages/userscript/source/ui/TimeControlSettingsUi.ts b/packages/userscript/source/ui/TimeControlSettingsUi.ts
@@ -150,7 +150,8 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
 
     const maximunButton = $("<div/>", {
       id: "set-timeSkip-maximum",
-      text: this._host.i18n("ui.maximum"),
+      text: "⍐",
+      title: this._host.i18n("ui.maximum"),
       //title: option.max,
       css: {
         cursor: "pointer",
@@ -176,7 +177,8 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
 
     const cyclesButton = $("<div/>", {
       id: `toggle-cycle-${name}`,
-      text: this._host.i18n("ui.cycles"),
+      text: "↻",
+      title: this._host.i18n("ui.cycles"),
       css: {
         cursor: "pointer",
         display: "inline-block",
@@ -201,7 +203,8 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
 
     const seasonsButton = $("<div/>", {
       id: `toggle-seasons-${name}`,
-      text: this._host.i18n("trade.seasons"),
+      text: "🗓",
+      title: this._host.i18n("trade.seasons"),
       css: {
         cursor: "pointer",
         display: "inline-block",
@@ -949,21 +952,25 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
 
     const buildButton = $("<div/>", {
       id: "toggle-reset-build",
-      text: this._host.i18n("ui.build"),
+      text: "🔥",
+      title: this._host.i18n("ui.build"),
       css: {
         cursor: "pointer",
         display: "inline-block",
+        filter: "grayscale(100%)",
         float: "right",
         paddingRight: "5px",
         textShadow: "3px 3px 4px gray",
       },
     });
     const spaceButton = $("<div/>", {
       id: "toggle-reset-space",
-      text: this._host.i18n("ui.space"),
+      text: "🚀",
+      title: this._host.i18n("ui.space"),
       css: {
         cursor: "pointer",
         display: "inline-block",
+        filter: "grayscale(100%)",
         float: "right",
         paddingRight: "5px",
         textShadow: "3px 3px 4px gray",
@@ -983,21 +990,25 @@ export class TimeControlSettingsUi extends SettingsSectionUi<TimeControlSettings
     });
     const religionButton = $("<div/>", {
       id: "toggle-reset-religion",
-      text: this._host.i18n("ui.faith"),
+      text: "🐈",
+      title: this._host.i18n("ui.faith"),
       css: {
         cursor: "pointer",
         display: "inline-block",
+        filter: "grayscale(100%)",
         float: "right",
         paddingRight: "5px",
         textShadow: "3px 3px 4px gray",
       },
     });
     const timeButton = $("<div/>", {
       id: "toggle-reset-time",
-      text: this._host.i18n("ui.time"),
+      text: "🕙",
+      title: this._host.i18n("ui.time"),
       css: {
         cursor: "pointer",
         display: "inline-block",
+        filter: "grayscale(100%)",
         float: "right",
         paddingRight: "5px",
         textShadow: "3px 3px 4px gray",