Change design of new list form in web UI (#19801)

app/javascript/mastodon/components/setting_text.js

@@ -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 (
-      <label>
-        <span style={{ display: 'none' }}>{label}</span>
-        <input
-          className='setting-text'
-          value={settings.getIn(settingKey)}
-          onChange={this.handleChange}
-          placeholder={label}
-        />
-      </label>
-    );
-  }
-
-}

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 { changeListEditorTitle, submitListEditor } from 'mastodon/actions/lists';
-import IconButton from '../../../components/icon_button';
+import Button from 'mastodon/components/button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -65,10 +65,9 @@ class NewListForm extends React.PureComponent {
           />
         </label>
 
-        <IconButton
+        <Button
           disabled={disabled || !value}
-          icon='plus'
+          text={title}
-          title={title}
           onClick={this.handleClick}
         />
       </form>

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 = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
 
     return (
-      <Column bindToDocument={!multiColumn} icon='list-ul' heading={intl.formatMessage(messages.heading)}>
+      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.heading)}>
-        <ColumnBackButtonSlim />
+        <ColumnHeader title={intl.formatMessage(messages.heading)} icon='list-ul' multiColumn={multiColumn} showBackButton />
 
         <NewListForm />
 

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;
+  color: $inverted-text-color;
-  background: transparent;
+  background: $white;
-  padding: 7px 0;
+  padding: 7px 10px;
   font-family: inherit;
   font-size: 14px;
-  resize: vertical;
+  line-height: 22px;
-  border: 0;
+  border-radius: 4px;
-  border-bottom: 2px solid $ui-primary-color;
+  border: 1px solid $white;
-  outline: 0;
 
-  &:focus,
+  &:focus {
-  &:active {
-    color: $primary-text-color;
-    border-bottom-color: $ui-highlight-color;
     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 {