refactor placeholder to include pref button

Author: MathuraMG

images/exit.svg

@@ -1,7 +1,7 @@
 import React from 'react';
 
 var Isvg = require('react-inlinesvg');
-var preferences = require('../../../images/preferences.svg');
+var exitUrl = require('../../../images/exit.svg');
 var classNames = require('classnames');
 
 class Preferences extends React.Component {
@@ -11,9 +11,9 @@ class Preferences extends React.Component {
 			"preferences--selected": this.props.isPreferencesShowing
 		});
 		return (
-			<div className={preferencesContainerClass}>
+			<div className={preferencesContainerClass} tabindex="0">
 				<button className="preferences__exit-button" onClick={this.props.closePreferences}>
-					X
+					<Isvg src={exitUrl} alt="Exit Preferences" />
 				</button>
 			</div>
 		);

images/preferences.svg

@@ -20,6 +20,9 @@ class App extends React.Component {
 					openPreferences={this.props.openPreferences}
 					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
 					/>
+				<Preferences
+					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
+					closePreferences={this.props.closePreferences}/>
 				<Editor
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />
@@ -29,9 +32,6 @@ class App extends React.Component {
 			      <link type='text/css' rel='stylesheet' href='preview-styles.css' />
 			    }
 			    isPlaying={this.props.ide.isPlaying}/>
-				<Preferences
-					isPreferencesShowing = {this.props.preferences.isPreferencesShowing}
-					closePreferences={this.props.closePreferences}/>
 			</div>
 		);
 	}

shared/components/Preferences/Preferences.jsx

@@ -1,6 +1,4 @@
-%toolbar-button {
-	background-color: $light-button-background-color;
-	color: $light-button-color;
+%button {
 	display: inline-block;
 	height: #{44 / $base-font-size}rem;
 	width: #{44 / $base-font-size}rem;
@@ -10,11 +8,15 @@
 	cursor: pointer;
 	border: none;
 	outline: none;
+}
 
+%toolbar-button {
+	@extend %button;
+	background-color: $light-button-background-color;
+	color: $light-button-color;
 	& g {
 		fill: $light-toolbar-button-color;
 	}
-
 	&:hover {
 		background-color: $light-button-background-hover-color;
 		color: $light-button-hover-color;
@@ -30,3 +32,18 @@
     }
   }
 }
+
+%preferences-button {
+	@extend %button;
+	background-color: $light-preferences-button-background-color;
+	& g {
+		fill: $light-preferences-button-color;
+	}
+	&:hover {
+		background-color: $light-preferences-button-background-color;
+
+		& g {
+			fill: $light-preferences-button-hover-color;
+		}
+	}
+}

shared/containers/App/App.jsx

@@ -35,4 +35,9 @@ $dark-button-active-color: $white;
 $editor-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 
-$preferences-background-color: #f4f4f4;
+$light-preferences-background-color: #f4f4f4;
+
+$light-preferences-button-color: #8e8e8f;
+$light-preferences-button-hover-color: #333333;
+
+$light-preferences-button-background-color: #e6e6e6;

styles/abstracts/_placeholders.scss

@@ -1,21 +1,17 @@
 .preferences {
-	background-color: $preferences-background-color;
+	background-color: $light-preferences-background-color;
 	display: none;
 	&--selected {
 		display: flex;
 	}
 }
 
 .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;
+	@extend %preferences-button;
 	margin-left: auto;
+	background-color: $light-preferences-background-color;
+
+	&:hover {
+		background-color: $light-preferences-background-color;
+	}
 }