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

Issue 372 - Icon color not updating with theme color #452

Closed
wants to merge 4 commits into from
Closed

Issue 372 - Icon color not updating with theme color #452

wants to merge 4 commits into from

Conversation

igloo12
Copy link

@igloo12 igloo12 commented Jun 21, 2024

Addresses Issue #372

Screenshot 2024-06-21 at 4 55 36 PM
Screenshot 2024-06-21 at 4 54 35 PM

  • Breaking change? (if so, please describe the impact and migration path for existing application instances)

What changes did you make? (Give an overview)
Updated the icon svgs to use the theme
Is there anything you'd like reviewers to focus on?

How Has This Been Tested? (put an "x" (case-sensitive!) next to an item)

  • No need to
  • Manually (please, describe, if necessary)
  • Unit checks
  • Integration checks
  • Covered by existing automation

Checklist (put an "x" (case-sensitive!) next to all the items, otherwise the build will fail)

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (e.g. ENVIRONMENT VARIABLES)
  • My changes generate no new warnings (e.g. Sonar is happy)
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged

Check out Contributing and Code of Conduct

A picture of a cute animal (not mandatory but encouraged)

Red-Panda-Image-for-Endangered-Excursion-scaled

@igloo12 igloo12 requested a review from a team as a code owner June 21, 2024 23:58
@kapybro kapybro bot added status/triage Issues pending maintainers triage status/triage/manual Manual triage in progress status/triage/completed Automatic triage completed and removed status/triage Issues pending maintainers triage labels Jun 21, 2024
github-actions[bot]
github-actions bot reviewed Jun 21, 2024
View reviewed changes
Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi igloo12! 👋

Welcome, and thank you for opening your first PR in the repo!

Please wait for triaging by our maintainers.

Please take a look at our contributing guide.

@igloo12 igloo12 mentioned this pull request Jun 21, 2024
Open
Nilumilak
Nilumilak reviewed Jun 22, 2024
View reviewed changes
Copy link
Member

@Nilumilak Nilumilak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be better to connect global theme to the colors instead of making the svg transparent

@igloo12
Copy link
Author

igloo12 commented Jun 22, 2024 •
edited
Loading

I think it would be better to connect global theme to the colors instead of making the svg transparent

Isn't that what the styled() method does? I copied it from the edit icon. The styled() sets the fill color of the svg.

@Nilumilak
Copy link
Member

I think it would be better to connect global theme to the colors instead of making the svg transparent

Isn't that what the styled() method does? I copied it from the edit icon. The styled() sets the fill color of the svg.

edit icon uses the global theme for filling the svg

fill={theme.icons.editIcon.normal}

@igloo12
Copy link
Author

igloo12 commented Jun 23, 2024

I think it would be better to connect global theme to the colors instead of making the svg transparent

Isn't that what the styled() method does? I copied it from the edit icon. The styled() sets the fill color of the svg.

edit icon uses the global theme for filling the svg

fill={theme.icons.editIcon.normal}

I saw this, but I think it is being overwritten here in Button.styled.ts

  & svg {
    margin-right: 4px;
    fill: ${({ theme, disabled, buttonType }) =>
      disabled
        ? theme.button[buttonType].color.disabled
        : theme.button[buttonType].color.normal};
  }

Setting it to red has no effect.
Screenshot 2024-06-23 at 10 19 08 AM

@Haarolean Haarolean requested a review from Mgrdich June 24, 2024 11:32
Haarolean
Haarolean requested changes Aug 10, 2024
View reviewed changes
frontend/src/components/common/Icons/CheckmarkIcon.tsx
strokeLinejoin="round"
strokeLinecap="round"
/>
<path d="M25 48c-1.1 0-2.2-.4-3-1.2l-13-13c-1.6-1.6-1.6-4.2 0-5.8s4.2-1.6 5.8 0L25 38.8 49.2 14.6c1.6-1.6 4.2-1.6 5.8 0s1.6 4.2 0 5.8l-27 27c-.8.8-1.9 1.2-3 1.2z" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's happening here, why is the shape changed?

frontend/src/components/common/Icons/CancelIcon.tsx
d="M53.122 48.88L36.243 32l16.878-16.878a3 3 0 0 0-4.242-4.242L32 27.758l-16.878-16.88a3 3 0 0 0-4.243 4.243l16.878 16.88-16.88 16.88a3 3 0 0 0 4.243 4.241L32 36.243l16.878 16.88a3 3 0 0 0 4.244-4.243z"
fill="none"
stroke={theme.icons.cancelIcon}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the color should be different for two themes, how is this supposed to work after the changes you've introduced?

@Haarolean Haarolean marked this pull request as draft August 10, 2024 15:10
@Haarolean Haarolean added hacktoberfest-accepted PRs accepted towards hacktoberfest goal and will be counted as approved status/feedback-requested labels Oct 4, 2024
@kapybro Kapybro
Copy link

kapybro bot commented Oct 9, 2024

Further user feedback is requested. Please reply within 7 days or we might close the issue.

@kapybro kapybro bot assigned igloo12 Oct 9, 2024
@Haarolean Haarolean linked an issue Oct 9, 2024 that may be closed by this pull request
UX: Brokers: Config: Wrong icon colors #372
Open
@kapybro Kapybro
Copy link

kapybro bot commented Oct 16, 2024

No feedback received within 7 days. Auto closing.

@kapybro kapybro bot closed this Oct 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Nilumilak Nilumilak Nilumilak left review comments

@github-actions github-actions[bot] github-actions[bot] left review comments

@Haarolean Haarolean Haarolean requested changes

@Mgrdich Mgrdich Awaiting requested review from Mgrdich

Assignees

@igloo12 igloo12

Labels
hacktoberfest-accepted PRs accepted towards hacktoberfest goal and will be counted as approved status/triage/completed Automatic triage completed status/triage/manual Manual triage in progress
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

UX: Brokers: Config: Wrong icon colors
3 participants
@igloo12 @Nilumilak @Haarolean