Update feedback page column style

app/assets/stylesheets/components/btn.css.scss

@@ -384,6 +384,12 @@
   --d-on-btn-color: var(--d-on-success);
 }
 
+.btn.d-btn-secondary {
+  --d-btn-color: var(--d-secondary);
+  --d-btn-color-rgb: var(--d-secondary-rgb);
+  --d-on-btn-color: var(--d-on-secondary);
+}
+
 .btn-toggle {
   min-width: fit-content;
 }

app/assets/stylesheets/components/evaluations.css.scss

@@ -153,7 +153,61 @@
   }
 }
 
-.feedback {
+ul.feedback-list {
+  width: 100%;
+  letter-spacing: 0.04em;
+  text-decoration: inherit;
+  text-transform: inherit;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  color: var(--d-on-surface-variant);
+
+  li a {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-transform: inherit;
+    position: relative;
+    padding-left: 16px;
+    padding-right: 24px;
+    margin-bottom: 4px;
+    outline: none;
+    color: var(--d-on-surface);
+    text-decoration: none;
+    height: 56px;
+    border-radius: 28px;
+
+    &.active,
+    &:hover,
+    &:focus {
+      font-weight: 400;
+      background: var(--d-secondary-container);
+      color: var(--d-on-secondary-container);
+      opacity: 0.75;
+
+      .feedback-icon .circle {
+        fill: var(--d-secondary-container);
+        opacity: 0.75;
+      }
+    }
+
+    .feedback-icon {
+      margin-right: 12px;
+    }
+  }
+}
+
+.btn-icon {
+  &:hover,
+  &:focus {
+    .feedback-icon .circle {
+      opacity: 0;
+    }
+  }
+}
+
+.feedback-icon {
   color: var(--d-on-surface-muted) !important;
 
   i {
@@ -163,6 +217,10 @@
   i.completed {
     color: var(--d-secondary) !important;
   }
+
+  .circle {
+    fill: var(--d-surface);
+  }
 }
 
 .evaluation-form-title {

app/views/evaluations/_evaluation_table.html.erb

@@ -15,7 +15,12 @@
           <td class="user-name ellipsis-overflow"><%= link_to user.full_name, course_member_path(@evaluation.series.course, user), title: user.full_name, class: "ellipsis-overflow", target: "_blank" %></td>
           <% feedback_l.each do |feedback| %>
             <td class="status">
-              <%= render partial: 'feedback_status', locals: { evaluation: feedback.evaluation, feedback: feedback } %>
+              <%= link_to evaluation_feedback_path(evaluation, feedback),
+                         title: feedback_title(feedback),
+                         "data-bs-toggle": "tooltip",
+                         class: "btn btn-icon d-btn-secondary" do %>
+                <%= render partial: 'feedback_status', locals: { evaluation: feedback.evaluation, feedback: feedback } %>
+              <% end %>
             </td>
           <% end %>
         </tr>

app/views/evaluations/_feedback_status.html.erb

@@ -1,25 +1,20 @@
-<%= link_to evaluation_feedback_path(evaluation, feedback),
-            title: feedback_title(feedback),
-            "data-bs-toggle": "tooltip",
-            class: "feedback btn btn-icon #{local_assigns.fetch(:active, false) ? 'disabled' : ''}" do %>
-  <svg viewBox="0 0 24 24" width="24px" height="24px" style="overflow: visible" >
-    <g>
-      <foreignObject x="0" y="0"  height="24" width="24">
-        <i class="mdi mdi-comment-outline"></i>
+<svg viewBox="0 0 24 24" width="24px" height="24px" style="overflow: visible" class="feedback-icon" >
+  <g>
+    <foreignObject x="0" y="0"  height="24" width="24">
+      <i class="mdi mdi-comment-outline"></i>
+    </foreignObject>
+    <% if feedback.completed? %>
+      <foreignObject x="6" y="1" height="16" width="12">
+        <i class="mdi mdi-check-bold mdi-12 completed"></i>
       </foreignObject>
-      <% if feedback.completed? %>
-        <foreignObject x="6" y="1" height="16" width="12">
-          <i class="mdi mdi-check-bold mdi-12 completed"></i>
-        </foreignObject>
+    <% end %>
+    <circle cx="21" cy="22.25" r= "9" class="circle"></circle>
+    <foreignObject x="12" y="12"  height="18" width="18">
+      <% if feedback&.submission.present? %>
+        <%= submission_status_icon feedback.submission %>
+      <% else %>
+        <i class="mdi mdi-18 mdi-cancel"></i>
       <% end %>
-      <circle cx="21" cy="22.25" r= "9" fill="var(--d-surface)"></circle>
-      <foreignObject x="12" y="12"  height="18" width="18">
-        <% if feedback&.submission.present? %>
-          <%= submission_status_icon feedback.submission %>
-        <% else %>
-          <i class="mdi mdi-18 mdi-cancel"></i>
-        <% end %>
-      </foreignObject>
-    </g>
-  </svg>
-<% end %>
+    </foreignObject>
+  </g>
+</svg>

app/views/feedbacks/_user_feedback_row.html.erb

@@ -1,15 +1,18 @@
-<table class="table activity-table">
+<ul class="feedback-list">
   <% current_feedback.evaluation.evaluation_exercises.map do |ex|
     Feedback.find_by(evaluation_user: current_feedback.evaluation_user,
                      evaluation_exercise: ex)
   end.each do |feedback| %>
-    <tr>
-      <td class="ellipsis-overflow name" title="<%= feedback.exercise.name %>">
-        <%= feedback.exercise.name %>
-      </td>
-      <td class="buttons">
-        <%= render partial: "evaluations/feedback_status", locals: { evaluation: feedback.evaluation, feedback: feedback, active: feedback == current_feedback} %>
-      </td>
-    </tr>
+    <li >
+      <%= link_to evaluation_feedback_path(feedback.evaluation, feedback),
+                  title: feedback_title(feedback),
+                  "data-bs-toggle": "tooltip",
+                  class: current_feedback == feedback ? "active" : "" do %>
+        <%= render partial: "evaluations/feedback_status", locals: { evaluation: feedback.evaluation, feedback: feedback } %>
+        <div class="ellipsis-overflow">
+          <%= feedback.exercise.name %>
+        </div>
+      <% end %>
+    </li>
   <% end %>
-</table>
+</ul>