fix: icon buttons reduced padding

ccontrols · Apr 28, 2020 · 7bb9522 · 7bb9522
1 parent 36ff168
commit 7bb9522
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -14,13 +14,17 @@ import {
   Zoom,
 } from '@component-controls/components';
 
-import { Button, useThemeUI } from 'theme-ui';
+import { Button, ButtonProps, useThemeUI } from 'theme-ui';
 import {
   StoryBlockContainer,
   StoryBlockContainerProps,
 } from '../BlockContainer';
 import { StorySource } from '../StorySource';
 
+const IconButton = (props: ButtonProps) => (
+  <Button style={{ paddingTop: '3px', paddingBottom: '3px' }} {...props} />
+);
+
 export interface PlaygroundOwnProps {
   /**
    * default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.
@@ -118,33 +122,33 @@ export const Playground: FC<PlaygroundProps> = ({
     () => [
       {
         title: (
-          <Button onClick={() => setScale(1)} aria-label="reset zoom">
+          <IconButton onClick={() => setScale(1)} aria-label="reset zoom">
             <Octicon icon={Sync} />
-          </Button>
+          </IconButton>
         ),
         id: 'zoomreset',
         group: 'zoom',
       },
       {
         title: (
-          <Button
+          <IconButton
             onClick={() => setScale(Math.max(0.5, scale - 0.2))}
             aria-label="zoom out"
           >
             <Octicon icon={Dash} />
-          </Button>
+          </IconButton>
         ),
         id: 'zoomout',
         group: 'zoom',
       },
       {
         title: (
-          <Button
+          <IconButton
             onClick={() => setScale(Math.min(3, scale + 0.2))}
             aria-label="zoom in"
           >
             <Octicon icon={Plus} />
-          </Button>
+          </IconButton>
         ),
         id: 'zoomin',
         group: 'zoom',