diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js index 45300451e697cb164e80fca2b0627ea4b6fcf630..a8978fdc4f7ef906c998ea0269035c45d2933162 100644 --- a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js +++ b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js @@ -15,20 +15,20 @@ import CheckBox from '../../ui/inputs/CheckBox'; import helpers from './helpers'; const Wrapper = styled.div` - font-size: 15px; - width: 400px; - height: 300px; background: #fff; - font-family: ${th('fontTools')}; box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px, rgba(9, 30, 66, 0.31) 0px 0px 1px 0px; - transform-origin: 50% 50% 0px; + font-family: ${th('fontTools')}; + font-size: 15px; + height: 300px; padding: ${grid(2)}; + transform-origin: 50% 50% 0px; + width: 400px; `; const FindTitle = styled.span` - font-size: 16px; color: #4b5871; + font-size: 16px; `; const TitleContainer = styled.div` @@ -37,9 +37,9 @@ const TitleContainer = styled.div` `; const InputLabel = styled.div` - padding: ${grid(2)} ${grid(0)} ${grid(2)} ${grid(0)}; - font-size: 16px; color: #4b5871; + font-size: 16px; + padding: ${grid(2)} ${grid(0)} ${grid(2)} ${grid(0)}; `; const SearchInputWrapper = styled.div` @@ -50,18 +50,18 @@ const SearchInputWrapper = styled.div` `; const CounterInput = styled.span` + font-size: 12px; position: absolute; right: 14px; + -webkit-text-fill-color: rgba(27, 43, 75, 0.28); top: 72px; z-index: 1; - font-size: 12px; - -webkit-text-fill-color: rgba(27, 43, 75, 0.28); `; const StyledIcon = styled(Icon)` + cursor: pointer; height: 24px; width: 24px; - cursor: pointer; `; const CloseWrapper = styled.div` @@ -69,16 +69,17 @@ const CloseWrapper = styled.div` `; const FindReplaceInput = styled.input` + border: none; + box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28); font-size: 15px; font-weight: 400; - border-radius: 2px; - border: none; padding: ${grid(1)}; width: 98%; - box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28); + ::placeholder { color: #d8dae0; } + &:focus { outline: none; } @@ -96,22 +97,22 @@ const ControlContainer = styled.div` const ButtonReplace = styled.button` background: ${th('colorBackgroundButton')}; - margin-right: 20px; border: 1px solid ${th('colorBackgroundButton')}; color: white; - width: 100px; - height: 42px; cursor: pointer; + height: 42px; + margin-right: 20px; + width: 100px; `; const ButtonReplaceAll = styled.button` background: white; border: 1px solid ${th('colorBackgroundButton')}; - margin-right: 10px; color: ${th('colorBackgroundButton')}; - width: 100px; - height: 42px; cursor: pointer; + height: 42px; + margin-right: 10px; + width: 100px; `; const PreviousNextContainer = styled.div` @@ -210,11 +211,11 @@ const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => { }; const findNext = () => { - console.log('next'); + // console.log('next'); }; const findPrevious = () => { - console.log('previous'); + // console.log('previous'); }; return ( @@ -229,23 +230,23 @@ const ExandedFindAndReplaceComponent = ({ close, nonExpandedText }) => { <SearchInputWrapper> <FindReplaceInput - type="text" - ref={searchRef} + onChange={onChangeSearchInput} placeholder="Something is this doc" + ref={searchRef} + type="text" value={searchValue} - onChange={onChangeSearchInput} /> <CounterInput> {counterText} </CounterInput> </SearchInputWrapper> <InputLabel>Replace with</InputLabel> <FindReplaceInput - type="text" - ref={replaceRef} - placeholder="Replace text" onChange={onChangeReplaceInput} + placeholder="Replace text" + ref={replaceRef} + type="text" /> <CheckBoxWrapper> - <CheckBox name="case-sensitive" label="Case Sensitive" /> + <CheckBox label="Case Sensitive" name="case-sensitive" /> </CheckBoxWrapper> <ControlContainer> <ButtonReplace onClick={replace}>Replace</ButtonReplace>