Make the vessel historical profile comparison dots more visible

GlobalFishingWatch · Aug 7, 2024 · 6b40f28 · 6b40f28
1 parent 84cd15a
commit 6b40f28
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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",