[Fix] Datasets and basemap attributions separated by "|" (#2150)

keplergl · Mar 5, 2023 · ce4e5c7 · ce4e5c7
1 parent 1fd7bad
commit ce4e5c7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/src/common/styled-components.tsx b/src/components/src/common/styled-components.tsx
@@ -553,9 +553,15 @@ export const StyledAttrbution = styled.div.attrs({
     align-items: center;
     margin-left: 10px;
 
-    a {
+    a,
+    .pipe-separator {
       margin-right: 2px;
     }
+
+    .pipe-separator {
+      text-decoration: none;
+      color: ${props => props.theme.labelColor};
+    }
   }
 
   .attrition-logo {
@@ -570,7 +576,8 @@ export const StyledAttrbution = styled.div.attrs({
       margin-left: 4px;
     }
   }
-  a {
+  a,
+  .pipe-separator {
     font-size: 10px;
   }
 

diff --git a/src/components/src/map-container.tsx b/src/components/src/map-container.tsx
@@ -190,6 +190,7 @@ export const Attribution = ({
             <DatasetAttributions datasetAttributions={datasetAttributions} isPalm={isPalm} />
             {showOsmBasemapAttribution ? (
               <div className="attrition-link">
+                {datasetAttributions?.length ? <span className="pipe-separator">|</span> : null}
                 <a
                   href="http://www.openstreetmap.org/copyright"
                   target="_blank"
@@ -209,6 +210,7 @@ export const Attribution = ({
         <EndHorizontalFlexbox>
           <DatasetAttributions datasetAttributions={datasetAttributions} isPalm={isPalm} />
           <div className="attrition-link">
+            {datasetAttributions?.length ? <span className="pipe-separator">|</span> : null}
             {isPalm ? <MapboxLogo /> : null}
             <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
               © kepler.gl |{' '}