Add SectionTitleContainer in UserProfilesPage

src/components/dashboard/users/SectionTitleContainer.tsx

@@ -1,21 +1,31 @@
 import React, { FunctionComponent } from 'react';
+import SectionTitleButtonElement from './SectionTitleButtonElement';
 import SectionTitleLinkElement from './SectionTitleLinkElement';
 
 type IProps = {
     title: string;
+    isBtnVisible?: boolean;
+    titleLink?: string;
 }
 
-const SectionTitleContainer: FunctionComponent<IProps> = ({title}: IProps) => {
+const SectionTitleContainer: FunctionComponent<IProps> = ({title, isBtnVisible, titleLink}: IProps) => {
     return (
         <div className='verticalSection'>
             <div className='sectionTitleContainer flex align-items-center'>
                 <h2 className='sectionTitle'>
                     {title}
                 </h2>
+
+                {isBtnVisible && <SectionTitleButtonElement
+                    className='fab btnAddUser submit sectionTitleButton'
+                    title='ButtonAddUser'
+                    icon='add'
+                />}
+
                 <SectionTitleLinkElement
                     className='raised button-alt headerHelpButton'
                     title='Help'
-                    url='https://docs.jellyfin.org/general/server/users/'
+                    url={titleLink}
                 />
             </div>
         </div>

src/components/pages/NewUserPage.tsx

@@ -177,7 +177,11 @@ const NewUserPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer title={globalize.translate('ButtonAddUser')}/>
+                <SectionTitleContainer
+                    title={globalize.translate('HeaderAddUser')}
+                    isBtnVisible={false}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
                         <InputElement

src/components/pages/UserEditPage.tsx

@@ -278,7 +278,11 @@ const UserEditPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer title={userName}/>
+                <SectionTitleContainer
+                    title={userName}
+                    isBtnVisible={false}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='useredit'/>
                 <div
                     className='lnkEditUserPreferencesContainer'

src/components/pages/UserLibraryAccessPage.tsx

@@ -228,7 +228,11 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer title={userName}/>
+                <SectionTitleContainer
+                    title={userName}
+                    isBtnVisible={false}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='userlibraryaccess'/>
                 <form className='userLibraryAccessForm'>
                     <AccessContainer

src/components/pages/UserParentalControl.tsx

@@ -319,7 +319,11 @@ const UserParentalControl: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <SectionTitleContainer title={userName}/>
+                <SectionTitleContainer
+                    title={userName}
+                    isBtnVisible={false}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='userparentalcontrol'/>
                 <form className='userParentalControlForm'>
                     <div className='selectContainer'>

src/components/pages/UserPasswordPage.tsx

@@ -23,7 +23,11 @@ const UserPasswordPage: FunctionComponent = () => {
     return (
         <div>
             <div className='content-primary'>
-                <SectionTitleContainer title={userName}/>
+                <SectionTitleContainer
+                    title={userName}
+                    isBtnVisible={false}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm

src/components/pages/UserProfilesPage.tsx

@@ -6,8 +6,7 @@ import loading from '../loading/loading';
 import dom from '../../scripts/dom';
 import confirm from '../../components/confirm/confirm';
 import UserCardBox from '../dashboard/users/UserCardBox';
-import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../components/cardbuilder/card.scss';
@@ -133,30 +132,16 @@ const UserProfilesPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection verticalSection-extrabottompadding'>
+                <SectionTitleContainer
-                    <div
+                    title={globalize.translate('HeaderUsers')}
-                        className='sectionTitleContainer sectionTitleContainer-cards'
+                    isBtnVisible={true}
-                        style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
+                    titleLink='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
-                    >
+                />
-                        <h2 className='sectionTitle sectionTitle-cards'>
+
-                            {globalize.translate('HeaderUsers')}
+                <div className='localUsers itemsContainer vertical-wrap'>
-                        </h2>
+                    {users.map(user => {
-                        <SectionTitleButtonElement
+                        return <UserCardBox key={user.Id} user={user} />;
-                            className='fab btnAddUser submit sectionTitleButton'
+                    })}
-                            title='ButtonAddUser'
-                            icon='add'
-                        />
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
-                        />
-                    </div>
-                    <div className='localUsers itemsContainer vertical-wrap'>
-                        {users.map(user => {
-                            return <UserCardBox key={user.Id} user={user} />;
-                        })}
-                    </div>
                 </div>
             </div>
         </div>