Change design of lists in web UI (#32881)

app/javascript/mastodon/components/check_box.tsx

@@ -7,11 +7,11 @@ import { Icon } from './icon';
 
 interface Props {
   value: string;
-  checked: boolean;
-  indeterminate: boolean;
-  name: string;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  label: React.ReactNode;
+  checked?: boolean;
+  indeterminate?: boolean;
+  name?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: React.ReactNode;
 }
 
 export const CheckBox: React.FC<Props> = ({
@@ -30,6 +30,7 @@ export const CheckBox: React.FC<Props> = ({
         value={value}
         checked={checked}
         onChange={onChange}
+        readOnly={!onChange}
       />
 
       <span
@@ -42,7 +43,7 @@ export const CheckBox: React.FC<Props> = ({
         )}
       </span>
 
-      <span>{label}</span>
+      {label && <span>{label}</span>}
     </label>
   );
 };

app/javascript/mastodon/components/scrollable_list.jsx

@@ -80,6 +80,7 @@ class ScrollableList extends PureComponent {
     children: PropTypes.node,
     bindToDocument: PropTypes.bool,
     preventScroll: PropTypes.bool,
+    footer: PropTypes.node,
   };
 
   static defaultProps = {
@@ -324,7 +325,7 @@ class ScrollableList extends PureComponent {
   };
 
   render () {
-    const { children, scrollKey, trackScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, emptyMessage, onLoadMore } = this.props;
+    const { children, scrollKey, trackScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, footer, emptyMessage, onLoadMore } = this.props;
     const { fullscreen } = this.state;
     const childrenCount = Children.count(children);
 
@@ -342,11 +343,13 @@ class ScrollableList extends PureComponent {
           <div className='scrollable__append'>
             <LoadingIndicator />
           </div>
+
+          {footer}
         </div>
       );
     } else if (isLoading || childrenCount > 0 || numPending > 0 || hasMore || !emptyMessage) {
       scrollableArea = (
-        <div className={classNames('scrollable', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove}>
+        <div className={classNames('scrollable scrollable--flex', { fullscreen })} ref={this.setRef} onMouseMove={this.handleMouseMove}>
           <div role='feed' className='item-list'>
             {prepend}
 
@@ -375,6 +378,8 @@ class ScrollableList extends PureComponent {
 
             {!hasMore && append}
           </div>
+
+          {footer}
         </div>
       );
     } else {
@@ -385,6 +390,8 @@ class ScrollableList extends PureComponent {
           <div className='empty-column-indicator'>
             {emptyMessage}
           </div>
+
+          {footer}
         </div>
       );
     }