From 0850705e3488bf39fab6eb243cfe997ab98f38d6 Mon Sep 17 00:00:00 2001
From: mathuramg <mmg9291@gmail.com>
Date: Mon, 20 Jun 2016 12:04:58 -0400
Subject: [PATCH] refactor placeholder to include pref button

---
 images/exit.svg                               | 12 +++++++++
 images/preferences.svg                        | 27 +++++++++----------
 shared/components/Preferences/Preferences.jsx |  6 ++---
 shared/containers/App/App.jsx                 |  6 ++---
 styles/abstracts/_placeholders.scss           | 25 ++++++++++++++---
 styles/abstracts/_variables.scss              |  7 ++++-
 styles/components/_preferences.scss           | 18 +++++--------
 7 files changed, 65 insertions(+), 36 deletions(-)
 create mode 100644 images/exit.svg

diff --git a/images/exit.svg b/images/exit.svg
new file mode 100644
index 00000000..e8bd60c0
--- /dev/null
+++ b/images/exit.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>Combined Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="exit" stroke="#white">
+            <path d="M7.29289322,8 L1.14644661,1.85355339 L0.792893219,1.5 L1.5,0.792893219 L1.85355339,1.14644661 L8,7.29289322 L14.1464466,1.14644661 L14.5,0.792893219 L15.2071068,1.5 L14.8535534,1.85355339 L8.70710678,8 L14.8535534,14.1464466 L15.2071068,14.5 L14.5,15.2071068 L14.1464466,14.8535534 L8,8.70710678 L1.85355339,14.8535534 L1.5,15.2071068 L0.792893219,14.5 L1.14644661,14.1464466 L7.29289322,8 Z" id="exit"></path>
+        </g>
+    </g>
+</svg>
diff --git a/images/preferences.svg b/images/preferences.svg
index 4ca0b398..86a7a614 100644
--- a/images/preferences.svg
+++ b/images/preferences.svg
@@ -1,20 +1,19 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
-    <title>stop</title>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
+    <title>preferences</title>
     <desc>Created with Sketch.</desc>
-    <defs></defs>
+    <defs>
+        <path d="M14.6822397,16.2117311 L15.1198278,19.0213068 C14.3844186,19.4395702 13.5928664,19.770504 12.7592794,20 L11.0818617,17.703677 C10.7282919,17.7528772 10.367116,17.7783101 10,17.7783101 C9.63288395,17.7783101 9.2717081,17.7528772 8.91813825,17.703677 L7.24072063,20 C6.40713364,19.770504 5.6155814,19.4395702 4.88017224,19.0213068 L5.31776031,16.2117311 C4.73977887,15.7753775 4.22462249,15.2602211 3.78826886,14.6822397 L0.978693166,15.1198278 C0.560429839,14.3844186 0.22949601,13.5928664 -2.84217094e-14,12.7592794 L2.29632299,11.0818617 C2.24712285,10.7282919 2.22168987,10.367116 2.22168987,10 C2.22168987,9.63288395 2.24712285,9.2717081 2.29632299,8.91813825 L-8.12791077e-15,7.24072063 C0.22949601,6.40713364 0.560429839,5.6155814 0.978693166,4.88017224 L3.78826886,5.31776031 C4.22462249,4.73977887 4.73977887,4.22462249 5.31776031,3.78826886 L4.88017224,0.978693166 C5.6155814,0.560429839 6.40713364,0.22949601 7.24072063,0 L8.91813825,2.29632299 C9.2717081,2.24712285 9.63288395,2.22168987 10,2.22168987 C10.367116,2.22168987 10.7282919,2.24712285 11.0818617,2.29632299 L12.7592794,1.98620157e-14 C13.5928664,0.22949601 14.3844186,0.560429839 15.1198278,0.978693166 L14.6822397,3.78826886 C15.2602211,4.22462249 15.7753775,4.73977887 16.2117311,5.31776031 L19.0213068,4.88017224 C19.4395702,5.6155814 19.770504,6.40713364 20,7.24072063 L17.703677,8.91813825 C17.7528772,9.2717081 17.7783101,9.63288395 17.7783101,10 C17.7783101,10.367116 17.7528772,10.7282919 17.703677,11.0818617 L20,12.7592794 C19.770504,13.5928664 19.4395702,14.3844186 19.0213068,15.1198278 L16.2117311,14.6822397 C15.7753775,15.2602211 15.2602211,15.7753775 14.6822397,16.2117311 L14.6822397,16.2117311 Z M10,13.8891551 C12.147921,13.8891551 13.8891551,12.147921 13.8891551,10 C13.8891551,7.85207897 12.147921,6.11084493 10,6.11084493 C7.85207897,6.11084493 6.11084493,7.85207897 6.11084493,10 C6.11084493,12.147921 7.85207897,13.8891551 10,13.8891551 Z" id="path-1"></path>
+    </defs>
     <g id="IDEs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Desktop-IDE-light" transform="translate(-280.000000, -69.000000)" fill="#ED225D">
-            <g id="IDE-CORE-+-Web-dock-&amp;-identity-zone">
-                <g id="IDE-CORE" transform="translate(0.000000, 45.000000)">
-                    <g id="play-btns" transform="translate(202.000000, 0.000000)">
-                        <g id="stop-+-stop" transform="translate(64.000000, 10.000000)">
-                            <rect id="stop" x="14" y="14" width="16" height="16"></rect>
-                        </g>
-                    </g>
-                </g>
+        <g id="Desktop-IDE-light" fill="#ED225D">
+            <g id="preferences">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Combined-Shape" fill="#white" xlink:href="#path-1"></use>
             </g>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
index cb87b969..06610dc5 100644
--- a/shared/components/Preferences/Preferences.jsx
+++ b/shared/components/Preferences/Preferences.jsx
@@ -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>
 		);
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index 7ba79f4c..cca0dba6 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -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>
 		);
 	}
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
index bf21414f..710e178a 100644
--- a/styles/abstracts/_placeholders.scss
+++ b/styles/abstracts/_placeholders.scss
@@ -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;
+		}
+	}
+}
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
index e4edec20..9d76f428 100644
--- a/styles/abstracts/_variables.scss
+++ b/styles/abstracts/_variables.scss
@@ -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;
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss
index 4f54a8ec..420300f3 100644
--- a/styles/components/_preferences.scss
+++ b/styles/components/_preferences.scss
@@ -1,5 +1,5 @@
 .preferences {
-	background-color: $preferences-background-color;
+	background-color: $light-preferences-background-color;
 	display: none;
 	&--selected {
 		display: flex;
@@ -7,15 +7,11 @@
 }
 
 .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;
+	}
 }