From 39e6d11dce8282727973c65de0cc09e713ebb0f6 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Fri, 6 Oct 2023 15:34:22 -0700
Subject: [PATCH] Use separate styled component for font-related styles

This keeps the styling closer to where it is used.
---
 src/components/controls/annotatedHeader.tsx | 4 ++--
 src/components/controls/styles.js           | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
index 0a19ec90a..b6c592135 100644
--- 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
index 45555053f..40c22bb23 100644
--- 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};
 `;