From f6cf4a123673b263393bb736649a681bd73bf9ff Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Fri, 13 Jan 2023 11:59:11 -0700
Subject: [PATCH] ui: add read-only styling to Input element

---
 resources/scripts/components/elements/Input.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index c9283e055..89e6bb88e 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -62,7 +62,14 @@ const inputStyle = css<Props>`
         ${tw`opacity-75`};
     }
 
-    ${props => props.isLight && light};
+    ${props =>
+        props.isLight
+            ? light
+            : css`
+                  &:not(.ignoreReadOnly):read-only {
+                      ${tw`border-neutral-800 bg-neutral-900`};
+                  }
+              `};
     ${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300`};
 `;