@africanies/angular-web-sdk 0.1.9 → 0.1.10

package/libs/africanies-ui/src/lib/layout/header-weather.ts

@@ -2,12 +2,15 @@ import type { IconName } from '@africanies/africanies-icons';
 
 import type { HeaderWeather, HeaderWeatherKind } from './header-greeting.util';
 
-/** Bump when cache shape or lookup strategy changes. */
-const CACHE_KEY = 'africanies-header-weather-v5';
+/** Bump when cache shape or city resolution strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v7';
 const FETCH_MS = 4_000;
 const BROWSER_GEO_MS = 3_500;
-/** IP fallback for coordinates only — city strings are often wrong. */
+/** IP fallback — city string is used only when reverse-geocode is empty. */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
+/** Client reverse-geocode so the label matches the forecast coordinates. */
+const REVERSE_GEO_URL =
+  'https://api.bigdatacloud.net/data/reverse-geocode-client';
 
 const WEATHER_LABELS: Record<HeaderWeatherKind, string> = {
   clear: 'Clear',
@@ -23,13 +26,21 @@ interface CachedWeather {
   hour: string;
   kind: HeaderWeatherKind;
   temperatureC?: number;
+  city?: string;
 }
 
 interface GeoJsPayload {
+  city?: string;
   latitude?: string | number;
   longitude?: string | number;
 }
 
+interface ReverseGeoPayload {
+  city?: string;
+  locality?: string;
+  principalSubdivision?: string;
+}
+
 interface OpenMeteoPayload {
   current?: {
     weather_code?: number;
@@ -108,12 +119,11 @@ export function headerWeatherIcon(kind: HeaderWeatherKind, hour: number): IconNa
 }
 
 /**
- * Local forecast via browser / IP coordinates + Open-Meteo (no API key).
+ * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
  *
- * Coordinates prefer the browser Geolocation API (may prompt once).
- * Otherwise IP geo is used for lat/lon only — city labels are not shown
- * because IP and reverse-geocode cities are often wrong (e.g. NG IPs
- * labelled Lagos).
+ * Coordinates prefer the browser Geolocation API (accurate for travellers;
+ * may prompt once). Otherwise IP geo is used. The city label is reverse-
+ * geocoded from those coordinates, with the IP city as a fallback.
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
  * `null` so the greeting can stay time-of-day only. Cached per local hour
@@ -158,8 +168,11 @@ export async function loadHeaderWeather(
     }
 
     const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-    const weather: HeaderWeather = { kind, temperatureC };
-    writeCache({ hour, kind, temperatureC });
+    const city =
+      (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
+      coords.fallbackCity;
+    const weather: HeaderWeather = { kind, temperatureC, city };
+    writeCache({ hour, kind, temperatureC, city });
     return weather;
   } catch {
     return null;
@@ -184,9 +197,16 @@ function readCache(hour: string): HeaderWeather | null {
     if (parsed.hour !== hour || !parsed.kind) {
       return null;
     }
+    // City-less entries (e.g. browser geo + failed reverse) used to stick for
+    // the hour — treat them as a miss so we can recover the location label.
+    const city = asCity(parsed.city);
+    if (!city) {
+      return null;
+    }
     return {
       kind: parsed.kind,
       temperatureC: parsed.temperatureC,
+      city,
     };
   } catch {
     return null;
@@ -203,23 +223,36 @@ function writeCache(value: CachedWeather): void {
 
 /**
  * Prefer device coordinates when available (may prompt once); otherwise fall
- * back to IP lat/lon for the forecast only.
+ * back to IP geo. IP is always fetched in parallel so its city can backfill
+ * the label when reverse-geocode is empty (browser geo has no city string).
  */
 async function resolveCoordinates(
   fetchFn: typeof fetch,
-): Promise<Coordinates | null> {
-  const browser = await tryBrowserGeolocation();
+): Promise<(Coordinates & { fallbackCity?: string }) | null> {
+  const [browser, ipGeo] = await Promise.all([
+    tryBrowserGeolocation(),
+    fetchIpGeo(fetchFn),
+  ]);
+  const ipCity = asCity(ipGeo?.city);
+
   if (browser) {
-    return browser;
+    return { ...browser, fallbackCity: ipCity };
   }
 
-  const geo = (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
-  const latitude = asNumber(geo?.latitude);
-  const longitude = asNumber(geo?.longitude);
+  const latitude = asNumber(ipGeo?.latitude);
+  const longitude = asNumber(ipGeo?.longitude);
   if (latitude === null || longitude === null) {
     return null;
   }
-  return { latitude, longitude };
+  return {
+    latitude,
+    longitude,
+    fallbackCity: ipCity,
+  };
+}
+
+async function fetchIpGeo(fetchFn: typeof fetch): Promise<GeoJsPayload | null> {
+  return (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
 }
 
 async function tryBrowserGeolocation(): Promise<Coordinates | null> {
@@ -253,6 +286,23 @@ async function tryBrowserGeolocation(): Promise<Coordinates | null> {
   });
 }
 
+async function reverseGeocodeCity(
+  fetchFn: typeof fetch,
+  latitude: number,
+  longitude: number,
+): Promise<string | undefined> {
+  const url =
+    `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
+    `&longitude=${encodeURIComponent(String(longitude))}` +
+    `&localityLanguage=en`;
+  const payload = (await fetchJson(fetchFn, url)) as ReverseGeoPayload | null;
+  return (
+    asCity(payload?.city) ??
+    asCity(payload?.locality) ??
+    asCity(payload?.principalSubdivision)
+  );
+}
+
 function asNumber(value: unknown): number | null {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;
@@ -264,6 +314,17 @@ function asNumber(value: unknown): number | null {
   return null;
 }
 
+function asCity(value: unknown): string | undefined {
+  if (typeof value !== 'string') {
+    return undefined;
+  }
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.toLowerCase() === 'n/a') {
+    return undefined;
+  }
+  return trimmed;
+}
+
 async function fetchJson(
   fetchFn: typeof fetch,
   url: string,

package/libs/africanies-ui/src/lib/navigation/segment/segment.component.ts

@@ -38,6 +38,10 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
 /**
  * Compact segmented control for view modes and filters.
  *
+ * Selected option uses a **solid brand pill** (white label) on a neutral track —
+ * same pattern as the portal shipping-mode toggle. With exactly two options the
+ * pill slides; with more options each selected chip fills in place.
+ *
  * ## Router mode (URL is source of truth)
  *
  * Set `routerLink` (and optional `queryParams`) on items. The selected pill
@@ -65,20 +69,38 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [AfricaniesIconComponent],
+  styles: `
+    :host .africanies-segment-thumb {
+      width: calc((100% - 0.5rem) / 2);
+    }
+  `,
   template: `
     <div
-      class="inline-flex max-w-full flex-wrap gap-1 rounded-lg bg-background-welcome p-1 dark:bg-ink-950"
+      class="relative inline-grid max-w-full rounded-lg bg-[#f0f2f5] p-1 dark:bg-[#2a2c31]"
       role="group"
       [attr.aria-label]="ariaLabel()"
+      [class.grid-cols-2]="useSlidingThumb()"
+      [class.inline-flex]="!useSlidingThumb()"
+      [class.flex-wrap]="!useSlidingThumb()"
+      [class.gap-1]="!useSlidingThumb()"
     >
+      @if (useSlidingThumb()) {
+        <div
+          class="africanies-segment-thumb pointer-events-none absolute top-1 bottom-1 left-1 rounded-md shadow-sm transition-transform duration-200 ease-out motion-reduce:transition-none"
+          [class]="thumbFillClass()"
+          [style.transform]="
+            activeIndex() === 1
+              ? 'translateX(calc(100% + 0.25rem))'
+              : 'translateX(0)'
+          "
+          aria-hidden="true"
+        ></div>
+      }
+
       @for (item of items(); track item.id) {
         @if (item.routerLink !== null && item.routerLink !== undefined) {
           <a
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
             [class.opacity-50]="item.disabled"
@@ -95,11 +117,7 @@ const DEFAULT_LINK_ACTIVE: IsActiveMatchOptions = {
         } @else {
           <button
             type="button"
-            [class]="
-              segmentChrome() +
-              ' ' +
-              (isItemActive(item) ? selectedClass() : idleClass())
-            "
+            [class]="optionChrome(item)"
             [disabled]="!!item.disabled"
             [class.cursor-pointer]="!item.disabled"
             [class.cursor-not-allowed]="item.disabled"
@@ -154,21 +172,18 @@ export class SegmentComponent {
     { initialValue: this.router.url },
   );
 
-  protected readonly segmentChrome = computed(
-    () =>
-      'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-body-sm transition-colors duration-150 no-underline',
+  /** Two equal options → portal-style sliding brand pill. */
+  protected readonly useSlidingThumb = computed(
+    () => this.items().length === 2,
   );
 
-  protected readonly selectedClass = computed(() => {
-    const colors = this.modeColor.classes();
-    return `${colors.soft} ${colors.text} shadow-sm font-semibold`;
+  /** Index of the active option (0 / 1 for the sliding thumb). */
+  protected readonly activeIndex = computed(() => {
+    const list = this.items();
+    const idx = list.findIndex((item) => this.isItemActive(item));
+    return idx < 0 ? 0 : idx;
   });
 
-  protected readonly idleClass = computed(
-    () =>
-      'font-medium text-neutral-600 hover:text-ink dark:text-neutral-400 dark:hover:text-white',
-  );
-
   constructor() {
     effect(() => {
       this.url();
@@ -198,6 +213,67 @@ export class SegmentComponent {
     return this.activeId() === item.id;
   }
 
+  /**
+   * Sliding thumb fill. STN / SFN options keep their own brand color so the
+   * pill matches mode identity; other pairs follow the active theme primary.
+   */
+  protected thumbFillClass(): string {
+    const active = this.items()[this.activeIndex()];
+    return this.brandFillFor(active?.id ?? null);
+  }
+
+  /**
+   * Option chrome: sliding mode keeps labels transparent over the thumb;
+   * multi-option mode paints a solid selected chip in place.
+   *
+   * @param item - Option being rendered.
+   * @returns Class string for the control.
+   */
+  protected optionChrome(item: AfricaniesNavItem): string {
+    const base =
+      'relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-center text-body-sm no-underline transition-colors duration-150';
+    const active = this.isItemActive(item);
+
+    if (this.useSlidingThumb()) {
+      return (
+        base +
+        ' w-full ' +
+        (active
+          ? 'font-semibold text-white'
+          : 'font-medium text-ink hover:text-ink dark:text-neutral-300 dark:hover:text-white')
+      );
+    }
+
+    if (active) {
+      return `${base} font-semibold text-white shadow-sm ${this.brandFillFor(item.id)}`;
+    }
+
+    return (
+      base +
+      ' font-medium text-ink hover:bg-white/70 hover:text-ink dark:text-neutral-300 dark:hover:bg-white/10 dark:hover:text-white'
+    );
+  }
+
+  /**
+   * Solid brand fill for a selected option / sliding thumb.
+   *
+   * Light + dark use the same SFN green / STN orange primaries so the control
+   * stays mode-identifiable on both surfaces (portal primary, not soft tint).
+   * Class strings are full literals so Tailwind keeps them.
+   *
+   * @param id - Option id (`stn` / `sfn` get fixed brands; else theme primary).
+   * @returns Background utility classes.
+   */
+  protected brandFillFor(id: string | null): string {
+    if (id === 'stn') {
+      return 'bg-import dark:bg-import';
+    }
+    if (id === 'sfn') {
+      return 'bg-export dark:bg-export';
+    }
+    return this.modeColor.classes().activeFill;
+  }
+
   protected selectLocal(item: AfricaniesNavItem): void {
     if (item.disabled || item.routerLink != null) {
       return;

package/libs/africanies-ui/src/lib/navigation/shipping-mode-switch/shipping-mode-switch.component.ts

@@ -3,13 +3,46 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
+  effect,
   inject,
   input,
+  model,
 } from '@angular/core';
 
 import { ShippingModeService } from '@africanies/africanies-core';
+import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 import type { ShippingMode } from '@africanies/africanies-models';
 
+import { ChipComponent, type ChipVariant } from '../../chip/chip.component';
+
+const PANEL_OPEN_STORAGE_KEY = 'africanies-shipping-mode-panel-open';
+
+function readStoredPanelOpen(): boolean {
+  if (typeof localStorage === 'undefined') {
+    return true;
+  }
+  try {
+    const raw = localStorage.getItem(PANEL_OPEN_STORAGE_KEY);
+    if (raw === null) {
+      return true;
+    }
+    return raw !== '0' && raw !== 'false';
+  } catch {
+    return true;
+  }
+}
+
+function writeStoredPanelOpen(open: boolean): void {
+  if (typeof localStorage === 'undefined') {
+    return;
+  }
+  try {
+    localStorage.setItem(PANEL_OPEN_STORAGE_KEY, open ? '1' : '0');
+  } catch {
+    // Private mode / quota — panel still toggles in-session.
+  }
+}
+
 /**
  * Shared globe + plane glyph for STN / SFN. STN paints it rotated 180°.
  *
@@ -25,12 +58,13 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
  * import orange; **from Nigeria** uses export green. Both tiles keep equal
  * chrome so unselected does not look like floating text.
  *
- * Project into `<africanies-side-nav>` with the `footer` attribute.
+ * Project into `<africanies-side-nav>` with the `pre-nav` attribute (above the
+ * nav list). `footer` still works for legacy placement under the list.
  *
  * @example
  * ```html
  * <africanies-side-nav [items]="nav" [(collapsed)]="collapsed">
- *   <africanies-shipping-mode-switch footer [collapsed]="collapsed()" />
+ *   <africanies-shipping-mode-switch pre-nav [collapsed]="collapsed()" />
  * </africanies-side-nav>
  * ```
  */
@@ -38,71 +72,140 @@ const SHIPPING_MODE_GLYPH = `M88.42,68.75a48.8,48.8,0,0,1-4.74,11.1h9.89a7.67,7.
   selector: 'africanies-shipping-mode-switch',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AfricaniesIconComponent, ChipComponent],
   host: {
     '[class]': 'hostClass()',
   },
   template: `
-    @if (!collapsed()) {
-      <p
-        class="m-0 mb-2 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
+    @if (collapsed()) {
+      <!-- Narrow rail: icon tiles only — chip + chevron reads as cramped. -->
+      <div
+        class="grid grid-cols-1 gap-1.5"
+        role="radiogroup"
+        aria-label="Shipping mode"
       >
-        Shipping mode
-      </p>
-    }
-    <div
-      class="grid gap-1.5"
-      [class.grid-cols-1]="collapsed()"
-      [class.grid-cols-2]="!collapsed()"
-      role="radiogroup"
-      aria-label="Shipping mode"
-    >
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'stn'"
-        aria-label="Shipping to Nigeria"
-        [class]="cardClass('stn')"
-        (click)="select('stn')"
-      >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0 rotate-180"
-          aria-hidden="true"
-          focusable="false"
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'stn'"
+          aria-label="Shipping to Nigeria"
+          title="Shipping to Nigeria"
+          [class]="cardClass('stn')"
+          (click)="select('stn')"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>to Nigeria</span>
-          </span>
-        }
-      </button>
-      <button
-        type="button"
-        role="radio"
-        [attr.aria-checked]="mode() === 'sfn'"
-        aria-label="Shipping from Nigeria"
-        [class]="cardClass('sfn')"
-        (click)="select('sfn')"
-      >
-        <svg
-          viewBox="0 0 122.88 107.54"
-          class="h-6 w-6 shrink-0"
-          aria-hidden="true"
-          focusable="false"
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0 rotate-180"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          role="radio"
+          [attr.aria-checked]="mode() === 'sfn'"
+          aria-label="Shipping from Nigeria"
+          title="Shipping from Nigeria"
+          [class]="cardClass('sfn')"
+          (click)="select('sfn')"
+        >
+          <svg
+            viewBox="0 0 122.88 107.54"
+            class="h-5 w-5 shrink-0"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path [attr.d]="glyphPath()" fill="currentColor" />
+          </svg>
+        </button>
+      </div>
+    } @else {
+      <div class="mb-2 flex items-center gap-1.5">
+        <p
+          class="m-0 shrink-0 px-1 text-caption font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
-          <path [attr.d]="glyphPath()" fill="currentColor" />
-        </svg>
-        @if (!collapsed()) {
-          <span class="flex flex-col leading-tight">
-            <span>Shipping</span>
-            <span>from Nigeria</span>
-          </span>
-        }
-      </button>
-    </div>
+          Shipping mode
+        </p>
+        <africanies-chip [variant]="modeChipVariant()" size="sm">
+          {{ modeChipLabel() }}
+        </africanies-chip>
+        <span class="min-w-0 flex-1" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-hover hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+          [attr.aria-label]="
+            panelOpen() ? 'Hide shipping modes' : 'Show shipping modes'
+          "
+          [attr.aria-expanded]="panelOpen()"
+          (click)="togglePanel()"
+        >
+          <africanies-icon
+            [name]="panelOpen() ? 'chevron-up' : 'chevron-down'"
+            [size]="14"
+          />
+        </button>
+      </div>
+
+      <div
+        class="grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none"
+        [style.grid-template-rows]="panelOpen() ? '1fr' : '0fr'"
+        [attr.aria-hidden]="!panelOpen()"
+        [class.pointer-events-none]="!panelOpen()"
+      >
+        <div class="min-h-0 overflow-hidden">
+          <div
+            class="grid grid-cols-2 gap-1.5"
+            role="radiogroup"
+            aria-label="Shipping mode"
+          >
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'stn'"
+              aria-label="Shipping to Nigeria"
+              [class]="cardClass('stn')"
+              (click)="select('stn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0 rotate-180"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>to Nigeria</span>
+              </span>
+            </button>
+            <button
+              type="button"
+              role="radio"
+              [attr.aria-checked]="mode() === 'sfn'"
+              aria-label="Shipping from Nigeria"
+              [class]="cardClass('sfn')"
+              (click)="select('sfn')"
+            >
+              <svg
+                viewBox="0 0 122.88 107.54"
+                class="h-6 w-6 shrink-0"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path [attr.d]="glyphPath()" fill="currentColor" />
+              </svg>
+              <span class="flex flex-col leading-tight">
+                <span>Shipping</span>
+                <span>from Nigeria</span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    }
   `,
 })
 export class ShippingModeSwitchComponent {
@@ -125,16 +228,41 @@ export class ShippingModeSwitchComponent {
    */
   readonly collapsed = input(false, { transform: booleanAttribute });
 
+  /**
+   * When true, the mode tiles are visible. Persisted in `localStorage`.
+   * Two-way bindable for hosts that need to force-open (e.g. onboarding).
+   */
+  readonly panelOpen = model(readStoredPanelOpen());
+
   /** Active mode from {@link ShippingModeService}. */
   protected readonly mode = this.shipping.mode;
 
-  /** Host padding / divider — tighter when the rail is collapsed. */
+  protected readonly modeChipLabel = computed(() =>
+    this.mode() === 'stn' ? 'STN' : 'SFN',
+  );
+
+  protected readonly modeChipVariant = computed(
+    (): ChipVariant => (this.mode() === 'stn' ? 'import' : 'export'),
+  );
+
+  /** Host padding / divider — sits above the nav list (`border-b`). */
   protected readonly hostClass = computed(() =>
     this.collapsed()
-      ? 'block shrink-0 border-t border-border px-1.5 py-3 dark:border-white/10'
-      : 'block shrink-0 border-t border-border px-2 py-3 dark:border-white/10',
+      ? 'block shrink-0 border-b border-border px-1.5 py-2 dark:border-white/10'
+      : 'block shrink-0 border-b border-border px-2 py-2.5 dark:border-white/10',
   );
 
+  constructor() {
+    effect(() => {
+      writeStoredPanelOpen(this.panelOpen());
+    });
+  }
+
+  /** Show or hide the mode tiles. */
+  protected togglePanel(): void {
+    this.panelOpen.update((open) => !open);
+  }
+
   /**
    * Requests a mode change through {@link ShippingModeService.requestModeChange}
    * so feature guards (e.g. Create Shipment confirm) can run first.
@@ -160,7 +288,7 @@ export class ShippingModeSwitchComponent {
     const base =
       'flex w-full cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border text-center text-caption font-medium transition-colors ' +
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus ' +
-      (compact ? 'min-h-9 px-1 py-1.5' : 'min-h-[4.5rem] px-1.5 py-2');
+      (compact ? 'size-9 min-h-0 px-0 py-0' : 'min-h-[4.5rem] px-1.5 py-2');
     const idle =
       'border-control bg-surface text-ink hover:bg-background-hover dark:border-white/15 dark:bg-ink-950 dark:text-white dark:hover:bg-white/10';
 
@@ -170,7 +298,7 @@ export class ShippingModeSwitchComponent {
         : `${base} ${idle}`;
     }
     return selected
-      ? `${base} border-export-strong bg-export-strong text-white dark:border-export dark:bg-export`
+      ? `${base} border-export bg-export text-white dark:border-export dark:bg-export`
       : `${base} ${idle}`;
   }
 }