This will add some minor adjustments to make links look consistent across our details page:

* fixed color of links in resources to match other links

Also some removal of unneccessary styles and a fix for maps using keys to use a consistent way of creating these keys.

See merge request !137

src/components/DetailAccordion.tsx

@@ -69,7 +69,9 @@ export default function DetailAccordion({ dataset }: { dataset: Dataset }) {
       {dataset.types && (
         <DetailAccordionItem
           title={t('dataset.types')}
-          body={dataset.types.map((type) => buildTypeDetails(t, type))}
+          body={dataset.types.map((type, idx) =>
+            buildTypeDetails(t, idx, type),
+          )}
           key="types"
           class="types"
         />
@@ -77,7 +79,9 @@ export default function DetailAccordion({ dataset }: { dataset: Dataset }) {
       {dataset.resources && (
         <DetailAccordionItem
           title={t('dataset.resources')}
-          body={dataset.resources.map((resource) => buildResource(resource))}
+          body={dataset.resources.map((resource, idx) =>
+            buildResource(idx, resource),
+          )}
           key="resources"
           class="resources"
         />
@@ -85,7 +89,7 @@ export default function DetailAccordion({ dataset }: { dataset: Dataset }) {
       {dataset.tags && (
         <DetailAccordionItem
           title={t('dataset.tags')}
-          body={dataset.tags.map((tag) => TagButton(t, tag))}
+          body={dataset.tags.map((tag, idx) => TagButton(t, idx, tag))}
           key="tags"
           class="tags"
         />
@@ -132,9 +136,9 @@ const DetailAccordionItem = (props: AccordionProps) => {
   )
 }
 
-function buildResource(resource: Resource) {
+function buildResource(idx: number, resource: Resource) {
   return (
-    <a className="link" href={resource.url} key={resource.url}>
+    <a className="link" href={resource.url} key={`resource-${idx}`}>
       <span className="label">
         {resource.type.label === 'Webseite' ? (
           <FiExternalLink />
@@ -148,7 +152,7 @@ function buildResource(resource: Resource) {
   )
 }
 
-function TagButton(t: TFunction, tag: Tag) {
+function TagButton(t: TFunction, idx: number, tag: Tag) {
   const query = useStore((store) => store.query)
   const searchedQuery = useStore((store) => store.searchedQuery)
 
@@ -183,7 +187,7 @@ function TagButton(t: TFunction, tag: Tag) {
 
   return (
     <button
-      key={label}
+      key={`tag-${idx}`}
       onClick={() => onClick(label)}
       title={t('detail_accordion.button_tag')} //""
     >
@@ -298,14 +302,18 @@ function buildPersonDetails(t: TFunction, idx: number, person: Person) {
   }
 }
 
-function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
+function buildTypeDetails(
+  t: TFunction,
+  idx: number,
+  type: Type,
+): React.ReactElement {
   const label = buildTypeLabel(t, type)
 
   if (typeof type === 'object' && 'Taxon' in type) {
     const taxon = type.Taxon
 
     return (
-      <Fragment key={label}>
+      <Fragment key={`type-${idx}`}>
         <h3>{label}</h3>
         <p>
           {t('types.taxon.scientific_name')}: {taxon.scientific_name}
@@ -327,7 +335,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
     const domain = t(DOMAIN_LABELS[type.Measurements.domain])
 
     return (
-      <Fragment key={label}>
+      <Fragment key={`type-${idx}`}>
         <h3>
           {label} {domain && <>({domain})</>}
         </h3>
@@ -344,7 +352,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
               station.reporting_obligations.length > 0 && (
                 <>
                   <p>{t('types.station.reporting_obligations')}: </p>
-                  <ul key="reporting_obligations">
+                  <ul key={`reporting-obiligation-${idx}`}>
                     {station.reporting_obligations
                       .sort()
                       .map((reporting_obligation) =>
@@ -360,7 +368,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
             <p>{t('types.station.measured_variables')}:</p>
             <ul>
               {measured_variables.map((variable) => (
-                <li key={variable}>{variable}</li>
+                <li key={`variable-${idx}`}>{variable}</li>
               ))}
             </ul>
           </>
@@ -370,7 +378,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
             <div className="row">{t('types.station.method')}:</div>
             <div className="variables">
               {methods.map((method) => (
-                <div key={method} className="row">
+                <div key={`method-${idx}`} className="row">
                   {method}
                 </div>
               ))}
@@ -386,7 +394,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
     const cas_rn = compound.cas_registry_number
 
     return (
-      <Fragment key={label}>
+      <Fragment key={`type-${idx}`}>
         <h3>{label}</h3>
         <p>Name: {name}</p>
         {synonyms && synonyms.length > 0 && (
@@ -394,7 +402,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
             <p>{t('types.chemical_compound.synonyms')}:</p>
             <ul>
               {synonyms.map((synonym) => (
-                <li key={synonym}>{synonym}</li>
+                <li key={`synonym-${idx}`}>{synonym}</li>
               ))}
             </ul>
           </>
@@ -407,7 +415,7 @@ function buildTypeDetails(t: TFunction, type: Type): React.ReactElement {
       </Fragment>
     )
   } else {
-    return <h3 key={label}>{label}</h3>
+    return <h3 key={`type-${idx}`}>{label}</h3>
   }
 }
 
@@ -484,7 +492,7 @@ const StyledAccordionItem = styled(AccordionItem)`
       transform: rotate(180deg);
     }
   }
-    
+
   h3 {
     ${theme.ty('display/base bold')}
     color: ${theme.colors.black};
@@ -510,11 +518,11 @@ const StyledAccordionItem = styled(AccordionItem)`
         color: ${theme.colors['neutral-700']};
         display: flex;
         align-items: center;
-        gap: ${theme.sizing['1.5']};  
+        gap: ${theme.sizing['1.5']};
       }
     }
-      
-    .alternatives {
+
+    .alternatives, .origins {
       display: flex;
       flex-direction: column;
       gap: ${theme.sizing[`5`]};
@@ -534,11 +542,13 @@ const StyledAccordionItem = styled(AccordionItem)`
 
       a.link {
         color: ${theme.colors['primary-900']};
-        text-decoration: underline;
         display: flex;
         flex-direction: column;
         overflow-wrap: anywhere;
 
+        > span {
+          color: inherit;
+        }
         > svg {
           min-width: 19px;
           stroke: ${theme.colors['primary-900']};
@@ -558,7 +568,6 @@ const StyledAccordionItem = styled(AccordionItem)`
         display: flex;
         gap: ${theme.sizing[`3`]};
         align-items: center;
-        font-weight: 700;
       }
     }
   }