feat(lsg): add styling to property enum and add spacing to property i…

…tems
meetalva · Dec 15, 2017 · 590e21b · 590e21b
1 parent 40e4d31
commit 590e21b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/src/lsg/patterns/property-items/boolean-item/index.tsx b/src/lsg/patterns/property-items/boolean-item/index.tsx
@@ -2,6 +2,7 @@ import { colors } from '../../colors';
 import { fonts } from '../../fonts';
 import * as React from 'react';
 import styled from 'styled-components';
+import { getSpace, Size } from '../../space';
 
 export interface BooleanItemProps {
 	label: string;
@@ -22,6 +23,8 @@ const StyledLabelWrapper = styled.label`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+
+    margin-bottom: ${getSpace(Size.XXL)}px;
 `;
 
 const indicatorWidth = 18;

diff --git a/src/lsg/patterns/property-items/enum-item/index.tsx b/src/lsg/patterns/property-items/enum-item/index.tsx
@@ -17,6 +17,26 @@ export interface EnumItemProps {
 const StyledEnumItem = styled.div`
 	width: 100%;
 `;
+
+const StyledSelect = styled.select`
+    appearance: none;
+    border: none;
+    border-radius: 0;
+    font-size: 1em;
+    width: 100%;
+    font-family: ${fonts().NORMAL_FONT};
+	color: ${colors.grey36.toString()};
+    font-size: 15px;
+    border-bottom: 1px solid ${colors.grey70.toString()};
+    padding-bottom: ${getSpace(Size.M)/2}px;
+    margin-bottom: ${getSpace(Size.XXL)}px;
+    
+    &:focus {
+        outline: none;
+        border-color: ${colors.blue.toString()};
+        color: ${colors.black.toString()};
+    }
+`;
 
 const StyledLabel = styled.span`
 	display: block;
@@ -32,7 +52,7 @@ export const EnumItem: React.StatelessComponent<EnumItemProps> = props => {
 	return (
 		<StyledEnumItem className={className}>
 			<StyledLabel>{label}</StyledLabel>
-			<select
+			<StyledSelect
 				className={className}
 				onChange={handleChange}
 				defaultValue={selectedValue ? selectedValue.getId() : ''}
@@ -43,7 +63,7 @@ export const EnumItem: React.StatelessComponent<EnumItemProps> = props => {
 						{value.getName()}
 					</option>
 				))};
-			</select>
+			</StyledSelect>
 		</StyledEnumItem>
 	);
 };

diff --git a/src/lsg/patterns/property-items/string-item/index.tsx b/src/lsg/patterns/property-items/string-item/index.tsx
@@ -36,6 +36,8 @@ const StyledInput = styled.input`
     padding-bottom: ${getSpace(Size.M)/2}px;
     color: ${colors.grey36.toString()};
     
+    margin-bottom: ${getSpace(Size.XXL)}px;
+    
     ::-webkit-input-placeholder {
         color: ${colors.grey70.toString()};
     }