From 327884ca2691887b4c034deb921eaee3abd28b97 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 29 Nov 2024 17:32:15 +1100
Subject: [PATCH] [PUI] Barcode title (#8591)

* Increase query limit

* PUI: Barcode UI tweaks

- Small visual tweaks to barcode dialogs
---
 .../src/components/items/ActionDropdown.tsx   |  2 +-
 src/frontend/src/components/items/QRCode.tsx  | 39 ++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/items/ActionDropdown.tsx b/src/frontend/src/components/items/ActionDropdown.tsx
index ad098e91f02c..958db8e61fc1 100644
--- a/src/frontend/src/components/items/ActionDropdown.tsx
+++ b/src/frontend/src/components/items/ActionDropdown.tsx
@@ -163,7 +163,7 @@ export function BarcodeActionDropdown({
       actions={[
         GeneralBarcodeAction({
           mdl_prop: prop,
-          title: t`View`,
+          title: t`View Barcode`,
           icon: <IconQrcode />,
           tooltip: t`View barcode`,
           ChildItem: InvenTreeQRCode
diff --git a/src/frontend/src/components/items/QRCode.tsx b/src/frontend/src/components/items/QRCode.tsx
index 9681d09c902b..fab66b195acb 100644
--- a/src/frontend/src/components/items/QRCode.tsx
+++ b/src/frontend/src/components/items/QRCode.tsx
@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Code,
+  Divider,
   Group,
   Image,
   Select,
@@ -96,6 +97,8 @@ export const InvenTreeQRCode = ({
 
   return (
     <Stack>
+      <Divider />
+
       {mdl_prop.hash ? (
         <Alert variant='outline' color='red' title={t`Custom barcode`}>
           <Trans>
@@ -107,6 +110,8 @@ export const InvenTreeQRCode = ({
 
       <QRCode data={data} ecl={ecl} {...props} />
 
+      <Divider />
+
       {data && settings.getSetting('BARCODE_SHOW_TEXT', 'false') && (
         <Group
           justify={showEclSelector ? 'space-between' : 'center'}
@@ -163,13 +168,16 @@ export const QRCodeLink = ({ mdl_prop }: { mdl_prop: QrCodeType }) => {
   };
 
   return (
-    <BarcodeInput
-      value={barcode}
-      onChange={(event) => setBarcode(event.currentTarget.value)}
-      onScan={actionSubmit}
-      onAction={handleLinkBarcode}
-      actionText={t`Link`}
-    />
+    <Stack gap='xs'>
+      <Divider />
+      <BarcodeInput
+        value={barcode}
+        onChange={(event) => setBarcode(event.currentTarget.value)}
+        onScan={actionSubmit}
+        onAction={handleLinkBarcode}
+        actionText={t`Link`}
+      />
+    </Stack>
   );
 };
 
@@ -186,12 +194,17 @@ export const QRCodeUnlink = ({ mdl_prop }: { mdl_prop: QrCodeType }) => {
   }
   return (
     <Box>
-      <Text>
-        <Trans>This will remove the link to the associated barcode</Trans>
-      </Text>
-      <Button color='red' onClick={unlinkBarcode}>
-        <Trans>Unlink Barcode</Trans>
-      </Button>
+      <Stack gap='xs'>
+        <Divider />
+        <Text>
+          <Trans>This will remove the link to the associated barcode</Trans>
+        </Text>
+        <Group grow>
+          <Button color='red' onClick={unlinkBarcode}>
+            <Trans>Unlink Barcode</Trans>
+          </Button>
+        </Group>
+      </Stack>
     </Box>
   );
 };