Use separate styled component for font-related styles

This keeps the styling closer to where it is used.
nextstrain · Oct 9, 2023 · 39e6d11 · 39e6d11
1 parent 0166bf3
commit 39e6d11
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { FaInfoCircle } from "react-icons/fa";
-import {StyledTooltip, HeaderIconContainer, HeaderContainer} from "./styles";
+import {StyledTooltip, HeaderIconContainer, HeaderContainer, HeaderTitle} from "./styles";
 
 type Props = {
   toggle?: JSX.Element
@@ -14,7 +14,7 @@ export const AnnotatedHeader = ({toggle=undefined, title, tooltip, mobile}: Prop
     <HeaderContainer>
       <span>
         {toggle && <span>{toggle}</span>}
-        <span>{title}</span>
+        <HeaderTitle>{title}</HeaderTitle>
       </span>
       {tooltip && !mobile && (
         <>

diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
@@ -24,12 +24,15 @@ export const ControlsContainer = styled.div`
 export const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  font-family: ${(props) => props.theme["font-family"]};
-  font-size: 16px;
   line-height: 28px;
   min-height: 28px; /* needed for safari, else the div height is 0 */
   margin-top: 15px;
   margin-bottom: 5px;
+`;
+
+export const HeaderTitle = styled.span`
+  font-family: ${(props) => props.theme["font-family"]};
+  font-size: 16px;
   font-weight: 500;
   color: ${(props) => props.theme.color};
 `;