@africanies/angular-web-sdk 0.1.7 → 0.1.8

package/libs/africanies-ui/src/lib/overlay/confirm-dialog.component.ts

@@ -161,8 +161,8 @@ export class ConfirmDialogComponent {
     const well =
       'inline-flex size-14 shrink-0 items-center justify-center rounded-2xl';
     return this.options.danger
-      ? `${well} bg-danger-subtle text-danger dark:bg-danger/20 dark:text-danger`
-      : `${well} bg-export-subtle text-export dark:bg-export/20 dark:text-export-light`;
+      ? `${well} bg-danger-subtle text-danger-dark dark:bg-danger/20 dark:text-danger`
+      : `${well} bg-export-subtle text-export-strong dark:bg-export/20 dark:text-export-light`;
   });
 
   constructor() {

package/libs/africanies-ui/src/lib/overlay/drawer.service.ts

@@ -63,11 +63,11 @@ export class DrawerService implements OverlayOpener {
         ],
         panelClass: [
           'africanies-drawer-panel',
-          'bg-white',
+          'bg-surface',
           'dark:bg-ink-950',
           'text-ink',
           'dark:text-white',
-          'shadow-xl',
+          'shadow-floating',
           'border-l',
           'border-border',
           'dark:border-white/15',

package/libs/africanies-ui/src/lib/overlay/modal.service.ts

@@ -151,12 +151,12 @@ export class ModalService implements OverlayOpener {
         ],
         panelClass: [
           'africanies-modal-panel',
-          'bg-white',
+          'bg-surface',
           'dark:bg-ink-950',
           'text-ink',
           'dark:text-white',
-          'rounded-lg',
-          'shadow-xl',
+          'rounded-panel',
+          'shadow-floating',
           'border',
           'border-border',
           'dark:border-white/15',

package/libs/africanies-ui/src/lib/overlay/overlay-frame.component.ts

@@ -83,7 +83,7 @@ export class OverlayFooterDirective {}
       <ng-content select="[africaniesOverlayHeader]" />
     </div>
     <div
-      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-[2px] -mx-[2px]"
+      class="africanies-overlay-scroll min-h-0 flex-1 overflow-x-clip overflow-y-auto px-1 -mx-1"
     >
       <ng-content />
     </div>

package/libs/africanies-ui/src/lib/pagination/pagination.component.ts

@@ -144,7 +144,7 @@ type PageItem = number | 'ellipsis';
         @for (item of pageItems(); track trackPageItem(item, $index)) {
           @if (item === 'ellipsis') {
             <span
-              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-500 dark:text-neutral-400"
+              class="inline-flex min-w-8 items-center justify-center text-body-sm text-neutral-600 dark:text-neutral-400"
               aria-hidden="true"
             >
               …

package/libs/africanies-ui/src/lib/stepper/stepper.component.ts

@@ -53,9 +53,9 @@ function prefersReducedMotion(): boolean {
     .africanies-step-body {
       min-width: 0;
       overflow-x: clip;
-      /* 2 px breathing room so focus-outline rings on edge fields are not clipped */
-      padding-inline: 2px;
-      margin-inline: -2px;
+      /* 4 px breathing room so any remaining external focus rings are not clipped */
+      padding-inline: 4px;
+      margin-inline: -4px;
     }
     .africanies-step-pane {
       min-width: 0;
@@ -66,7 +66,7 @@ function prefersReducedMotion(): boolean {
     <div class="flex flex-col gap-5 text-ink dark:text-white">
       <div class="flex flex-col gap-2">
         <p
-          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400"
+          class="m-0 text-caption font-medium uppercase tracking-wide text-neutral-600 dark:text-neutral-400"
         >
           Step {{ activeIndex() + 1 }} of {{ steps().length }}
           <span
@@ -95,7 +95,7 @@ function prefersReducedMotion(): boolean {
             <li class="flex min-w-0 shrink-0 items-center gap-1">
               <button
                 type="button"
-                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed"
+                class="inline-flex max-w-38 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ink disabled:cursor-not-allowed"
                 [class]="headerButtonClass(i)"
                 [attr.aria-current]="i === activeIndex() ? 'step' : null"
                 [disabled]="!canActivate(i)"
@@ -223,7 +223,7 @@ export class StepperComponent {
     if (past) {
       return 'cursor-pointer text-ink hover:bg-background-welcome dark:text-white dark:hover:bg-white/10';
     }
-    return 'opacity-40 text-neutral-500 dark:text-neutral-400';
+    return 'opacity-40 text-neutral-600 dark:text-neutral-400';
   }
 
   protected stepBadgeClass(index: number): string {
@@ -233,7 +233,7 @@ export class StepperComponent {
       const c = this.modeColor.classes();
       return `${base} ${c.border} ${c.bg} text-white`;
     }
-    return `${base} border-border bg-white text-neutral-500 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
+    return `${base} border-control bg-surface text-neutral-600 dark:border-white/20 dark:bg-ink-950 dark:text-neutral-400`;
   }
 
   protected canActivate(index: number): boolean {

package/libs/africanies-ui/src/lib/table/table-column.ts

@@ -34,6 +34,15 @@ export interface TableColumn<T = unknown> {
    */
   width?: string;
 
+  /**
+   * Optional CSS max-width (e.g. `'14rem'`).
+   *
+   * Caps growth for text-heavy columns without forcing a large minimum the
+   * way {@link width} can. Prefer this for Name / Description / Message when
+   * other columns should stay compact.
+   */
+  maxWidth?: string;
+
   /**
    * Pin the column while the table scrolls horizontally.
    *

package/libs/africanies-ui/src/lib/table/table.component.spec.ts

@@ -0,0 +1,99 @@
+import { Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShippingModeService } from '@africanies/africanies-core';
+import type { ShippingMode } from '@africanies/africanies-models';
+
+import { TableComponent } from './table.component';
+import type { TableColumn } from './table-column';
+
+interface Row {
+  id: number;
+  name: string;
+}
+
+@Component({
+  standalone: true,
+  imports: [TableComponent],
+  template: `
+    <africanies-table
+      [columns]="columns"
+      [rows]="rows()"
+      [loading]="loading()"
+      [error]="error()"
+      loadingLabel="Loading page…"
+    />
+  `,
+})
+class TableHostComponent {
+  readonly columns: TableColumn<Row>[] = [{ key: 'name', header: 'Name' }];
+  readonly rows = signal<Row[]>([]);
+  readonly loading = signal(false);
+  readonly error = signal<string | null>(null);
+}
+
+describe('TableComponent keep-rows loading', () => {
+  let fixture: ComponentFixture<TableHostComponent>;
+  let host: TableHostComponent;
+
+  beforeEach(async () => {
+    const mode = signal<ShippingMode>('sfn');
+    await TestBed.configureTestingModule({
+      imports: [TableHostComponent],
+      providers: [
+        {
+          provide: ShippingModeService,
+          useValue: {
+            mode: mode.asReadonly(),
+          },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TableHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+  });
+
+  it('shows a keep-rows overlay when loading with rows on screen', () => {
+    host.rows.set([{ id: 1, name: 'Ada' }]);
+    host.loading.set(true);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(
+      root.querySelector('[data-testid="africanies-table-keep-rows-loading"]'),
+    ).not.toBeNull();
+    expect(root.textContent).toContain('Ada');
+    expect(root.textContent).toContain('Loading page…');
+  });
+
+  it('uses the in-grid body loader on first load with no rows', () => {
+    host.rows.set([]);
+    host.loading.set(true);
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    expect(
+      root.querySelector('[data-testid="africanies-table-keep-rows-loading"]'),
+    ).toBeNull();
+    expect(root.textContent).toContain('Loading page…');
+  });
+
+  it('shows a full-width stale error when rows remain after a failed fetch', () => {
+    host.rows.set([{ id: 1, name: 'Ada' }]);
+    host.error.set('Could not load page.');
+    fixture.detectChanges();
+
+    const root = fixture.nativeElement as HTMLElement;
+    const indicator = root.querySelector('africanies-error-indicator');
+    expect(indicator).not.toBeNull();
+    expect(indicator?.className).toContain('w-full');
+    expect(root.textContent).toContain('Could not load page.');
+    expect(root.textContent).toContain('Ada');
+  });
+});

package/libs/africanies-ui/src/lib/table/table.component.ts

@@ -39,11 +39,11 @@ import { TableColumn, TableSortChange } from './table-column';
  * Hidden while the body shows empty or error — those states expose Retry instead.
  * While {@link refreshing} is true the rows stay on screen — the refresh icon
  * spins (do not swap to a blocking loader). Use {@link loading} when the page
- * of data is changing (pagination / size): rows stay on screen and the built-in
- * pager shows a circular spinner beside the page controls; the body loader
- * appears only when there are no rows yet (first load) or the host cleared
- * rows for a shipping-mode switch (STN ↔ SFN). Toolbar and column headers stay
- * mounted.
+ * of data is changing (pagination / size): rows stay on screen, a keep-rows
+ * overlay covers the grid, and the built-in pager shows a circular spinner
+ * beside the page controls; the body loader appears only when there are no
+ * rows yet (first load) or the host cleared rows for a shipping-mode switch
+ * (STN ↔ SFN). Toolbar and column headers stay mounted.
  * top-right **Filters** then **Export** (`showFilter` / `showExport`). The table
  * does not own fetch, filter, or export logic — the host handles those events.
  *
@@ -102,6 +102,11 @@ import { TableColumn, TableSortChange } from './table-column';
  * to the left when rows are expandable. Override with
  * {@link TableColumn.sticky}. Sticky columns use a slightly thicker bottom
  * border (and opaque fill) so dividers stay visible while scrolling.
+ *
+ * **Sticky header (desktop):** when {@link stickyHeader} is true (default),
+ * large screens scroll the grid inside a capped viewport and keep `th` pinned
+ * to the top of that scrollport. Mobile keeps horizontal-only overflow so
+ * page scroll is unchanged.
  */
 @Component({
   selector: 'africanies-table',
@@ -124,7 +129,7 @@ import { TableColumn, TableSortChange } from './table-column';
     /* Full-row hover: sticky action cells use an opaque fill that would
        otherwise mask a <tr> background. Paint every cell the same way. */
     :host tr.africanies-table-row:hover > td {
-      background-color: #eef2f6;
+      background-color: #e9eef5;
     }
     :host-context(.dark) tr.africanies-table-row:hover > td {
       background-color: #272729;
@@ -196,19 +201,19 @@ import { TableColumn, TableSortChange } from './table-column';
       }
 
       @if (staleError(); as staleMessage) {
-        <div class="flex justify-end">
-          <africanies-error-indicator
-            class="max-w-[min(100%,20rem)]"
-            [error]="staleMessage"
-            retryText="Refresh"
-            [refreshing]="refreshing()"
-            (retry)="refreshClick.emit()"
-          />
-        </div>
+        <africanies-error-indicator
+          class="w-full"
+          [error]="staleMessage"
+          retryText="Refresh"
+          [refreshing]="refreshing()"
+          (retry)="refreshClick.emit()"
+        />
       }
 
       <div
-        class="min-w-0 w-full overflow-x-auto rounded-md border border-border bg-white dark:border-white/10 dark:bg-ink-surface"
+        class="relative min-w-0 w-full overflow-x-auto rounded-panel border border-border bg-surface dark:border-white/10 dark:bg-ink-surface"
+        [class.lg:max-h-[min(70dvh,calc(100dvh-12rem))]]="stickyHeader()"
+        [class.lg:overflow-auto]="stickyHeader()"
       >
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"
@@ -223,7 +228,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   @if (someRowsExpanded()) {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface 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"
                       aria-label="Collapse all"
                       (click)="collapseAllRows()"
                     >
@@ -232,7 +237,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   } @else {
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-white hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-surface hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus disabled:cursor-not-allowed disabled:opacity-40 dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
                       aria-label="Expand all"
                       [disabled]="rowList().length === 0"
                       (click)="expandAllRows()"
@@ -246,7 +251,8 @@ import { TableColumn, TableSortChange } from './table-column';
                 <th
                   scope="col"
                   [class]="headerCellClass(col)"
-                  [style.width]="col.width ?? null"
+                  [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                 >
                   @if (headerTemplateFor(col.key); as headerTpl) {
                     <ng-container
@@ -255,7 +261,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   } @else if (col.sortable) {
                     <button
                       type="button"
-                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:text-white"
+                      class="inline-flex cursor-pointer items-center gap-1 rounded-sm font-medium text-neutral-600 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:text-white"
                       (click)="onSortHeaderClick(col.key)"
                     >
                       <span>{{ col.header }}</span>
@@ -311,7 +317,7 @@ import { TableColumn, TableSortChange } from './table-column';
                   <td [class]="expandBodyClass(i)">
                     <button
                       type="button"
-                      class="inline-flex size-8 cursor-pointer items-center justify-center rounded-md text-neutral-600 transition-colors hover:bg-background-welcome hover:text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink dark:text-neutral-400 dark:hover:bg-white/10 dark:hover:text-white"
+                      class="inline-flex size-8 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]="
                         isRowExpanded(row, i)
                           ? 'Collapse row details'
@@ -330,7 +336,8 @@ import { TableColumn, TableSortChange } from './table-column';
                 @for (col of columns(); track col.key) {
                   <td
                     [class]="bodyCellClass(col, i)"
-                    [style.width]="col.width ?? null"
+                    [style.width]="col.width ?? col.maxWidth ?? null"
+                  [style.max-width]="col.maxWidth ?? null"
                   >
                     @if (templateFor(col.key); as tpl) {
                       <ng-container
@@ -360,7 +367,7 @@ import { TableColumn, TableSortChange } from './table-column';
                       [class.pointer-events-none]="!isRowExpanded(row, i)"
                     >
                       <div
-                        class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 dark:border-white/10 dark:bg-white/[0.05]"
+                        class="min-h-0 overflow-hidden border-t border-border-strong bg-surface-sunken dark:border-white/10 dark:bg-white/[0.05]"
                       >
                         <dl
                           class="m-0 grid gap-x-6 gap-y-3 px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
@@ -370,7 +377,7 @@ import { TableColumn, TableSortChange } from './table-column';
                           @for (detail of rowDetailDefs(); track detail.label()) {
                             <div class="min-w-0">
                               <dt
-                                class="m-0 text-caption font-medium text-neutral-500 dark:text-neutral-400"
+                                class="m-0 text-caption font-medium text-neutral-600 dark:text-neutral-400"
                               >
                                 {{ detail.label() }}
                               </dt>
@@ -395,6 +402,18 @@ import { TableColumn, TableSortChange } from './table-column';
             }
           </tbody>
         </table>
+        @if (paginationLoading()) {
+          <div
+            class="pointer-events-none absolute inset-0 z-[5] flex items-start justify-center bg-surface/70 px-4 pt-16 dark:bg-ink-950/70"
+            data-testid="africanies-table-keep-rows-loading"
+            aria-hidden="true"
+          >
+            <africanies-loading-state
+              mode="inline"
+              [message]="loadingLabel()"
+            />
+          </div>
+        }
       </div>
 
       @if (meta(); as pager) {
@@ -431,6 +450,13 @@ export class TableComponent<T = unknown> {
   /** Column definitions (header chrome + keys). */
   readonly columns = input.required<TableColumn<T>[]>();
 
+  /**
+   * When true (default), pin column headers while scrolling the grid on
+   * large screens (`lg+`). Uses a capped scrollport so sticky works with
+   * horizontal overflow. Set false to keep the previous unconstrained layout.
+   */
+  readonly stickyHeader = input(true, { transform: booleanAttribute });
+
   /**
    * Row records to render. Empty arrays show {@link EmptyStateComponent} in
    * the body unless {@link loading} or {@link error} is set. Missing `data`
@@ -463,9 +489,9 @@ export class TableComponent<T = unknown> {
 
   /**
    * Page of data is loading (first load, shipping-mode switch, pagination,
-   * page size). When rows are already on screen, the pager shows a spinner
-   * and rows stay visible; when there are no rows (first load or the host
-   * dropped STN/SFN rows after a mode switch), the body shows
+   * page size). When rows are already on screen, a keep-rows overlay covers
+   * the grid and the pager shows a spinner; when there are no rows (first
+   * load or the host dropped STN/SFN rows after a mode switch), the body shows
    * {@link LoadingStateComponent}. Distinct from {@link refreshing}.
    */
   readonly loading = input(false, { transform: booleanAttribute });
@@ -754,10 +780,22 @@ export class TableComponent<T = unknown> {
       'border-border whitespace-normal wrap-break-word px-[1.125rem] py-4 font-medium text-neutral-600 dark:border-white/10 dark:text-neutral-400 ' +
       this.headerSoftClass() +
       ' ' +
-      this.stickySurfaceClass(col, 'head')
+      this.stickySurfaceClass(col, 'head') +
+      (sticky ? '' : this.headerStickClass())
     );
   }
 
+  /**
+   * Vertical pin for scrolling header cells on desktop. Pinned left/right
+   * headers get `lg:top-0` from {@link stickyPinClass} instead.
+   */
+  protected headerStickClass(): string {
+    if (!this.stickyHeader()) {
+      return '';
+    }
+    return ' lg:sticky lg:top-0 lg:z-[3] print:static';
+  }
+
   /**
    * Body cell classes, including sticky pin when set.
    * Sticky expand/actions columns use a 1.5px bottom border; scrolling cells
@@ -804,9 +842,13 @@ export class TableComponent<T = unknown> {
       edge === 'right' ? 'sticky right-0 z-[1]' : 'sticky left-0 z-[1]';
     if (surface === 'head') {
       // Fill comes from {@link headerSoftClass} on the cell — do not re-tint.
-      return `${side} z-[2]`;
+      // Corner pins also stick vertically on desktop when stickyHeader is on.
+      const vertical = this.stickyHeader()
+        ? ' z-[2] lg:top-0 lg:z-[4] print:static'
+        : ' z-[2]';
+      return `${side}${vertical}`;
     }
-    const fill = 'bg-white dark:bg-ink-surface';
+    const fill = 'bg-surface dark:bg-ink-surface';
     return `${side} ${fill}`;
   }
 

package/libs/africanies-ui/src/lib/toast/toast-item.component.ts

@@ -260,8 +260,8 @@ export class ToastItemComponent {
 
   protected readonly shellClass = computed(
     () =>
-      'africanies-toast-enter relative flex w-full overflow-hidden rounded-lg border border-border ' +
-      'bg-white/95 text-ink shadow-lg backdrop-blur-md ' +
+      'africanies-toast-enter relative flex w-full overflow-hidden rounded-panel border border-border ' +
+      'bg-surface/95 text-ink shadow-floating backdrop-blur-md ' +
       'dark:border-white/15 dark:bg-ink-950/95 dark:text-white',
   );
 
@@ -272,11 +272,11 @@ export class ToastItemComponent {
   protected readonly iconClass = computed(() => {
     switch (this.item().variant) {
       case 'success':
-        return 'text-export dark:text-export-light';
+        return 'text-export-strong dark:text-export-light';
       case 'warning':
         return 'text-warning-dark dark:text-warning';
       case 'danger':
-        return 'text-danger';
+        return 'text-danger-dark dark:text-danger';
       default:
         return 'text-ink-blue dark:text-neutral-300';
     }
@@ -286,11 +286,11 @@ export class ToastItemComponent {
     const base = 'm-0 break-words text-body-sm font-semibold';
     switch (this.item().variant) {
       case 'success':
-        return `${base} text-export dark:text-export-light`;
+        return `${base} text-export-strong dark:text-export-light`;
       case 'warning':
         return `${base} text-warning-dark dark:text-warning`;
       case 'danger':
-        return `${base} text-danger`;
+        return `${base} text-danger-dark dark:text-danger`;
       default:
         return `${base} text-ink dark:text-white`;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/angular-web-sdk",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "packageManager": "pnpm@11.24.0",
   "license": "MIT",
   "contributors": [

package/svg/hand-coins.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0.142433 5.8125C0.142433 6.8115 0.394433 7.74975 0.836933 8.5695C0.62996 8.65739 0.447722 8.79474 0.30621 8.96949C0.164697 9.14424 0.0682364 9.35105 0.0252912 9.57178C-0.0176541 9.7925 -0.00577094 10.0204 0.0598977 10.2354C0.125566 10.4505 0.243013 10.6462 0.401933 10.8053L3.64643 14.049C3.95198 14.3546 4.32385 14.5858 4.73318 14.7244C5.14251 14.8631 5.57829 14.9055 6.00668 14.8485L10.4924 14.25H12.8924V15H15.5174V13.875H14.0174V8.25H15.5174V7.125H12.8924V7.875H11.3909C11.7249 6.99496 11.8402 6.04697 11.7269 5.11253C11.6135 4.17809 11.2749 3.28516 10.7402 2.51051C10.2054 1.73585 9.49058 1.10266 8.65704 0.665352C7.8235 0.228047 6.89622 -0.00028052 5.95493 2.58646e-07C4.41336 2.58646e-07 2.93493 0.612387 1.84488 1.70244C0.75482 2.7925 0.142433 4.27093 0.142433 5.8125ZM5.95493 1.125C5.0719 1.12517 4.20686 1.37472 3.45942 1.84492C2.71198 2.31512 2.11253 2.98685 1.73009 3.78277C1.34765 4.57869 1.19776 5.46644 1.29769 6.3438C1.39762 7.22116 1.7433 8.05247 2.29493 8.742L4.64768 9.7995C4.6685 9.54613 4.74629 9.30073 4.87525 9.08164C5.00421 8.86255 5.18101 8.67542 5.39243 8.53425V8.25H4.64243V7.125H6.14243C6.24189 7.125 6.33727 7.08549 6.4076 7.01517C6.47792 6.94484 6.51743 6.84946 6.51743 6.75C6.51743 6.65054 6.47792 6.55516 6.4076 6.48483C6.33727 6.41451 6.24189 6.375 6.14243 6.375H5.76743C5.40208 6.37536 5.04916 6.24237 4.77491 6.00099C4.50066 5.7596 4.32393 5.42642 4.2779 5.06398C4.23187 4.70155 4.3197 4.33477 4.52491 4.03249C4.73012 3.73022 5.03859 3.51323 5.39243 3.42225V2.625H6.51743V3.375H7.26743V4.5H5.76743C5.66798 4.5 5.57259 4.53951 5.50227 4.60984C5.43194 4.68016 5.39243 4.77554 5.39243 4.875C5.39243 4.97446 5.43194 5.06984 5.50227 5.14017C5.57259 5.21049 5.66798 5.25 5.76743 5.25H6.14243C6.50778 5.24964 6.8607 5.38263 7.13496 5.62402C7.40921 5.8654 7.58593 6.19858 7.63196 6.56102C7.67799 6.92345 7.59016 7.29023 7.38495 7.59251C7.17975 7.89478 6.87127 8.11177 6.51743 8.20275V8.25H9.23843L10.1249 7.9545C10.4921 7.23989 10.6693 6.44291 10.6398 5.64006C10.6102 4.8372 10.3748 4.05542 9.95615 3.36973C9.53748 2.68405 8.94961 2.11748 8.24894 1.72439C7.54827 1.33131 6.75833 1.12491 5.95493 1.125ZM5.62343 11.4705L1.47593 9.60675C1.42279 9.58303 1.36303 9.57868 1.30701 9.59444C1.25099 9.6102 1.20227 9.64509 1.16929 9.69304C1.13632 9.74098 1.12118 9.79897 1.1265 9.85691C1.13182 9.91486 1.15727 9.96911 1.19843 10.0103L4.44143 13.2533C4.6248 13.4368 4.84801 13.5756 5.09372 13.6588C5.33943 13.7421 5.60103 13.7675 5.85818 13.7333L10.4182 13.125H12.8924V9H10.5464L9.42143 9.375H6.32993C6.18075 9.375 6.03767 9.43426 5.93219 9.53975C5.8267 9.64524 5.76743 9.78832 5.76743 9.9375C5.76743 10.0867 5.8267 10.2298 5.93219 10.3352C6.03767 10.4407 6.18075 10.5 6.32993 10.5H9.56243L10.4774 11.415L9.68243 12.21L9.09743 11.625H6.32993C6.07793 11.625 5.83793 11.5695 5.62343 11.4705Z"
+    fill="#1C2E45"
+    fill-opacity="0.6"
+  />
+</svg>