Merge branch 'dev' into juhaj77/enhancement/575-enhancement-site-wide-uiux-improvements

Author: juhaj77

frontend-next-migration/src/entities/Auth/ui/BaseAuthForm/BaseAuthForm.module.scss

@@ -1,12 +1,34 @@
+.baseAuthForm {
+    @media (max-width: breakpoint(xl)) {
+        width: 280px;
+    }
+}
+
 .fields {
-    gap: 16px;
+    gap: 4px;
+    font: var(--font-dm-bold-s);
+
+    input {
+        background-color: var(--background-color);
+        color: white;
+        border: 2px solid rgba(18, 18, 18, 1);
+        border-radius: 25px;
+    }
+    input::placeholder {
+        color: var(--primary-color);
+    }
+    input:focus::placeholder {
+        color: transparent;
+    }
+}
+.header {
+    font: var(--font-dm-bold-m);
+    display: flex;
+    font-size: 0.7em;
+    justify-content: start;
+    font-weight: 300;
 }
 
 .actions {
-    gap: 12px;
     text-align: center;
 }
-
-.submitButton {
-    width: 100%;
-}

frontend-next-migration/src/entities/Auth/ui/BaseAuthForm/BaseAuthForm.tsx

@@ -30,16 +30,15 @@ const BaseAuthForm: FC<BaseAuthFormProps> & {
 };
 
 BaseAuthForm.Header = ({ children }: { children: ReactNode }) => (
-    <CustomForm.Header>{children}</CustomForm.Header>
+    <CustomForm.Header>
+        <div className={cls.header}>{children}</div>
+    </CustomForm.Header>
 );
 BaseAuthForm.Header.displayName = 'BaseAuthForm.Header';
 
 BaseAuthForm.SubmitButton = ({ children }: { children: ReactNode }) => (
-    <CustomForm.Button
-        type="submit"
-        className={cls.submitButton}
-    >
-        {children}
+    <CustomForm.Button type="submit">
+        <div className={cls.submit}>{children}</div>
     </CustomForm.Button>
 );
 BaseAuthForm.SubmitButton.displayName = 'BaseAuthForm.SubmitButton';

frontend-next-migration/src/entities/Hero/model/heroGroupsData.part1.ts

@@ -28,7 +28,9 @@ import darkBlue from '@/shared/assets/images/heros/textBgColors/dark-blue_croppe
 import greenBg from '@/shared/assets/images/heros/textBgColors/green2.webp';
 import purpleBg from '@/shared/assets/images/heros/textBgColors/purple.webp';
 import comingSoon from '@/shared/assets/images/heros/ComingSoon.webp';
