diff --git a/client/modules/IDE/components/Preferences.js b/client/modules/IDE/components/Preferences.js index 0cf77843..e9ba2fe3 100644 --- a/client/modules/IDE/components/Preferences.js +++ b/client/modules/IDE/components/Preferences.js @@ -8,6 +8,7 @@ import classNames from 'classnames'; const exitUrl = require('../../../images/exit.svg'); const plusUrl = require('../../../images/plus.svg'); const minusUrl = require('../../../images/minus.svg'); +const beepUrl = require('../../../sounds/audioAlert.mp3'); class Preferences extends React.Component { constructor(props) { @@ -34,6 +35,7 @@ class Preferences extends React.Component { } render() { + const beep = new Audio(beepUrl); const preferencesContainerClass = classNames({ preferences: true, 'preferences--selected': this.props.isVisible @@ -189,6 +191,13 @@ class Preferences extends React.Component { /> +
diff --git a/client/styles/components/_preferences.scss b/client/styles/components/_preferences.scss index d33c355c..e9bfedf1 100644 --- a/client/styles/components/_preferences.scss +++ b/client/styles/components/_preferences.scss @@ -92,6 +92,13 @@ color: $light-inactive-text-color; } +.preference__preview-button { + @extend %preference-option; + padding: 0; + padding-left: #{110 / $base-font-size}rem; + outline: none; +} + .preference__options { display: flex; justify-content: space-between;