center notification icon on settings and make label clickable

stylesheets/_session.scss

@@ -1086,23 +1086,18 @@ label {
   border: none;
   margin-inline-start: $session-margin-sm;
   margin-top: $session-margin-sm;
-
-  .session-radio {
-    padding: $session-margin-xs 0px;
-  }
 }
 
-.session-radio {
+.session-radio-group fieldset {
   input[type='radio'] {
-    border: 0;
     opacity: 0;
-    padding: 0;
     position: absolute;
     cursor: pointer;
   }
 
   label {
     margin-inline-end: 1em;
+    cursor: pointer;
   }
 
   label:before {
@@ -1112,7 +1107,7 @@ label {
     height: 0.5em;
     margin-inline-end: 0.8em;
     border-radius: 100%;
-    vertical-align: -3px;
+    vertical-align: 0px;
     border: 2px solid rgba($session-color-white, 0.6);
     padding: 0.2em;
     @include themify($themes) {

ts/components/session/SessionRadio.tsx

@@ -1,58 +1,40 @@
 import React from 'react';
+import { Flex } from './Flex';
+// tslint:disable: react-unused-props-and-state
 
 interface Props {
   label: string;
   value: string;
   active: boolean;
   group?: string;
-  onClick: any;
+  onClick: (value: string) => any;
 }
 
-interface State {
-  active: boolean;
-}
-
-export class SessionRadio extends React.PureComponent<Props, State> {
-  public static defaultProps = {
-    onClick: () => null,
-  };
+export const SessionRadio = (props: Props) => {
+  const { label, group, value, active, onClick } = props;
 
-  constructor(props: any) {
-    super(props);
-    this.clickHandler = this.clickHandler.bind(this);
+  function clickHandler(e: any) {
+    e.stopPropagation();
+    console.warn(`SessionRadio clickHandler ${value}`);
 
-    this.state = {
-      active: this.props.active,
-    };
+    onClick(value);
   }
 
-  public render() {
-    const active = this.state.active;
-    const { label, group, value } = this.props;
-
-    return (
-      <div className="session-radio">
-        <input
-          type="radio"
-          name={group || ''}
-          value={value}
-          defaultChecked={active}
-          aria-checked={active}
-          onClick={this.clickHandler}
-        />
-        <label>{label} </label>
-      </div>
-    );
-  }
-
-  private clickHandler(e: any) {
-    if (this.props.onClick) {
-      e.stopPropagation();
-      this.props.onClick();
-
-      this.setState({
-        active: !this.state.active,
-      });
-    }
-  }
-}
+  console.warn(`isactive ${value}: ${active}`);
+
+  return (
+    <Flex>
+      <input
+        type="radio"
+        name={group || ''}
+        value={value}
+        aria-checked={active}
+        checked={active}
+        onClick={clickHandler}
+      />
+      <label role="button" onClick={clickHandler}>
+        {label}
+      </label>
+    </Flex>
+  );
+};

ts/components/session/SessionRadioGroup.tsx

@@ -1,60 +1,45 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { SessionRadio } from './SessionRadio';
 
 interface Props {
-  initalItem: string;
+  // tslint:disable: react-unused-props-and-state
+  initialItem: string;
   items: Array<any>;
   group: string;
-  onClick?: any;
+  onClick: (selectedValue: string) => any;
 }
 
-interface State {
-  activeItem: string;
-}
-
-export class SessionRadioGroup extends React.PureComponent<Props, State> {
-  public static defaultProps = {
-    onClick: () => null,
-  };
-
-  constructor(props: any) {
-    super(props);
-    this.clickHandler = this.clickHandler.bind(this);
-
-    this.state = {
-      activeItem: this.props.initalItem,
-    };
-  }
-
-  public render() {
-    const { items, group } = this.props;
-
-    return (
-      <div className="session-radio-group">
-        <fieldset id={group}>
-          {items.map(item => {
-            const itemIsActive = item.value === this.state.activeItem;
-
-            return (
-              <SessionRadio
-                key={item.value}
-                label={item.label}
-                active={itemIsActive}
-                value={item.value}
-                group={group}
-                onClick={this.clickHandler}
-              />
-            );
-          })}
-        </fieldset>
-      </div>
-    );
-  }
-
-  private clickHandler() {
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  }
-}
+export const SessionRadioGroup = (props: Props) => {
+  const [activeItem, setActiveItem] = useState('');
+  const { items, group, initialItem } = props;
+
+  useEffect(() => {
+    console.warn('unMNount:', initialItem);
+    setActiveItem(initialItem);
+  }, []);
+
+  return (
+    <div className="session-radio-group">
+      <fieldset id={group}>
+        {items.map(item => {
+          const itemIsActive = item.value === activeItem;
+
+          return (
+            <SessionRadio
+              key={item.value}
+              label={item.label}
+              active={itemIsActive}
+              value={item.value}
+              group={group}
+              onClick={(value: string) => {
+                setActiveItem(value);
+                props.onClick(value);
+              }}
+            />
+          );
+        })}
+      </fieldset>
+    </div>
+  );
+};

ts/components/session/settings/SessionSettingListItem.tsx

@@ -80,10 +80,12 @@ export class SessionSettingListItem extends React.Component<Props, State> {
 
           {type === SessionSettingType.Options && (
             <SessionRadioGroup
-              initalItem={content.options.initalItem}
+              initialItem={content.options.initalItem}
               group={content.options.group}
               items={content.options.items}
-              onClick={this.handleClick}
+              onClick={(selectedRadioValue: string) => {
+                this.props.onClick(selectedRadioValue);
+              }}
             />
           )}
 

ts/components/session/settings/SessionSettings.tsx

@@ -139,8 +139,8 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
 
             const onClickFn =
               setting.onClick ||
-              (() => {
-                this.updateSetting(setting);
+              ((value?: string) => {
+                this.updateSetting(setting, value);
               });
 
             return (
@@ -263,10 +263,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
     );
   }
 
-  public setOptionsSetting(settingID: string) {
-    const selectedValue = jQuery(
-      `#${settingID} .session-radio input:checked`
-    ).val();
+  public setOptionsSetting(settingID: string, selectedValue: string) {
     window.setSettingValue(settingID, selectedValue);
   }
 
@@ -278,12 +275,16 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
     });
   }
 
-  public updateSetting(item: any) {
+  public updateSetting(item: any, value?: string) {
     // If there's a custom afterClick function,
     // execute it instead of automatically updating settings
 
     if (item.setFn) {
-      item.setFn();
+      if (value) {
+        item.setFn(value);
+      } else {
+        item.setFn();
+      }
     } else {
       if (item.type === SessionSettingType.Toggle) {
         // If no custom afterClick function given, alter values in storage here
@@ -382,8 +383,8 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
         description: undefined,
         hidden: undefined,
         onClick: undefined,
-        setFn: () => {
-          this.setOptionsSetting('notification-setting');
+        setFn: (selectedValue: string) => {
+          this.setOptionsSetting('notification-setting', selectedValue);
         },
         content: {
           options: {