Merge ac31028 into 267fa6b

app/assets/stylesheets/components/_button.scss

@@ -10,21 +10,32 @@
   cursor: pointer;
 }
 
-.c-button:hover {
-  filter: brightness(0.9);
-}
-
-a.c-button:hover {
-  color: currentcolor;
-}
-
 .c-button--primary {
   background: var(--btn-primary-bg-color);
+
+  &:hover {
+    color: var(--btn-color);
+  }
 }
 
 .c-button--secondary {
   background: var(--btn-secondary-bg-color);
   color: var(--btn-secondary-color);
+
+  &:hover {
+    color: var(--btn-secondary-color);
+  }
+}
+
+.c-button--link {
+  text-align: left;
+  background: none;
+  color: var(--text-primary-color);
+  padding: 0;
+
+  &:hover {
+    color: var(--link-active-color) !important;
+  }
 }
 
 .c-button--small {
@@ -46,3 +57,7 @@ a.c-button:hover {
 .c-button[disabled] {
   opacity: 0.6;
 }
+
+.c-button:hover {
+  filter: brightness(0.9);
+}

app/assets/stylesheets/components/_dropdown.scss

@@ -74,6 +74,7 @@ form.c-dropdown__item button[type="submit"] {
   width: 100%;
   background: var(--dropdown-bg-color);
   border: none;
+  cursor: pointer;
 }
 
 .c-dropdown__item:first-child,

app/assets/stylesheets/elements/_content.scss

@@ -49,12 +49,3 @@ hr {
   margin: spacing("large") 0;
   border-top: 1px solid var(--hr-color);
 }
-
-button[type="submit"] {
-  cursor: pointer;
-
-  &:hover,
-  &:hover * {
-    color: var(--link-active-color);
-  }
-}

app/views/albums/show.html.erb

@@ -23,14 +23,16 @@
     <% @songs.each do |song| %>
       <li class='c-list__item' data-playlist-songs-target='item' data-song-id='<%= song.id %>' data-test-id='album_song'>
         <div class='o-flex o-flex--justify-between o-flex--align-center'>
-          <%= button_to current_playlist_songs_path(song_id: song.id), class: 'u-w-100 o-flex o-flex--justify-between o-flex--align-center', form_class: 'o-flex__item--grow-1', form: { 'data-submit-start-action' => 'check_before_playing', 'data-submit-end-action' => 'play', 'data-turbo-frame' => 'turbo-playlist' } do  %>
-            <div>
-              <h4 class='u-mb-tiny u-text-weight-normal' data-test-id='album_song_name'><%= song.name %></h4>
-              <% if @album.artist.is_various? %>
-                <%= song.artist.title %>
-              <% end %>
+          <%= button_to current_playlist_songs_path(song_id: song.id), class: 'c-button c-button--link u-w-100', form_class: 'o-flex__item--grow-1', form: { 'data-submit-start-action' => 'check_before_playing', 'data-submit-end-action' => 'play', 'data-turbo-frame' => 'turbo-playlist' } do  %>
+            <div class='o-flex o-flex--justify-between o-flex--align-center'>
+              <div>
+                <span class='u-mb-tiny' data-test-id='album_song_name'><%= song.name %></span>
+                <% if @album.artist.is_various? %>
+                  <%= song.artist.title %>
+                <% end %>
+              </div>
+              <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>
             </div>
-            <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>
           <% end %>
 
           <%= link_to dialog_playlists_path(song_id: song.id, referer_url: current_url), data: { turbo_frame: ('turbo-dialog' unless turbo_native?), test_id: 'album_song_add_playlist' } do %>

app/views/favorite_playlist/songs/show.html.erb

@@ -11,8 +11,8 @@
         </div>
         <div class='u-mt-large'>
           <% unless @songs.blank? %>
-            <%= button_to t('label.play_all'), play_favorite_playlist_songs_path, form_class: 'c-button c-button--primary', form: { 'data-turbo-frame' => 'turbo-playlist' } %>
-            <%= button_to t('label.clear'), favorite_playlist_songs_path(clear_all: true), method: :delete, form_class: 'c-button c-button--secondary' %>
+            <%= button_to t('label.play_all'), play_favorite_playlist_songs_path, class: 'c-button c-button--primary', form_class: 'u-display-inline-block', form: { 'data-turbo-frame' => 'turbo-playlist' } %>
+            <%= button_to t('label.clear'), favorite_playlist_songs_path(clear_all: true), class: 'c-button c-button--secondary', form_class: 'u-display-inline-block', method: :delete %>
           <% end %>
         </div>
       </div>
@@ -22,4 +22,3 @@
     <% end %>
   </div>
 </div>
-

app/views/playlists/songs/_song.html.erb

@@ -1,12 +1,14 @@
 <li id='<%= "#{dom_id(playlist)}_#{dom_id(song)}" %>'class='js-playlist-sortable-item c-list__item u-p-0' data-playlist-songs-target='item' data-song-id='<%= song.id %>' data-test-id='playlist_song'>
   <div class='o-flex o-flex--align-center u-py-narrow'>
     <div class='js-playlist-sortable-item-handle u-mr-narrow' data-test-id='playlist_song_sortable_handle'><%= icon_tag 'drag-indicator', size: 'small' %></div>
-    <%= button_to current_playlist_songs_path(song_id: song.id), class: 'u-w-100 o-flex o-flex--justify-between o-flex--align-center', form_class: 'o-flex__item--grow-1', form: { 'data-submit-start-action' => 'check_before_playing', 'data-submit-end-action' => 'play', 'data-turbo-frame' => 'turbo-playlist' } do  %>
+    <%= button_to current_playlist_songs_path(song_id: song.id), class: 'c-button c-button--link u-w-100', form_class: 'o-flex__item--grow-1', form: { 'data-submit-start-action' => 'check_before_playing', 'data-submit-end-action' => 'play', 'data-turbo-frame' => 'turbo-playlist' } do  %>
+      <div class='o-flex o-flex--justify-between o-flex--align-center'>
         <div class='u-mr-narrow'>
-          <h4 class='u-mb-tiny u-text-weight-normal u-text-line-clamp-2' data-test-id='playlist_song_name'><%= song.name %></h4>
+          <span class='u-mb-tiny u-text-line-clamp-2' data-test-id='playlist_song_name'><%= song.name %></span>
           <%= song.artist.title %>
         </div>
         <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>
+      </div>
     <% end %>
     <details class='c-dropdown' data-test-id='playlist_song_menu'>
       <summary><%= icon_tag 'more-vertical', size: 'small', title: t('label.more') %></summary>

app/views/playlists/songs/show.html.erb

@@ -13,7 +13,7 @@
         </div>
         <div class='u-mt-large'>
           <% unless @songs.blank? %>
-            <%= button_to t('label.play_all'), play_playlist_songs_path(@playlist), form_class: 'c-button c-button--primary', form: { 'data-turbo-frame' => 'turbo-playlist' } %>
+            <%= button_to t('label.play_all'), play_playlist_songs_path(@playlist), class: 'c-button c-button--primary', form_class: 'u-display-inline-block', form: { 'data-turbo-frame' => 'turbo-playlist' } %>
           <% end %>
           <%= link_to t('label.edit'), edit_playlist_path(@playlist), data: { turbo_frame: ('turbo-dialog' unless turbo_native?) }, class: 'c-button c-button--secondary' %>
 

app/views/songs/_song.html.erb

@@ -1,6 +1,6 @@
 <div role='row'>
   <div role='cell' data-playlist-songs-target='item' data-song-id='<%= song.id %>'>
-    <%= button_to current_playlist_songs_path(song_id: song.id), data: { test_id: 'song_item'}, form: { 'data-submit-start-action' => 'check_before_playing', 'data-submit-end-action' => 'play', 'data-turbo-frame' => 'turbo-playlist' } do %>
+    <%= button_to current_playlist_songs_path(song_id: song.id), class: 'c-button c-button--link', data: { test_id: 'song_item'}, form: { 'data-submit-start-action' => 'check_before_playing', 'data-submit-end-action' => 'play', 'data-turbo-frame' => 'turbo-playlist' } do %>
       <span data-test-id='song_name'><%= song.name %></span>
     <% end %>
   </div>

app/views/users/index.html.erb

@@ -16,7 +16,7 @@
                 <span class='u-mr-tiny'><%= avatar_tag user %></span>
                 <%= user.email %>
               <% end %>
-              <%= button_to user_path(user), method: :delete do %>
+              <%= button_to user_path(user), method: :delete, class: 'c-button c-button--link' do %>
                 <%= icon_tag 'delete', size: 'small', title: t('label.delete') %>
               <% end %>
             </li>