remove placeholder range token minted nfts and shorten name in produc…

…t images
bosonprotocol · Apr 30, 2024 · c5dc43b · c5dc43b
1 parent 7b7348a
commit c5dc43b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/product/ProductImages.tsx b/src/components/product/ProductImages.tsx
@@ -48,6 +48,13 @@ const StyledTabs = styled(Tabs)`
   [data-tab-title] {
     padding-right: 2rem;
     font-size: 0.8063rem;
+    &.digital[data-active="false"] {
+      width: 16ch;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-sizing: content-box;
+    }
   }
 `;
 
@@ -136,7 +143,8 @@ export default function ProductImages({ onChangeOneSetOfImages }: Props) {
                 const name = getBundleItemName(bi);
                 return {
                   id: `${getBundleItemId(bi)}-${index}`,
-                  title: name,
+                  title: `Digital Item - ${name}`,
+                  className: "digital",
                   content: (
                     <DigitalUploadImages
                       className="digital"

diff --git a/src/components/product/productDigital/MintedNftBundleItems.tsx b/src/components/product/productDigital/MintedNftBundleItems.tsx
@@ -152,7 +152,7 @@ export const MintedNftBundleItems: React.FC<MintedNftBundleItemsProps> = ({
               style={{ minWidth: "225px", width: "auto", margin: 0 }}
             >
               <Input
-                placeholder="1"
+                placeholder=""
                 name={`${prefix}${mintedNftInfo["mintedNftTokenIdRangeMin"].key}`}
                 type="number"
               />
@@ -163,7 +163,7 @@ export const MintedNftBundleItems: React.FC<MintedNftBundleItemsProps> = ({
               style={{ minWidth: "225px", width: "auto", margin: 0 }}
             >
               <Input
-                placeholder="999999"
+                placeholder=""
                 name={`${prefix}${mintedNftInfo["mintedNftTokenIdRangeMax"].key}`}
                 type="number"
               />

diff --git a/src/components/tabs/Tabs.tsx b/src/components/tabs/Tabs.tsx
@@ -28,6 +28,7 @@ type TabsData = {
   id: string;
   title: string;
   content: JSX.Element;
+  className?: string;
 };
 const tabIdentifier = "id" as const;
 
@@ -63,8 +64,10 @@ export default function Tabs({
             <TabTitle
               key={tab.id}
               $isActive={isActive}
+              data-active={isActive}
               data-tab-title
               data-testid={`tab-${tab.title}`}
+              className={tab.className}
               onClick={handleActive(index, tab)}
             >
               {tab.title}