#1058 [Admin] Adjust pages for consistency

FrontEnd/src/components/MiniComponents/AdminSubmitButton.module.css

@@ -1,18 +1,16 @@
 .admin-submit__container {
     margin-top: 16px;
+    display: flex;
+    justify-content: center;
 }
 
 .admin-submit__button {
-    display: block;
-    width: 100%;
     border-radius: 4px;
-    border: 1px solid var(--main-button-color);
     background: var(--main-button-color);
-    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
-    color: var(--light-button-text-color);
+    color: var(--main-button-text-color);
     font-feature-settings: 'calt' off;
     font-style: normal;
-    padding: 5px 15px 5px 15px;
+    padding: 8px 15px;
     font-family: var(--font-main);
     font-size: 16px;
     font-weight: 600;
@@ -22,6 +20,10 @@
     cursor: pointer;
 }
 
+.admin-submit__button:hover {
+    background: var(--main-button-hover-color);
+}
+
 .admin-submit__button:active {
     transform: translateY(2px);
 }

FrontEnd/src/pages/AdminPage/AdminGlobal.css

@@ -1,16 +1,29 @@
 :root {
-    --font__admin-panel: "Inter", sans-serif;
+    --font__admin-panel: "Geologica", sans-serif;
     --block-size__admin-panel: 1512px;
-    --menu-size__admin-panel: 222px;
+    --menu-size__admin-panel: 270px;
     --table-size__admin-panel: 1000px;
     --font-color__admin-panel: #292E32;
     --notification-text-color__admin-panel: #ff4d4f;
-    --background__admin-panel: #F1FFF7;
+    --background__admin-panel: #FEFDF9;
     --background-input__admin-panel: #FFF;
     --border-input__admin-panel: #d9d9d9;
     --background-butons__admin-panel: #B4D27A;
     --button-color__admin-panel: #B4D27A;
     --button-text-color__admin-panel: #FFF;
     --error-notification-text-color__admin-panel: #f4282b;
     --box-shadow-color__admin-panel: rgba(0, 0, 0, 0.04);
+
+    --main-button-color: #000000;
+    --main-button-text-color: #FFFFFF;
+    --main-button-hover-color: #292929;
+    --main-button-disabled-color: #E5E5E5;
+    --main-button-disabled-text-color: #A1A1A1;
+    --main-button-border-color: #000000;
+    --main-button-hover-border-color: #333333;
+
+    --light-button-color: transparent;
+    --light-button-hover-color: #F1E7D280;
+    --light-button-text-color: #232424;
+    --light-button-border-color: #232424;
 }

FrontEnd/src/pages/AdminPage/AdminLayout.jsx

@@ -0,0 +1,21 @@
+import { NavLink } from 'react-router-dom';
+import Menu from './Menu/Menu';
+import css from './AdminLayout.module.css';
+
+const AdminLayout = ({ children }) => {
+    return (
+      <div className={css['admin-layout__wrapper']}>
+        <div className={css['admin-layout']}>
+            <NavLink className={css['admin-layout__title']} to={'/customadmin/'}>
+                <h2 className={css['admin-layout__title--text']}>Панель адміністратора</h2>
+            </NavLink>
+              <div className={css['admin-layout__content']}>
+                <Menu />
+                  <div className={css['admin-layout__children-section']}>{children}</div>
+            </div>
+        </div>
+      </div>
+    );
+  };
+
+  export default AdminLayout;

FrontEnd/src/pages/AdminPage/AdminLayout.module.css

@@ -0,0 +1,38 @@
+.admin-layout__wrapper {
+    display: flex;
+    background: var(--background__admin-panel);
+    min-height: calc(100vh - 75px);
+    justify-content: safe center;
+    overflow-x: auto;
+}
+
+.admin-layout {
+    display: flex;
+    flex-direction: column;
+    padding: 30px 104px;
+    width: 1304px;
+    min-width: 1304px;
+    gap: 24px;
+}
+
+.admin-layout__title {
+    color: var(--font-color__admin-panel);
+    font-feature-settings: 'calt' off;
+    text-decoration: none;
+    font-family: var(--font__admin-panel);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.16px;
+}
+
+.admin-layout__content {
+    display: flex;
+    gap: 96px;
+}
+
+.admin-layout__children-section {
+    flex-shrink: 0;
+    max-width: 938px;
+}

FrontEnd/src/pages/AdminPage/AdminPage.module.css

@@ -1,12 +1,5 @@
 .admin_block {
     width: var(--block-size__admin-panel);
-}
-
-.content-block {
-    width: 80%;
-}
-
-.content {
     display: flex;
-    align-items: flex-start;
-}
+    flex-direction: row;
+}

FrontEnd/src/pages/AdminPage/AdminProfile/AdminInfo.module.css

