add preferences title

MathuraMG · MathuraMG · commit afc2ef91d5ea · 2016-06-20T12:45:15.000-04:00
diff --git a/index.html b/index.html
@@ -3,10 +3,11 @@
   <head>
     <title>p5.js Web Editor</title>
     <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
   </head>
   <body>
     <div id="root" class="root-app">
     </div>
     <script src="/dist/bundle.js"></script>
   </body>
-</html>
+</html>
diff --git a/shared/components/Preferences/Preferences.jsx b/shared/components/Preferences/Preferences.jsx
@@ -12,6 +12,7 @@ class Preferences extends React.Component {
 		});
 		return (
 			<div className={preferencesContainerClass} tabindex="0">
+				<div className="preferences__title-text">Preferences</div>
 				<button className="preferences__exit-button" onClick={this.props.closePreferences}>
 					<Isvg src={exitUrl} alt="Exit Preferences" />
 				</button>
diff --git a/styles/abstracts/_placeholders.scss b/styles/abstracts/_placeholders.scss
@@ -36,12 +36,13 @@
 %preferences-button {
 	@extend %button;
 	background-color: $light-preferences-button-background-color;
+	color: $light-preferences-button-color;
 	& g {
 		fill: $light-preferences-button-color;
 	}
 	&:hover {
 		background-color: $light-preferences-button-background-color;
-
+		color: $light-preferences-button-hover-color;
 		& g {
 			fill: $light-preferences-button-hover-color;
 		}
diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss
@@ -1,4 +1,5 @@
 $base-font-size: 16;
+$menu-font-size: 21;
 
 //colors
 $p5js-pink: #ed225d;
diff --git a/styles/components/_preferences.scss b/styles/components/_preferences.scss
@@ -1,6 +1,7 @@
 .preferences {
 	background-color: $light-preferences-background-color;
 	display: none;
+	font-family: 'Montserrat', sans-serif;
 	&--selected {
 		display: flex;
 	}
@@ -15,3 +16,11 @@
 		background-color: $light-preferences-background-color;
 	}
 }
+
+.preferences__title-text {
+	margin-left: #{20 / $base-font-size}rem;
+	font-size: $menu-font-size;
+	font-color: white;
+	height: #{44 / $base-font-size}rem;
+	line-height: #{44 / $base-font-size}rem;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`$base-font-size: 16;`
	`2`	`+$menu-font-size: 21;`
`2`	`3`
`3`	`4`	`//colors`
`4`	`5`	`$p5js-pink: #ed225d;`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`.preferences {`
`2`	`2`	`background-color: $light-preferences-background-color;`
`3`	`3`	`display: none;`
	`4`	`+ font-family: 'Montserrat', sans-serif;`
`4`	`5`	`&--selected {`
`5`	`6`	`display: flex;`
`6`	`7`	`}`
`@@ -15,3 +16,11 @@`
`15`	`16`	`background-color: $light-preferences-background-color;`
`16`	`17`	`}`
`17`	`18`	`}`
	`19`	`+`
	`20`	`+.preferences__title-text {`
	`21`	`+ margin-left: #{20 / $base-font-size}rem;`
	`22`	`+ font-size: $menu-font-size;`
	`23`	`+ font-color: white;`
	`24`	`+ height: #{44 / $base-font-size}rem;`
	`25`	`+ line-height: #{44 / $base-font-size}rem;`
	`26`	`+}`