minor changes

rsconcept/frontend/src/index.css

@@ -82,6 +82,13 @@
     @apply text-white bg-blue-400 hover:bg-blue-600 dark:bg-orange-600 dark:hover:bg-orange-400 disabled:bg-gray-400 dark:disabled:bg-gray-600
   }
 
+  .clr-btn-green {
+    @apply text-white bg-green-400 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-400 dark:text-black disabled:bg-gray-400 dark:disabled:bg-gray-600
+  }
+
+  .clr-btn-blue {
+    @apply text-white bg-blue-400 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-400 dark:text-black disabled:bg-gray-400 dark:disabled:bg-gray-600
+  }
   .clr-btn-default {
     @apply text-gray-600 dark:text-zinc-200 dark:disabled:text-zinc-400 disabled:text-gray-400 bg-[#f0f2f7] hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-400
   }

rsconcept/frontend/src/pages/UserProfilePage/ChangePassword.tsx

@@ -17,7 +17,7 @@ export function ChangePassword() {
   const navigate = useNavigate();
 
   const colorClass = useMemo(() => {
-    return !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'bg-red-500' : '';
+    return !!newPassword && !!newPasswordRepeat && newPassword !== newPasswordRepeat ? 'bg-red-500' : 'clr-input';
   }, [newPassword, newPasswordRepeat]);
   
   function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
@@ -35,39 +35,41 @@ export function ChangePassword() {
   }
 
   return (
-    <div className='flex-grow max-w-sm px-4'>
+    <div className='flex max-w-sm px-4 border-l-2'>
-    <form onSubmit={handleSubmit} className='flex-grow min-h-full px-6 py-2 border min-w-fit bg-slate-200'>
+      <form onSubmit={handleSubmit} className='flex flex-col justify-between px-6 min-w-fit '>
-        <TextInput id='old_password'
+        <div>
-          type='password' 
+          <TextInput id='old_password'
-          label='Введите старый пароль:'
+            type='password' 
-          value={oldPassword}
+            label='Введите старый пароль:'
-          onChange={event => setOldPassword(event.target.value)}
+            value={oldPassword}
-        />
+            onChange={event => setOldPassword(event.target.value)}
-        <TextInput id='new_password'
+          />
-          colorClass={colorClass}
+          <TextInput id='new_password'
-          label="Введите новый пароль:"
+            colorClass={colorClass}
-          value={newPassword}
+            label="Введите новый пароль:"
-          onChange={event => {
+            value={newPassword}
-            setNewPassword(event.target.value); 
+            onChange={event => {
-          }}
+              setNewPassword(event.target.value); 
-        />
+            }}
-        <TextInput id='new_password_repeat'
+          />
-          colorClass={colorClass}
+          <TextInput id='new_password_repeat'
-          label="Повторите новый пароль:"
+            colorClass={colorClass}
-          value={newPasswordRepeat}
+            label="Повторите новый пароль:"
-          onChange={event => {
+            value={newPasswordRepeat}
-            setNewPasswordRepeat(event.target.value); 
+            onChange={event => {
-          }}
+              setNewPasswordRepeat(event.target.value); 
-        />
+            }}
-        <div className='relative flex justify-center my-4 border'>
+          />          
+        </div>
+          { error && <BackendError error={error} />}
+        <div className='flex justify-center py-4'>
           <button 
             type='submit' 
-            className='absolute bottom-0 px-2 py-1 bg-blue-500 border'
+            className={`px-2 py-1 border clr-btn-blue`}
             disabled={loading}>
               <span>Сменить пароль</span>
           </button>
         </div>
-        { error && <BackendError error={error} />}
+      </form>
-    </form>   
+    </div>   
-    </div>  
   )}

rsconcept/frontend/src/pages/UserProfilePage/UserProfile.tsx

@@ -14,10 +14,6 @@ export function UserProfile() {
   const [email, setEmail] = useState('');
   const [first_name, setFirstName] = useState('');
   const [last_name, setLastName] = useState('');
-  
-  
-  // const [showChangePassword, setShowChangePassword] = useState(false);
-
 
   useLayoutEffect(() => {
     if (user) {
@@ -40,34 +36,39 @@ export function UserProfile() {
   }
 
   return (
-    <div><h1 className='flex justify-center py-2'> Учетные данные пользователя </h1>
+    <div className='flex justify-center'>
-    <div className='flex flex-row justify-center py-2'>
+      <div className='place-self-center'>
-    <div className='flex-grow max-w-sm px-4 '>
+        <h1 className='flex justify-center py-2'> Учетные данные пользователя </h1>
-    <form onSubmit={handleSubmit} className='flex-grow px-6 py-2 border center min-w-fit'>
+        <div className='flex justify-center px-6 py-2 max-w-fit'>
-        <TextInput id='username' 
+          <div className='flex max-w-sm px-4'>
-          label='Логин:'
+            <form onSubmit={handleSubmit} className='px-6 min-w-fit'>
-          value={username}
+              <div>
-          onChange={event => setUsername(event.target.value)}
+                <TextInput id='username' 
-        />
+                  label='Логин:'
-        <TextInput id='first_name'
+                  value={username}
-          label="Имя:"
+                  onChange={event => setUsername(event.target.value)}
-          value={first_name}
+                />
-          onChange={event => setFirstName(event.target.value)}
+                <TextInput id='first_name'
-        />
+                  label="Имя:"
-        <TextInput id='last_name' label="Фамилия:" value={last_name} onChange={event => setLastName(event.target.value)}/>
+                  value={first_name}
-        <TextInput id='email' label="Электронная почта:" value={email} onChange={event => setEmail(event.target.value)}/>
+                  onChange={event => setFirstName(event.target.value)}
-        <div className='flex items-center justify-center my-4'>
+                />
-          <button 
+                <TextInput id='last_name' label="Фамилия:" value={last_name} onChange={event => setLastName(event.target.value)}/>
-            type='submit' 
+                <TextInput id='email' label="Электронная почта:" value={email} onChange={event => setEmail(event.target.value)}/>
-            className='px-2 py-1 bg-green-500 border center'
+              </div>  
-            disabled={processing}>
+              <div className='flex justify-center px-0 py-4'>
-              <span>Сохранить мои данные</span>
+                <button 
-          </button>
+                  type='submit' 
-        </div>
+                  className={`px-2 py-1 border clr-btn-green`}
-         
+                  
-    </form>
+                  disabled={processing}>
-    </div>
+                    <span>Сохранить мои данные</span>
-    <ChangePassword /> 
+                </button>
-    </div>
+              </div>  
+            </form>   
+          </div>
+          <ChangePassword /> 
+        </div>   
+      </div>
     </div>
   )}

rsconcept/frontend/src/utils/constants.ts

@@ -24,7 +24,7 @@ export const urls = {
 };
 
 export const resources = {
-  graph_font: '/DejaVu.ttf'
+  graph_font: '/DejaVu_min.ttf'
 }
 
 export const prefixes = {