feat: Improve congratulations step (#3197)

* feat: Improve congratulations step * fix: All items count
decentraland · Oct 9, 2024 · c4b4362 · c4b4362
1 parent 163dc94
commit c4b4362
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 8 deletions.
diff --git a/...omponents/Modals/PublishWizardCollectionModal/CongratulationsStep/CongratulationsStep.css b/...omponents/Modals/PublishWizardCollectionModal/CongratulationsStep/CongratulationsStep.css
@@ -10,11 +10,18 @@
   height: 165px;
   width: 165px;
   margin-top: 18px;
-  margin-bottom: 38px;
+  margin-bottom: 18px;
   border-radius: 6px;
   overflow: hidden;
 }
 
+.CongratulationsStep .collection-items-count {
+  font-size: 14px;
+  font-weight: 700;
+  color: #a09ba8;
+  text-transform: uppercase;
+}
+
 .CongratulationsStep .texts-container {
   position: relative;
   display: flex;
@@ -33,19 +40,33 @@
 
 .CongratulationsStep .details .title {
   font-size: 20px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 24px;
+  text-align: center;
+}
+
+.CongratulationsStep .collection-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.CongratulationsStep .collection-name {
+  font-size: 24px;
+  font-weight: 700;
 }
 
 .CongratulationsStep .details .subtitle {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   color: var(--clear-divider);
 }
 
 .CongratulationsStep .details .description {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   color: var(--clear-divider);

diff --git a/...omponents/Modals/PublishWizardCollectionModal/CongratulationsStep/CongratulationsStep.tsx b/...omponents/Modals/PublishWizardCollectionModal/CongratulationsStep/CongratulationsStep.tsx
@@ -5,15 +5,21 @@ import { Collection } from 'modules/collection/types'
 import CollectionImage from 'components/CollectionImage'
 import './CongratulationsStep.css'
 
-export const CongratulationsStep: React.FC<{ collection: Collection; onClose: () => void }> = props => {
-  const { collection, onClose } = props
+export const CongratulationsStep: React.FC<{ collection: Collection; onClose: () => void; itemsCount: number }> = props => {
+  const { collection, onClose, itemsCount } = props
 
   return (
     <Modal.Content className="CongratulationsStep">
       <Column>
         <Row className="details">
           <Column>
-            <CollectionImage className="collection-image" collectionId={collection.id} />
+            <div className="collection-info">
+              <CollectionImage className="collection-image" collectionId={collection.id} />
+              <span className="collection-name">{collection.name}</span>
+              <span className="collection-items-count">
+                {t('publish_wizard_collection_modal.pay_publication_fee_step.items', { count: itemsCount })}
+              </span>
+            </div>
             <div className="texts-container">
               <span className="title">{t('publish_wizard_collection_modal.congratulations_step.title')}</span>
               <div className="subtitle-container">

diff --git a/src/components/Modals/PublishWizardCollectionModal/PublishWizardCollectionModal.tsx b/src/components/Modals/PublishWizardCollectionModal/PublishWizardCollectionModal.tsx
@@ -174,7 +174,7 @@ export const PublishWizardCollectionModal: React.FC<Props & WithAuthorizedAction
       case PublishWizardCollectionSteps.PAY_PUBLICATION_FEE:
         return <PayPublicationFeeStep {...props} onNextStep={handleOnPublish} onPrevStep={handleOnPrevStep} />
       case PublishWizardCollectionSteps.COLLECTION_PUBLISHED:
-        return <CongratulationsStep collection={collection} onClose={onClose} />
+        return <CongratulationsStep collection={collection} itemsCount={allItems.length} onClose={onClose} />
       default:
         return null
     }