Skip to content

Commit

Permalink
Fix: Improve contrast for like_component (#4018)
Browse files Browse the repository at this point in the history
<!-- Thank you for taking the time to contribute to The Odin Project. In
order to get this pull request (PR) merged in a reasonable amount of
time, you must complete this entire template. -->

## Because
<!-- Summarize the purpose or reasons for this PR, e.g. what problem it
solves or what benefit it provides. -->
The purpose of the PR is to fix the contrast for submissions in light
theme so it is easier to see


## This PR
<!-- A bullet point list of one or more items describing the specific
changes. -->
- Improves the contrast in like_component to AA level in light theme


## Issue
<!--
If this PR closes an open issue in this repo, replace the XXXXX below
with the issue number, e.g. Closes #2013.

If this PR closes an open issue in another TOP repo, replace the #XXXXX
with the URL of the issue, e.g. Closes
https://github.com/TheOdinProject/curriculum/issues/XXXXX

If this PR does not close, but is related to another issue or PR, you
can link it as above without the 'Closes' keyword, e.g. 'Related to
#2013'.
-->
Closes #4013

## Additional Information
<!-- Any other information about this PR, such as a link to a Discord
discussion. -->
Note: In `def bg_color_class` I left the string empty so that the heart
icon will inherit the color from the button

## Pull Request Requirements
<!-- Replace the whitespace between the square brackets with an 'x',
e.g. [x]. After you create the PR, they will become checkboxes that you
can click on. -->
- [x] I have thoroughly read and understand [The Odin Project
Contributing
Guide](https://github.com/TheOdinProject/theodinproject/blob/main/CONTRIBUTING.md)
- [x] The title of this PR follows the `keyword: brief description of
change` format, using one of the following keywords:
  - `Feature` - adds new or amends existing user-facing behavior
- `Chore` - changes that have no user-facing value, refactors,
dependency bumps, etc
  - `Fix` - bug fixes
-   [x] The `Because` section summarizes the reason for this PR
- [x] The `This PR` section has a bullet point list describing the
changes in this PR
- [x] I have verified all tests and linters pass after making these
changes.
- [x] If this PR addresses an open issue, it is linked in the `Issue`
section
-   [x] If applicable, this PR includes new or updated automated tests
  • Loading branch information
Sharkri authored Jul 23, 2023
1 parent 4770139 commit c58b168
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion app/components/project_submissions/like_component.html.erb
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<%= turbo_frame_tag dom_id(project_submission, :likes) do %>
<%= button_to project_submission_v2_like_path(project_submission), method: http_action, disabled: current_users_submission, class: "text-gray-400 mr-4 flex items-center #{'hint--top' unless current_users_submission}", data: { test_id: 'like-submission' }, aria: { label: 'Like submission' } do %>
<%= button_to project_submission_v2_like_path(project_submission), method: http_action, disabled: current_users_submission, class: "text-gray-500 dark:text-gray-300 mr-4 flex items-center #{'hint--top' unless current_users_submission}", data: { test_id: 'like-submission' }, aria: { label: 'Like submission' } do %>
<span class="mr-1" data-test-id="like-count"><%= project_submission.cached_votes_total %></span>
<%= inline_svg_tag 'icons/heart.svg', class: "h-5 w-5 #{bg_color_class}", aria: true, title: 'heart', desc: 'heart icon' %>
<% end %>
Expand Down
2 changes: 1 addition & 1 deletion app/components/project_submissions/like_component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ def http_action
def bg_color_class
return 'text-teal-700' if current_users_submission || project_submission.liked?

'text-gray-400'
''
end
end
end

0 comments on commit c58b168

Please sign in to comment.