From 6b40f28239e053a0788e8940b960c3fb9a0cc63d Mon Sep 17 00:00:00 2001
From: satellitestudiodesign <juancarlos@satellitestud.io>
Date: Wed, 7 Aug 2024 12:50:15 +0200
Subject: [PATCH] Make the vessel historical profile comparison dots more
 visible

---
 .../VesselIdentitySelector.module.css         | 13 +++-------
 .../identity/VesselIdentitySelector.tsx       | 25 +++++++++++--------
 .../public/locales/source/translations.json   |  1 +
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.module.css b/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.module.css
index 10cc8638dc..d09955bdef 100644
--- a/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.module.css
+++ b/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.module.css
@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   height: 3.2rem;
-  background-color: var(--color-terthiary-blue);
+  background-color: rgba(var(--primary-blue-rgb), 0.4);
   border-radius: 1.6rem;
   transition: all 250ms ease-out;
   cursor: pointer;
@@ -21,9 +21,10 @@
   grid-template-columns: 0fr;
 }
 
-.icon:hover {
-  border: 0.5rem solid white;
+.icon:hover,
+.icon.selected {
   grid-template-columns: 1fr;
+  border: 0.5rem solid white;
 }
 
 .icon:hover,
@@ -34,18 +35,12 @@
 .dates {
   font: var(--font-XS);
   color: var(--color-white);
-  opacity: 0;
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
   transition: opacity 150ms ease-in;
 }
 
-.icon:hover .dates {
-  opacity: 1;
-  transition: opacity 150ms ease-in 200ms;
-}
-
 .error {
   color: var(--color-danger-red);
   text-align: center;
diff --git a/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.tsx b/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.tsx
index df4fdc6b69..9ead559751 100644
--- a/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.tsx
+++ b/apps/fishing-map/features/vessel/identity/VesselIdentitySelector.tsx
@@ -3,6 +3,7 @@ import cx from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { DateTime } from 'luxon'
 import { VesselIdentitySourceEnum } from '@globalfishingwatch/api-types'
+import { Tooltip } from '@globalfishingwatch/ui-components'
 import {
   selectVesselIdentityId,
   selectVesselIdentitySource,
@@ -76,17 +77,19 @@ const VesselIdentitySelector = () => {
           const end = formatI18nDate(identity.transmissionDateTo)
           const identityId = getVesselIdentityId(identity)
           return (
-            <li
-              key={identityId}
-              className={cx(styles.icon, {
-                [styles.selected]: identityId === getVesselIdentityId(currentIdentity),
-              })}
-              onClick={() => setIdentityId(identityId)}
-            >
-              <span className={styles.dates}>
-                {start} - {end}
-              </span>
-            </li>
+            <Tooltip content={t('vessel.selectIdentity', 'See the identity for this dates')}>
+              <li
+                key={identityId}
+                className={cx(styles.icon, {
+                  [styles.selected]: identityId === getVesselIdentityId(currentIdentity),
+                })}
+                onClick={() => setIdentityId(identityId)}
+              >
+                <span className={styles.dates}>
+                  {start} - {end}
+                </span>
+              </li>
+            </Tooltip>
           )
         })}
       </ul>
diff --git a/apps/fishing-map/public/locales/source/translations.json b/apps/fishing-map/public/locales/source/translations.json
index 60b992bd9e..8362623a34 100644
--- a/apps/fishing-map/public/locales/source/translations.json
+++ b/apps/fishing-map/public/locales/source/translations.json
@@ -926,6 +926,7 @@
     "registryGeartype": "Registry Gear Type",
     "registrySources": "registry sources",
     "removeAllVessels": "Remove all vessels",
+    "selectIdentity": "See the identity for this dates",
     "sectionActivity": "Activity",
     "sectionAreas": "Areas",
     "sectionInsights": "Insights",