diff --git a/app/javascript/mastodon/components/setting_text.js b/app/javascript/mastodon/components/setting_text.js
deleted file mode 100644
index a6dde4c0f1..0000000000
--- a/app/javascript/mastodon/components/setting_text.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-export default class SettingText extends React.PureComponent {
-
- static propTypes = {
- settings: ImmutablePropTypes.map.isRequired,
- settingKey: PropTypes.array.isRequired,
- label: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired,
- };
-
- handleChange = (e) => {
- this.props.onChange(this.props.settingKey, e.target.value);
- }
-
- render () {
- const { settings, settingKey, label } = this.props;
-
- return (
-
- );
- }
-
-}
diff --git a/app/javascript/mastodon/features/lists/components/new_list_form.js b/app/javascript/mastodon/features/lists/components/new_list_form.js
index 7faf50be81..f790ccbe60 100644
--- a/app/javascript/mastodon/features/lists/components/new_list_form.js
+++ b/app/javascript/mastodon/features/lists/components/new_list_form.js
@@ -1,8 +1,8 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
-import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
-import IconButton from '../../../components/icon_button';
+import { changeListEditorTitle, submitListEditor } from 'mastodon/actions/lists';
+import Button from 'mastodon/components/button';
import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
@@ -65,10 +65,9 @@ class NewListForm extends React.PureComponent {
/>
-
diff --git a/app/javascript/mastodon/features/lists/index.js b/app/javascript/mastodon/features/lists/index.js
index 017595ba03..3a0b1373a6 100644
--- a/app/javascript/mastodon/features/lists/index.js
+++ b/app/javascript/mastodon/features/lists/index.js
@@ -7,10 +7,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { fetchLists } from 'mastodon/actions/lists';
-import ColumnBackButtonSlim from 'mastodon/components/column_back_button_slim';
import LoadingIndicator from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list';
-import Column from 'mastodon/features/ui/components/column';
+import Column from 'mastodon/components/column';
+import ColumnHeader from 'mastodon/components/column_header';
import ColumnLink from 'mastodon/features/ui/components/column_link';
import ColumnSubheading from 'mastodon/features/ui/components/column_subheading';
import NewListForm from './components/new_list_form';
@@ -62,8 +62,8 @@ class Lists extends ImmutablePureComponent {
const emptyMessage = ;
return (
-
-
+
+
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index d3046761cc..57a383476e 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3200,23 +3200,49 @@ $ui-header-height: 55px;
.setting-text {
display: block;
box-sizing: border-box;
- width: 100%;
margin: 0;
- color: $darker-text-color;
- background: transparent;
- padding: 7px 0;
+ color: $inverted-text-color;
+ background: $white;
+ padding: 7px 10px;
font-family: inherit;
font-size: 14px;
- resize: vertical;
- border: 0;
- border-bottom: 2px solid $ui-primary-color;
- outline: 0;
+ line-height: 22px;
+ border-radius: 4px;
+ border: 1px solid $white;
- &:focus,
- &:active {
- color: $primary-text-color;
- border-bottom-color: $ui-highlight-color;
+ &:focus {
outline: 0;
+ border-color: lighten($ui-highlight-color, 12%);
+ }
+
+ &__wrapper {
+ background: $white;
+ border: 1px solid $ui-secondary-color;
+ margin-bottom: 10px;
+ border-radius: 4px;
+
+ .setting-text {
+ border: 0;
+ margin-bottom: 0;
+ border-radius: 0;
+
+ &:focus {
+ border: 0;
+ }
+ }
+
+ &__modifiers {
+ color: $inverted-text-color;
+ font-family: inherit;
+ font-size: 14px;
+ background: $white;
+ }
+ }
+
+ &__toolbar {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
@@ -5503,59 +5529,6 @@ a.status-card.compact:hover {
margin-bottom: 20px;
}
- .setting-text {
- display: block;
- box-sizing: border-box;
- width: 100%;
- margin: 0;
- color: $inverted-text-color;
- background: $white;
- padding: 10px;
- font-family: inherit;
- font-size: 14px;
- resize: none;
- outline: 0;
- border-radius: 4px;
- border: 1px solid $ui-secondary-color;
- min-height: 100px;
- max-height: 50vh;
- margin-bottom: 10px;
-
- &:focus {
- border: 1px solid darken($ui-secondary-color, 8%);
- }
-
- &__wrapper {
- background: $white;
- border: 1px solid $ui-secondary-color;
- margin-bottom: 10px;
- border-radius: 4px;
-
- .setting-text {
- border: 0;
- margin-bottom: 0;
- border-radius: 0;
-
- &:focus {
- border: 0;
- }
- }
-
- &__modifiers {
- color: $inverted-text-color;
- font-family: inherit;
- font-size: 14px;
- background: $white;
- }
- }
-
- &__toolbar {
- display: flex;
- justify-content: space-between;
- margin-bottom: 20px;
- }
- }
-
.setting-text-label {
display: block;
color: $inverted-text-color;
@@ -5564,6 +5537,14 @@ a.status-card.compact:hover {
margin-bottom: 10px;
}
+ .setting-text {
+ width: 100%;
+ resize: none;
+ min-height: 100px;
+ max-height: 50vh;
+ border: 0;
+ }
+
.setting-toggle {
margin-top: 20px;
margin-bottom: 24px;
@@ -6765,9 +6746,9 @@ noscript {
.column-inline-form {
padding: 15px;
- padding-right: 0;
display: flex;
justify-content: flex-start;
+ gap: 15px;
align-items: center;
background: lighten($ui-base-color, 4%);
@@ -6776,17 +6757,8 @@ noscript {
input {
width: 100%;
-
- &:focus {
- outline: 0;
- }
}
}
-
- .icon-button {
- flex: 0 0 auto;
- margin: 0 10px;
- }
}
.drawer__backdrop {