diff --git a/app/assets/stylesheets/in_favor_against.scss b/app/assets/stylesheets/in_favor_against.scss index dc8d60127..a91841f85 100644 --- a/app/assets/stylesheets/in_favor_against.scss +++ b/app/assets/stylesheets/in_favor_against.scss @@ -7,8 +7,7 @@ display: inline-block; } - .icon-like, - .icon-unlike { + button { background: #fff; border: 2px solid; border-radius: rem-calc(3); @@ -16,7 +15,7 @@ display: inline-block; font-size: rem-calc(30); line-height: rem-calc(30); - padding: rem-calc(3) rem-calc(6); + padding: rem-calc(3) rem-calc(6) rem-calc(6); position: relative; &:hover, @@ -27,7 +26,8 @@ } } - .icon-like { + .in-favor button { + @include has-fa-icon(thumbs-up, solid); &:hover, &:active { @@ -36,7 +36,8 @@ } } - .icon-unlike { + .against button { + @include has-fa-icon(thumbs-down, solid); &:hover, &:active { @@ -67,29 +68,21 @@ } .voted { + color: #fff; + } - .icon-like, - .icon-unlike { - color: #fff; - } + .in-favor .voted { + background: $like; + border: 2px solid $like; + } - .icon-like { - background: $like; - border: 2px solid $like; - } - - .icon-unlike { - background: $unlike; - border: 2px solid $unlike; - } + .against .voted { + background: $unlike; + border: 2px solid $unlike; } .no-voted { - - .icon-like, - .icon-unlike { - opacity: 0.3; - } + opacity: 0.3; } .against { diff --git a/app/components/shared/in_favor_against_component.html.erb b/app/components/shared/in_favor_against_component.html.erb index 9742fe918..df44bac62 100644 --- a/app/components/shared/in_favor_against_component.html.erb +++ b/app/components/shared/in_favor_against_component.html.erb @@ -7,9 +7,7 @@ method: "post", remote: true, disabled: !current_user do %> - - <%= t("votes.agree") %> - + <%= t("votes.agree") %> <% end %> <%= votes_percentage("likes", votable) %> @@ -24,9 +22,7 @@ method: "post", remote: true, disabled: !current_user do %> - - <%= t("votes.disagree") %> - + <%= t("votes.disagree") %> <% end %> <%= votes_percentage("dislikes", votable) %>