Web:Components:InputBlock: add support dark-theme

packages/asc-web-components/input-block/index.js

@@ -56,7 +56,6 @@ class InputBlock extends React.Component {
       isIconFill,
       onIconClick,
       iconSize,
-      theme,
     } = this.props;
 
     if (typeof iconSize == "number" && iconSize > 0) {
@@ -87,10 +86,11 @@ class InputBlock extends React.Component {
         size={size}
         className={className}
         style={style}
-        theme={theme}
+        color={iconColor}
+        hoverColor={hoverColor}
       >
         <div className="prepend">
-          <StyledChildrenBlock className="prepend-children" theme={theme}>
+          <StyledChildrenBlock className="prepend-children">
             {children}
           </StyledChildrenBlock>
         </div>
@@ -129,13 +129,10 @@ class InputBlock extends React.Component {
             >
               <IconButton
                 size={iconButtonSize}
-                color={iconColor}
-                hoverColor={hoverColor}
                 iconName={iconName}
                 isFill={isIconFill}
                 isDisabled={isDisabled}
                 isClickable={typeof onIconClick === "function"}
-                theme={theme}
               />
             </StyledIconBlock>
           </div>
@@ -220,8 +217,6 @@ InputBlock.defaultProps = {
 
   value: "",
   iconName: "",
-  iconColor: "#ffffff",
-  hoverColor: "#ffffff",
   isIconFill: false,
   isDisabled: false,
   keepCharPositions: false,

packages/asc-web-components/input-block/input-block.stories.js

@@ -40,7 +40,6 @@ const Template = ({ optionsMultiSelect, onChange, ...args }) => {
               size={16}
               color=""
               key={i}
-              color="#d0d5da"
               iconName="static/images/settings.react.svg"
             />
           );
@@ -82,6 +81,5 @@ Default.args = {
   mask: null,
   isDisabled: false,
   iconName: "static/images/search.react.svg",
-  iconColor: "#D0D5DA",
   isIconFill: false,
 };

packages/asc-web-components/input-block/styled-input-block.js

@@ -50,6 +50,26 @@ const StyledInputGroup = styled(CustomInputGroup)`
   ${commonInputStyle} :focus-within {
     border-color: ${(props) => props.theme.inputBlock.borderColor};
   }
+
+  svg {
+    path {
+      fill: ${(props) =>
+        props.color
+          ? props.color
+          : props.theme.inputBlock.iconColor} !important;
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        fill: ${(props) =>
+          props.hoverColor
+            ? props.hoverColor
+            : props.theme.inputBlock.hoverIconColor} !important;
+      }
+    }
+  }
 `;
 StyledInputGroup.defaultProps = { theme: Base };
 

packages/asc-web-components/search-input/index.js

@@ -130,8 +130,6 @@ SearchInput.propTypes = {
   children: PropTypes.any,
   /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  iconColor: PropTypes.string,
-  hoverIconColor: PropTypes.string,
 };
 
 SearchInput.defaultProps = {

packages/asc-web-components/themes/base.js

@@ -720,6 +720,9 @@ const Base = {
     margin: "0",
 
     borderColor: blueMain,
+
+    iconColor: "#D0D5DA",
+    hoverIconColor: "#D0D5DA",
   },
 
   textArea: {

packages/asc-web-components/themes/dark.js

@@ -719,6 +719,9 @@ const Dark = {
     margin: "0",
 
     borderColor: "#eeeeee",
+
+    iconColor: "#646464",
+    hoverIconColor: "#858585",
   },
 
   textArea: {