Contain Table Style within component

Fixes #76
zazuko · Mar 28, 2024 · 40d752f · 40d752f
1 parent d44676d
commit 40d752f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/src/renderer/components/sparql-result-json-component/sparql-json-result-component.css b/src/renderer/components/sparql-result-json-component/sparql-json-result-component.css
@@ -14,7 +14,7 @@ body.vscode-light table {
     background-color: rgb(240, 240, 240) !important;
 }
 
-table {
+table.sparql-notebook {
     border-radius: 0.25em;
     border-collapse: collapse;
     margin-top: 1em;
@@ -25,53 +25,53 @@ table {
     padding-right: 0;
 }
 
-body.vscode-dark th {
+body.vscode-dark th.sparql-notebook {
     color: #28b1de !important;
     border: 1px dashed #364043 !important;
 }
 
-body.vscode-light th {
+body.vscode-light th.sparql-notebook {
     color: #d810c4a8 !important;
     border: 1px dashed #ebebeb !important;
 
 }
 
-th {
+th.sparql-notebook {
     border: 1px dotted #364043 !important;
     font-size: 0.85em;
     font-weight: 600;
     padding: 0.5em 1em;
     text-align: left;
 }
 
-body.vscode-light td {
+body.vscode-light td.sparql-notebook {
     color: black !important;
     border: 1px dashed #ebebeb !important;
 }
 
-body.vscode-dark td {
+body.vscode-dark td.sparql-notebook {
     color: lightgrey !important;
     border: 1px dashed #364043 !important;
 
 
 }
 
-td {
+td.sparql-notebook {
     font-weight: 400;
     padding: 0.65em 1em;
     text-align: left;
 
 }
 
-body.vscode-dark tr:hover {
+body.vscode-dark tr.sparql-notebook:hover {
     background: #014055 !important;
 }
 
-body.vscode-light tr:hover {
+body.vscode-light tr.sparql-notebook:hover {
     background: #a9b8bd !important;
 }
 
-a {
+a.sparql-notebook {
     white-space: nowrap;
     text-decoration: none;
 }
diff --git a/src/renderer/components/sparql-result-json-component/sparql-json-result-component.tsx b/src/renderer/components/sparql-result-json-component/sparql-json-result-component.tsx
@@ -13,19 +13,19 @@ interface SparqlResultJsonComponentProps {
 export const SparqlResultJsonComponent: React.FC<SparqlResultJsonComponentProps> = ({ sparqlResult }) => {
 
     return (
-        <table>
+        <table className='sparql-notebook'>
             <thead>
-                <tr>
+                <tr className='sparql-notebook'>
                     {sparqlResult.head.vars.map((heading: string, index: number) => (
-                        <th key={index}>{heading}</th>
+                        <th className='sparql-notebook' key={index}>{heading}</th>
                     ))}
                 </tr>
             </thead>
             <tbody>
                 {sparqlResult.results!.bindings.map((result: any, index: number) => (
-                    <tr key={index}>
+                    <tr className='sparql-notebook' key={index}>
                         {sparqlResult.head.vars.map((heading: string, index: number) => (
-                            <td key={index}>
+                            <td className='sparql-notebook' key={index}>
 
                                 {result[heading] === undefined ? (
                                     <div></div>

diff --git a/src/renderer/components/uri-component/uri-component.tsx b/src/renderer/components/uri-component/uri-component.tsx
@@ -51,7 +51,7 @@ export const UriComponent: React.FC<UriComponentProps> = ({ term }) => {
 
     return (
         <div className="uri-component" style={{ display: 'flex', flexDirection: 'row' }}>
-            <a href={uri?.href}>{(uri?.isPrefixed ? '' : '<') + uri?.value + (uri?.isPrefixed ? '' : '>')}</a>
+            <a className='sparql-notebook' href={uri?.href}>{(uri?.isPrefixed ? '' : '<') + uri?.value + (uri?.isPrefixed ? '' : '>')}</a>
             {isLinkClicked ? (
                 <span title="copied" className="link-icon disappear">
                     📋