From 4fde647aa85ff6713a431dd221d8af259c8b96aa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 17 Dec 2022 14:53:02 -0600
Subject: [PATCH] Admin: redesign registration picker

---
 app/soapbox/components/radio.tsx              | 43 +++++++++++++++
 .../components/registration-mode-picker.tsx   | 54 ++++++++-----------
 app/soapbox/features/admin/tabs/dashboard.tsx | 10 +++-
 app/soapbox/features/forms/index.tsx          | 50 +----------------
 4 files changed, 75 insertions(+), 82 deletions(-)
 create mode 100644 app/soapbox/components/radio.tsx

diff --git a/app/soapbox/components/radio.tsx b/app/soapbox/components/radio.tsx
new file mode 100644
index 000000000..ef204b06f
--- /dev/null
+++ b/app/soapbox/components/radio.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import List, { ListItem } from './list';
+
+interface IRadioGroup {
+  onChange: React.ChangeEventHandler
+  children: React.ReactElement<{ onChange: React.ChangeEventHandler }>[]
+}
+
+const RadioGroup = ({ onChange, children }: IRadioGroup) => {
+  const childrenWithProps = React.Children.map(children, child =>
+    React.cloneElement(child, { onChange }),
+  );
+
+  return <List>{childrenWithProps}</List>;
+};
+
+interface IRadioItem {
+  label: React.ReactNode,
+  hint?: React.ReactNode,
+  value: string,
+  checked: boolean,
+  onChange?: React.ChangeEventHandler,
+}
+
+const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChange, value }) => {
+  return (
+    <ListItem label={label} hint={hint}>
+      <input
+        type='radio'
+        checked={checked}
+        onChange={onChange}
+        value={value}
+        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
+      />
+    </ListItem>
+  );
+};
+
+export {
+  RadioGroup,
+  RadioItem,
+};
\ No newline at end of file
diff --git a/app/soapbox/features/admin/components/registration-mode-picker.tsx b/app/soapbox/features/admin/components/registration-mode-picker.tsx
index 2c830153a..eab7f2f94 100644
--- a/app/soapbox/features/admin/components/registration-mode-picker.tsx
+++ b/app/soapbox/features/admin/components/registration-mode-picker.tsx
@@ -3,12 +3,7 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { updateConfig } from 'soapbox/actions/admin';
 import snackbar from 'soapbox/actions/snackbar';
-import {
-  SimpleForm,
-  FieldsGroup,
-  RadioGroup,
-  RadioItem,
-} from 'soapbox/features/forms';
+import { RadioGroup, RadioItem } from 'soapbox/components/radio';
 import { useAppDispatch, useInstance } from 'soapbox/hooks';
 
 import type { Instance } from 'soapbox/types/entities';
