frontend: use back-button component for mobile settings header

Changed mobile settings header to just use BackButton component.

Author: thisconnect

frontends/web/src/routes/settings/components/mobile-header.module.css

@@ -5,12 +5,14 @@
 }
 
 .backButton {
+    align-items: center;
     background-color: transparent;
     border: none;
     color: var(--color-default);
     display: flex;
-    align-items: center;
     font-size: var(--size-default);
+    height: auto;
+    min-width: 0;
     padding: var(--space-quarter);
     padding-left: 0;
     text-decoration: none;

frontends/web/src/routes/settings/components/mobile-header.tsx

@@ -15,8 +15,8 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { ChevronLeftDark } from '@/components/icon';
+import { BackButton } from '@/components/backbutton/backbutton';
 import styles from './mobile-header.module.css';
 
 type TProps = {
@@ -25,15 +25,15 @@ type TProps = {
 }
 
 export const MobileHeader = ({ title, withGuide = false }: TProps) => {
-  const navigate = useNavigate();
   const { t } = useTranslation();
-  const handleClick = () => {
-    //goes to the 'general settings' page
-    navigate('/settings');
-  };
+
   return (
     <div className={`${styles.container} ${withGuide ? `${styles.withGuide}` : ''}`}>
-      <button onClick={handleClick} className={styles.backButton}><ChevronLeftDark /> <span>{t('button.back')}</span></button>
+      <BackButton className={styles.backButton}>
+        <ChevronLeftDark />
+        {' '}
+        <span>{t('button.back')}</span>
+      </BackButton>
       <h1 className={styles.headerText}>{title}</h1>
     </div>
   );