Merge pull request #156 from h0wter/fix/th-125-fix-header

th-125: Fix content positioning below the header

Author: kalinkaaaa14

frontend/src/libs/components/components.ts

@@ -15,6 +15,7 @@ export { Link } from './link/link.js';
 export { LocationInput } from './location-input/location-input.js';
 export { Modal } from './modal/modal.js';
 export { Notification } from './notification/notification.js';
+export { PageLayout } from './page-layout/page-layout.js';
 export { Pagination } from './pagination/pagination.js';
 export { ProtectedRoute } from './protected-route/protected-route.js';
 export { Radio } from './radio/radio.js';

frontend/src/libs/components/input/styles.module.scss

@@ -88,6 +88,7 @@ $error-message-height: calc($error-font-size * $line-height-coefficient);
   top: 8px;
   right: 15px;
   cursor: pointer;
+  user-select: none;
 }
 
 .inputWrapper {

frontend/src/libs/components/page-layout/page-layout.tsx

@@ -4,13 +4,14 @@ import { useCallback, useState } from '~/libs/hooks/hooks.js';
 import { type TabName } from '~/libs/types/types.js';
 import { Sidebar } from '~/pages/dashboard/components/sidebar/sidebar.js';
 
-import { Header } from '../components.js';
+import { Header } from '../header/header.js';
+import { RouterOutlet } from '../router/router.js';
 import styles from './styles.module.scss';
 
 type Properties = {
   isHeaderHidden?: boolean;
   isSidebarHidden?: boolean;
-  children: JSX.Element;
+  children?: JSX.Element;
 };
 
 const PageLayout: FC<Properties> = ({
@@ -37,7 +38,10 @@ const PageLayout: FC<Properties> = ({
           <Sidebar selectedTab={selectedTab} onTabClick={handleTabSelect} />
         </div>
       )}
-      <main className={styles.content}>{children}</main>
+      <main className={styles.content}>
+        <RouterOutlet />
+        {children}
+      </main>
     </div>
   );
 };

frontend/src/libs/components/router/router.tsx

@@ -7,14 +7,12 @@ import { Dashboard } from '~/pages/dashboard/dashboard.js';
 import { NotFound } from '~/pages/not-found/not-found.js';
 import { WelcomePage } from '~/pages/welcome/welcome.js';
 
-import { App } from '../app/app.js';
-import { ProtectedRoute } from '../components.js';
-import { PageLayout } from '../page-layout/page-layout.js';
+import { PageLayout, ProtectedRoute } from '../components.js';
 import { RouterProvider } from '../router-provider/router-provider.js';
 
 const Router = (): JSX.Element => (
   <RouterProvider>
-    <Route path={AppRoute.ROOT} element={<App />}>
+    <Route path={AppRoute.ROOT} element={<PageLayout isSidebarHidden />}>
       <Route path={AppRoute.WELCOME} element={<WelcomePage />} />
       <Route path={AppRoute.SIGN_IN} element={<Auth />} />
       <Route path={AppRoute.SIGN_UP} element={<Auth />} />

frontend/src/pages/auth/auth.tsx

@@ -15,7 +15,7 @@ import {
 import { actions as authActions } from '~/slices/auth/auth.js';
 
 import { SignInForm, SignUpForm } from './components/components.js';
-import styles from './styles.module.css';
+import styles from './styles.module.scss';
 
 const Auth: React.FC = () => {
   const dispatch = useAppDispatch();

frontend/src/pages/auth/styles.module.css

@@ -0,0 +1,14 @@
+@import "src/assets/css/vars.scss";
+
+.page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  background-color: $blue-dark;
+  background-image: url("src/assets/img/auth-page-bg.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  padding-block: 57px;
+}