Issue 266: Sketch Settings design

Author: saumya1906

client/modules/IDE/components/Preferences.jsx

@@ -75,9 +75,9 @@ class Preferences extends React.Component {
         <Tabs>
           <TabList>
             <div className="preference__subheadings">
-              <Tab><h4 className="preference__subheading1">General Settings</h4></Tab>
-              <h4 className="preference__subheading2">Sketch Settings</h4>
-              <Tab><h4 className="preference__subheading2">Accessibility</h4></Tab>
+              <Tab><h4 className="preference__subheading">General Settings</h4></Tab>
+              <Tab><h4 className="preference__subheading">Sketch Settings</h4></Tab>
+              <Tab><h4 className="preference__subheading">Accessibility</h4></Tab>
             </div>
           </TabList>
           <TabPanel>
@@ -235,6 +235,15 @@ class Preferences extends React.Component {
               </div>
             </div>
           </TabPanel>
+          <TabPanel>
+            <br></br>
+            <div className="preference">
+              <h4 className="preference__title">Add a p5.js or an external library</h4>
+              <h4 className="preference__sketch1">Add a script library resource field</h4>
+              <h4 className="preference__title">Security Protocol</h4>
+              <h4>Serve over HTTPS</h4>
+            </div>
+          </TabPanel>
           <TabPanel>
             <div className="preference">
               <h4 className="preference__title">Accessible text-based canvas</h4>

client/styles/components/_preferences.scss

@@ -45,7 +45,6 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	marhin-left: #{19 / $base-font-size}rem;
 	@include themify() {
 		color: getThemifyVariable('heading-text-color');
 	}
@@ -69,7 +68,6 @@
 	}
 }
 
-
 .preference {
 	display: flex;
 	flex-wrap: wrap;
@@ -129,7 +127,7 @@
 	width: #{44 / $base-font-size}rem;
 }
 
-.preference__subheading1 {
+.preference__subheading {
 	@include themify() {
 		color: getThemifyVariable('inactive-text-color');
 		&:hover {
@@ -139,47 +137,12 @@
 	}
 	font-size: #{12 / $base-font-size}rem;
 	height: #{25 / $base-font-size}rem;
-	text-align: left;
 	margin-top: #{30 / $base-font-size}rem;
 	margin-left: #{5 / $base-font-size}rem;
 	margin-bottom: #{0.1 / $base-font-size}rem;
+	margin-right: #{60 / $base-font-size}rem;
 	font-family: Montserrat;
-	width: #{100 / $base-font-size}rem;
-}
-
-.preference__subheading2 {
-	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
-		&:hover {
-			color: getThemifyVariable('primary-text-color');
-			border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
-		}
-	}
-	font-size: #{12 / $base-font-size}rem;
-	height: #{25 / $base-font-size}rem;
-	text-align: left;
-	margin-top: #{30 / $base-font-size}rem;
-	margin-left: #{46 / $base-font-size}rem;
-	margin-bottom: #{0.1 / $base-font-size}rem;
-	font-family: Montserrat;
-}
-
-.preference__subheading3 {
-	@include themify() {
-		color: getThemifyVariable('inactive-text-color');
-		&:hover {
-			color: getThemifyVariable('primary-text-color');
-			border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
-		}
-	}
-	font-size: #{12 / $base-font-size}rem;
-	height: #{25 / $base-font-size}rem;
-	text-align: left;
-	margin-top: #{30 / $base-font-size}rem;
-	margin-left: #{48 / $base-font-size}rem;
-	margin-bottom: #{0.1 / $base-font-size}rem;
-	width: #{78 / $base-font-size}rem;
-	font-family: Montserrat;
+	width: #{98 / $base-font-size}rem;
 }
 
 .preference__vertical-list {
@@ -189,6 +152,22 @@
 	padding-left: #{25 / $base-font-size}rem;
 }
 
+.preference__sketch1{
+	width: #{601 / $base-font-size}rem;
+    height: #{100 / $base-font-size}rem;
+  	font-family: Montserrat;
+  	font-size: #{14 / $base-font-size}rem;
+  	line-height: 1.43;
+  	text-align: left;
+  	margin-left: #{5 / $base-font-size}rem;
+  	margin-top: #{40 / $base-font-size}rem;
+  	margin-bottom: #{10 / $base-font-size}rem;
+  	@include themify() {
+		color: getThemifyVariable('inactive-text-color');
+		border-bottom: 1px dashed getThemifyVariable('button-border-color');
+	}
+}
+
 .preference__radio-button {
 	@extend %hidden-element;
 }
@@ -228,3 +207,37 @@
 .preference__option.preference__canvas:not(:last-child) {
 	padding-right: #{14 / $base-font-size}rem;
 }
+
+/*.tooltip {
+    display: inline-block;
+}
+
+/* Tooltip text */
+/*.tooltip .tooltiptext {
+	margin-top: #{0 / $base-font-size}rem;
+  margin-bottom: #{50 / $base-font-size}rem;
+  margin-left: #{130 / $base-font-size}rem;
+    visibility: hidden;
+    width: 120px;
+    height: 120px;
+ 	border-color: $p5js-pink transparent transparent $p5js-pink;
+    padding: 5px 0;
+    border-radius: 5px;
+    webkit-border-radius: 20px;
+    moz-border-radius: 20px;
+  	text-align: center;
+  	color: $white;
+    background-color: $p5js-pink; 
+    vertical-align: top;
+    /* Position the tooltip text - see examples below! */
+/*    content: ' ';
+  position: absolute;
+  left: #{15 / $base-font-size}rem; 
+  -webkit-margin-before: 0em;
+  -webkit-margin-after: 0em;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+/*.tooltip:hover .tooltiptext {
+    visibility: visible;
+}*//*/*/