From 47897fadd00bb9683eee819d6628a9b35d6d5cd2 Mon Sep 17 00:00:00 2001
From: Alessio Cappa <104093777+alessiocappa@users.noreply.github.com>
Date: Fri, 30 Jan 2026 12:20:30 +0100
Subject: [PATCH] feat: Change protected indicator styling (#828)

* feat: Change protected indicator styling

* fix: apply review comment
---
 .../entries/_protection_indicator.html.erb    | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/views/entries/_protection_indicator.html.erb b/app/views/entries/_protection_indicator.html.erb
index 922408c2b..96243f953 100644
--- a/app/views/entries/_protection_indicator.html.erb
+++ b/app/views/entries/_protection_indicator.html.erb
@@ -3,26 +3,31 @@
 <%# Protection indicator - shows when entry is protected from sync overwrites %>
 <%= turbo_frame_tag dom_id(entry, :protection) do %>
   <% if entry.protected_from_sync? && !entry.excluded? %>
-  <details class="mx-4 my-3 border border-primary rounded-lg overflow-hidden">
-    <summary class="flex items-center gap-2 cursor-pointer p-3 bg-container hover:bg-surface-hover list-none [&::-webkit-details-marker]:hidden">
-      <%= icon "lock", size: "sm", class: "text-secondary" %>
-      <span class="text-sm font-medium text-primary flex-1"><%= t("entries.protection.title") %></span>
-      <%= icon "chevron-down", size: "sm", class: "text-secondary transition-transform [[open]>&]:rotate-180" %>
+  <details class="group shadow-border-xs bg-container rounded-xl mb-3 text-xs text-secondary">
+    <summary class="flex items-center justify-between gap-2 cursor-pointer px-3 py-2">
+      <div class="flex items-center gap-2">
+        <%= icon "lock", size: "sm", color: "info" %>
+        <span class="font-medium uppercase"><%= t("entries.protection.title") %></span>
+      </div>
+      <%= icon "chevron-down", color: "info", class: "transition-transform [[open]>&]:rotate-180" %>
     </summary>
-    <div class="p-4 border-t border-primary bg-surface-inset space-y-4">
-      <p class="text-sm text-secondary">
+    <div class="px-3 py-2 space-y-2">
+      <p class="text-sm">
         <%= t("entries.protection.description") %>
       </p>
 
       <% if entry.locked_field_names.any? %>
-        <div class="space-y-2">
-          <p class="text-xs font-medium text-secondary"><%= t("entries.protection.locked_fields_label") %></p>
-          <% entry.locked_fields_with_timestamps.each do |field, timestamp| %>
-            <div class="flex items-center justify-between text-sm">
-              <span class="text-primary"><%= field.humanize %></span>
-              <span class="text-secondary"><%= timestamp.respond_to?(:strftime) ? l(timestamp.to_date, format: :long) : timestamp %></span>
-            </div>
-          <% end %>
+        <div class="px-3 py-2 space-y-2 bg-surface-inset rounded-lg">
+          <div class="space-y-2">
+            <p class="text-sm font-medium"><%= t("entries.protection.locked_fields_label") %></p>
+            <% entry.locked_fields_with_timestamps.each do |field, timestamp| %>
+              <div class="flex items-center justify-between text-xs gap-2 mb-1">
+                <span><%= entry.class.human_attribute_name(field) %></span>
+                <hr class="grow border-dashed border-secondary">
+                <span><%= timestamp.respond_to?(:strftime) ? l(timestamp.to_date, format: :long) : timestamp %></span>
+              </div>
+            <% end %>
+          </div>
         </div>
       <% end %>