Add button to cancel changes, add eventListener to handle closing tab…

src/components/Form/Buttons/BasicButton.tsx

@@ -37,7 +37,6 @@ export const BasicButton: React.FC<IBasicButtonProps> = ({
       className={clsx(getRootClass(), className)}
       type="submit"
       variant="contained"
-      fullWidth
       disabled={disabled}
       onClick={onClick}
     >

src/components/Form/Buttons/CancelButton.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from '@material-ui/core';
+import { useStyles } from './styles/CancelButton.style';
+
+type CancelButtonPropsType = {
+  label: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+export const CancelButton: React.FC<CancelButtonPropsType> = ({
+  label,
+  onClick,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Button
+      className={classes.cancelButton}
+      variant="contained"
+      onClick={onClick}
+    >
+      {label}
+    </Button>
+  );
+};

src/components/Form/Buttons/__tests__/CancelButton.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent, { TargetElement } from '@testing-library/user-event';
+import { CancelButton } from '../CancelButton';
+
+describe('Test for CancelButton component', () => {
+  it('Should render a button', () => {
+    const { container } = render(<CancelButton label="Hello world" />);
+    expect(container.firstChild).toHaveClass('CancelButton-cancelButton-1');
+  });
+
+  it('Should render a label properly', () => {
+    render(<CancelButton label="Hello world" />);
+    const label = screen.getByText('Hello world');
+
+    expect(label).toBeInTheDocument();
+  });
+
+  it('Should handle onClick', () => {
+    const handleClick = jest.fn();
+    const { container } = render(
+      <CancelButton label="Hello World" onClick={handleClick} />,
+    );
+    userEvent.click(container.firstChild as TargetElement);
+    expect(handleClick).toBeCalled();
+  });
+});

src/components/Form/Buttons/index.ts

@@ -1 +1,2 @@
 export { BasicButton } from './BasicButton';
+export { CancelButton } from './CancelButton';

src/components/Form/Buttons/styles/BasicButton.style.tsx

@@ -12,8 +12,8 @@ export const useStyles = makeStyles(
     basicSignButton: {
       padding: theme.spacing(3.2, 8.8),
       borderRadius: theme.spacing(10),
+      flex: '0 1 300px',
       marginRight: 0,
-      alignSelf: 'flex-end',
       backgroundColor: '#FF5C00',
       '& .MuiButton-label': {
         color: theme.palette.common.white,
@@ -24,6 +24,14 @@ export const useStyles = makeStyles(
       '&:hover': {
         backgroundColor: '#ffaa00',
       },
+      [theme.breakpoints.down('sm')]: {
+        flex: '0 1 auto',
+        padding: theme.spacing(2, 3.1),
+        '& .MuiButton-label': {
+          fontWeight: 600,
+          fontSize: '15px',
+        },
+      },
     },
   }),
   {

src/components/Form/Buttons/styles/CancelButton.style.tsx

@@ -0,0 +1,27 @@
+import { makeStyles, Theme } from '@material-ui/core';
+
+export const useStyles = makeStyles(
+  (theme: Theme) => ({
+    cancelButton: {
+      flex: '0 1 300px',
+      backgroundColor: theme.palette.info.light,
+      '& .MuiButton-label': {
+        color: theme.palette.common.white,
+        fontWeight: 700,
+        fontSize: '18px',
+        fontFamily: 'Raleway',
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.info.main,
+      },
+      [theme.breakpoints.down('sm')]: {
+        flex: '0 1 auto',
+        '& .MuiButton-label': {
+          fontWeight: 600,
+          fontSize: '15px',
+        },
+      },
+    },
+  }),
+  { name: 'CancelButton' },
+);

src/locales/uk/parts/common.ts

@@ -58,6 +58,7 @@ export const common = {
   enterTagName: 'Введіть назву тега',
   showMore: 'Показати ще',
   acceptChanges: 'Підтвердити зміни',
+  cancelChanges: 'Скасувати зміни',
   selectedMaterials: 'Обрані матеріали',
   publishedMaterials: 'Опубліковані матеріали',
   unPublishedMaterials: 'Неопубліковані матеріали',

src/views/Profile/PersonalInfo/PersonalInfo.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   Avatar,
-  Grid,
-  TextField,
-  InputLabel,
   Box,
+  Grid,
   IconButton,
+  InputLabel,
+  TextField,
   Typography,
 } from '@material-ui/core';
-import { BasicButton } from 'components/Form';
+import { BasicButton, CancelButton } from 'components/Form';
 import { PhotoCamera } from '@material-ui/icons';
 import { uploadImageToImgur } from 'old/lib/utilities/Imgur/uploadImageToImgur';
 import { getStringFromFile } from 'old/lib/utilities/Imgur/getStringFromFile';
@@ -44,7 +44,7 @@ export const PersonalInfo: React.FC<IEditAuthorProps> = ({ author }) => {
     twitter: false,
     linkedin: false,
   });
-  const [toggleButton, setToggleButton] = useState(true);
+  const [toggleButton, setToggleButton] = useState(false);
 
   const [newAuthorValues, setNewAuthorValues] = useState<INewAuthorValues>({
     avatar: author?.avatar ?? '',
@@ -200,6 +200,19 @@ export const PersonalInfo: React.FC<IEditAuthorProps> = ({ author }) => {
     [errorMessages],
   );
 
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue =
+        'Зміни не збережені. Ви впевнені, що хочете залишити сторінку?';
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, []);
+
   return (
     <form>
       <Grid container spacing={6} className={classes.PersonalInfo}>
@@ -363,7 +376,14 @@ export const PersonalInfo: React.FC<IEditAuthorProps> = ({ author }) => {
           />
         </Grid>
       </Grid>
+
       <Box className={classes.ButtonBox}>
+        {author && (
+          <CancelButton
+            label={i18n.t(langTokens.common.cancelChanges)}
+            onClick={() => window.close()}
+          />
+        )}
         <BasicButton
           disabled={isSaveDisabled}
           type="sign"

src/views/Profile/PersonalInfo/styles/PersonalInfo.styles.ts

@@ -60,17 +60,21 @@ export const useStyles = makeStyles(
     },
     BasicButton: {
       '& ': {
-        marginTop: theme.spacing(5),
-        width: 300,
         borderRadius: theme.spacing(0),
       },
     },
     ButtonBox: {
       '& ': {
-        width: 'fullwidth',
         display: 'flex',
+        gap: '15px',
+        marginTop: theme.spacing(5),
         justifyContent: 'right',
       },
+      [theme.breakpoints.down('xs')]: {
+        '& ': {
+          justifyContent: 'center',
+        },
+      },
     },
     WrapperBox: {
       '& ': {