Match toolbar sizes

royerlab · Apr 3, 2024 · 9fe5dd2 · 9fe5dd2
1 parent 4c99789
commit 9fe5dd2
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx
@@ -12,9 +12,18 @@ interface DataControlsProps {
 
 export default function DataControls(props: DataControlsProps) {
     return (
-        <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                // 5px margin makes this bar match the PlaybackControls height
+                // because that component uses primary buttons, which hava a 5px margin
+                margin: "5px",
+            }}
+        >
             {/* TODO: make this do something */}
-            <ButtonIcon sdsIcon="infoCircle" sdsSize="large" sdsType="secondary" />
+            <ButtonIcon sdsIcon="infoCircle" sdsSize="medium" sdsType="secondary" />
 
             <ButtonIcon
                 sdsIcon="share"
@@ -25,7 +34,7 @@ export default function DataControls(props: DataControlsProps) {
             />
 
             {/* TODO: make this do something */}
-            <ButtonIcon sdsIcon="globeBasic" sdsSize="large" sdsType="secondary" />
+            <ButtonIcon sdsIcon="globeBasic" sdsSize="medium" sdsType="secondary" />
         </Box>
     );
 }