[wip] panel info icon on immediate right, toggle on far right

nextstrain · Oct 9, 2023 · 80063fa · 80063fa
1 parent 8882e72
commit 80063fa
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx
@@ -12,20 +12,20 @@ type Props = {
 export const AnnotatedHeader = ({toggle=undefined, title, tooltip, mobile}: Props) => {
   return (
     <HeaderContainer>
-      <span>
-        {toggle && <span>{toggle}</span>}
+      <div>
         <HeaderTitle>{title}</HeaderTitle>
-      </span>
-      {tooltip && !mobile && (
-        <>
-          <HeaderIconContainer data-tip data-for={title}>
-            <FaInfoCircle/>
-          </HeaderIconContainer>
-          <StyledTooltip place="bottom" type="dark" effect="solid" id={title}>
-            {tooltip}
-          </StyledTooltip>
-        </>
-      )}
+        {tooltip && !mobile && (
+          <>
+            <HeaderIconContainer data-tip data-for={title}>
+              <FaInfoCircle />
+            </HeaderIconContainer>
+            <StyledTooltip place="bottom" type="dark" effect="solid" id={title}>
+              {tooltip}
+            </StyledTooltip>
+          </>
+        )}
+      </div>
+      {toggle !== undefined && toggle}
     </HeaderContainer>
   );
 };

diff --git a/src/components/controls/panel-toggle.tsx b/src/components/controls/panel-toggle.tsx
@@ -24,7 +24,6 @@ const PanelToggle = ({ panel, on }: Props) => {
       on={on}
       callback={() => dispatch(togglePanelDisplay(panel))}
       label=""
-      style={{display: "inline"}}
     />
   );
 };

diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
@@ -40,8 +40,7 @@ export const HeaderTitle = styled.span`
 `;
 
 export const HeaderIconContainer = styled.span`
-  padding-top: 4px;
-  padding-right: 3px;
+  padding-left: 6px;
   cursor: help;
   color: #888;
 `;