diff --git a/client/modules/IDE/components/Preferences.jsx b/client/modules/IDE/components/Preferences.jsx
index 29a77581..be3a829c 100644
--- a/client/modules/IDE/components/Preferences.jsx
+++ b/client/modules/IDE/components/Preferences.jsx
@@ -228,7 +228,21 @@ class Preferences extends React.Component {
Add a p5.js or an external library
Add a script library resource field
Security Protocol
- Serve over HTTPS
+ {
+ this.props.currentUser == null ?
+ null :
+
+ {
+ this.props.setServeSecure(event.target.checked);
+ }}
+ />
+
+ }
+ Serve over HTTPS
@@ -327,7 +341,19 @@ Preferences.propTypes = {
setLintWarning: PropTypes.func.isRequired,
// openTab: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
+ setServeSecure: PropTypes.func.isRequired,
+ currentUser: PropTypes.string,
+ project: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ isEditingName: PropTypes.bool,
+ id: PropTypes.string,
+ serveSecure: PropTypes.bool,
+ }).isRequired,
setTheme: PropTypes.func.isRequired
};
+Preferences.defaultProps = {
+ currentUser: undefined
+};
+
export default Preferences;
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss
index f9d886ef..101ac54b 100644
--- a/client/styles/components/_preferences.scss
+++ b/client/styles/components/_preferences.scss
@@ -42,6 +42,16 @@
}
}
+.serve__over__https {
+ text-align: center;
+ margin-left: #{9 / $base-font-size}rem;
+ font-width: #{108 / $base-font-size}rem;
+ font-height: #{15 / $base-font-size}rem;
+ font-family: Montserrat;
+ font-size: #{12 / $base-font-size}rem;
+ margin-top: #{2 / $base-font-size}rem;
+}
+
.preferences__heading {
display: flex;
flex-direction: row;
@@ -122,18 +132,43 @@
&:hover {
color: getThemifyVariable('primary-text-color');
}
+
}
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;
}
+.react-tabs__tab--selected {
+ @include themify() {
+ /*color: getThemifyVariable('primary-text-color');*/
+ border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+ color: pink;
+ }
+}
+
+.react-tabs__tab--selected .preference__subheading {
+ @include themify() {
+ color: black !important;
+ }
+}
+
+.react-tabs__tab {
+ width: #{110 / $base-font-size}rem;
+ text-align: center;
+ color: black;
+}
+
.preference__subheading {
@include themify() {
color: getThemifyVariable('inactive-text-color');
- &:hover {
+ &:hover, &:focus{
color: getThemifyVariable('primary-text-color');
- border-bottom: #{4 / $base-font-size}rem solid getThemifyVariable('button-background-hover-color');
+ cursor: pointer;
+ }
+ &:focus {
+ color: getThemifyVariable('primary-text-color');
+ cursor: pointer;
}
}
font-size: #{12 / $base-font-size}rem;
@@ -142,8 +177,9 @@
margin-left: #{5 / $base-font-size}rem;
margin-bottom: #{0.1 / $base-font-size}rem;
margin-right: #{60 / $base-font-size}rem;
+ padding-right: #{10 / $base-font-size}rem;
font-family: Montserrat;
- width: #{98 / $base-font-size}rem;
+ width: #{110 / $base-font-size}rem;
}
.preference__vertical-list {
@@ -220,3 +256,5 @@
padding-right: #{14 / $base-font-size}rem;
}
+
+