frontend: remove "Back" text from back button in mobile header

We removed it as it's not necessarry to have the text especially
since it overlaps with other components in certain ocassions.

Author: shonsirsha

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

@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-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 +24,14 @@ type TProps = {
 }
 
 export const MobileHeader = ({ title, withGuide = false }: TProps) => {
-  const { t } = useTranslation();
-
+  const navigate = useNavigate();
+  const handleClick = () => {
+    //goes to the 'general settings' page
+    navigate('/settings');
+  };
   return (
     <div className={`${styles.container} ${withGuide ? `${styles.withGuide}` : ''}`}>
-      <BackButton className={styles.backButton}>
-        <ChevronLeftDark />
-        {' '}
-        <span>{t('button.back')}</span>
-      </BackButton>
+      <button onClick={handleClick} className={styles.backButton}><ChevronLeftDark /></button>
       <h1 className={styles.headerText}>{title}</h1>
     </div>
   );