Modified few sidebar colors (too dark).

qoretechnologies · Jan 14, 2021 · a30c259 · a30c259
1 parent 34affd4
commit a30c259
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 38 deletions.
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -150,7 +150,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       background-color: ${({ theme }) =>
         theme.sidebar?.item?.activeBackground ||
         theme.sidebar?.item?.background ||
-        darken(0.08, getMainColor(theme, 'sidebar'))};
+        darken(0.06, getMainColor(theme, 'sidebar'))};
 
       span.bp3-icon:not(.favorite) {
         color: ${({ theme }) =>
@@ -170,7 +170,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       background-color: ${({ theme }) =>
         theme.sidebar?.subItem?.activeBackground ||
         theme.sidebar?.subItem?.background ||
-        darken(0.1, getMainColor(theme, 'sidebar'))};
+        darken(0.08, getMainColor(theme, 'sidebar'))};
       span.bp3-icon:not(.favorite) {
         color: ${({ theme }) =>
           theme.sidebar?.icon?.activeColor ||
@@ -206,7 +206,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
         border-top: 1px solid
           ${({ theme }) =>
             theme.sidebar?.item?.border ||
-            darken(0.05, getMainColor(theme, 'sidebar'))};
+            darken(0.04, getMainColor(theme, 'sidebar'))};
       }
 
       &:hover {
@@ -234,7 +234,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
       border-left: 5px solid
         ${({ theme }) =>
           theme.sidebar?.subItem?.border ||
-          darken(0.08, getMainColor(theme, 'sidebar'))};
+          darken(0.05, getMainColor(theme, 'sidebar'))};
     }
 
     .sidebarSubItem,
@@ -243,7 +243,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
 
       background-color: ${({ theme }) =>
         theme.sidebar?.subItem?.background ||
-        darken(0.05, getMainColor(theme, 'sidebar'))};
+        darken(0.04, getMainColor(theme, 'sidebar'))};
 
       &:not(:first-child) {
         border-top: 1px solid
@@ -260,7 +260,7 @@ const StyledSidebar = styled.div<{ expanded?: boolean; theme: IReqoreTheme }>`
         background-color: ${({ theme }) =>
           theme.sidebar?.subItem?.hoverBackground ||
           theme.sidebar?.subItem?.background ||
-          darken(0.08, getMainColor(theme, 'sidebar'))};
+          darken(0.06, getMainColor(theme, 'sidebar'))};
 
         span.bp3-icon:not(.favorite) {
           color: ${({ theme }) =>
@@ -293,16 +293,13 @@ const StyledDivider = styled.div<{ theme?: any }>`
   display: flex;
   justify-content: center;
   align-items: center;
-
-  &:first-child {
-    letter-spacing: 1.5px;
-    margin-top: 0;
-    padding: 0.5px;
-  }
+  letter-spacing: 1.5px;
+  margin-top: 0;
+  padding: 0.5px;
 
   background-color: ${({ theme }) =>
     theme.sidebar?.section?.background ||
-    darken(0.15, getMainColor(theme, 'sidebar'))};
+    darken(0.04, getMainColor(theme, 'sidebar'))};
   color: inherit;
 `;
 
@@ -365,36 +362,37 @@ const QorusSidebar: React.FC<IQorusSidebarProps> = ({
         <Scroll horizontal={false} className='sidebarScroll'>
           {map(menu, ({ title, items }, sectionId: string) =>
             size(items) ? (
-              <div
-                className='sidebarSection'
-                key={sectionId}
-                role='qorus-sidebar-section-title'
-              >
+              <>
                 <StyledDivider>
                   {!_isCollapsed ? title || '' : ''}
                 </StyledDivider>
-                {map(items, (itemData, key) => (
-                  <SidebarItem
-                    itemData={itemData}
-                    key={key}
-                    isCollapsed={_isCollapsed}
-                    expandedSection={expandedSection}
-                    onSectionToggle={handleSectionToggle}
-                    bookmarks={bookmarks}
-                    currentPath={path}
-                    onFavoriteClick={handleFavoriteClick}
-                    onUnfavoriteClick={handleUnfavoriteClick}
-                    sectionName={sectionId}
-                    hasFavorites={!!onBookmarksChange}
-                  />
-                ))}
-              </div>
+                <div
+                  className='sidebarSection'
+                  key={sectionId}
+                  role='qorus-sidebar-section-title'
+                >
+                  {map(items, (itemData, key) => (
+                    <SidebarItem
+                      itemData={itemData}
+                      key={key}
+                      isCollapsed={_isCollapsed}
+                      expandedSection={expandedSection}
+                      onSectionToggle={handleSectionToggle}
+                      bookmarks={bookmarks}
+                      currentPath={path}
+                      onFavoriteClick={handleFavoriteClick}
+                      onUnfavoriteClick={handleUnfavoriteClick}
+                      sectionName={sectionId}
+                      hasFavorites={!!onBookmarksChange}
+                    />
+                  ))}
+                </div>
+              </>
             ) : null
           )}
         </Scroll>
+        <StyledDivider />
         <div className='sidebarSection' id='menuCollapse'>
-          <StyledDivider />
-
           <div
             role='qorus-sidebar-collapse-button'
             className='sidebarItem'

diff --git a/src/stories/Sidebar/Sidebar.stories.tsx b/src/stories/Sidebar/Sidebar.stories.tsx
@@ -90,8 +90,7 @@ export const WithCustomColors = Template.bind({});
 
 WithCustomColors.args = {
   theme: {
-    main: '#fff',
-    sidebar: { icon: { color: '#115e68' } },
+    main: '#115e68',
   },
   path: '/item-3/item-2',
 } as IReqoreUIProviderProps & IQorusSidebarProps;