From f0ffb293c9e29a1af7fa4b8cdac2e1798732f5f9 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 4 Dec 2024 11:12:28 -0500
Subject: [PATCH] Add dark mode compatibility

---
 .../src/arches_references/components/editor/ItemHeader.vue | 7 ++++++-
 .../components/editor/ReferenceNodeLink.vue                | 4 ++--
 .../components/misc/ControlledListSplash.vue               | 4 +---
 .../src/arches_references/components/tree/ListTree.vue     | 2 +-
 .../arches_references/components/tree/ListTreeControls.vue | 2 +-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/arches_references/src/arches_references/components/editor/ItemHeader.vue b/arches_references/src/arches_references/components/editor/ItemHeader.vue
index df5819a..4ea12f9 100644
--- a/arches_references/src/arches_references/components/editor/ItemHeader.vue
+++ b/arches_references/src/arches_references/components/editor/ItemHeader.vue
@@ -42,7 +42,6 @@ const iconLabel = (item: ControlledListItem) => {
             :href="item.uri"
             rel="noreferrer"
             target="_blank"
-            style="font-size: small; color: blue; text-decoration: underline"
         >
             {{ item.uri }}
         </a>
@@ -68,4 +67,10 @@ h3 {
     font-size: small;
     font-weight: 200;
 }
+
+a {
+    font-size: small;
+    color: var(--p-text-color);
+    text-decoration: underline;
+}
 </style>
diff --git a/arches_references/src/arches_references/components/editor/ReferenceNodeLink.vue b/arches_references/src/arches_references/components/editor/ReferenceNodeLink.vue
index dcc9963..25a2cd0 100644
--- a/arches_references/src/arches_references/components/editor/ReferenceNodeLink.vue
+++ b/arches_references/src/arches_references/components/editor/ReferenceNodeLink.vue
@@ -19,7 +19,7 @@ const { $gettext } = useGettext();
         }}<a
             :href="arches.urls.graph_designer(node.graph_id)"
             target="_blank"
-            style="text-decoration: underline"
+            style="text-decoration: underline; color: var(--p-content-color)"
         >
             <i
                 class="fa fa-reply"
@@ -40,7 +40,7 @@ const { $gettext } = useGettext();
     text-align: center;
     border-radius: var(--p-content-border-radius);
     height: 3rem;
-    background: var(--p-gray-200);
+    background: var(--p-content-hover-background);
     text-wrap: nowrap;
 }
 </style>
diff --git a/arches_references/src/arches_references/components/misc/ControlledListSplash.vue b/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
index e7da693..be3c0b8 100644
--- a/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
+++ b/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
@@ -38,7 +38,7 @@ const { $gettext } = useGettext();
     margin: 5rem 5rem 2rem 5rem;
     border: 1px solid #ddd;
     padding: 4rem 3rem;
-    background: #f6f6f6;
+    background: var(--p-content-hover-background);
     border-radius: var(--p-content-border-radius);
     display: flex;
     flex-direction: column;
@@ -46,7 +46,6 @@ const { $gettext } = useGettext();
 }
 
 .controlled-list-splash-title {
-    color: #666;
     font-size: 2.8rem;
     margin-bottom: 3rem;
     margin-top: 2.5rem;
@@ -70,7 +69,6 @@ i {
 
 .controlled-list-splash-description {
     font-size: 1.5rem;
-    color: #666;
     font-weight: 500;
 }
 </style>
diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
index 4a60ca7..953fe88 100644
--- a/arches_references/src/arches_references/components/tree/ListTree.vue
+++ b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -277,7 +277,7 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
             },
             pcFilterIconContainer: {
                 root: {
-                    style: { top: '25%' },
+                    style: { display: 'flex' },
                 },
             },
             wrapper: {
diff --git a/arches_references/src/arches_references/components/tree/ListTreeControls.vue b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
index f74ac99..4eb8d47 100644
--- a/arches_references/src/arches_references/components/tree/ListTreeControls.vue
+++ b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
@@ -78,7 +78,7 @@ const expandNode = (node: TreeNode) => {
 <style scoped>
 .controls {
     display: flex;
-    background: var(--p-primary-50);
+    background: var(--p-content-hover-background);
     gap: 0.5rem;
     padding: 0.5rem;
     justify-content: space-between;