Use primary color for full icon

dodona-edu · Dec 17, 2024 · b261008 · b261008
1 parent 5e55bb6
commit b261008
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/app/assets/stylesheets/components/evaluations.css.scss b/app/assets/stylesheets/components/evaluations.css.scss
@@ -182,12 +182,12 @@ ul.feedback-list {
     &:hover,
     &:focus {
       font-weight: 400;
-      background: var(--d-secondary-container);
-      color: var(--d-on-secondary-container);
+      background: var(--d-primary-container);
+      color: var(--d-on-primary-container);
       opacity: 0.75;
 
       .feedback-icon .circle {
-        fill: var(--d-secondary-container);
+        fill: var(--d-primary-container);
         opacity: 0.75;
       }
     }
@@ -214,8 +214,10 @@ ul.feedback-list {
     color: inherit;
   }
 
-  i.completed {
-    color: var(--d-secondary) !important;
+  &.completed {
+    i {
+      color: var(--d-primary) !important;
+    }
   }
 
   .circle {

diff --git a/app/views/evaluations/_evaluation_table.html.erb b/app/views/evaluations/_evaluation_table.html.erb
@@ -18,7 +18,7 @@
               <%= link_to evaluation_feedback_path(evaluation, feedback),
                          title: feedback_title(feedback),
                          "data-bs-toggle": "tooltip",
-                         class: "btn btn-icon d-btn-secondary" do %>
+                         class: "btn btn-icon" do %>
                 <%= render partial: 'feedback_status', locals: { evaluation: feedback.evaluation, feedback: feedback } %>
               <% end %>
             </td>

diff --git a/app/views/evaluations/_feedback_status.html.erb b/app/views/evaluations/_feedback_status.html.erb
@@ -1,11 +1,11 @@
-<svg viewBox="0 0 24 24" width="24px" height="24px" style="overflow: visible" class="feedback-icon" >
+<svg viewBox="0 0 24 24" width="24px" height="24px" style="overflow: visible" class="feedback-icon <%= feedback.completed? ? 'completed' : '' %>">
   <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>
+        <i class="mdi mdi-check-bold mdi-12"></i>
       </foreignObject>
     <% end %>
     <circle cx="21" cy="22.25" r= "9" class="circle"></circle>