calblueprint / ace-ny

4 stars 0 forks source link

[feat] Add and Style Images to Project Modal #19

Open itsliterallymonique opened 5 days ago

itsliterallymonique commented 5 days ago

Thank you for completing your retool side quest! Now you can continue working on the Project Modal. This week, you will be adding and styling the images on the project modal! Here is what you will need to do:

  1. [chore] Rename Julee’s query from his previous sprint to “queryProjectbyId” (deena ++ for the suggestion) and make sure to also change the name of Julee’s calls to the query function to this!

  2. Uncomment “project_image” (line 33) – this is where you will store the url to our image

  3. Add the project image (for the specific project id) to the project modal based on Josh’s styling a. Make sure to use styled components! b. Don’t need to make styling 100% accurate, but make sure it is in the correct position and place (i.e. top of the page kind of behind the project + developer name -- you can make it below the search bar for now) c. Hint: check Julee’s sprint from last week for help if you need (he queried other details from the project into the modal)

    Screenshot 2024-10-15 at 11 26 11 AM
  4. To test it works, you can change the project_id that was defaulted into the modal (default right now is 1} and see if the image will change to Bibble!

Need help?

  1. For styling: USE FIGMA DEV MODE (shift + D)
  2. Styled components: https://www.youtube.com/watch?app=desktop&v=02zO0hZmwnw
  3. Images: https://www.w3schools.com/css/css3_images.asp
  4. You can always ask me (Monique) for help and clarifications!

PR Reviewers: @itsliterallymonique and @deenasun