Change radio button design to be consistent with that of the directory explorer

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

1 files changed, 9 insertions, 13 deletions

diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js
index c3156de8d..70e530bae 100644
--- a/app/javascript/flavours/glitch/features/list_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.js
@@ -14,6 +14,7 @@ import { openModal } from 'flavours/glitch/actions/modal';
 import MissingIndicator from 'flavours/glitch/components/missing_indicator';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import Icon from 'flavours/glitch/components/icon';
+import RadioButton from 'flavours/glitch/components/radio_button';
 
 const messages = defineMessages({
   deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -176,7 +177,7 @@ class ListTimeline extends React.PureComponent {
           multiColumn={multiColumn}
           bindToDocument={!multiColumn}
         >
-          <div className='column-header__links'>
+          <div className='column-settings__row column-header__links'>
             <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
               <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
             </button>
@@ -187,19 +188,14 @@ class ListTimeline extends React.PureComponent {
           </div>
 
           { replies_policy !== undefined && (
-            <div>
+            <div role='group' aria-labelledby={`list-${id}-replies-policy`}>
+              <span id={`list-${id}-replies-policy`} className='column-settings__section'>
+                <FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies to:' />
+              </span>
               <div className='column-settings__row'>
-                <fieldset>
-                  <legend><FormattedMessage id='lists.replies_policy.title' defaultMessage='Show replies to:' /></legend>
-                  { ['no_replies', 'list_replies', 'all_replies'].map(policy => (
-                    <div className='setting-radio'>
-                      <input className='setting-radio__input' id={['setting', 'radio', id, policy].join('-')} type='radio' value={policy} checked={replies_policy === policy} onChange={this.handleRepliesPolicyChange} />
-                      <label className='setting-radio__label' htmlFor={['setting', 'radio', id, policy].join('-')}>
-                        <FormattedMessage {...messages[policy]} />
-                      </label>
-                    </div>
-                  ))}
-                </fieldset>
+                { ['no_replies', 'list_replies', 'all_replies'].map(policy => (
+                  <RadioButton name='order' value={policy} label={intl.formatMessage(messages[policy])} checked={replies_policy === policy} onChange={this.handleRepliesPolicyChange} />
+                ))}
               </div>
             </div>
           )}