fix: scope user context component css rules to prevent conflicts with…

… plugins input box
thin-edge · Dec 8, 2024 · c4270f6 · c4270f6
1 parent 9befaf7
commit c4270f6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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;