fix: block expand styling

ccontrols · Jun 20, 2020 · fe1f105 · fe1f105
1 parent ff79712
commit fe1f105
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { FC } from 'react';
-import { jsx, Flex, Link, Divider, Box, SxStyleProp } from 'theme-ui';
+import { jsx, Flex, Link, Divider, Box, SxStyleProp, Text } from 'theme-ui';
 import Octicon, {
   LinkIcon,
   ChevronRightIcon,
@@ -86,12 +86,11 @@ export const BlockContainer: FC<BlockContainerProps> = ({
               }}
               onClick={() => setIsOpen(!isOpen)}
             >
-              <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Flex variant="blockcontainer.titleblock">
                 <BlockTitle />
-                <Octicon
-                  sx={{ ml: 2 }}
-                  icon={isOpen ? ChevronDownIcon : ChevronRightIcon}
-                />
+                <Text variant="blockcontainer.expandicon">
+                  <Octicon icon={isOpen ? ChevronDownIcon : ChevronRightIcon} />
+                </Text>
               </Flex>
             </Link>
           )}

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -64,7 +64,7 @@ export const theme: ControlsTheme = {
     shadow: 'rgba(0, 0, 0, 0.1)',
     modes: {
       dark: {
-        primary: '#9c6ade',
+        primary: '#d5c0f1',
         secondary: '#b4e1fa',
         highlight: '#b7ecec',
         muted: '#e6e6e6',
@@ -294,6 +294,8 @@ export const theme: ControlsTheme = {
         visibility: 'visible',
       },
     },
+    titleblock: { flexDirection: 'row', alignItems: 'center' },
+    expandicon: { ml: 2, pb: 2 },
   },
   blockpagecontainer: {
     container: {},