Make icons change layout too [#1911]

This leads to a slight styling change, but is probably Close Enough™
nextstrain · Dec 6, 2024 · 6c2bfd6 · 6c2bfd6
1 parent f9d7ec7
commit 6c2bfd6
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/controls/panel-layout.js b/src/components/controls/panel-layout.js
@@ -10,7 +10,8 @@ import { SidebarButton } from "./styles";
 const ButtonText = styled.span`
   margin: 5px;
   position: relative;
-  top: -1px;
+  left: 4px;
+  top: -6px;
 `;
 
 const PanelsFullIcon = withTheme(icons.PanelsFull);
@@ -27,28 +28,27 @@ class PanelLayouts extends React.Component {
 
     return (
       <div style={{marginTop: 0, marginBottom: 10}}>
-        <PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/>
         <SidebarButton
           selected={this.props.panelLayout === "full"}
           onClick={() => {
             analyticsControlsEvent("change-layout-full");
             this.props.dispatch({ type: CHANGE_PANEL_LAYOUT, data: "full" });
           }}
         >
+          <PanelsFullIcon width={22} selected={this.props.panelLayout === "full"}/>
           <ButtonText>{t("sidebar:full")}</ButtonText>
         </SidebarButton>
 
-        <PanelsGridIcon width={22} selected={this.props.panelLayout === "grid"}/>
         <SidebarButton
           selected={this.props.panelLayout === "grid"}
           onClick={() => {
             analyticsControlsEvent("change-layout-grid");
             this.props.dispatch({ type: CHANGE_PANEL_LAYOUT, data: "grid" });
           }}
         >
+          <PanelsGridIcon width={22} selected={this.props.panelLayout === "grid"}/>
           <ButtonText>{t("sidebar:grid")}</ButtonText>
         </SidebarButton>
-
       </div>
     );
   }