diff options
Diffstat (limited to 'app')
4 files changed, 89 insertions, 86 deletions
diff --git a/app/javascript/glitch/components/settings/container.js b/app/javascript/glitch/components/settings/container.js index 6034935eb..5dfe228c0 100644 --- a/app/javascript/glitch/components/settings/container.js +++ b/app/javascript/glitch/components/settings/container.js @@ -2,11 +2,11 @@ import { connect } from 'react-redux'; // Mastodon imports // -import { closeModal } from '../../../mastodon/actions/modal'; +import { closeModal } from 'mastodon/actions/modal'; // Our imports // -import { changeLocalSetting } from '../../actions/local_settings'; -import Settings from '../../components/settings'; +import { changeLocalSetting } from 'glitch/actions/local_settings'; +import Settings from 'glitch/components/settings'; const mapStateToProps = state => ({ settings: state.get('local_settings'), diff --git a/app/javascript/glitch/components/settings/index.js b/app/javascript/glitch/components/settings/index.js index afe7e9a87..04c05704e 100644 --- a/app/javascript/glitch/components/settings/index.js +++ b/app/javascript/glitch/components/settings/index.js @@ -4,6 +4,8 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; +import './stylesheet'; + // Our imports // import SettingsItem from './item'; diff --git a/app/javascript/glitch/components/settings/stylesheet.scss b/app/javascript/glitch/components/settings/stylesheet.scss new file mode 100644 index 000000000..48cc37984 --- /dev/null +++ b/app/javascript/glitch/components/settings/stylesheet.scss @@ -0,0 +1,84 @@ +@import 'variables'; + +.settings-modal { + position: relative; + display: flex; + flex-direction: row; + background: $ui-secondary-color; + color: $ui-base-color; + border-radius: 8px; + height: 80vh; + width: 80vw; + max-width: 740px; + max-height: 450px; + overflow: hidden; + + label { + display: block; + } + + h1 { + font-size: 18px; + font-weight: 500; + line-height: 24px; + margin-bottom: 20px; + } + + h2 { + font-size: 15px; + font-weight: 500; + line-height: 20px; + margin-top: 20px; + margin-bottom: 10px; + } +} + +.settings-modal__navigation { + background: $primary-text-color; + color: $ui-base-color; + width: 200px; + font-size: 15px; + line-height: 20px; + overflow-y: auto; + + .settings-modal__navigation-item, .settings-modal__navigation-close { + display: block; + padding: 15px 20px; + cursor: pointer; + outline: none; + text-decoration: none; + } + + .settings-modal__navigation-item { + background: $primary-text-color; + color: inherit; + border-bottom: 1px $ui-primary-color solid; + transition: background .3s; + + &:hover { + background: $ui-secondary-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + .settings-modal__navigation-close { + background: $error-value-color; + color: $primary-text-color; + } +} + +.settings-modal__content { + display: block; + flex: auto; + padding: 15px 20px 15px 20px; + width: 360px; + overflow-y: auto; + + select { + margin-bottom: 5px; + } +} \ No newline at end of file diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index a09a33e00..0a8fa5e6d 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3659,89 +3659,6 @@ button.icon-button.active i.fa-retweet { margin-bottom: 20px; } -.settings-modal { - position: relative; - display: flex; - flex-direction: row; - background: $ui-secondary-color; - color: $ui-base-color; - border-radius: 8px; - height: 80vh; - width: 80vw; - max-width: 740px; - max-height: 450px; - overflow: hidden; - - label { - display: block; - } - - h1 { - font-size: 18px; - font-weight: 500; - line-height: 24px; - margin-bottom: 20px; - } - - h2 { - font-size: 15px; - font-weight: 500; - line-height: 20px; - margin-top: 20px; - margin-bottom: 10px; - } -} - -.settings-modal__navigation { - background: $primary-text-color; - color: $ui-base-color; - width: 200px; - font-size: 15px; - line-height: 20px; - overflow-y: auto; - - .settings-modal__navigation-item, .settings-modal__navigation-close { - display: block; - padding: 15px 20px; - cursor: pointer; - outline: none; - text-decoration: none; - } - - .settings-modal__navigation-item { - background: $primary-text-color; - color: inherit; - border-bottom: 1px $ui-primary-color solid; - transition: background .3s; - - &:hover { - background: $ui-secondary-color; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - } - } - - .settings-modal__navigation-close { - background: $error-value-color; - color: $primary-text-color; - } -} - -.settings-modal__content { - display: block; - flex: auto; - padding: 15px 20px 15px 20px; - width: 360px; - overflow-y: auto; - - select { - margin-bottom: 5px; - } -} - .onboard-sliders { display: inline-block; max-width: 30px; |