fix: sidebar theming

ccontrols · May 30, 2020 · 692acb4 · 692acb4
1 parent cb2cdbe
commit 692acb4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx
@@ -104,7 +104,7 @@ export const Sidebar: FC<SidebarProps> = ({ storyId }) => {
 
   const [search, setSearch] = useState<string | undefined>(undefined);
   return (
-    <AppSidebar sx={{ px: 1, backgroundColor: 'gray' }} width={380}>
+    <AppSidebar sx={{ px: 1, backgroundColor: 'sidebar' }} width={380}>
       {siteTitle}
       <Input
         placeholder="search stories..."

diff --git a/plugins/axe-plugin/src/components/NodesTable.tsx b/plugins/axe-plugin/src/components/NodesTable.tsx
@@ -107,7 +107,7 @@ export const NodesTable: FC<NodesTableProps> = ({
   return (
     <Box
       sx={{
-        backgroundColor: 'gray',
+        backgroundColor: 'shadow',
       }}
     >
       <Table

diff --git a/ui/app-components/src/Sidebar/Sidebar.tsx b/ui/app-components/src/Sidebar/Sidebar.tsx
@@ -47,7 +47,12 @@ export const Sidebar: FC<SidebarProps & BoxProps> = ({
   const isCollapsed =
     (collapsible && size <= 1 && collapsed === undefined) || collapsed === true;
   return (
-    <Collapsible isOpen={!isCollapsed} easing="ease-in-out" {...animate}>
+    <Collapsible
+      css={{ display: 'flex', alignItems: 'stretch' }}
+      isOpen={!isCollapsed}
+      easing="ease-in-out"
+      {...animate}
+    >
       <Box
         sx={{ overflowY: 'auto', height: '100%', overflowX: 'hidden', width }}
         {...rest}

diff --git a/ui/components/src/ThemeContext/ThemeContext.tsx b/ui/components/src/ThemeContext/ThemeContext.tsx
@@ -105,6 +105,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         colors: {
           ...polaris.colors,
           gray: '#f6f6f6',
+          sidebar: '#f6f6f6',
           header: '#edebe8',
           highlight: '#d9f2f1',
           action: '#3B817D',
@@ -115,6 +116,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
             dark: {
               ...(defTheme.colors.modes ? defTheme.colors.modes.dark : {}),
               background: '#38404a',
+              sidebar: '#000',
               text: '#d3d4db',
               header: '#111111',
               fadedText: '#c9cacf',
-Original file line number
+Diff line change
@@ Expand Up / @@ -107,7 +107,7 @@ export const NodesTable: FC<NodesTableProps> = ({ @@
       return (
         <Box
           sx={{
-            backgroundColor: 'gray',
+            backgroundColor: 'shadow',
           }}
         >
           <Table
@@ Expand Down @@