From 5de2a6761fa70423cd9ee88395665464e5da26f8 Mon Sep 17 00:00:00 2001
From: Lauren McCarthy <laurmccarthy@gmail.com>
Date: Mon, 19 Dec 2016 20:48:36 -0800
Subject: [PATCH] Prefs (#238)

* removing avenir font, using montserrat instead due to licensing issues

* removing old import statement for typeography scss file

* formating prefs pane

* updating capitalization
---
 client/components/Nav.jsx                     |  2 +-
 client/modules/IDE/components/Preferences.jsx | 32 ++++-----
 client/styles/components/_preferences.scss    | 66 ++++++++++++-------
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 80afb42d..70628e5b 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -111,7 +111,7 @@ function Nav(props) {
             return (
               <li className="nav__item">
                 <p>
-                  <Link to="/login">Login</Link> <span className="nav__item-spacer">or</span> <Link to="/signup">Sign Up</Link>
+                  <Link to="/login">Login</Link> <span className="nav__item-spacer">or</span> <Link to="/signup">Sign up</Link>
                 </p>
               </li>
             );
diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 61688a0c..ba40283f 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -68,7 +68,7 @@ class Preferences extends React.Component {
         </div>
 
         <div className="preference">
-          <h4 className="preference__title">Text Size</h4>
+          <h4 className="preference__title">Text size</h4>
           <button
             className="preference__minus-button"
             onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
@@ -102,7 +102,7 @@ class Preferences extends React.Component {
         </div>
 
         <div className="preference">
-          <h4 className="preference__title">Indentation Amount</h4>
+          <h4 className="preference__title">Indentation amount</h4>
           <button
             className="preference__minus-button"
             onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
@@ -220,11 +220,11 @@ class Preferences extends React.Component {
               value="contrast"
               checked={this.props.theme === 'contrast'}
             />
-            <label htmlFor="contrast-theme-on" className="preference__option">High Contrast</label>
+            <label htmlFor="contrast-theme-on" className="preference__option">High contrast</label>
           </div>
         </div>
         <div className="preference">
-          <h4 className="preference__title">Lint Warning Sound</h4>
+          <h4 className="preference__title">Lint warning sound</h4>
           <div className="preference__options">
             <input
               type="radio"
@@ -248,17 +248,17 @@ class Preferences extends React.Component {
               checked={!this.props.lintWarning}
             />
             <label htmlFor="lint-warning-off" className="preference__option">Off</label>
+            <div
+              className="preference__preview-button"
+              onClick={() => beep.play()}
+              aria-label="preview sound"
+            >
+              Preview sound
+            </div>
           </div>
-          <button
-            className="preference__preview-button"
-            onClick={() => beep.play()}
-            aria-label="preview sound"
-          >
-            Preview Sound
-          </button>
         </div>
         <div className="preference">
-          <h4 className="preference__title">Accessible Text-based Canvas</h4>
+          <h4 className="preference__title">Accessible text-based canvas</h4>
           <h6 className="preference__subtitle">Used with screen reader</h6>
 
           <div className="preference__options">
@@ -272,7 +272,7 @@ class Preferences extends React.Component {
               value="On"
               checked={Boolean(this.props.textOutput === 1)}
             />
-            <label htmlFor="text-output-on" className="preference__option">Plain-Text</label>
+            <label htmlFor="text-output-on" className="preference__option preference__canvas">Plain-text</label>
             <input
               type="radio"
               onChange={() => this.props.setTextOutput(2)}
@@ -283,7 +283,7 @@ class Preferences extends React.Component {
               value="Grid On"
               checked={Boolean(this.props.textOutput === 2)}
             />
-            <label htmlFor="grid-output-on" className="preference__option">Table-Text</label>
+            <label htmlFor="grid-output-on" className="preference__option preference__canvas">Table-text</label>
             <input
               type="radio"
               onChange={() => this.props.setTextOutput(3)}
@@ -294,7 +294,7 @@ class Preferences extends React.Component {
               value="On"
               checked={Boolean(this.props.textOutput === 3)}
             />
-            <label htmlFor="sound-output-on" className="preference__option">Sound</label>
+            <label htmlFor="sound-output-on" className="preference__option preference__canvas">Sound</label>
             <input
               type="radio"
               onChange={() => this.props.setTextOutput(0)}
@@ -305,7 +305,7 @@ class Preferences extends React.Component {
               value="Off"
               checked={!Boolean(this.props.textOutput)}
             />
-            <label htmlFor="text-output-off" className="preference__option">Off</label>
+            <label htmlFor="text-output-off" className="preference__option preference__canvas">Off</label>
 
           </div>
         </div>
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index 4a2e3136..926e4e55 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -1,15 +1,19 @@
 .preferences {
 	@extend %modal;
 	position: absolute;
-	top: #{60 / $base-font-size}rem;
-	right: #{40 / $base-font-size}rem;
-	width: #{336 / $base-font-size}rem;
+	top: #{51 / $base-font-size}rem;
+	right: #{29 / $base-font-size}rem;
+	width: #{288 / $base-font-size}rem;
 	display: none;
-	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
+	padding: #{14 / $base-font-size}rem #{20 / $base-font-size}rem #{2 / $base-font-size}rem  #{20 / $base-font-size}rem ;
 	&--selected {
 		display: flex;
 		flex-direction: column;
 	}
+	@include themify() {
+		background-color: getThemifyVariable('editor-gutter-color');
+	}
+	outline: none;
 }
 
 .preferences__exit-button {
@@ -17,14 +21,20 @@
 		@extend %icon;
 	}
 	padding-top: #{5 / $base-font-size}rem;
+	margin-right: #{-6 / $base-font-size}rem;
 }
 
-.preference__plus-button {
-	@extend %preferences-button;
-}
-
-.preference__minus-button {
-	@extend %preferences-button;
+.preference button {
+	@include themify() {
+		@extend %preferences-button;
+		width: #{32 / $base-font-size}rem;
+		height: #{32 / $base-font-size}rem;
+		margin-left: #{6 / $base-font-size}rem;
+		line-height: #{40 / $base-font-size}rem;
+		& svg {
+			width: #{10 / $base-font-size}rem;
+		}
+	}
 }
 
 .preferences__heading {
@@ -43,14 +53,16 @@
 	padding-bottom: #{12 / $base-font-size}rem;
 	& + & {
 		@include themify() {
-	  	border-top: 2px dashed getThemifyVariable('button-border-color');
+	  	border-top: 1px dashed getThemifyVariable('button-border-color');
 	  }
 	}
 }
 
 .preference__title {
 	width: 100%;
-	margin-bottom: #{10 / $base-font-size}rem;
+	font-size: #{16 / $base-font-size}rem;
+	margin-top: #{13 / $base-font-size}rem;
+	margin-bottom: #{7 / $base-font-size}rem;
 	@include themify() {
 		color: getThemifyVariable('heading-text-color');
 	}
@@ -67,16 +79,19 @@
 
 .preference__value {
 	@include themify() {
-		border: 2px solid getThemifyVariable('button-border-color');
+		border: #{1 / $base-font-size}rem solid getThemifyVariable('button-border-color');
 		background-color: getThemifyVariable('button-background-color');
 		color: getThemifyVariable('input-text-color');
 	}
 	text-align: center;
 	border-radius: 0%;
-	width: #{48 / $base-font-size}rem;
-	height: #{44 / $base-font-size}rem;
-	margin: 0 #{28 / $base-font-size}rem;
+	outline: none;
+	width: #{44 / $base-font-size}rem;
+	height: #{40 / $base-font-size}rem;
+	margin: 0 #{26 / $base-font-size}rem;
 	padding: 0;
+	font-size: #{16 / $base-font-size}rem;
+	font-family: Inconsolata;
 }
 
 .preference__label {
@@ -86,16 +101,16 @@
 			color: getThemifyVariable('primary-text-color');
 		}
 	}
-	margin: 0;
-	line-height: #{20 / $base-font-size}rem;
+	margin: #{-15 / $base-font-size}rem 0 0 #{-5 / $base-font-size}rem;
 	font-size: #{9 / $base-font-size}rem;
+	width: #{44 / $base-font-size}rem;
 }
 
 .preference__vertical-list {
 	display: flex;
 	flex-direction: column;
-	width: #{90 / $base-font-size}rem;
-	padding-left: #{28 / $base-font-size}rem;
+	width: #{44 / $base-font-size}rem;
+	padding-left: #{25 / $base-font-size}rem;
 }
 
 .preference__radio-button {
@@ -105,14 +120,17 @@
 .preference__option {
 	@include themify() {
 		@extend %preference-option;
-		padding-right: #{20 / $base-font-size}rem;
+		padding-right: #{44 / $base-font-size}rem;
 	}
 }
 
+.preference__option:last-child {
+	padding-right: 0;	
+}
+
 .preference__preview-button {
 	@include themify() {
 		@extend %preference-option;
-		padding-left: #{110 / $base-font-size}rem;
 	}
 }
 
@@ -130,3 +148,7 @@
 .preference--hidden {
 	@extend %hidden-element;
 }
+
+.preference__option.preference__canvas:not(:last-child) {
+	padding-right: #{20 / $base-font-size}rem;
+}
\ No newline at end of file