DApp-1639 update buttons ui and support dark mode

[kalashshah]

Pull Request Template

Ticket Number

• 1639

Description

• Problem/Feature:
• Update button colors
• Support dark mode in buttons

Type of Change

• Other (please describe): UI changes

Checklist

• Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • Quick PR label added
• Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • DO NOT Merge PR label added

Frontend Guidelines

• Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• No errors in the build terminal
• Engineer has tested the changes on their local environment
• Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

Additional Context

Review & Approvals

• Self-review completed
• Code review by at least one other engineer
• Documentation updates if applicable

Notes

[github-actions]

In the Button.constants.ts file:

• The case 'primary' block is missing closing braces } for the background-color properties under the :active and :focus-visible states.
• The case 'secondary' block is missing opening braces { before the background-color: ${getBlocksColor( property within the case block.
• Similar issues exist for other case blocks like 'tertiary', 'danger', 'dangerSecondary', and 'outline'. Missing opening braces { and closing braces } in various places.

In the Button.tsx file:

• In the StyledButton component, there is a reference to --r10 which is not defined in the provided CSS.
• The Button component is missing a closing brace } after the return statement inside the forwardRef function.

Overall, the code structure looks fine but there are some missing braces and undefined CSS variables in the provided code snippets.

All looks good.

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-07-01 15:02 UTC

[mishramonalisha76]

@kalashshah can you confirm this from Zee oncee, the recommended chat colour seems different than the one in figma

[kalashshah]

@kalashshah can you confirm this from Zee oncee, the recommended chat colour seems different than the one in figma

Zee mentioned that the colors were incorrect anyway, it is fine for now but needs to be changed to the correct colors later

[mishramonalisha76]

@kalashshah can you confirm this from Zee oncee, the recommended chat colour seems different than the one in figma

Zee mentioned that the colors were incorrect anyway, it is fine for now but needs to be changed to the correct colors later

@kalashshah lets create an issue for the same

[kalashshah]

Yeah already created: push-protocol/push-sdk#1373