-
-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
app(IN-941): Search page alerts #1182
base: dev
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@@ -43,6 +43,77 @@ const ServiceFilter = dynamic(() => | |||
import('@weareinreach/ui/modals/ServiceFilter').then((mod) => mod.ServiceFilter) | |||
) | |||
|
|||
const stateRiskLevels = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry this is a bit ugly, I could do 4 arrays and then build some logic if else statements, not sure.
@@ -63,6 +63,8 @@ const colors = { | |||
coolGray: '#d9d9d9', | |||
red: '#C05C4A', | |||
pink: '#D4A1BA', | |||
lightPink: '#F2E1E9', | |||
lightGreen: '#E4F9EA', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I chose the light green based on this https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
This was not in the design, so not sure if we want to use this instead of the lightPink for all states.
📦 Next.js Bundle Analysis for @weareinreach/appThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
</Text> | ||
</Box> | ||
)} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we extract the banner code out in to a separate component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes good call, I'll work on that this week!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would the banners go in the story book as components?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, you can create it in components/core
in the ui package - there are plenty of *.stories.tsx
files to use as a starting template.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Moved the banners to components although my folder structure may be a bit different, was having an issue with imports
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I fixed part of it - you were trying to move the component in to a storybook file (*.stories.tsx
shouldn't get imported in to any functional part of the app - those are for Storybook only). I moved the component to ui/components/core/LocationBasedAlertBanner/index.tsx
and set up 3 different use examples. Inside the storybook file, in the RenderWrapper
component I put in there (just for purposes of pulling mock API data), you'll see how the API call is done. The API can return more than one result, in the event that there are multiple alerts for an area or overlapping alerts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't touch the implementation on this page though -- that still needs to be done
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
|
Quality Gate passedIssues Measures |
Pull Request type
Please check the type of change your PR introduces:
What is the current behavior?
Issue Number: IN-941
What is the new behavior?
Does this introduce a breaking change?
Other information
Screen.Recording.2024-03-22.at.1.45.15.PM.mov
Summary by CodeRabbit
New Features
Enhancements
lightPink
andlightGreen
) to improve visual elements.Bug Fixes
Documentation