feat: 🎨 replace all icons

public/css/style.css

@@ -623,12 +623,14 @@ ul {
 }
 
 .remove-icon img {
-  width: 15px;
+  width: 25px;
+  filter: invert(52%) sepia(130%) saturate(7323%) hue-rotate(353deg) brightness(100%) contrast(86%);
 }
 
 .add-icon img {
   padding-top: 35px;
-  width: 15px;
+  width: 25px;
+  filter: hue-rotate(275deg) brightness(1.2);
 }
 
 #iss-stream-menu {

src/plugins/select-sat-manager/sat-info-box.css

@@ -19,11 +19,19 @@
 
 #sat-add-watchlist,
 #sat-remove-watchlist {
-  width: 15px;
-  height: 15px;
+  width: 25px;
+  height: 25px;
   cursor: pointer;
 }
 
+#sat-add-watchlist {
+  filter: hue-rotate(275deg) brightness(1.2);
+}
+
+#sat-remove-watchlist {
+  filter: invert(52%) sepia(130%) saturate(7323%) hue-rotate(353deg) brightness(100%) contrast(86%);
+}
+
 .sat-info-section-header {
   font-size: 18px;
   text-align: center;

src/plugins/select-sat-manager/sat-info-box.ts

@@ -15,8 +15,8 @@ import { CoordinateTransforms } from '@app/static/coordinate-transforms';
 import { SatMath } from '@app/static/sat-math';
 import { SensorMath, TearrData } from '@app/static/sensor-math';
 import { StringExtractor } from '@app/static/string-extractor';
-import addPng from '@public/img/add.png';
-import removePng from '@public/img/remove.png';
+import addPng from '@public/img/icons/add.png';
+import removePng from '@public/img/icons/remove.png';
 import Draggabilly from 'draggabilly';
 import { BaseObject, CatalogSource, DEG2RAD, DetailedSatellite, MINUTES_PER_DAY, RfSensor, SpaceObjectType, Sun, cKmPerMs, eci2lla } from 'ootk';
 import { KeepTrackPlugin } from '../KeepTrackPlugin';
@@ -566,11 +566,12 @@ export class SatInfoBox extends KeepTrackPlugin {
   };
 
   private addRemoveWatchlist_() {
-    const watchlistPlugin = <WatchlistPlugin>keepTrackApi.getPlugin(WatchlistPlugin);
+    const watchlistPlugin = keepTrackApi.getPlugin(WatchlistPlugin);
 
     if (watchlistPlugin) {
       const id = this.selectSatManager_.selectedSat;
 
+      keepTrackApi.getSoundManager().play(SoundNames.CLICK);
       if (watchlistPlugin.isOnWatchlist(id)) {
         watchlistPlugin.removeSat(id);
       } else {
@@ -857,17 +858,16 @@ export class SatInfoBox extends KeepTrackPlugin {
     getEl('ui-wrapper').insertAdjacentHTML(
       'beforeend',
       keepTrackApi.html`
-            <div id="sat-infobox" class="text-select satinfo-fixed start-hidden">
-              <div id="sat-info-top-links">
-                <div id="sat-info-title" class="center-text sat-info-section-header">
-                  <img id="sat-add-watchlist" src="${addPng}"/>
-                  <img id="sat-remove-watchlist" src="${removePng}"/>
-                  <span id="sat-info-title-name">
-                    This is a title
-                  </span>
-                </div>
-                ${
-  getEl('search')
+      <div id="sat-infobox" class="text-select satinfo-fixed start-hidden">
+        <div id="sat-info-top-links">
+          <div id="sat-info-title" class="center-text sat-info-section-header">
+            <img id="sat-add-watchlist" src="${addPng}"/>
+            <img id="sat-remove-watchlist" src="${removePng}"/>
+            <span id="sat-info-title-name">
+              This is a title
+            </span>
+          </div>
+          ${getEl('search')
     ? keepTrackApi.html`
                   <div id="all-objects-link" class="link sat-infobox-links sat-only-info" data-position="top" data-delay="50"
                   data-tooltip="Find Related Objects">Find all objects from this launch...</div>

src/plugins/top-menu/top-menu.ts

@@ -3,8 +3,8 @@ import { keepTrackApi } from '@app/keepTrackApi';
 import { getEl } from '@app/lib/get-el';
 import { adviceManagerInstance } from '@app/singletons/adviceManager';
 import fullscreenIconPng from '@public/img/fullscreen-icon.png';
-import helpPng from '@public/img/help.png';
 import findPng from '@public/img/icons/find.png';
+import helpPng from '@public/img/icons/help.png';
 import layersIconPng from '@public/img/icons/layers-icon.png';
 import soundOffPng from '@public/img/icons/sound-off.png';
 import soundOnPng from '@public/img/icons/sound-on.png';

src/plugins/watchlist/watchlist.ts

@@ -31,9 +31,9 @@ import { LineTypes } from '@app/singletons/draw-manager/line-manager';
 import { errorManagerInstance } from '@app/singletons/errorManager';
 import { PersistenceManager, StorageKey } from '@app/singletons/persistence-manager';
 import { isThisNode } from '@app/static/isThisNode';
-import addPng from '@public/img/add.png';
+import addPng from '@public/img/icons/add.png';
+import removePng from '@public/img/icons/remove.png';
 import watchlistPng from '@public/img/icons/watchlist.png';
-import removePng from '@public/img/remove.png';
 import saveAs from 'file-saver';
 import { CatalogSource, DetailedSatellite } from 'ootk';
 import { KeepTrackPlugin } from '../KeepTrackPlugin';