add placeholders inside preferences

Author: MathuraMG

shared/components/Preferences/Preferences.jsx

@@ -6,13 +6,15 @@ var classNames = require('classnames');
 
 class Preferences extends React.Component {
 	render() {
-		let preferencesButtonClass = classNames({
+		let preferencesContainerClass = classNames({
 			"preferences": true,
 			"preferences--selected": this.props.isPreferencesShowing
 		});
 		return (
-			<div className={preferencesButtonClass}>
-				GIANT POTATO
+			<div className={preferencesContainerClass}>
+				<button className="preferences__exit-button" onClick={this.props.closePreferences}>
+					X
+				</button>
 			</div>
 		);
 	}

shared/components/Toolbar/Toolbar.jsx

@@ -31,7 +31,7 @@ class Toolbar extends React.Component {
 				<button className={stopButtonClass} onClick={this.props.stopSketch}>
 					<Isvg src={stopUrl} alt="Stop Sketch" />
 				</button>
-				<button className={preferencesButtonClass} onClick={this.props.togglePreferences}>
+				<button className={preferencesButtonClass} onClick={this.props.openPreferences}>
 					<Isvg src={preferencesUrl} alt="Show Preferences" />
 				</button>
 			</div>

shared/containers/App/App.jsx

@@ -17,7 +17,7 @@ class App extends React.Component {
 					isPlaying={this.props.ide.isPlaying}
 					startSketch={this.props.startSketch}
 					stopSketch={this.props.stopSketch}
-					togglePreferences={this.props.togglePreferences}
+					openPreferences={this.props.openPreferences}
 					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
 					/>
 				<Editor
@@ -30,7 +30,8 @@ class App extends React.Component {
 			    }
 			    isPlaying={this.props.ide.isPlaying}/>
 				<Preferences
-					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}/>
+					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
+					closePreferences={this.props.closePreferences}/>
 			</div>
 		);
 	}

shared/redux/actions/index.js

@@ -26,8 +26,14 @@ export function stopSketch() {
 	}
 }
 
-export function togglePreferences() {
+export function openPreferences() {
 	return {
-		type: ActionTypes.TOGGLE_PREFERENCES
+		type: ActionTypes.OPEN_PREFERENCES
+	}
+}
+
+export function closePreferences() {
+	return {
+		type: ActionTypes.CLOSE_PREFERENCES
 	}
 }

shared/redux/constants/constants.js

@@ -4,4 +4,5 @@ export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 
-export const TOGGLE_PREFERENCES = 'TOGGLE_PREFERENCES';
+export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
+export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';

shared/redux/reducers/preferences.js

@@ -6,9 +6,13 @@ const initialState = {
 
 const preferences = (state = initialState, action) => {
 	switch (action.type) {
-		case ActionTypes.TOGGLE_PREFERENCES:
+		case ActionTypes.OPEN_PREFERENCES:
 			return {
-				isPreferencesShowing: !state.isPreferencesShowing
+				isPreferencesShowing: true
+			}
+		case ActionTypes.CLOSE_PREFERENCES:
+			return {
+				isPreferencesShowing: false
 			}
 		default:
 			return state

styles/abstracts/_variables.scss

@@ -35,3 +35,4 @@ $dark-button-active-color: $white;
 $editor-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 
+$preferences-background-color: #f4f4f4;

styles/components/_preferences.scss

@@ -1,10 +1,21 @@
 .preferences {
-	position: absolute;
-	right: 0;
-	top:0;
+	background-color: $preferences-background-color;
 	display: none;
+	&--selected {
+		display: flex;
+	}
 }
 
-.preferences--selected {
-	display: block;
+.preferences__exit-button {
+	background-color: $light-button-background-color;
+	color: $light-button-color;
+	display: inline-block;
+	height: #{44 / $base-font-size}rem;
+	width: #{44 / $base-font-size}rem;
+	text-align: center;
+	line-height: #{50 / $base-font-size}rem;
+	cursor: pointer;
+	border: none;
+	outline: none;
+	margin-left: auto;
 }

styles/layout/_ide.scss

@@ -16,4 +16,12 @@
 
 .toolbar {
 	width: 100%;
-}
+}
+
+.preferences {
+	width: 30%;
+	height: 50%;
+	position: absolute;
+	top: #{20 / $base-font-size}rem;
+	right:#{60 / $base-font-size}rem;
+}