@@ -1,18 +1,17 @@
 .admin-info-form {
     display: flex;
-    padding: 0px 24px;
 }
 
 .admin-info-form__container {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
+    gap: 16px;
 }
 
 .admin-info-form__column {
     display: flex;
     width: 257px;
-    min-height: 84px;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
@@ -74,7 +73,8 @@
 
 .admin-info-form__input {
     display: flex;
-    height: 22px;
+    box-sizing: border-box;
+    height: 40px;
     padding: 5px 12px;
     align-items: center;
     gap: 4px;

FrontEnd/src/pages/AdminPage/AdminProfile/AdminProfilePage.jsx

@@ -2,7 +2,6 @@ import { NavLink, Route, Routes } from 'react-router-dom';
 
 import { useAuth } from '../../../hooks';
 
-import BreadCrumbs from '../../../components/BreadCrumbs/BreadCrumbs';
 import ChangeAdminPassword from './ChangeAdminPassword';
 import AdminInfo from './AdminInfo';
 
@@ -24,9 +23,9 @@ const AdminProfilePage = () => {
     const { user, mutate } = useAuth();
 
     return (
-        <div className={classes['admin-profile__container']}>
-            <BreadCrumbs currentPage="Профіль адміністратора" user={user}/>
-            <div className={classes['admin-profile__content']}>
+        <div className={classes['admin-profile__page']}>
+            <div className={classes['admin-profile__menu-section']}>
+                <p className={classes['admin-profile__menu-section--title']}>Профіль адміністратора</p>
                 <div className={classes['admin-profile__links']}>
                     {ADMIN_PAGE_TABS.map((element) => (
                         <NavLink
@@ -38,15 +37,15 @@ const AdminProfilePage = () => {
                         </NavLink>
                     ))}
                 </div>
-                <Routes>
-                    <Route
-                        path="admin-info"
-                        element={<AdminInfo user={user} mutate={mutate} />} />
-                    <Route
-                        path="change-password"
-                        element={<ChangeAdminPassword user={user}/>} />
-                </Routes>
             </div>
+            <Routes>
+                <Route
+                    path="admin-info"
+                    element={<AdminInfo user={user} mutate={mutate} />} />
+                <Route
+                    path="change-password"
+                    element={<ChangeAdminPassword user={user}/>} />
+            </Routes>
         </div>
     );
 };

FrontEnd/src/pages/AdminPage/AdminProfile/AdminProfilePage.module.css

@@ -1,20 +1,23 @@
-.admin-profile__container {
-    margin-top: 40px;
+.admin-profile__page {
     display: flex;
-    align-items: flex-start;
-    gap: 20px;
-    flex-direction: column;
+    flex-direction: row;
+    gap: 96px;
 }
 
-.admin-profile__content {
+.admin-profile__menu-section {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.admin-profile__menu-section--title {
+    font-size: 16px;
+    font-weight: 600;
 }
 
 .admin-profile__links {
     display: flex;
     flex-direction: column;
-    padding-left: 10%;
     align-items: flex-start;
     width: var(--menu-size__admin-panel);
     gap: 12px;

FrontEnd/src/pages/AdminPage/AdminProfile/ChangeAdminPassword.jsx

@@ -55,7 +55,7 @@ export default function ChangeAdminPassword(props) {
   return (
     <div className={classes['form__container']}>
       {props.user ? (
-        <form id="ChangeAdminPassword" onSubmit={handleSubmit(handleFormSubmit)} >
+        <form className={classes['change-password-form']} id="ChangeAdminPassword" onSubmit={handleSubmit(handleFormSubmit)} >
             <PasswordField
               inputId="currentAdminPassword"
               name="currentPassword"

FrontEnd/src/pages/AdminPage/AdminProfile/ChangeAdminPassword.module.css

@@ -1,14 +1,12 @@
 .form__container {
     display: flex;
     flex-direction: column;
-    padding: 0px 24px;
     word-wrap: break-word;
-
 }
 
-.form-new-password {
+.change-password-form {
     display: flex;
-    flex-direction: row;
-    gap: 8px;
-    align-items: center;
+    flex-direction: column;
+    gap: 16px;
+    margin-left: -23px;
 }

FrontEnd/src/pages/AdminPage/AdminRegistration/AdminRegistration.jsx

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { toast } from 'react-toastify';
-import { Tooltip } from 'antd';
+import { Tooltip, Input } from 'antd';
 import { useState } from 'react';
 import { EMAIL_PATTERN } from '../../../constants/constants';
 import css from './AdminRegistration.module.css';
@@ -35,10 +35,16 @@ const AdminRegistration = () => {
             setError('Будь ласка, введіть дійсну електронну адресу');
     };
 
+    const handleCancel = () => {
+        setEmail('');
+    };
+
     return (
         <div className={css['admin_registration-section']}>
-            <h3>Реєстрація Адміністратора</h3>
             <div className={css['admin_registration-outer-wrapper']}>
+                <p className={css['admin_registration-section__head']}>Зареєструйте користувача, який буде виконувати функції адміністратора сайту.
+                    <br/>На вказану електронну адресу буде надіслано згенерований для користувача пароль.
+                </p>
                 <label className={css['admin_registration-label']} htmlFor="newAdminEmail">
                     <span className={css['admin_registration-asterisk']} >*</span>
                     Електронна адреса
@@ -47,16 +53,18 @@ const AdminRegistration = () => {
                     <Tooltip
                         title={'Введіть тут електронну пошту особи, яку потрібно зареєструвати в якості адміністратора'}
                         placement="top">
-                        <input className={css['admin_registration-input']}
+                        <Input className={css['admin_registration-input']}
                             id="newAdminEmail"
                             onChange={handleInputChange}
-                            type="text"
+                            type="email"
                             placeholder="Введіть електронну пошту"
-                            autoComplete="off" />
+                            autoComplete="off"
+                            value={email}/>
                     </Tooltip>
-                    <button className={css['admin_registration-button']} onClick={handleSubmit}>
-                        Згенерувати та надіслати пароль
-                    </button>
+                    <div className={css['buttons-group']}>
+                        <button className={css['admin_registration-button']} onClick={handleSubmit}>Надіслати</button>
+                        <button className={`${css['admin_registration-button']} ${css['cancel-button']}`} onClick={handleCancel}>Скасувати</button>
+                    </div>
                 </div>
                 {error && <p className={css['admin_registration-error']} >{error}</p>}
             </div>