Merge pull request #20 from qoretechnologies/bugfix/sidebar-theme-fixes

Color fixes
qoretechnologies · Jan 12, 2021 · 75522bc · 75522bc
2 parents 59e46e3 + 20454a6
commit 75522bc
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.1.44",
+  "version": "0.1.45",
   "description": "ReQore is a UI library of components for Qorus connected apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -62,9 +62,10 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       undefined,
       true
     )};
+  background-color: ${({ theme }) => theme.sidebar?.main || theme.main};
   border-right: 1px solid
     ${({ theme }) =>
-      theme.sidebar?.border || darken(0.09, getMainColor(theme, 'sidebar'))};
+      theme.sidebar?.border || darken(0.1, getMainColor(theme, 'sidebar'))};
 
   // Custom scrollbar
   .sidebarScroll {
@@ -142,25 +143,42 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
     .sidebarItem.active {
       color: ${({ theme }) =>
         theme.sidebar?.item?.activeColor ||
+        theme.sidebar?.item?.color ||
         getReadableColor(getMainColor(theme, 'sidebar'), undefined, undefined)};
+
       background-color: ${({ theme }) =>
         theme.sidebar?.item?.activeBackground ||
+        theme.sidebar?.item?.background ||
         darken(0.08, getMainColor(theme, 'sidebar'))};
+
       span.bp3-icon:not(.favorite) {
-        color: ${({ theme }) => theme.sidebar?.item?.activeColor || 'inherit'};
+        color: ${({ theme }) =>
+          theme.sidebar?.icon?.activeColor ||
+          theme.sidebar?.icon?.color ||
+          theme.sidebar?.item?.activeColor ||
+          theme.sidebar?.item?.color ||
+          'inherit'};
       }
     }
 
     .sidebarSubItem.active {
       color: ${({ theme }) =>
         theme.sidebar?.subItem?.activeColor ||
+        theme.sidebar?.subItem?.color ||
         getReadableColor(getMainColor(theme, 'sidebar'), undefined, undefined)};
       background-color: ${({ theme }) =>
         theme.sidebar?.subItem?.activeBackground ||
+        theme.sidebar?.subItem?.background ||
         darken(0.1, getMainColor(theme, 'sidebar'))};
       span.bp3-icon:not(.favorite) {
         color: ${({ theme }) =>
-          theme.sidebar?.subItem?.activeColor || 'inherit'};
+          theme.sidebar?.icon?.activeColor ||
+          theme.sidebar?.icon?.color ||
+          theme.sidebar?.subItem?.activeColor ||
+          theme.sidebar?.subItem?.color ||
+          theme.sidebar?.item?.activeColor ||
+          theme.sidebar?.item?.color ||
+          'inherit'};
       }
     }
 
@@ -191,13 +209,22 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       }
 
       &:hover {
-        color: ${({ theme }) => theme.sidebar?.item?.hoverColor || 'inherit'};
+        color: ${({ theme }) =>
+          theme.sidebar?.item?.hoverColor ||
+          theme.sidebar?.item?.color ||
+          'inherit'};
         background-color: ${({ theme }) =>
           theme.sidebar?.item?.hoverBackground ||
+          theme.sidebar?.item?.background ||
           darken(0.03, getMainColor(theme, 'sidebar'))};
 
         span.bp3-icon:not(.favorite) {
-          color: ${({ theme }) => theme.sidebar?.item?.hoverColor || 'inherit'};
+          color: ${({ theme }) =>
+            theme.sidebar?.icon?.hoverColor ||
+            theme.sidebar?.icon?.color ||
+            theme.sidebar?.item?.hoverColor ||
+            theme.sidebar?.item?.color ||
+            'inherit'};
         }
       }
     }
@@ -226,14 +253,21 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
 
       &:hover {
         color: ${({ theme }) =>
-          theme.sidebar?.subItem?.hoverColor || 'inherit'};
+          theme.sidebar?.subItem?.hoverColor ||
+          theme.sidebar?.subItem?.color ||
+          'inherit'};
         background-color: ${({ theme }) =>
           theme.sidebar?.subItem?.hoverBackground ||
+          theme.sidebar?.subItem?.background ||
           darken(0.08, getMainColor(theme, 'sidebar'))};
 
         span.bp3-icon:not(.favorite) {
           color: ${({ theme }) =>
-            theme.sidebar?.subItem?.hoverColor || 'inherit'};
+            theme.sidebar?.icon?.hoverColor ||
+            theme.sidebar?.icon?.color ||
+            theme.sidebar?.subItem?.hoverColor ||
+            theme.sidebar?.subItem?.color ||
+            'inherit'};
         }
       }
     }
@@ -262,7 +296,7 @@ const StyledDivider = styled.div<{ theme?: any }>`
 
   background-color: ${({ theme }) =>
     theme.sidebar?.section?.background ||
-    darken(0.09, getMainColor(theme, 'sidebar'))};
+    darken(0.15, getMainColor(theme, 'sidebar'))};
   color: inherit;
 `;
 

diff --git a/src/constants/theme.ts b/src/constants/theme.ts
@@ -24,6 +24,8 @@ export interface IReqoreTheme {
     };
     icon?: {
       color?: string;
+      hoverColor?: string;
+      activeColor?: string;
     };
     section?: {
       background?: string;

diff --git a/src/stories/Sidebar/Sidebar.stories.tsx b/src/stories/Sidebar/Sidebar.stories.tsx
@@ -91,26 +91,7 @@ export const WithCustomColors = Template.bind({});
 WithCustomColors.args = {
   theme: {
     main: '#fff',
-    sidebar: {
-      main: '#fff',
-      icon: {
-        color: '#8227a3',
-      },
-      item: {
-        color: '#8227a3',
-        hoverBackground: '#8227a3',
-        hoverColor: '#fff',
-        activeBackground: '#9751b0',
-        activeColor: '#fff',
-      },
-      subItem: {
-        color: '#8227a3',
-        hoverBackground: '#8227a3',
-        hoverColor: '#fff',
-        activeBackground: '#9751b0',
-        activeColor: '#fff',
-      },
-    },
+    sidebar: { icon: { color: '#115e68' } },
   },
   path: '/item-3/item-2',
 } as IReqoreUIProviderProps & IQorusSidebarProps;