Style/colours

[maxitect]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update
• Styling
• Build
• Chore

Description

Summary

This pull request updates the visual design of graph components to align with the latest Figma mood colors, latest colours from El and updates to the screenshots on the home page.

Updates

• Color Updates:
  • Updated LineGraph.tsx, AreaChart.tsx, and StreamGraph.tsx to use the Figma mood colors for a consistent and polished look.
  • Created moodColours.json for colour mapping with moods used in both AreaChart.tsx and StreamGraph.tsx.
  • Added mood-to-color mappings in the JSON data document for better maintainability.
• Graph Refinements:
  • Changed LineGraph.tsx to use linear plots instead of smooth splines, improving readability.
  • Updated aggregation logic in LineGraph.tsx for enhanced data clarity, aggregating daily data for month and week views.
• Visual Assets:
  • Updated insights_screen.png to reflect the new mood colors and linear plot style.
  • Refreshed decisionMaker.png to remove the data point on "guilt."
• Merges:
  • Integrated changes from PR feat: disabled scrolling on all graphs #89 to align with the main branch and resolve conflicts.

These updates enhance the visual clarity, consistency, and alignment of graph components with the latest design specifications.

Screenshots

UI accessibility checklist

If your PR includes UI changes, please utilize this checklist:

• Semantic HTML implemented?
• Checked with axe DevTools and addressed Critical and Serious issues?
• Color contrast tested?

Added/updated tests?

Please aim to keep the code coverage percentage at 80% and above.

• Yes
• No, and this is why: style changes, all tests pass
• I need help with writing tests

Delete branch after merge?

• Yes
• No

What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for thingswedo ready!

Name	Link
🔨 Latest commit	3a4d306
🔍 Latest deploy log	https://app.netlify.com/sites/thingswedo/deploys/67606c50e574f70008f08142
😎 Deploy Preview	https://deploy-preview-91--thingswedo.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 site configuration.