From 0651f32c952a8b8a055ed182beb934e7bf2df5c7 Mon Sep 17 00:00:00 2001
From: Jurgis Sakalauskas <jurgis.sakalauskas@cec.valantic.com>
Date: Tue, 14 Oct 2025 16:53:50 +0300
Subject: [PATCH] prices edit

---
 .../project-items-desktop-table.tsx           | 36 +++++++++----------
 .../project-items-mobile-list.tsx             | 35 +++++++++---------
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/client/src/pages/project-detail/project-items-desktop-table.tsx b/client/src/pages/project-detail/project-items-desktop-table.tsx
index e472146..120b7bb 100644
--- a/client/src/pages/project-detail/project-items-desktop-table.tsx
+++ b/client/src/pages/project-detail/project-items-desktop-table.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { ExternalLink, Pencil } from 'lucide-react';
+import { ExternalLink } from 'lucide-react';
 import type { Item } from '@shared/models/item';
 import { ItemPricesPanel } from './item-prices-panel';
 import { formatAttributeValue, getPriceSummaryDisplay } from './project-items-utils';
@@ -97,24 +97,24 @@ export function ProjectItemsDesktopTable({
                     ))}
                     <td className="px-4 py-3 align-top">
                       <div className="flex flex-col gap-0.5 text-xs">
-                        <div className="flex items-center gap-2">
-                          <span className="text-sm font-semibold text-slate-900">
-                            {priceDisplay.primary}
+                        <button
+                          type="button"
+                          onClick={() => onTogglePrices(item.id)}
+                          className="inline-flex items-center gap-2 self-start rounded-md text-left text-sm font-semibold text-slate-900 transition hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                          title={isExpanded ? 'Close Prices' : 'View Prices'}
+                          aria-expanded={isExpanded}
+                          aria-controls={panelId}
+                        >
+                          <span>{priceDisplay.primary}</span>
+                          {isExpanded ? (
+                            <span className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                              Close
+                            </span>
+                          ) : null}
+                          <span className="sr-only">
+                            {isExpanded ? 'Close price list' : 'View price list'}
                           </span>
-                          <button
-                            type="button"
-                            onClick={() => onTogglePrices(item.id)}
-                            className="inline-flex h-8 w-8 items-center justify-center rounded-md text-slate-500 transition hover:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
-                            aria-label="Edit Prices"
-                            title="Edit Prices"
-                            aria-expanded={isExpanded}
-                            aria-controls={panelId}
-                          >
-                            <Pencil aria-hidden className="h-4 w-4" />
-                            <span hidden={!isExpanded}>Close</span>
-                            <span className="sr-only">Edit Prices</span>
-                          </button>
-                        </div>
+                        </button>
                         {priceDisplay.secondary ? (
                           <span className="text-slate-500">{priceDisplay.secondary}</span>
                         ) : null}
diff --git a/client/src/pages/project-detail/project-items-mobile-list.tsx b/client/src/pages/project-detail/project-items-mobile-list.tsx
index a5578e8..32e3547 100644
--- a/client/src/pages/project-detail/project-items-mobile-list.tsx
+++ b/client/src/pages/project-detail/project-items-mobile-list.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, Pencil } from 'lucide-react';
+import { ExternalLink } from 'lucide-react';
 import type { Item } from '@shared/models/item';
 import { ItemPricesPanel } from './item-prices-panel';
 import { formatAttributeValue, getPriceSummaryDisplay } from './project-items-utils';
@@ -74,21 +74,24 @@ export function ProjectItemsMobileList({
               ))}
             </div>
             <div className="mt-3 flex flex-col gap-0.5 text-xs">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-semibold text-slate-900">{priceDisplay.primary}</span>
-                <button
-                  type="button"
-                  onClick={() => onTogglePrices(item.id)}
-                  className="inline-flex h-9 w-9 items-center justify-center rounded-md text-slate-500 transition hover:text-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
-                  aria-label="Edit Prices"
-                  title="Edit Prices"
-                  aria-expanded={isExpanded}
-                  aria-controls={panelId}
-                >
-                  <Pencil aria-hidden className="h-4 w-4" />
-                  <span className="sr-only">Edit Prices</span>
-                </button>
-              </div>
+              <button
+                type="button"
+                onClick={() => onTogglePrices(item.id)}
+                className="inline-flex items-center gap-2 self-start rounded-md text-left text-sm font-semibold text-slate-900 transition hover:text-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
+                title={isExpanded ? 'Close Prices' : 'View Prices'}
+                aria-expanded={isExpanded}
+                aria-controls={panelId}
+              >
+                <span>{priceDisplay.primary}</span>
+                {isExpanded ? (
+                  <span className="text-xs font-medium uppercase tracking-wide text-slate-500">
+                    Close
+                  </span>
+                ) : null}
+                <span className="sr-only">
+                  {isExpanded ? 'Close price list' : 'View price list'}
+                </span>
+              </button>
               {priceDisplay.secondary ? (
                 <span className="text-slate-500">{priceDisplay.secondary}</span>
               ) : null}