fix: various spacing clean ups

ccontrols · Apr 1, 2020 · d89c19a · d89c19a
1 parent 69408aa
commit d89c19a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 12 deletions.
diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
@@ -20,7 +20,7 @@ export const DocsPage = () => {
         <Subtitle />
         <Description />
         <ComponentSource id="." title='Component source' />
-        <Playground openTab="source">
+        <Playground openTab="source" title=".">
           <Story id="." />
         </Playground>  
         <ControlsTable id="." />

diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -244,7 +244,7 @@ export const Playground: FC<PlaygroundProps> = ({
               collapsible={collapsible}
             >
               {() => (
-                <ActionContainer plain={true} actions={actionsItems}>
+                <ActionContainer plain={false} actions={actionsItems}>
                   <TransformComponent>{childStories}</TransformComponent>
                 </ActionContainer>
               )}

diff --git a/ui/blocks/src/Story/Story.tsx b/ui/blocks/src/Story/Story.tsx
@@ -1,4 +1,6 @@
-import React, { createElement, FC } from 'react';
+/** @jsx jsx */
+import { createElement, FC } from 'react';
+import { jsx, Box } from 'theme-ui';
 import { getControlValues } from '@component-controls/core';
 import {
   StoryBlockContainer,
@@ -21,9 +23,9 @@ export const Story: FC<StoryProps> = (props: StoryProps) => (
             story.renderFn(values, { context }),
           );
           return (
-            <div id={story.id} {...rest}>
+            <Box id={story.id} sx={{ px: 3 }} {...rest}>
               {children}
-            </div>
+            </Box>
           );
         } catch (e) {
           console.error(e);

diff --git a/ui/components/src/ActionContainer/ActionContainer.tsx b/ui/components/src/ActionContainer/ActionContainer.tsx
@@ -40,13 +40,10 @@ export const ActionContainer: FC<ActionContainerProps> = ({
         <Box
           sx={{
             borderRadius: 4,
-            boxShadow: `${transparentize(
+            border: `1px solid ${transparentize(
               0.9,
               theme.colors?.text as string,
-            )} 0 1px 3px 1px, ${transparentize(
-              0.9,
-              theme.colors?.text as string,
-            )} 0 0 0 1px`,
+            )}`,
             'div:first-child, svg:first-child': {
               paddingTop,
             },

diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -55,7 +55,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({
     <Box
       sx={{
         position: 'relative',
-        mt: 3,
+        mt: 4,
         mb: 4,
         width: '100%',
       }}
@@ -66,7 +66,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({
           sx={{
             flexDirection: 'row',
             alignItems: 'center',
-            pb: 2,
+            pb: title ? 2 : 0,
             ':hover': {
               a: {
                 visibility: 'visible',