feat: create application call-to-action #24
Conversation
✅ Deploy Preview for the-collab-lab ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| // The application window is open for 1 week, | ||
| // starting 2 weeks before the cohort kickoff | ||
| // and ending 1 week before the cohort kickoff | ||
| // (we're using 15 days to accout for Christmas this quarter) | ||
| const [windowStart, windowEnd] = [ | ||
| addDays(cohortKickoffDate, -15), | ||
| addDays(cohortKickoffDate, -7), | ||
| ]; |
There was a problem hiding this comment.
@segdeha Is this general logic (and my exception for christmas) correct? If we can't rely on "Kickoff minus 2 weeks" we could have the component accept a kickoff date and a tuple to indicate the application window
There was a problem hiding this comment.
I think I'd prefer to explicitly pass in dates for the start and end of the application window. That way, we can more easily work around things like holidays without potentially having to change the component.
| .c-button { | ||
| appearance: button; | ||
| background-color: var(--color-black-light); | ||
| border: 1px solid var(--color-black-light); | ||
| border-radius: 4px; | ||
| color: var(--color-blue-mid); | ||
| padding: 0.5rem 1.6rem; | ||
| text-decoration: none; | ||
| } |
There was a problem hiding this comment.
🔍 Not attached to a button-like appearance for "apply now", by any means; we can go with large text as well
There was a problem hiding this comment.
I like it! Makes it clear the user it taking an action.
There was a problem hiding this comment.
Thanks for pulling this together so quickly! I commented in place that I think I prefer to pass in explicit start and end dates for the application window. That probably means also passing in a 3rd prop for the start of the cohort so none of the dates are dependent on each other. Thanks!
| // The application window is open for 1 week, | ||
| // starting 2 weeks before the cohort kickoff | ||
| // and ending 1 week before the cohort kickoff | ||
| // (we're using 15 days to accout for Christmas this quarter) | ||
| const [windowStart, windowEnd] = [ | ||
| addDays(cohortKickoffDate, -15), | ||
| addDays(cohortKickoffDate, -7), | ||
| ]; |
There was a problem hiding this comment.
I think I'd prefer to explicitly pass in dates for the start and end of the application window. That way, we can more easily work around things like holidays without potentially having to change the component.
| <p class="u-text-small"> | ||
| 💡 Want a reminder of our next application window? | ||
| <a | ||
| href="/ics/Q1-2023-Application-Window.ics" |
There was a problem hiding this comment.
Beyond the scope of this PR, but I'd love it if we can dynamically generate this .ics file in the future!
| .c-button { | ||
| appearance: button; | ||
| background-color: var(--color-black-light); | ||
| border: 1px solid var(--color-black-light); | ||
| border-radius: 4px; | ||
| color: var(--color-blue-mid); | ||
| padding: 0.5rem 1.6rem; | ||
| text-decoration: none; | ||
| } |
There was a problem hiding this comment.
I like it! Makes it clear the user it taking an action.
Summary
This PR adds a component that tracks whether or not applications are open, based on the date of the build and the date of the expected cohort kickoff.
Screenshots
"Open" view:
"Closed" view:
Related issues
Closes #20