feat: update location search dropdown styling

AtB-AS · Mar 3, 2025 · 969f829 · 969f829
1 parent 771d5b8
commit 969f829
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 30 deletions.
diff --git a/src/components/search/search.module.css b/src/components/search/search.module.css
@@ -18,7 +18,6 @@
 
 .label {
   composes: typo-body__secondary;
-
   height: var(--height);
   min-width: 3rem;
   display: flex;
@@ -58,42 +57,51 @@
   max-height: 20rem;
   overflow-y: auto;
   z-index: 100;
+  padding: token('spacing.medium');
 }
-.menuHeading {
-  padding-left: token('spacing.small');
+.menu:empty {
+  display: none;
 }
 
 .item {
-  padding: token('spacing.small');
-  height: var(--height);
+  padding: token('spacing.medium');
   display: flex;
   align-items: center;
+  gap: token('spacing.medium');
+  cursor: pointer;
 }
 
-.item:not(:last-child) {
-  border-bottom: 1px solid token('color.border.primary.background');
+.item:has(> .menuHeading) {
+  margin-top: token('spacing.small');
+}
+
+.menuHeading {
+  composes: typo-body__secondary;
 }
 
 .itemHighlighted {
-  background-color: token('color.interactive.2.active.background');
-  font-weight: bold;
+  color: token('color.interactive.2.hover.foreground.primary');
+  background-color: token('color.interactive.2.hover.background');
+  outline: token('border.width.medium') solid token('color.interactive.2.outline.background');
+  border-radius: token('border.radius.small');
 }
 
 .itemIcon {
   display: flex;
   align-items: center;
-  padding: token('spacing.small');
-  padding-right: token('spacing.xLarge');
 }
 
-.itemNameBold {
+.itemInfo {
+  display: flex;
+  flex-direction: column;
+}
+
+.itemName {
   font-weight: bold;
 }
 
 .itemLocality {
   composes: typo-body__secondary;
-  color: token('color.foreground.dynamic.secondary');
-  margin-left: token('spacing.large');
 }
 
 @media (max-width: 650px) {

diff --git a/src/components/search/search.tsx b/src/components/search/search.tsx
@@ -8,7 +8,6 @@ import { GeocoderFeature } from '@atb/page-modules/departures';
 import { logSpecificEvent } from '@atb/modules/firebase';
 import { ComponentText, useTranslation } from '@atb/translations';
 import useLocalStorage from '@atb/utils/use-localstorage';
-import { Typo } from '../typography';
 import { useGeolocation } from './use-geolocation';
 import { MonoIcon } from '../icon';
 import { LoadingIcon } from '../loading';
@@ -88,7 +87,7 @@ export default function Search({
     // Add to recent searches, or move to top of list if already in list
     setRecentFeatureSearches([
       feature,
-      ...recentFeatureSearches.filter((f) => f.id !== feature.id).splice(0, 4),
+      ...recentFeatureSearches.filter((f) => f.id !== feature.id).splice(0, 2),
     ]);
     onChange(feature);
   };
@@ -155,8 +154,10 @@ export default function Search({
                   <div className={style.itemIcon} aria-hidden>
                     <VenueIcon categories={item.category} />
                   </div>
-                  <span className={style.itemName}>{item.name}</span>
-                  <span className={style.itemLocality}>{item.locality}</span>
+                  <div className={style.itemInfo}>
+                    <span className={style.itemName}>{item.name}</span>
+                    <span className={style.itemLocality}>{item.locality}</span>
+                  </div>
                 </li>
               ))}
             {focus && inputValue === '' && (
@@ -179,20 +180,19 @@ export default function Search({
                       <MonoIcon icon="places/Location" />
                     )}
                   </div>
-                  <span className={style.itemName}>
-                    {isGeolocationUnavailable || isGeolocationError
-                      ? t(ComponentText.SearchInput.positionNotAvailable)
-                      : t(ComponentText.SearchInput.myPosition)}
-                  </span>
+                  <div className={style.itemInfo}>
+                    <span className={style.itemName}>
+                      {isGeolocationUnavailable || isGeolocationError
+                        ? t(ComponentText.SearchInput.positionNotAvailable)
+                        : t(ComponentText.SearchInput.myPosition)}
+                    </span>
+                  </div>
                 </li>
                 {recentFeatureSearches.length > 0 && (
                   <li className={style.item}>
-                    <Typo.span
-                      textType="body__secondary"
-                      className={style.menuHeading}
-                    >
+                    <span className={style.menuHeading}>
                       {t(ComponentText.SearchInput.recentSearches)}
-                    </Typo.span>
+                    </span>
                   </li>
                 )}
                 {recentFeatureSearches.map((item, index) => (
@@ -211,8 +211,12 @@ export default function Search({
                     <div className={style.itemIcon} aria-hidden>
                       <VenueIcon categories={item.category} />
                     </div>
-                    <span className={style.itemName}>{item.name}</span>
-                    <span className={style.itemLocality}>{item.locality}</span>
+                    <div className={style.itemInfo}>
+                      <span className={style.itemName}>{item.name}</span>
+                      <span className={style.itemLocality}>
+                        {item.locality}
+                      </span>
+                    </div>
                   </li>
                 ))}
               </>