From 40d752f134855cac6f5c07011f77db943b55bd4e Mon Sep 17 00:00:00 2001
From: "Hofstetter Benjamin (extern)" <benjamin.hofstetter@mobi.ch>
Date: Thu, 28 Mar 2024 07:29:48 +0100
Subject: [PATCH] Contain Table Style within component Fixes #76

---
 .../sparql-json-result-component.css          | 20 +++++++++----------
 .../sparql-json-result-component.tsx          | 10 +++++-----
 .../uri-component/uri-component.tsx           |  2 +-
 3 files changed, 16 insertions(+), 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
index e58a334..b937792 100644
--- 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,18 +25,18 @@ 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;
@@ -44,34 +44,34 @@ th {
     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;
 }
\ No newline at end of file
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
index d2fcc0c..4d987f2 100644
--- 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
index 6a0f002..9ec305e 100644
--- 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">
                     📋