Feat: #20 Privacy dashboard url should be a clickable link

decentralised-dataexchange · Oct 2, 2024 · 62896e8 · 62896e8
1 parent 03e6884
commit 62896e8
Showing 1 changed file with 25 additions and 7 deletions.
diff --git a/src/Components/modals/detailsContainer/dataSourcesDetails.js b/src/Components/modals/detailsContainer/dataSourcesDetails.js
@@ -59,14 +59,32 @@ export const DataSourcesDetails = ({ t, dataAgreement }) => {
           <div style={cardStyle} key={i}>
             <p style={{ fontSize: "14px" }}>{dataSource.name}</p>
 
-            <div style={{ display: "flex", flexWrap: "wrap" }}>
-              <p style={{ margin: 0, color: "grey" }}>{dataSource.sector},</p>
-              <p style={{ margin: 0, color: "grey", marginLeft: 5 }}>
-                {dataSource.location},
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                alignItems: "center",
+              }}
+            >
+              <p style={{ margin: 0, color: "grey" }}>
+                {dataSource.sector},&nbsp;&nbsp;
               </p>
-              <p style={{ margin: 0, color: "grey", marginLeft: 5 }}>
-                {dataSource.privacyDashboardUrl}
+              <p style={{ margin: 0, color: "grey" }}>
+                {dataSource.location}
+                {dataSource.privacyDashboardUrl && ","}&nbsp;&nbsp;
               </p>
+              <a
+                href={dataSource.privacyDashboardUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  margin: 0,
+                  color: "1890FF",
+                  textDecoration: "none",
+                }}
+              >
+                {dataSource.privacyDashboardUrl}
+              </a>
             </div>
           </div>
         ))}
@@ -78,4 +96,4 @@ export const DataSourcesDetailsWithNamespace = withNamespaces()(
   DataSourcesDetails
 );
 
-export default DataSourcesDetails;
+export default DataSourcesDetails;