apply suggestions

src/components/dashboard/users/CheckBoxElement.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
-const createCheckBoxElement = ({ type, className, title }) => ({
+const createCheckBoxElement = ({ labelClassName, type, className, title }) => ({
-    __html: `<label>
+    __html: `<label class="${labelClassName}">
         <input
             is="emby-checkbox"
             type="${type}"
@@ -13,15 +13,18 @@ const createCheckBoxElement = ({ type, className, title }) => ({
 });
 
 type IProps = {
+    labelClassName?: string;
     type?: string;
     className?: string;
     title?: string
 }
 
-const CheckBoxElement: FunctionComponent<IProps> = ({ type, className, title }: IProps) => {
+const CheckBoxElement: FunctionComponent<IProps> = ({ labelClassName, type, className, title }: IProps) => {
     return (
         <div
+            className='sectioncheckbox'
             dangerouslySetInnerHTML={createCheckBoxElement({
+                labelClassName: labelClassName ? labelClassName : '',
                 type: type,
                 className: className,
                 title: globalize.translate(title)

src/components/dashboard/users/SectionTabs.tsx

@@ -0,0 +1,52 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+
+type IProps = {
+    activeTab: string;
+}
+
+const createLinkElement = ({ activeTab }) => ({
+    __html: `<a href="#"
+        is="emby-linkbutton"
+        data-role="button"
+        class="${activeTab === 'useredit' ? 'ui-btn-active' : ''}"
+        onclick="Dashboard.navigate('useredit.html', true);">
+        ${globalize.translate('Profile')}
+    </a>
+    <a href="#"
+        is="emby-linkbutton"
+        data-role="button"
+        class="${activeTab === 'userlibraryaccess' ? 'ui-btn-active' : ''}"
+        onclick="Dashboard.navigate('userlibraryaccess.html', true);">
+        ${globalize.translate('TabAccess')}
+    </a>
+    <a href="#"
+        is="emby-linkbutton"
+        data-role="button"
+        class="${activeTab === 'userparentalcontrol' ? 'ui-btn-active' : ''}"
+        onclick="Dashboard.navigate('userparentalcontrol.html', true);">
+        ${globalize.translate('TabParentalControl')}
+    </a>
+    <a href="#"
+        is="emby-linkbutton"
+        data-role="button"
+        class="${activeTab === 'userpassword' ? 'ui-btn-active' : ''}"
+        onclick="Dashboard.navigate('userpassword.html', true);">
+        ${globalize.translate('HeaderPassword')}
+    </a>`
+});
+
+const SectionTabs: FunctionComponent<IProps> = ({activeTab}: IProps) => {
+    return (
+        <div
+            data-role='controlgroup'
+            data-type='horizontal'
+            className='localnav'
+            dangerouslySetInnerHTML={createLinkElement({
+                activeTab: activeTab
+            })}
+        />
+    );
+};
+
+export default SectionTabs;

src/components/dashboard/users/TabLinkElement.tsx

@@ -1,36 +0,0 @@
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { FunctionComponent } from 'react';
-import globalize from '../../../scripts/globalize';
-
-type IProps = {
-    tabTitle?: string;
-    activeTab?: boolean;
-    onClick()
-}
-
-const createLinkElement = ({ className, tabTitle }) => ({
-    __html: `<a
-        href="#"
-        is="emby-linkbutton"
-        data-role="button"
-        class="${className}"
-        >
-        ${tabTitle}
-    </a>`
-});
-
-const TabLinkElement: FunctionComponent<IProps> = ({ tabTitle, onClick, ...restactiveTab }: IProps) => {
-    return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        <div
-            onClick={onClick}
-            dangerouslySetInnerHTML={createLinkElement({
-                className: restactiveTab.activeTab ? 'ui-btn-active' : '',
-                tabTitle: globalize.translate(tabTitle)
-            })}
-        />
-    );
-};
-
-export default TabLinkElement;

src/components/pages/UserEditPage.tsx

@@ -11,7 +11,7 @@ import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences'
 import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SelectElement from '../dashboard/users/SelectElement';
 import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
-import TabLinkElement from '../dashboard/users/TabLinkElement';
+import SectionTabs from '../dashboard/users/SectionTabs';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
 
@@ -212,9 +212,9 @@ const UserEditPage: FunctionComponent = () => {
 
         element?.current?.querySelector('.chkEnableDeleteAllFolders').addEventListener('change', function (this: HTMLInputElement) {
             if (this.checked) {
-                element?.current?.querySelector('.deleteAccessListContainer').classList.add('hide');
+                element?.current?.querySelector('.deleteAccess').classList.add('hide');
             } else {
-                element?.current?.querySelector('.deleteAccessListContainer').classList.remove('hide');
+                element?.current?.querySelector('.deleteAccess').classList.remove('hide');
             }
         });
 
@@ -245,31 +245,7 @@ const UserEditPage: FunctionComponent = () => {
                         />
                     </div>
                 </div>
-                <div
+                <SectionTabs activeTab='useredit'/>
-                    data-role='controlgroup'
-                    data-type='horizontal'
-                    className='localnav'
-                    id='userProfileNavigation'
-                    style={{display: 'flex'}}
-                >
-                    <TabLinkElement
-                        activeTab={true}
-                        tabTitle='Profile'
-                        onClick={() => Dashboard.navigate('useredit.html', true)}
-                    />
-                    <TabLinkElement
-                        tabTitle='TabAccess'
-                        onClick={() => Dashboard.navigate('userlibraryaccess.html', true)}
-                    />
-                    <TabLinkElement
-                        tabTitle='TabParentalControl'
-                        onClick={() => Dashboard.navigate('userparentalcontrol.html', true)}
-                    />
-                    <TabLinkElement
-                        tabTitle='HeaderPassword'
-                        onClick={() => Dashboard.navigate('userpassword.html', true)}
-                    />
-                </div>
                 <div
                     className='lnkEditUserPreferencesContainer'
                     style={{paddingBottom: '1em'}}
@@ -331,6 +307,7 @@ const UserEditPage: FunctionComponent = () => {
                         </div>
                     </div>
                     <CheckBoxElement
+                        labelClassName='checkboxContainer'
                         type='checkbox'
                         className='chkIsAdmin'
                         title='OptionAllowUserToManageServer'
@@ -416,32 +393,27 @@ const UserEditPage: FunctionComponent = () => {
                             </div>
                         </div>
                     </div>
-                    <div className='verticalSection verticalSection-extrabottompadding'>
+                    <div className='verticalSection'>
-                        <h2>{globalize.translate('HeaderAllowMediaDeletionFrom')}</h2>
+                        <h2 className='checkboxListLabel' style={{marginBottom: '1em'}}>
-                        <CheckBoxElement
+                            {globalize.translate('HeaderAllowMediaDeletionFrom')}
-                            type='checkbox'
+                        </h2>
-                            className='chkEnableDeleteAllFolders'
+                        <div className='checkboxList paperList checkboxList-paperList'>
-                            title='AllLibraries'
+                            <CheckBoxElement
-                        />
+                                labelClassName='checkboxContainer'
-                        <div className='deleteAccessListContainer'>
+                                type='checkbox'
+                                className='chkEnableDeleteAllFolders'
+                                title='AllLibraries'
+                            />
                             <div className='deleteAccess'>
-                                <h3 className='checkboxListLabel'>
+                                {deleteFoldersAccess.map(Item => (
-                                    {globalize.translate('DeleteFoldersAccess')}
+                                    <CheckBoxListItem
-                                </h3>
+                                        key={Item.Id}
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
+                                        className='chkFolder'
-                                    {deleteFoldersAccess.map(Item => (
+                                        Id={Item.Id}
-                                        <CheckBoxListItem
+                                        Name={Item.Name}
-                                            key={Item.Id}
+                                        checkedAttribute={Item.checkedAttribute}
-                                            className='chkFolder'
+                                    />
-                                            Id={Item.Id}
+                                ))}
-                                            Name={Item.Name}
-                                            checkedAttribute={Item.checkedAttribute}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('DeleteFoldersAccessHelp')}
                             </div>
                         </div>
                     </div>

src/elements/emby-checkbox/emby-checkbox.scss

@@ -108,6 +108,11 @@
     width: 12em;
 }
 
+.checkboxList > .sectioncheckbox > .emby-checkbox-label {
+    display: flex;
+    margin: 0.5em 0;
+}
+
 .checkboxList-paperList {
     padding: 1em !important;
 }