From 7bb9522acbbf7a85019387beb269b04b0fb0b512 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Mon, 27 Apr 2020 21:54:04 -0400
Subject: [PATCH] fix: icon buttons reduced padding

---
 ui/blocks/src/Playground/Playground.tsx | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
index 2d7dbc469..019cd5a50 100644
--- 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',