From 746e8ac5eaa6e1d7b8be8a1b9bb4dafc4627c186 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 6 Feb 2025 19:20:10 +0200
Subject: [PATCH] style(next): tweak the attribute detail dialog

---
 .../app/widgets/attribute_widgets/attribute_detail.ts     | 4 ++--
 src/public/stylesheets/theme-next-dark.css                | 3 +++
 src/public/stylesheets/theme-next-light.css               | 3 +++
 src/public/stylesheets/theme-next/base.css                | 8 ++++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/public/app/widgets/attribute_widgets/attribute_detail.ts b/src/public/app/widgets/attribute_widgets/attribute_detail.ts
index c97210713..866cff805 100644
--- a/src/public/app/widgets/attribute_widgets/attribute_detail.ts
+++ b/src/public/app/widgets/attribute_widgets/attribute_detail.ts
@@ -13,7 +13,7 @@ import appContext from "../../components/app_context.js";
 import type { Attribute } from "../../services/attribute_parser.js";
 
 const TPL = `
-<div class="attr-detail">
+<div class="attr-detail tn-tool-dialog">
     <style>
         .attr-detail {
             display: block;
@@ -80,7 +80,7 @@ const TPL = `
     <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
         <h5 class="attr-detail-title">${t("attribute_detail.attr_detail_title")}</h5>
 
-        <span class="bx bx-x close-attr-detail-button" title="${t("attribute_detail.close_button_title")}"></span>
+        <span class="bx bx-x close-attr-detail-button tn-tool-button" title="${t("attribute_detail.close_button_title")}"></span>
     </div>
 
     <div class="attr-is-owned-by">${t("attribute_detail.attr_is_owned_by")}</div>
diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css
index 6be97ced9..b9e92843e 100644
--- a/src/public/stylesheets/theme-next-dark.css
+++ b/src/public/stylesheets/theme-next-dark.css
@@ -19,6 +19,9 @@
 
     --accented-background-color: #555;
 
+    --tool-dialog-background-color: #262626;
+    --tool-dialog-shadow-color: black;
+
     --button-text-color: currentColor;
 
     --cmd-button-background-color: #ffffff28;
diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css
index af2d9fe2b..7cd90272c 100644
--- a/src/public/stylesheets/theme-next-light.css
+++ b/src/public/stylesheets/theme-next-light.css
@@ -19,6 +19,9 @@
 
     --accented-background-color: #f5f5f5;
 
+    --tool-dialog-background-color: white;
+    --tool-dialog-shadow-color: #00000070;
+
     --button-text-color: currentColor;
 
     --cmd-button-background-color: #0000000f;
diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css
index e6d02dff3..3d5a8eee0 100644
--- a/src/public/stylesheets/theme-next/base.css
+++ b/src/public/stylesheets/theme-next/base.css
@@ -67,6 +67,14 @@
     --tab-note-icons: true;
 }
 
+/* Tool dialogs - small dialogs without a backdrop */
+div.tn-tool-dialog {
+    border-radius: 10px;
+    background: var(--tool-dialog-background-color) !important;
+    user-select: none;
+    box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color);
+}
+
 /*
  * Note search suggestions
  */