fix: search-box use theme

Redocly · Dec 13, 2019 · 1bf490c · 1bf490c
1 parent eaaa99d
commit 1bf490c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/components/SearchBox/styled.elements.tsx b/src/components/SearchBox/styled.elements.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { darken } from 'polished';
+import { darken, getLuminance, lighten } from 'polished';
 import styled from '../../styled-components';
 import { MenuItemLabel } from '../SideMenu/styled.elements';
 
@@ -17,7 +17,12 @@ export const SearchInput = styled.input.attrs(() => ({
   padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
     ${props => props.theme.spacing.unit * 4}px;
   border: 0;
-  border-bottom: 1px solid ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
+  border-bottom: 1px solid
+    ${({ theme }) =>
+      (getLuminance(theme.menu.backgroundColor) > 0.5 ? darken : lighten)(
+        0.1,
+        theme.menu.backgroundColor,
+      )};
   font-family: ${({ theme }) => theme.typography.fontFamily};
   font-weight: bold;
   font-size: 13px;
@@ -52,11 +57,12 @@ export const SearchIcon = styled((props: { className?: string }) => (
 
 export const SearchResultsBox = styled.div`
   padding: ${props => props.theme.spacing.unit}px 0;
-  background-color: #ededed;
+  background-color: ${({ theme }) => darken(0.05, theme.menu.backgroundColor)}};
+  color: ${props => props.theme.menu.textColor};
   min-height: 150px;
   max-height: 250px;
-  border-top: 1px solid #e1e1e1;
-  border-bottom: 1px solid #e1e1e1;
+  border-top: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
+  border-bottom: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
   margin-top: 10px;
   line-height: 1.4;
   font-size: 0.9em;
@@ -65,17 +71,14 @@ export const SearchResultsBox = styled.div`
     padding-top: 6px;
     padding-bottom: 6px;
 
-    &:hover {
-      background-color: #e1e1e1;
+    &:hover,
+    &.active {
+      background-color: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
     }
 
     > svg {
       display: none;
     }
-
-    &.active {
-      background-color: #e1e1e1;
-    }
   }
 `;
 

diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
@@ -104,7 +104,7 @@ export const menuItemDepth = {
     font-size: 0.929em;
     text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
     &:hover {
-      color: ${props => props.theme.colors.primary.main};
+      color: ${props => props.theme.menu.activeTextColor};
     }
   `,
   2: css`
@@ -126,7 +126,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
   }),
 }))<MenuItemLabelType>`
   cursor: pointer;
-  color: ${props => (props.active ? props.theme.colors.primary.main : props.theme.menu.textColor)};
+  color: ${props => (props.active ? props.theme.menu.activeTextColor : props.theme.menu.textColor)};
   margin: 0;
   padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
   ${({ depth, type, theme }) =>

diff --git a/src/theme.ts b/src/theme.ts
@@ -126,6 +126,10 @@ const defaultTheme: ThemeInterface = {
     width: '260px',
     backgroundColor: '#fafafa',
     textColor: '#333333',
+    activeTextColor: theme =>
+      theme.menu.textColor !== defaultTheme.menu!.textColor
+        ? theme.menu.textColor
+        : theme.colors.primary.main,
     groupItems: {
       textTransform: 'uppercase',
     },
@@ -296,6 +300,7 @@ export interface ResolvedThemeInterface {
     width: string;
     backgroundColor: string;
     textColor: string;
+    activeTextColor: string;
     groupItems: {
       textTransform: string;
     };