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) %>