From 2fc9741d57446f0156506e7245654d8c6ab492e6 Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Sat, 7 May 2022 23:27:33 +0300
Subject: [PATCH] Add SectionTitleContainer in UserProfilesPage

---
 .../dashboard/users/SectionTitleContainer.tsx | 14 ++++++-
 src/components/pages/NewUserPage.tsx          |  6 ++-
 src/components/pages/UserEditPage.tsx         |  6 ++-
 .../pages/UserLibraryAccessPage.tsx           |  6 ++-
 src/components/pages/UserParentalControl.tsx  |  6 ++-
 src/components/pages/UserPasswordPage.tsx     |  6 ++-
 src/components/pages/UserProfilesPage.tsx     | 37 ++++++-------------
 7 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx
index 2347fac8f7..03d6478c2f 100644
--- a/src/components/dashboard/users/SectionTitleContainer.tsx
+++ b/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>
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx
index 8d42140885..9642e29856 100644
--- a/src/components/pages/NewUserPage.tsx
+++ b/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
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx
index 39f07bfe47..967d0de421 100644
--- a/src/components/pages/UserEditPage.tsx
+++ b/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'
diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx
index aadb3bc2f7..5e430ed529 100644
--- a/src/components/pages/UserLibraryAccessPage.tsx
+++ b/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
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx
index 8774ccee1d..9bc84dc131 100644
--- a/src/components/pages/UserParentalControl.tsx
+++ b/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'>
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx
index ef8bd3ca33..91e7898c1f 100644
--- a/src/components/pages/UserPasswordPage.tsx
+++ b/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
diff --git a/src/components/pages/UserProfilesPage.tsx b/src/components/pages/UserProfilesPage.tsx
index 8ed6c0cc4c..0ad54b817b 100644
--- a/src/components/pages/UserProfilesPage.tsx
+++ b/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 SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 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'>
-                    <div
-                        className='sectionTitleContainer sectionTitleContainer-cards'
-                        style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
-                    >
-                        <h2 className='sectionTitle sectionTitle-cards'>
-                            {globalize.translate('HeaderUsers')}
-                        </h2>
-                        <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/adding-managing-users.html'
-                        />
-                    </div>
-                    <div className='localUsers itemsContainer vertical-wrap'>
-                        {users.map(user => {
-                            return <UserCardBox key={user.Id} user={user} />;
-                        })}
-                    </div>
+                <SectionTitleContainer
+                    title={globalize.translate('HeaderUsers')}
+                    isBtnVisible={true}
+                    titleLink='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
+                />
+
+                <div className='localUsers itemsContainer vertical-wrap'>
+                    {users.map(user => {
+                        return <UserCardBox key={user.Id} user={user} />;
+                    })}
                 </div>
             </div>
         </div>