clean up styles

shared/components/Preferences/Preferences.jsx

@@ -21,7 +21,7 @@ class Preferences extends React.Component {
 					</button>
 				</div>
 				<div className="preference">
-					<h3 className="preference__title">Font Size</h3>
+					<h3 className="preference__title">Text Size</h3>
 						<button className="preference__plus-button" onClick={this.props.decreaseFont}>
 							<Isvg src={minusUrl} alt="Decrease Font Size" />
 						</button>

styles/abstracts/_placeholders.scss

@@ -4,7 +4,7 @@
 	width: #{44 / $base-font-size}rem;
 	text-align: center;
 	border-radius: 100%;
-	line-height: #{50 / $base-font-size}rem;
+	line-height: #{46 / $base-font-size}rem;
 	cursor: pointer;
 	border: none;
 	outline: none;
@@ -29,6 +29,23 @@
   }
 }
 
+%icon {
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	padding: 0;
+	color: $light-icon-color;
+	& g {
+		fill: $light-icon-color;
+	}
+	&:hover {
+		color: $light-icon-hover-color;
+		& g {
+			fill: $light-icon-hover-color;
+		}
+	}
+}
+
 %button {
 	background-color: $light-button-background-color;
 	color: $light-button-color;
@@ -49,17 +66,17 @@
 }
 
 %preferences-button {
-	@extend %button;
+	@extend %toolbar-button;
-	background-color: $light-preferences-button-background-color;
+	color: $light-primary-text-color;
-	color: $light-preferences-button-color;
+	background-color: $light-modal-button-background-color;
 	& g {
-		fill: $light-preferences-button-color;
+		fill: $light-primary-text-color;
 	}
 	&:hover {
-		background-color: $light-preferences-button-background-color;
+		background-color: $light-button-background-hover-color;
-		color: $light-preferences-button-hover-color;
+		color: $light-button-hover-color;
 		& g {
-			fill: $light-preferences-button-hover-color;
+			fill: $light-button-hover-color;
 		}
 	}
 }

styles/abstracts/_variables.scss

@@ -1,12 +1,10 @@
 $base-font-size: 16;
-$menu-font-size: 21;
 
 //colors
 $p5js-pink: #ed225d;
 $white: #fff;
 $black: #000;
 
-
 $light-primary-text-color: #333;
 $light-secondary-text-color: #6b6b6b;
 $light-inactive-text-color: #b5b5b5;
@@ -20,6 +18,9 @@ $light-button-background-hover-color: $p5js-pink;
 $light-button-background-active-color: #f10046;
 $light-button-hover-color: $white;
 $light-button-active-color: $white;
+$light-modal-button-background-color: #e6e6e6; 
+$light-icon-color: #8b8b8b;
+$light-icon-hover-color: $light-primary-text-color;
 
 $dark-primary-text-color: $white;
 $dark-secondary-text-color: #c2c2c2;
@@ -37,10 +38,3 @@ $dark-button-active-color: $white;
 $editor-border-color: #f4f4f4;
 $editor-selected-line-color: #f3f3f3;
 $input-border-color: #979797;
-
-$light-preferences-background-color: #f4f4f4;
-
-$light-preferences-button-color: #8e8e8f;
-$light-preferences-button-hover-color: #333333;
-
-$light-preferences-button-background-color: #e6e6e6;

styles/base/_base.scss

@@ -37,4 +37,12 @@ input {
 
 input[type="submit"] {
 	@extend %button;
+}
+
+h2 {
+	font-size: #{21 / $base-font-size}em;
+}
+
+h3 {
+	font-weight: normal;
 }

styles/base/_reset.scss

@@ -10,4 +10,8 @@ html, body {
 ul, p {
 	padding: 0;
 	margin: 0;
+}
+
+h2, h3 {
+	margin: 0;
 }

styles/components/_preferences.scss

@@ -1,8 +1,11 @@
 .preferences {
-	background-color: $light-preferences-background-color;
+	position: absolute;
+	top: #{66 / $base-font-size}rem;
+	right: #{40 / $base-font-size}rem;
+	width: #{276 / $base-font-size}rem;
+	background-color: $light-button-background-color;
 	display: none;
-	font-family: 'Montserrat', sans-serif;
+	padding: #{16 / $base-font-size}rem #{26 / $base-font-size}rem;
-	padding-bottom: #{20 / $base-font-size}rem;
 	&--selected {
 		display: flex;
 		flex-direction: column;
@@ -10,18 +13,12 @@
 }
 
 .preferences__exit-button {
-	@extend %preferences-button;
+	@extend %icon;
-	margin-left: auto;
+	padding-top: #{5 / $base-font-size}rem;
-	background-color: $light-preferences-background-color;
-
-	&:hover {
-		background-color: $light-preferences-background-color;
-	}
 }
 
 .preference__plus-button {
 	@extend %preferences-button;
-	margin-right: auto;
 }
 
 .preference__minus-button {
@@ -30,33 +27,25 @@
 
 .preferences__heading {
 	display: flex;
-	flex-direction: rows;
+	flex-direction: row;
-	margin-left: #{20 / $base-font-size}rem;
+	justify-content: space-between;
-}
+	margin-bottom: #{20 / $base-font-size}rem;
-.preferences__title {
-	margin: 0 0;
-	font-size: #{$menu-font-size}px;
-	font-weight: 700;
-	height: #{44 / $base-font-size}rem;
-	line-height: #{44 / $base-font-size}rem;
 }
 
 .preference {
-	margin: 0 #{20 / $base-font-size}rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
 }
 
 .preference__title {
-	margin: 0 0;
+	width: 100%;
-	font-size: #{$base-font-size}px;
+	margin-bottom: #{10 / $base-font-size}rem;
-	font-weight: 400;
-	height: #{44 / $base-font-size}rem;
-	line-height: #{44 / $base-font-size}rem;
 }
 
 .preference__value {
-	@extend %button;
+	border: 1px solid $light-button-border-color;
-	border-radius: 0%;
+	text-align: center;
-	border: 2px solid $light-preferences-button-color;
+	line-height: #{48 / $base-font-size}rem;
-	line-height: #{44 / $base-font-size}rem;
+	width: #{48 / $base-font-size}rem;
-	margin: 0 #{20 / $base-font-size}rem;
 }

styles/components/_toolbar.scss

@@ -4,6 +4,9 @@
 	&--selected {
 		@extend %toolbar-button--selected;
 	}
+	& span {
+		padding-left: #{2 / $base-font-size}rem;
+	}
 }
 
 .toolbar__stop-button {
@@ -15,6 +18,7 @@
 
 .toolbar__preferences-button {
 	@extend %toolbar-button;
+	line-height: #{50 / $base-font-size}rem;
 	margin-left: auto;
 	&--selected {
 		@extend %toolbar-button--selected;

styles/layout/_ide.scss

@@ -17,10 +17,3 @@
 .toolbar {
 	width: 100%;
 }
-
-.preferences {
-	width: 22.5%;
-	position: absolute;
-	top: #{20 / $base-font-size}rem;
-	right:#{60 / $base-font-size}rem;
-}