Fix rendering of types in tree (#544)

* Remove extra margin present if only scientific name present * Also grey scientific name when disabled
falling-fruit · Oct 31, 2024 · 9f6acc5 · 9f6acc5
1 parent 76c578c
commit 9f6acc5
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/filter/TreeSelectView.js b/src/components/filter/TreeSelectView.js
@@ -74,6 +74,7 @@ const CommonName = styled.span`
 const ScientificName = styled.span`
   font-style: italic;
   margin-right: 0.5em;
+  opacity: ${({ isDisabled }) => (isDisabled ? 0.7 : 1)};
   color: ${({ theme }) => theme.text};
 `
 
@@ -146,9 +147,13 @@ const TreeSelectView = ({
             />
           </ControlsContainer>
           <NodeContent>
-            <CommonName isDisabled={isDisabled}>{node.commonName}</CommonName>
+            {node.commonName && (
+              <CommonName isDisabled={isDisabled}>{node.commonName}</CommonName>
+            )}
             {node.scientificName && (
-              <ScientificName>{node.scientificName}</ScientificName>
+              <ScientificName isDisabled={isDisabled}>
+                {node.scientificName}
+              </ScientificName>
             )}
             <Count>({node.count})</Count>
           </NodeContent>