New file inputs

[Marchand-Nicolas]

Description 📹

Update components/admin/formSteps/RewardDetailsForm.tsx to add a file input field next to the existing NFT Image Path and Issuer Logo text input fields. The new file input fields should not replace the current text inputs but should be cleanly styled alongside them. No logic implementation is needed for these fields yet; they will be used to upload an image to the server and fill the corresponding link fields automatically in another issue.

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. Implement Changes:
   • Add file input fields adjacent to the NFT Image Path and Issuer Logo text inputs.
   • Ensure the file inputs have clean styling and are aligned with the existing UI.
   • Keep both the file inputs and the text inputs functional without implementing any backend or server-side logic.
   • Ensure that the UI remains responsive after adding these fields.

Code Snippet Example:

<div className="flex flex-col gap-4">
  <TextInput
    onChange={handleQuestImageChange}
    value={nfturi?.image}
    name="nft_image"
    label="NFT Image Path"
    placeholder="NFT Image Path"
  />
  <input
    type="file"
    name="nft_image_file"
    className="file-input-class" // Add appropriate styling
  />
</div>

<div className="flex flex-col gap-4">
  <TextInput
    onChange={handleQuestInputChange}
    value={questInput?.logo ?? ""}
    name="logo"
    label="Issuer Logo"
    placeholder="Issuer logo"
  />
  <input
    type="file"
    name="issuer_logo_file"
    className="file-input-class" // Add appropriate styling
  />
</div>

3. Run Tests and Commit Changes:
   Make sure your changes don't break existing functionality and commit with a clear message:

   git commit -m "Fix: Add file inputs for NFT Image and Issuer Logo"

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

• Assignment: Don't create a pull request if you weren’t assigned to this issue.
• Timeframe: Complete the task within 3 business days.
• Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
• Review Process:
  • Once you've submitted your PR, change the label to "ready for review".
  • If changes are requested, address them and then update the label back to "ready for review" once done.
• Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[OWK50GA]

Hi, @Marchand-Nicolas
Let me handle this issue

[No-bodyq]

I'd like to handle this task.

[mimisavage]

Can I work on this, please?

[hrithik210]

Could I take over this issue?

[Luluameh]

Can I be assigned to this?

[Michaelkingsdev]

@Marchand-Nicolas
Let me handle this

[ryzen-xp]

May I take care of this?

[Ibinola]

Could I take on this issue?

[jahrulezfrancis]

I would love to make this my first contribution on Starknet. Here's my approach to implementing the requested changes:

1. Fork and Branch Setup:
   I'll start by forking the repository and creating a new branch following the naming convention:
   git checkout -b fix-[issue-number].

2. Adding the File Input Fields:

I'll add file input fields adjacent to the existing NFT Image Path and Issuer Logo text inputs without replacing them.

The file inputs will be styled to align with the existing UI, ensuring the layout looks clean and consistent.

Both the file inputs and text inputs will remain functional, with no server-side logic implemented at this stage.

3. Ensuring Responsiveness:
   I'll make sure the updated UI remains responsive across different devices and maintains its usability.

4. Testing and Commit:
   After verifying that the changes don’t break any existing functionality, I’ll commit the updates with a clear message:
   git commit -m "Fix: Add file inputs for NFT Image and Issuer Logo"

5. PR Guidelines:

I’ll submit the PR with the label “ready for review” once the changes are tested.

The PR description will include Close #[issue_id] to ensure it links to the issue.

My ETA is 8 hours tops.

I’ll keep everything straightforward and follow the provided requirements to ensure a smooth review process.