-import { statData, statData2, statData3 } from '@/entities/Hero';
+import { statData } from '../model/stats/statsDataV2';
+import { statData2 } from '../model/stats/statsDataV3';
+import { statData3 } from '../model/stats/statsDataV4';
 import { GroupInfo, HeroGroup, HeroSlug } from '../types/hero';
 
 export const buildHeroGroupsPart1 = (

frontend-next-migration/src/entities/Hero/model/heroGroupsData.part2.ts

@@ -12,7 +12,8 @@ import desensitizer from '@/shared/assets/images/descriptionCard/desensitizer.pn
 import orange from '@/shared/assets/images/heros/textBgColors/orange.webp';
 import lightBlue from '@/shared/assets/images/heros/textBgColors/light-blue.webp';
 import comingSoon from '@/shared/assets/images/heros/ComingSoon.webp';
-import { statData2, statData3 } from '@/entities/Hero';
+import { statData2 } from '../model/stats/statsDataV3';
+import { statData3 } from '../model/stats/statsDataV4';
 import { GroupInfo, HeroGroup, HeroSlug } from '../types/hero';
 
 export const buildHeroGroupsPart2 = (

frontend-next-migration/src/entities/Hero/model/initializeHeroGroups.ts

@@ -1,5 +1,5 @@
-import { GroupInfo, HeroGroup } from '../types/hero';
-import { buildHeroGroups } from './heroGroupsData';
+import { type GroupInfo, HeroGroup, HeroSlug } from '../types/hero';
+import { buildHeroGroups } from '@/entities/Hero/model/heroGroupsData';
 
 export const initializeHeroGroups = (t: (key: string) => string): Record<HeroGroup, GroupInfo> => {
     // Local data or overrides specific to initialize step can be defined here and merged in.

frontend-next-migration/src/entities/Hero/model/stats/statsDataV3.ts

@@ -1,4 +1,4 @@
-import { Stat } from '@/entities/Hero';
+import type { Stat } from '@/entities/Hero/types/hero';
 
 type NamedStatArray = {
     [key: string]: Stat[];

frontend-next-migration/src/entities/Leaderboard/ui/Leaderboard/Leaderboard.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { LeaderboardPodiums, LeaderboardCard } from '@/entities/Leaderboard';
+import LeaderboardPodiums from '../LeaderboardPodiums/LeaderboardPodiums';
+import LeaderboardCard from '../LeaderboardCard/LeaderboardCard';
 import { LeaderboardItem } from '../../types/leaderboard';
 import cls from './Leaderboard.module.scss';
 

frontend-next-migration/src/features/AuthByUsername/model/useLoginForm.test.ts

@@ -133,9 +133,10 @@ describe('useLoginForm', () => {
 
     it('should show error toast if there is an error', () => {
         const mockError = { data: { message: 'Login failed' } };
+        const mockReset = jest.fn();
         (useLoginMutation as jest.Mock).mockReturnValue([
             jest.fn(),
-            { data: null, isLoading: false, error: mockError },
+            { data: null, isLoading: false, error: mockError, reset: mockReset },
         ]);
 
         const { result, rerender } = renderHook(() =>
@@ -147,5 +148,6 @@ describe('useLoginForm', () => {
         });
 
         expect(toast.error).toHaveBeenCalledWith(mockError.data.message);
+        expect(mockReset).toHaveBeenCalled();
     });
 });

frontend-next-migration/src/features/AuthByUsername/model/useLoginForm.ts

@@ -28,7 +28,7 @@ export const useLoginForm = (props: Props) => {
 
     const dispatch = useDispatch();
 
-    const [login, { data, isLoading, error }] = useLoginMutation();
+    const [login, { data, isLoading, error, reset }] = useLoginMutation();
 
     async function onFormSubmit(fieldValues: FieldValues) {
         await login(fieldValues as IUserLoginDto);
@@ -59,6 +59,7 @@ export const useLoginForm = (props: Props) => {
         if (error) {
             // @ts-ignore todo it works but ts for some reason doesnt recognise the type, figure our why and fix
             toast.error(error?.data?.message);
+            reset();
             return;
         }
     }, [data, isLoading, error, dispatch, onSuccessLogin, t]);

frontend-next-migration/src/features/AuthByUsername/ui/LoginForm/LoginForm.test.tsx

@@ -38,14 +38,10 @@ describe('LoginForm', () => {
     it('should render form with username and password fields', () => {
         render(<LoginForm {...defaultProps} />);
 
-        expect(screen.getByText('log_in')).toBeInTheDocument();
-        expect(screen.getByLabelText('username')).toBeInTheDocument();
-        expect(screen.getByLabelText('password')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'send' })).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: 'text_to_register' })).toHaveAttribute(
-            'href',
-            '/register',
-        );
+        expect(screen.getAllByText('log_in').length).toBeGreaterThanOrEqual(1);
+        expect(screen.getByPlaceholderText('username')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('password')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'log_in' })).toBeInTheDocument();
     });
 
     // todo
@@ -76,12 +72,4 @@ describe('LoginForm', () => {
         expect(screen.getByText('username_required')).toBeInTheDocument();
         expect(screen.getByText('password_required')).toBeInTheDocument();
     });
-
-    it('should render the AppLink component with correct props', () => {
-        render(<LoginForm {...defaultProps} />);
-
-        const registerLink = screen.getByRole('link', { name: 'text_to_register' });
-        expect(registerLink).toBeInTheDocument();
-        expect(registerLink).toHaveAttribute('href', '/register');
-    });
 });