From c4270f6fb14349a3e8d043ad5c0424ce3c5abb1d Mon Sep 17 00:00:00 2001
From: reubenmiller <reuben.d.miller@gmail.com>
Date: Sun, 8 Dec 2024 11:55:23 +0100
Subject: [PATCH] fix: scope user context component css rules to prevent
 conflicts with plugins input box

---
 src/components/UserContextForm/index.js |  2 +-
 src/css/custom.css                      | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/UserContextForm/index.js b/src/components/UserContextForm/index.js
index 385d800..d7063b7 100644
--- a/src/components/UserContextForm/index.js
+++ b/src/components/UserContextForm/index.js
@@ -52,7 +52,7 @@ function UserContextForm(props={}) {
   useEffect(() => setShowContext(showContext), [showContext]);
 
   return (
-    <div>
+    <div className='user-context'>
     <button onClick={e => setShowContext(!showContext)} style={{'width': '100%'}}>Show/hide user context</button>
     <div className="card" style={{'display': showContext ? 'inherit': 'none'}}>
         <div className="card__body">
diff --git a/src/css/custom.css b/src/css/custom.css
index 5b8ae6b..8f504a3 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -77,20 +77,21 @@ html[data-theme='dark'] .header-github-link:before {
   margin: 20px;
 }
 
-input {
+.user-context input {
+  /* TODO: Scope this to a specific plugin */
   margin-bottom: 1rem;
   width: 100%;
   font-size: 1rem;
   padding: 0.4rem;
 }
 
-input[type="text"] {
+.user-context input[type="text"] {
   height: 40px;
   padding: 0.5rem 1rem;
   border: 1px solid #999;
 }
 
-input[type="submit"] {
+.user-context input[type="submit"] {
   background-color: #000000;
   border: none;
   color: #fff;
@@ -99,17 +100,17 @@ input[type="submit"] {
   cursor: pointer;
 }
 
-input:focus {
+.user-context input:focus {
   outline: none;
   border-color: #000000;
 }
 
-input[type="checkbox"] {
+.user-context input[type="checkbox"] {
   display: inline-block;
   width: auto;
 }
 
-button {
+.user-context button {
   border-radius: 4px;
   border-width: 1px;
   padding: 6px 18px;