diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index ea644724c..0e48fdd89 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -20,6 +20,7 @@ export interface SearchProps { const StyledContainer = styled.div` position: relative; + padding: 0 ${getSpace(SpaceSize.M)}px; `; const StyledSearch = styled.input` @@ -61,8 +62,8 @@ const StyledSearch = styled.input` const StyledIcon = styled(Icon.Search)` position: absolute; - left: 0; - top: ${getSpace(SpaceSize.M) - 1}px; // fix to propertly align icon + left: ${getSpace(SpaceSize.M)}px; + top: ${getSpace(SpaceSize.M) - 1}px; /* fix to propertly align icon */ pointer-events: none; `; diff --git a/src/container/pattern-list/pattern-list-container.tsx b/src/container/pattern-list/pattern-list-container.tsx index 851c50cfc..68b4bd326 100644 --- a/src/container/pattern-list/pattern-list-container.tsx +++ b/src/container/pattern-list/pattern-list-container.tsx @@ -4,6 +4,7 @@ import * as MobxReact from 'mobx-react'; import * as Model from '../../model'; import { PatternItemContainer } from './pattern-item-container'; import * as React from 'react'; +import styled from 'styled-components'; import * as Types from '../../types'; import { ViewStore } from '../../store'; @@ -31,27 +32,39 @@ export class PatternListContainer extends React.Component { const searchResult = project.getPatternSearch().query(store.getPatternSearchTerm()); return ( -
this.handleDragStart(e)}> - - store.setPatternSearchTerm(e.target.value)} - value={store.getPatternSearchTerm()} - /> - - {store - .getPatternLibraries() - .map(library => ( - +
+ + store.setPatternSearchTerm(e.target.value)} + value={store.getPatternSearchTerm()} /> - ))} - (this.dragImg = ref)} - /> + +
+
this.handleDragStart(e)} style={{}}> + {store + .getPatternLibraries() + .map(library => ( + + ))} + (this.dragImg = ref)} + /> +
); }