chore: accent color

ccontrols · May 30, 2020 · 804cc93 · 804cc93
1 parent 296c70e
commit 804cc93
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useState, useMemo } from 'react';
-import { jsx, Input, LinkProps } from 'theme-ui';
+import { jsx, Input, LinkProps, Box } from 'theme-ui';
 import { graphql, useStaticQuery, Link as GatsbyLink } from 'gatsby';
 import { Story } from '@component-controls/specification';
 import {
@@ -20,11 +20,11 @@ const Link: FC<LinkProps> = props => (
     sx={{
       color: 'inherit',
       '&.active': {
-        backgroundColor: 'highlight',
-        color: 'primary',
+        backgroundColor: 'accent',
+        color: 'white',
       },
       ':hover': {
-        backgroundColor: 'highlight',
+        backgroundColor: 'accent',
       },
     }}
   />
@@ -106,11 +106,13 @@ export const Sidebar: FC<SidebarProps> = ({ storyId }) => {
   return (
     <AppSidebar sx={{ px: 1, backgroundColor: 'sidebar' }} width={380}>
       {siteTitle}
-      <Input
-        placeholder="search stories..."
-        value={search}
-        onChange={e => setSearch(e.target.value)}
-      />
+      <Box sx={{ py: 2 }}>
+        <Input
+          placeholder="search stories..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+      </Box>
       <Navmenu
         buttonClass={Link}
         activeItem={{ id: storyId }}

diff --git a/ui/app-components/src/Navmenu/Navmenu.tsx b/ui/app-components/src/Navmenu/Navmenu.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { FC, useEffect, useState } from 'react';
 import { jsx, Box, Flex, Button, ButtonProps, LinkProps, Text } from 'theme-ui';
-import Octicon, { PlusSmall, Dash } from '@primer/octicons-react';
+import Octicon, { ChevronDown, ChevronUp } from '@primer/octicons-react';
 import {
   Keyboard,
   LEFT_ARROW,
@@ -264,7 +264,7 @@ export const Navmenu: FC<NavMenuProps> = props => {
         <ButtonClass
           sx={{
             width: '100%',
-            px: 2,
+            px: 3,
             py: 1,
             boxShadow: 'none',
             background: 'none',
@@ -285,19 +285,12 @@ export const Navmenu: FC<NavMenuProps> = props => {
               flexDirection: 'row',
               alignItems: 'center',
               position: 'relative',
-              ml: 1 + level,
+              ml: level,
               '& strong': {
                 color: 'text',
               },
             }}
           >
-            {items && (
-              <Octicon
-                sx={{ position: 'absolute', left: -14 }}
-                ariaLabel={isExpanded ? 'collapse items' : 'expand items'}
-                icon={isExpanded ? Dash : PlusSmall}
-              />
-            )}
             <Flex
               sx={{
                 flexDirection: 'row',
@@ -322,7 +315,14 @@ export const Navmenu: FC<NavMenuProps> = props => {
                 )}
               </Flex>
 
-              {widget && <Box sx={{ mr: 2 }}>{widget}</Box>}
+              {widget && <Box>{widget}</Box>}
+              {items && (
+                <Octicon
+                  sx={{ ml: 2 }}
+                  ariaLabel={isExpanded ? 'collapse items' : 'expand items'}
+                  icon={isExpanded ? ChevronUp : ChevronDown}
+                />
+              )}
             </Flex>
           </Flex>
         </ButtonClass>

diff --git a/ui/app-components/src/Sidebar/SidebarContext.tsx b/ui/app-components/src/Sidebar/SidebarContext.tsx
@@ -32,6 +32,13 @@ export const SidebarContextProvider: FC<SidebarContextProviderProps> = ({
       <Button
         aria-label={collapsed ? 'Expand side bar' : 'Collapse side bar'}
         onClick={() => setCollapsed(!collapsed)}
+        sx={{
+          background: 'none',
+          p: 2,
+          boxShadow: 'none',
+          cursor: 'pointer',
+          color: 'text',
+        }}
         {...rest}
       >
         {icon || <Octicon icon={ThreeBars} />}

diff --git a/ui/components/src/Tabs/Tabs.tsx b/ui/components/src/Tabs/Tabs.tsx
@@ -52,8 +52,8 @@ const TabsContainer = styled.div`
       color: ${theme?.colors?.fadedText};
     }
     .react-tabs__tab--selected {
-      border-bottom: 2px solid ${theme?.colors?.selected};
-      color: ${theme?.colors?.selected};
+      border-bottom: 3px solid ${theme?.colors?.accent};
+      color: ${theme?.colors?.accent};
     }
     .react-tabs__tab--disabled {
       color: GrayText;