@@ -54,33 +49,26 @@ const RegistrationModePicker: React.FC = () => {
   };
 
   return (
-    <SimpleForm>
-      <FieldsGroup>
-        <RadioGroup
-          label={<FormattedMessage id='admin.dashboard.registration_mode_label' defaultMessage='Registrations' />}
-          onChange={onChange}
-        >
-          <RadioItem
-            label={<FormattedMessage id='admin.dashboard.registration_mode.open_label' defaultMessage='Open' />}
-            hint={<FormattedMessage id='admin.dashboard.registration_mode.open_hint' defaultMessage='Anyone can join.' />}
-            checked={mode === 'open'}
-            value='open'
-          />
-          <RadioItem
-            label={<FormattedMessage id='admin.dashboard.registration_mode.approval_label' defaultMessage='Approval Required' />}
-            hint={<FormattedMessage id='admin.dashboard.registration_mode.approval_hint' defaultMessage='Users can sign up, but their account only gets activated when an admin approves it.' />}
-            checked={mode === 'approval'}
-            value='approval'
-          />
-          <RadioItem
-            label={<FormattedMessage id='admin.dashboard.registration_mode.closed_label' defaultMessage='Closed' />}
-            hint={<FormattedMessage id='admin.dashboard.registration_mode.closed_hint' defaultMessage='Nobody can sign up. You can still invite people.' />}
-            checked={mode === 'closed'}
-            value='closed'
-          />
-        </RadioGroup>
-      </FieldsGroup>
-    </SimpleForm>
+    <RadioGroup onChange={onChange}>
+      <RadioItem
+        label={<FormattedMessage id='admin.dashboard.registration_mode.open_label' defaultMessage='Open' />}
+        hint={<FormattedMessage id='admin.dashboard.registration_mode.open_hint' defaultMessage='Anyone can join.' />}
+        checked={mode === 'open'}
+        value='open'
+      />
+      <RadioItem
+        label={<FormattedMessage id='admin.dashboard.registration_mode.approval_label' defaultMessage='Approval Required' />}
+        hint={<FormattedMessage id='admin.dashboard.registration_mode.approval_hint' defaultMessage='Users can sign up, but their account only gets activated when an admin approves it.' />}
+        checked={mode === 'approval'}
+        value='approval'
+      />
+      <RadioItem
+        label={<FormattedMessage id='admin.dashboard.registration_mode.closed_label' defaultMessage='Closed' />}
+        hint={<FormattedMessage id='admin.dashboard.registration_mode.closed_hint' defaultMessage='Nobody can sign up. You can still invite people.' />}
+        checked={mode === 'closed'}
+        value='closed'
+      />
+    </RadioGroup>
   );
 };
 
diff --git a/app/soapbox/features/admin/tabs/dashboard.tsx b/app/soapbox/features/admin/tabs/dashboard.tsx
index 66037845e..40e1bd4fb 100644
--- a/app/soapbox/features/admin/tabs/dashboard.tsx
+++ b/app/soapbox/features/admin/tabs/dashboard.tsx
@@ -78,7 +78,15 @@ const Dashboard: React.FC = () => {
         />
       </DashCounters>
 
-      {account.admin && <RegistrationModePicker />}
+      {account.admin && (
+        <>
+          <CardTitle
+            title={<FormattedMessage id='admin.dashboard.registration_mode_label' defaultMessage='Registrations' />}
+          />
+
+          <RegistrationModePicker />
+        </>
+      )}
 
       <CardTitle
         title={<FormattedMessage id='admin.dashwidgets.software_header' defaultMessage='Software' />}
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index b4b13a503..5d853e581 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -1,8 +1,8 @@
 import classNames from 'clsx';
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
-import { Text, Select } from '../../components/ui';
+import { Select } from '../../components/ui';
 
 interface IInputContainer {
   label?: React.ReactNode,
@@ -175,52 +175,6 @@ export const Checkbox: React.FC<ICheckbox> = (props) => (
   <SimpleInput type='checkbox' {...props} />
 );
 
-interface IRadioGroup {
-  label?: React.ReactNode,
-  onChange?: React.ChangeEventHandler,
-}
-
-export const RadioGroup: React.FC<IRadioGroup> = (props) => {
-  const { label, children, onChange } = props;
-
-  const childrenWithProps = React.Children.map(children, child =>
-    // @ts-ignore
-    React.cloneElement(child, { onChange }),
-  );
-
-  return (
-    <div className='input with_floating_label radio_buttons'>
-      <div className='label_input'>
-        <label>{label}</label>
-        <ul>{childrenWithProps}</ul>
-      </div>
-    </div>
-  );
-};
-
-interface IRadioItem {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  value: string,
-  checked: boolean,
-  onChange?: React.ChangeEventHandler,
-}
-
-export const RadioItem: React.FC<IRadioItem> = (props) => {
-  const { current: id } = useRef<string>(uuidv4());
-  const { label, hint, checked = false, ...rest } = props;
-
-  return (
-    <li className='radio'>
-      <label htmlFor={id}>
-        <input id={id} type='radio' checked={checked} {...rest} />
-        <Text>{label}</Text>
-        {hint && <span className='hint'>{hint}</span>}
-      </label>
-    </li>
-  );
-};
-
 interface ISelectDropdown {
   label?: React.ReactNode,
   hint?: React.ReactNode,