feat(lsg): new styling for pattern pane

src/component/container/pattern_list.tsx

@@ -58,7 +58,7 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 		return (
 			<div>
 				<Space sizeBottom={Size.L}>
-					<Input handleChange={this.handleSearchInputChange} placeholder="Search" />
+					<Input handleChange={this.handleSearchInputChange} placeholder="Search patterns" />
 				</Space>
 				<Space sizeBottom={Size.L}>{list}</Space>
 			</div>

src/lsg/patterns/icons/index.tsx

@@ -21,8 +21,8 @@ export interface IconProps {
 
 export enum Size {
 	XXS = 12,
-	XS = 24,
-	S = 38
+	XS = 18,
+	S = 24
 }
 
 interface StyledIconProps {

src/lsg/patterns/input/index.tsx

@@ -1,4 +1,5 @@
 import { colors } from '../colors';
+import { getSpace, Size } from '../space';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -21,26 +22,33 @@ const StyledInput = styled.input`
 	/* reset Styles */
 	-webkit-appearance:textfield;
 	outline: none;
+	border: none;
+	background: transparent;
+
+	margin: 0 ${getSpace(Size.L)}px;
+	font-size: 15px;
 
 	box-sizing: border-box;
 	display: block;
-	width: 100%;
-	padding: 8px 11px;
-  	border: 1px solid ${colors.grey90.toString()};
-	color: ${colors.grey60.toString()};
-	:focus {
-		box-shadow: 0 0 10px ${colors.blue40.toRGBString(0.5)};
-		padding: 8px 11px;
-		border: 1px solid ${colors.blue40.toString()};
-	}
+	width: calc(100% - ${getSpace(Size.M)*2}px);
+	color: ${colors.black.toString()};
+
+	font-weight: 500;
+	transition: color 0.2s;
 
 	::placeholder {
-		color: ${colors.grey90.toString()};
+		color: ${colors.grey50.toString()};
+	}
+
+	:hover {
+		::placeholder {
+			color: ${colors.black.toString()};
+		}
 	}
 
 	::-webkit-search-decoration {
 			display:none;
-		}
+	}
 `;
 
 const Input: React.StatelessComponent<InputProps> = props => (

src/lsg/patterns/panes/patterns-pane/index.tsx

@@ -8,9 +8,11 @@ const StyledPatternsPane = styled.div`
 	flex-grow: 2;
 	flex-shrink: 0;
 	flex-basis: 40%;
-	padding: ${getSpace(Size.L)}px 0;
-	border-top: 2px solid ${colors.grey60.toString()};
+	padding: ${getSpace(Size.M)}px 0;
+	border-top: 1px solid ${colors.grey80.toString()};
 	overflow: scroll;
+	margin-left: -${getSpace(Size.L)}px;
+	margin-right: -${getSpace(Size.L)}px;
 `;
 
 const PatternsPane: React.StatelessComponent<{}> = props => <StyledPatternsPane>{props.children}</StyledPatternsPane>;

src/lsg/patterns/pattern-list/index.tsx

@@ -17,36 +17,68 @@ const StyledPatternList = styled.ul`
 	display: block;
 	padding: 0;
 	margin: 0;
+
+	> div {
+		display: flex;
+		flex-wrap: wrap;
+	}
 `;
 
 const StyledPatternLabel = styled.div`
 	margin-bottom: ${getSpace(Size.S)}px;
+	margin-top: ${getSpace(Size.L)}px;
+	margin-left: ${getSpace(Size.L)}px;
 	color: ${colors.grey60.toString()};
+	text-transform: capitalize;
 `;
 
 const StyledPatternListItem = styled.li`
-	display: flex;
-	align-items: center;
+	display: block;
 	padding: ${getSpace(Size.S)}px;
-	border: 1px solid ${colors.grey90.toString()};
-	margin: 0 0 ${getSpace(Size.S)}px 0;
+	margin: 0 0 ${getSpace(Size.XS)}px 0;
 	border-radius: 3px;
 	background: ${colors.white.toString()};
 	font-family: ${fonts().NORMAL_FONT};
 	font-size: 12px;
 	color: ${colors.black.toString()};
+	width: calc(50% - ${getSpace(Size.XS)/2}px - ${getSpace(Size.L)}px);
+	box-sizing: border-box;
+	text-align: center;
+
+	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);
+	margin-left: ${getSpace(Size.L)}px;
+	transition: box-shadow 0.2s;
+
+	&:nth-of-type(2n) {
+		margin-left: ${getSpace(Size.XS)}px;
+		margin-right: ${getSpace(Size.L)}px;
+	}
+
+	&:hover {
+		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
+	}
 
 	${(props: PatternListItemProps) =>
 		props.draggable ? 'cursor: move;' : props.onClick ? 'cursor: pointer;' : ''};
 `;
 
 const StyledSVG = styled.svg`
 	margin-right: ${getSpace(Size.L)}px;
-	fill: ${colors.grey60.toString()};
+	fill: ${colors.grey50.toString()};
 `;
 
 const StyledIcon = styled(Icon)`
-	margin-right: ${getSpace(Size.L)}px;
+	margin: 0 auto;
+	display: block;
+	margin-bottom: ${getSpace(Size.XS)}px;
+`;
+
+const StyledPatternListItemLabel = styled.div`
+	text-align: center;
+	width: 100%;
+	display: block;
+	text-transform: capitalize;
+	color: ${colors.grey36.toString()};
 `;
 
 export const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => {
@@ -63,7 +95,7 @@ export const PatternListItem: React.StatelessComponent<PatternListItemProps> = p
 					color={colors.grey60}
 				/>
 			)}
-			{props.children}
+			<StyledPatternListItemLabel>{props.children}</StyledPatternListItemLabel>
 		</StyledPatternListItem>
 	);
 };