fix: APP-871 overlay and text shadow in project dashboard banner

[blushi]

Description

https://regennetwork.atlassian.net/browse/APP-871

---

Author Checklist

All items are required. Please add a note to the item if the item is not applicable and
please add links to any relevant follow up issues.

I have...

• provided a link to the relevant issue or specification
• provided instructions on how to test
• reviewed "Files changed" and left comments if necessary
• confirmed all CI checks have passed

How to test

Check the project dashboard page for some project with a white image

Reviewers Checklist

All items are required. Please add a note if the item is not applicable and please add
your handle next to the items reviewed if you only reviewed selected items.

I have...

• confirmed all author checklist items have been addressed
• reviewed code correctness and readability
• verified React components follow DRY principles
• reviewed documentation is accurate
• reviewed tests
• manually tested (if applicable)

[netlify]

✅ Deploy Preview for terrasos ready!

Name	Link
🔨 Latest commit	f390468
🔍 Latest deploy log	https://app.netlify.com/projects/terrasos/deploys/69898eba935c0400080bc171
😎 Deploy Preview	https://deploy-preview-2798--terrasos.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @blushi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses an issue (APP-871) where text on the project dashboard banner could be difficult to read, particularly when a project featured a white or light-colored background image. The changes enhance text visibility and contrast by adjusting the overlay color and applying a subtle text shadow to key textual elements, thereby improving the overall user experience and legibility of important information.

Highlights

• Overlay Color Change: The background overlay in the project dashboard banner has been updated from a black (bg-black) to a dark grey (bg-grey-700) with 20% opacity, improving visual contrast.
• Text Readability Enhancement: A text shadow (text-shadow:0_0_20px_rgba(0,0,0,0.25)) has been applied to the project title and location information to significantly improve readability, especially against light background images.
• Layout Stability: Padding (p-15) and negative margins (-m-15) were added to the text elements to counteract any potential layout shifts introduced by the new text shadow, ensuring consistent positioning.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request addresses an issue with text visibility on the project dashboard banner by adding an overlay and text shadows. The changes look good and should fix the problem. I've made a couple of suggestions to improve the implementation of the text shadow by using a more modern CSS feature that simplifies the code and improves maintainability. Specifically, using drop-shadow instead of the text-shadow with padding/negative-margin hack.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 74875dd0ab

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[blushi]

@erikalogie @S4mmyb see testing instructions

[S4mmyb]

LGTM! Curious @blushi if in playing around with filters you feel like it could go lighter, or if that feels pretty good.

[blushi]

LGTM! Curious @blushi if in playing around with filters you feel like it could go lighter, or if that feels pretty good.

thoughts @erikalogie ?

[erikalogie]

LGTM! Curious @blushi if in playing around with filters you feel like it could go lighter, or if that feels pretty good.

thoughts @erikalogie ?

I think this looks good! Can't go much lighter with the black overlay otherwise the text is not visible on top of it.