fix: imporove actions and blocks ui

ccontrols · Mar 12, 2020 · 6dad9d9 · 6dad9d9
1 parent 262526c
commit 6dad9d9
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 60 deletions.
diff --git a/ui/components/src/ActionBar/ActionBar.stories.tsx b/ui/components/src/ActionBar/ActionBar.stories.tsx
@@ -14,7 +14,7 @@ const Container: React.FC = ({ children }) => (
     <Box
       style={{
         height: 100,
-        backgroundColor: 'red',
+        backgroundColor: 'rgb(250, 248, 245)',
       }}
     >
       {children}
@@ -30,7 +30,7 @@ export const simple = () => (
           onClick: () => console.log('clicked'),
         },
         {
-          title: 'action 2',
+          title: <ExternalLink href="https://google.com">google</ExternalLink>,
           onClick: () => console.log('clicked'),
         },
       ]}

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import React, { FunctionComponent, MouseEvent } from 'react';
 import styled from '@emotion/styled';
-import { Box, Button, jsx } from 'theme-ui';
+import { transparentize } from 'polished';
+import { Theme, Box, Button, jsx, useThemeUI } from 'theme-ui';
 
 export interface ActionItem {
   title: React.ReactNode;
@@ -25,42 +26,66 @@ const StyledFlex = styled.div`
   width: 100%;
 `;
 
-const ActionColors = (disabled: boolean | undefined) => ({
-  backgroundColor: 'highlight',
-  color: disabled ? '#ddd' : 'background',
-  cursor: disabled ? 'not-allowed' : undefined,
-  px: 2,
-  py: 1,
-  lineHeight: 1,
-  borderRadius: 0,
-  border: 'none',
-});
+const ActionColors = ({
+  theme,
+  disabled,
+}: {
+  theme: Theme;
+  disabled: boolean | undefined;
+}) => {
+  console.log(theme);
+  return {
+    backgroundColor: transparentize(
+      0.15,
+      theme.colors?.['highlight'] as string,
+    ),
+    color: disabled ? '#ddd' : 'background',
+    cursor: disabled ? 'not-allowed' : undefined,
+    px: 2,
+    py: 1,
+    lineHeight: 1,
+    borderRadius: 1,
+    display: 'inline-block',
+    boxShadow: `${transparentize(
+      0.9,
+      theme.colors?.text as string,
+    )} 0 1px 3px 1px, ${transparentize(
+      0.35,
+      theme.colors?.text as string,
+    )} 0 0 0 1px`,
+    border: `1px solid ${theme.colors?.['highlight'] as string}`,
+  };
+};
 export const ActionBar: FunctionComponent<ActionBarProps> = ({
   actionItems,
-}) => (
-  <StyledContainer>
-    <StyledFlex>
-      {actionItems
-        .filter(({ hidden }) => !hidden)
-        .map(({ title, onClick, disabled }, index: number) => (
-          <Box
-            key={`${typeof title === 'string' ? title : 'item'}_${index}`}
-            sx={{
-              ml: 1,
-              fontSize: 1,
-              a: ActionColors(disabled),
-              button: ActionColors(disabled),
-            }}
-          >
-            {typeof title === 'string' ? (
-              <Button onClick={onClick} disabled={disabled}>
-                {title}
-              </Button>
-            ) : (
-              title
-            )}
-          </Box>
-        ))}
-    </StyledFlex>
-  </StyledContainer>
-);
+}) => {
+  const { theme } = useThemeUI();
+  return (
+    <StyledContainer>
+      <StyledFlex>
+        {actionItems
+          .filter(({ hidden }) => !hidden)
+          .map(({ title, onClick, disabled }, index: number) => (
+            <Box
+              key={`${typeof title === 'string' ? title : 'item'}_${index}`}
+              sx={{
+                mt: 2,
+                mr: 2,
+                fontSize: 1,
+                a: ActionColors({ theme, disabled }),
+                button: ActionColors({ theme, disabled }),
+              }}
+            >
+              {typeof title === 'string' ? (
+                <Button onClick={onClick} disabled={disabled}>
+                  {title}
+                </Button>
+              ) : (
+                title
+              )}
+            </Box>
+          ))}
+      </StyledFlex>
+    </StyledContainer>
+  );
+};
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import React, { FC } from 'react';
-import { jsx, Flex, Link, Divider } from 'theme-ui';
+import { transparentize } from 'polished';
+import { jsx, Flex, Link, Divider, Box, useThemeUI } from 'theme-ui';
 import Octicon, {
   Link as LinkIcon,
   ChevronRight,
@@ -11,11 +12,6 @@ import { Subtitle } from '../Subtitle';
 import { Collapsible } from '../Collapsible';
 import { ActionBar, ActionItem } from '../ActionBar';
 
-const SpacedBlockContainer = styled.div(() => ({
-  position: 'relative',
-  margin: '25px 0 40px 0',
-}));
-
 const FramedBlockContainer = styled.div(() => ({
   boxSadow: 'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px',
   borderRadius: 4,
@@ -39,14 +35,22 @@ export const BlockContainer: FC<BlockContainerProps> = ({
   actions,
 }) => {
   const [isOpen, setIsOpen] = React.useState(true);
+  const { theme } = useThemeUI();
   const id = title ? title.toLowerCase().replace(/\s/g, '-') : undefined;
   //workaround for storybook iframe url
   const url =
     (window.location != window.parent.location
       ? document.referrer
       : document.location.href) || '';
   return (
-    <SpacedBlockContainer id={id}>
+    <Box
+      sx={{
+        position: 'relative',
+        mt: 3,
+        mb: 4,
+      }}
+      id={id}
+    >
       <Flex
         sx={{
           flexDirection: 'row',
@@ -75,23 +79,39 @@ export const BlockContainer: FC<BlockContainerProps> = ({
             <Octicon icon={LinkIcon} />
           </Link>
         )}
-
-        {title && <Subtitle css={{ paddingRight: 10 }}>{title}</Subtitle>}
-        <Link
-          aria-label={isOpen ? 'Collapse this block' : 'Expand this block'}
-          css={{
-            cursor: 'pointer',
-          }}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <Octicon icon={isOpen ? ChevronDown : ChevronRight} />
-        </Link>
+        {title && (
+          <Link
+            aria-label={isOpen ? 'Collapse this block' : 'Expand this block'}
+            css={{
+              cursor: 'pointer',
+            }}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Subtitle css={{ paddingRight: 10 }}>{title}</Subtitle>
+              <Octicon icon={isOpen ? ChevronDown : ChevronRight} />
+            </Flex>
+          </Link>
+        )}
       </Flex>
       <Collapsible isOpen={isOpen}>
         {actions && <ActionBar actionItems={actions} />}
-        <FramedBlockContainer>{children}</FramedBlockContainer>
+        <Box
+          sx={{
+            borderRadius: 4,
+            boxShadow: `${transparentize(
+              0.9,
+              theme.colors?.text as string,
+            )} 0 1px 3px 1px, ${transparentize(
+              0.9,
+              theme.colors?.text as string,
+            )} 0 0 0 1px`,
+          }}
+        >
+          {children}
+        </Box>
       </Collapsible>
       {!isOpen && <Divider />}
-    </SpacedBlockContainer>
+    </Box>
   );
 };