feat(lsg): add arrows to element list

src/component/app.tsx

@@ -35,7 +35,7 @@ const PatternsPane = styledComponents.div`
     overflow: scroll;
     border-top: 2px solid ${colors.grey70.toString()};
     box-sizing: border-box;
-	 padding: 18px 0;
+    padding: 18px 0;
 `;
 
 const ProjectPane = styledComponents.div`

src/lsg/patterns/element/index.tsx

@@ -44,12 +44,14 @@ const StyledElement = styled.div`
 const StyledElementLabel = styled.div`
 	position: relative;
 	display: flex;
-	min-height: 20px;
-	padding: 0 ${getSpace(Size.L)}px;
+	padding: 9px ${getSpace(Size.L)}px;
 	border-radius: 3px;
 	cursor: pointer;
 	align-items: center;
-	color: ${colors.black.toString()};
+	color: ${colors.black.toString()};    
+    position: relative;
+    z-index: 10;
+    
 	${(props: StyledElementLabelProps) =>
 		props.active
 			? `
@@ -66,7 +68,11 @@ const StyledElementLabel = styled.div`
 `;
 
 const StyledPlaceholder = styled.div`
-	height: 10px;
+	position: relative;
+    z-index: 15;
+    height: 10px;
+    margin-top: -5px;
+    margin-bottom: -5px;
 	border-radius: 3px;
 	${(props: StyledPlaceholder) =>
 		props.highlightPlaceholder
@@ -78,14 +84,16 @@ const StyledPlaceholder = styled.div`
 
 const StyledElementChild = styled.div`
 	flex-basis: 100%;
-	padding-left: ${getSpace(Size.S)}px;
+	padding-left: ${getSpace(Size.L)}px;
 	${(props: StyledElementChildProps) => (props.open ? 'display: block;' : 'display: none;')};
 `;
 
 const StyledIcon = styled(Icon)`
 	position: absolute;
-	left: ${getSpace(Size.L) / 2}px;
-	fill: ${colors.grey70.toString()};
+	left: ${getSpace(Size.XS)}px;
+	fill: ${colors.grey36.toString()};
+    width: 12px;
+    height: 12px;
 `;
 
 const Element: React.StatelessComponent<ElementProps> = props => {
@@ -131,7 +139,7 @@ const Element: React.StatelessComponent<ElementProps> = props => {
 				{children && (
 					<StyledIcon
 						handleClick={handleIconClick}
-						name={IconName.Robo}
+						name={IconName.ArrowFill}
 						size={IconSize.XXS}
 						color={colors.grey70}
 					/>

src/lsg/patterns/icons/index.tsx

@@ -3,7 +3,9 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 export enum IconName {
-	Robo
+	Arrow,
+    ArrowFill,
+    Robo
 }
 export interface IconRegistryProps {
 	names: typeof IconName;
@@ -34,7 +36,13 @@ interface IconRegistrySymbolProps {
 }
 
 const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
-	[IconName.Robo]: [
+	[IconName.Arrow]: [
+		[<path key="arrow" d="M17.5 12l-8.486 8.485L7.6 19.071 14.671 12 7.6 4.929l1.414-1.414z" />]
+	],
+    [IconName.ArrowFill]: [
+		[<path key="arrowFill" d="M8 4l8 8-8 8z" />]
+	],
+    [IconName.Robo]: [
 		[<path key="robo" d="M0 0h24v24H0V0zm15 5v5h5V5h-5zM4 20h16v-1H4v1zM4 5v5h5V5H4z" />]
 	]
 };

src/lsg/patterns/space/index.tsx

@@ -22,6 +22,7 @@ export enum Size {
 	// Explicity set enum values to indicate that they will be used later on as
 	// array indicies.
 	None = 0,
+    XXS  = 3,
 	XS   = 6,
 	S    = 12,
 	M    = 15,