_downvote_link.html.erb

<div
<% unless user_signed_in? %>
 data-controller="popper"
<% end %>
>
  <%= content_tag "div", { id: "downvote-#{video.id}",
                            data: { "popper-target": "element",
                            action: "click->popper#show click@window->popper#hide" } } do %>
    <%= button_to downvote_video_path(video), method: :patch,
                                              style: "display: flex; justify-content: center; align-items: center;" do %>
      <% if user_signed_in? %>
        <% if current_user.voted_down_on? video %>
          <%= fa_icon "thumbs-down solid", text: "Dislike",
                                        style: "font-size: 30px; margin: 0 10px;" %>
        <% else %>
          <%= fa_icon "thumbs-down regular", text: "Dislike",
                                          style: "font-size: 30px; margin: 0 10px;" %>
        <% end %>
      <% else %>
        <%= fa_icon "thumbs-down solid", text: "Dislike",
                                        style: "font-size: 30px; margin: 0 10px;" %>
      <% end %>
    <% end %>
  <% end %>
  <div id="tooltip" role="tooltip" data-popper-target="tooltip">
    Dislike this video? <br>
    Sign in to make your opinion count. <br>
    <br>
    <%= link_to "Login", new_user_session_path, { "data-turbo-frame": "_top" } %>
    <div id="arrow" data-popper-arrow></div>
  </div>
</div>

_upvote_link.html.erb

<div
  <% unless user_signed_in? %>
    data-controller="popper"
  <% end %>
>
  <%= content_tag "div", { id: "upvote-#{video.id}", data: { "popper-target": "element", action: "click->popper#show click@window->popper#hide" } } do %>
    <%= button_to upvote_video_path(video), method: :patch,
                                            style: "display: flex; justify-content: center; align-items: center;" do %>
      <% if user_signed_in? %>
        <% if current_user.voted_up_on? video %>
          <%= fa_icon "thumbs-up solid", style: "font-size: 30px; margin: 0 10px;" %>
        <% else %>
          <%= fa_icon "thumbs-up regular", style: "font-size: 30px; margin: 0 10px;" %>
        <% end %>
      <% else %>
        <%= fa_icon "thumbs-up solid", style: "font-size: 30px; margin: 0 10px;" %>
      <% end %>
    <% end %>
  <% end %>
  <div id="tooltip" role="tooltip" data-popper-target="tooltip">
    Like this video? <br>
    Sign in to make your opinion count. <br>
    <br>
    <%= link_to "Login", new_user_session_path, { "data-turbo-frame": "_top" } %>
    <div id="arrow" data-popper-arrow></div>
  </div>
</div>

_vote.html.erb

<%= render "videos/show/like_count", video: @video %>
<%= render "videos/show/downvote_link", video: @video %>
<%= render "videos/show/upvote_link", video: @video %>

show.html.erb

<div class="like-buttons">
  <%= turbo_frame_tag "#{dom_id(@video)}_vote" do %>
    <%= render 'videos/show/vote', video: @video %>
  <% end %>
</div>

videos_controller.rb

  def upvote
    @video = Video.find(params[:id])
    if current_user.voted_up_on? @video
      @video.unvote_by current_user
    else
      @video.upvote_by current_user
    end
    render "videos/show/vote"
  end

  def downvote
    @video = Video.find(params[:id])
    if current_user.voted_down_on? @video
      @video.unvote_by current_user
    else
      @video.downvote_by current_user
    end
    render "videos/show/vote"
  end