Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Instances can adjust colors in cookie consent #1246

Closed
1 task
aboydnw opened this issue Nov 6, 2024 · 1 comment · Fixed by #1277
Closed
1 task

Instances can adjust colors in cookie consent #1246

aboydnw opened this issue Nov 6, 2024 · 1 comment · Fixed by #1277
Assignees
@snmln

Comments

@aboydnw
Copy link
Contributor

aboydnw commented Nov 6, 2024

Context

GHGC would like to customize colors of the cookie consent bar to better match the overall site theme before turning on. We should make it so each instance can customize this to the colors that best match their theme. Pasting some direction from Sandra below, originally given in slack:

I think we can just create a ticket for that then to make those properties exposable/customizeable on cookie consent component and then worry about uswds tokens later once they are more defined and set since it can be tackled separately. Should just be an easy update of changing the colors to the tokens later

Acceptance Criteria

  • Each instance can customize the colors of the cookie consent alert popup
@aboydnw
Copy link
Contributor Author

aboydnw commented Nov 18, 2024

@paridhi-parajuli @Jeanne-le-Roux heads up that we are pulling this ticket into this sprint. Our idea is that we will allow the styles on the cookie consent form to be set to the same values as the instance theme, so you could set it to the same color as the nav bar, buttons, etc.

Is it okay if @snmln reaches out to you with any specific questions on how that gets implemented?

@snmln snmln mentioned this issue Nov 26, 2024
Merged
@snmln snmln linked a pull request Nov 27, 2024 that will close this issue
Cookie consent color adjustability #1277
Merged
snmln added a commit that referenced this issue Nov 27, 2024
@snmln
Cookie consent color adjustability (#1277)
33594d0 
**Related Ticket:**
#1246

### Description of Changes
Exposing styling options for the cookie consent form. 

### Notes & Questions About Changes
Adding the ability to pass theme styling through the veda.config.js file
within the cookieConsent object:
  ```
cookieConsentForm:{
...
theme: {
      card: {
        backgroundColor: '#2276ac',
        sideBarColor: '#175074',
        textColor: 'White',
        linkColor: '#175074'
      },
      acceptButton: {
        default: { backgroundColor: '#175074', textColor: 'white' },
        hover: { backgroundColor: '#2c3e50', textColor: '#white' }
      },
      declineButton: {
        default: { borderColor: '#175074', textColor: '#175074' },
        hover: { borderColor: '#2c3e50', textColor: '#2c3e50' }
      },
      iconColor: { default: 'White', hover: '#175074' }
    } }}
```
### Validation / Testing
To test pull down the branch and change the theme content to the desired changes and visually confirm that the changes are resolving on the front-end.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@snmln snmln

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Cookie consent color adjustability NASA-IMPACT/veda-ui
2 participants
@snmln @aboydnw