From 537827201040a38b88d76ea6a5e5d56c3e2d62df Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 5 Jun 2024 19:42:48 +0300
Subject: [PATCH] UI: Fix layout

---
 .../src/pages/LibraryPage/SearchPanel.tsx     | 17 +++----
 rsconcept/frontend/src/pages/LoginPage.tsx    |  2 +-
 .../frontend/src/pages/OssPage/OssTabs.tsx    |  4 +-
 .../frontend/src/pages/PasswordChangePage.tsx |  4 +-
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  4 +-
 rsconcept/frontend/src/pages/RegisterPage.tsx | 45 ++++++++++---------
 .../src/pages/RestorePasswordPage.tsx         |  8 +++-
 .../src/pages/UserProfilePage/UserTabs.tsx    |  4 +-
 8 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index d47d7060..c026b804 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -73,17 +73,14 @@ function SearchPanel({
       className={clsx(
         'sticky top-0', // prettier: split lines
         'w-full h-[2.2rem]',
-        'pr-3 flex items-center',
+        'flex items-center',
         'border-b',
         'text-sm',
         'clr-input'
       )}
     >
-      <div className={clsx('px-2 self-center', 'min-w-[9rem]', 'select-none', 'whitespace-nowrap')}>
-        Фильтр
-        <span className='ml-2'>
-          {filtered} из {total}
-        </span>
+      <div className={clsx('px-3 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
+        {filtered} из {total}
       </div>
 
       <div className='cc-icons'>
@@ -113,9 +110,9 @@ function SearchPanel({
       <div className='flex items-center h-full mx-auto'>
         <SearchBar
           id='library_search'
-          placeholder='Атрибуты'
+          placeholder='Поиск'
           noBorder
-          className='min-w-[8rem]'
+          className='min-w-[7rem] sm:min-w-[10rem]'
           value={query}
           onChange={setQuery}
         />
@@ -137,7 +134,7 @@ function SearchPanel({
             text={head ?? '//'}
           />
 
-          <Dropdown isOpen={headMenu.isOpen} className='z-modalTooltip'>
+          <Dropdown isOpen={headMenu.isOpen} stretchLeft className='z-modalTooltip'>
             <DropdownButton className='w-[10rem]' onClick={() => handleChange(undefined)}>
               <div className='inline-flex items-center gap-3'>
                 <IconFolder size='1rem' className='clr-text-controls' />
@@ -173,7 +170,7 @@ function SearchPanel({
         />
       </div>
 
-      <BadgeHelp topic={HelpTopic.UI_LIBRARY} className='max-w-[30rem] text-sm' offset={5} place='right-start' />
+      <BadgeHelp topic={HelpTopic.UI_LIBRARY} className='max-w-[28rem] text-sm' offset={5} place='right-start' />
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/pages/LoginPage.tsx b/rsconcept/frontend/src/pages/LoginPage.tsx
index ea875c9f..02989b97 100644
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@@ -53,7 +53,7 @@ function LoginPage() {
   }
   return (
     <AnimateFade>
-      <form className={clsx('cc-column', 'w-[24rem]', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
         <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
         <TextInput
           id='username'
diff --git a/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx b/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx
index f790f751..ac6a9505 100644
--- a/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/OssTabs.tsx
@@ -153,7 +153,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response) {
     if (error.response.status === 404) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>{`Операционная схема с указанным идентификатором отсутствует`}</p>
           <div className='flex justify-center'>
             <TextURL text='Библиотека' href='/library' />
@@ -162,7 +162,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
       );
     } else if (error.response.status === 403) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>Владелец ограничил доступ к данной схеме</p>
           <TextURL text='Библиотека' href='/library' />
         </div>
diff --git a/rsconcept/frontend/src/pages/PasswordChangePage.tsx b/rsconcept/frontend/src/pages/PasswordChangePage.tsx
index 49ca49a4..0f89569a 100644
--- a/rsconcept/frontend/src/pages/PasswordChangePage.tsx
+++ b/rsconcept/frontend/src/pages/PasswordChangePage.tsx
@@ -70,7 +70,7 @@ function PasswordChangePage() {
       isLoading={loading}
       hasNoData={!isTokenValid}
     >
-      <form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
         <TextInput
           id='new_password'
           type='password'
@@ -113,7 +113,7 @@ export default PasswordChangePage;
 // ====== Internals =========
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
-    return <div className='mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
+    return <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
   } else {
     return <InfoError error={error} />;
   }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index ef2a2162..2f37de51 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -290,7 +290,7 @@ function ProcessError({
   if (axios.isAxiosError(error) && error.response) {
     if (error.response.status === 404) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>{`Концептуальная схема с указанным идентификатором ${isArchive ? 'и версией ' : ''}отсутствует`}</p>
           <div className='flex justify-center'>
             <TextURL text='Библиотека' href='/library' />
@@ -301,7 +301,7 @@ function ProcessError({
       );
     } else if (error.response.status === 403) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>Владелец ограничил доступ к данной схеме</p>
           <TextURL text='Библиотека' href='/library' />
         </div>
diff --git a/rsconcept/frontend/src/pages/RegisterPage.tsx b/rsconcept/frontend/src/pages/RegisterPage.tsx
index ecf60832..ba3f4963 100644
--- a/rsconcept/frontend/src/pages/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage.tsx
@@ -83,19 +83,24 @@ function RegisterPage() {
   }
   return (
     <AnimateFade>
-      <form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
-        <h1>Новый пользователь</h1>
+      <form className={clsx('cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
+        <h1>
+          <span>Новый пользователь</span>
+          <Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>
+            <IconHelp size='1.25rem' className='icon-primary' />
+          </Overlay>
+          <Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
+            используйте уникальный пароль для каждого сайта
+          </Tooltip>
+          <Overlay id={globals.email_tooltip} position='top-[0.5rem] right-[1.75rem]'>
+            <IconHelp size='1.25rem' className='icon-primary' />
+          </Overlay>
+          <Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
+            электронная почта используется для восстановления пароля
+          </Tooltip>
+        </h1>
         <div className='flex gap-12'>
           <FlexColumn>
-            <div className='absolute'>
-              <Overlay id={globals.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
-                <IconHelp size='1.25rem' className='icon-primary' />
-              </Overlay>
-              <Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
-                используйте уникальный пароль для каждого сайта
-              </Tooltip>
-            </div>
-
             <TextInput
               id='username'
               autoComplete='username'
@@ -130,15 +135,6 @@ function RegisterPage() {
           </FlexColumn>
 
           <FlexColumn className='w-[15rem]'>
-            <div className='absolute'>
-              <Overlay id={globals.email_tooltip} position='top-[0rem] right-[-15rem]'>
-                <IconHelp size='1.25rem' className='icon-primary' />
-              </Overlay>
-              <Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
-                электронная почта используется для восстановления пароля
-              </Tooltip>
-            </div>
-
             <TextInput
               id='email'
               autoComplete='email'
@@ -192,11 +188,16 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
     if ('email' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='w-full text-sm text-center select-text clr-text-red'>{error.response.data.email}.</div>
+        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.email}.</div>
+      );
+    } else if ('username' in error.response.data) {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.username}.</div>
       );
     } else {
       return (
-        <div className='text-sm select-text clr-text-red'>
+        <div className='mx-auto text-sm select-text clr-text-red'>
           <PrettyJson data={error.response} />
         </div>
       );
diff --git a/rsconcept/frontend/src/pages/RestorePasswordPage.tsx b/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
index beaef1f0..a860098b 100644
--- a/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
+++ b/rsconcept/frontend/src/pages/RestorePasswordPage.tsx
@@ -35,9 +35,11 @@ function RestorePasswordPage() {
   return (
     <AnimateFade>
       {!isCompleted ? (
-        <form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
+        <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
           <TextInput
             id='email'
+            autoComplete='email'
+            required
             allowEnter
             label='Электронная почта'
             value={email}
@@ -69,7 +71,9 @@ export default RestorePasswordPage;
 // ====== Internals =========
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
-    return <div className='mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>;
+    return (
+      <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>
+    );
   } else {
     return <InfoError error={error} />;
   }
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
index d7380fd5..f4e79272 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
@@ -34,8 +34,8 @@ function UserTabs() {
       error={error}
       hasNoData={!user}
     >
-      <AnimateFade className='flex gap-6 py-2'>
-        <div>
+      <AnimateFade className='flex gap-6 py-2 mx-auto w-fit'>
+        <div className='w-fit'>
           <Overlay position='top-0 right-0'>
             <MiniButton
               title='Отслеживаемые схемы'