Fix navbar overlapping titles for l2 and parallel

L2 and Parallel subpages each had very long headers (L2Header and ParallelHeader) which were appearing over the back button and word "Forsíða". Was particularly bad on mobile view.
cadia-lvl · Sep 10, 2024 · ab61cf6 · ab61cf6
1 parent ac88a40
commit ab61cf6
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 28 deletions.
diff --git a/src/components/contribute/setup/contribute.tsx b/src/components/contribute/setup/contribute.tsx
@@ -77,6 +77,7 @@ interface ContributeProps {
     labels?: string[];
     sentencesSource?: string;
     demo?: boolean;
+    title?: string;
 }
 
 type Props = ReturnType<typeof mapStateToProps> &
@@ -136,7 +137,7 @@ class Contribute extends React.Component<Props, State> {
                 contributeType == ContributeType.REPEAT
             ) {
                 if (!demographic && goal) {
-                    return t('your-voice');
+                    return this.props.title ?? t('your-voice');
                 }
                 return goal
                     ? t('tips')
@@ -156,7 +157,7 @@ class Contribute extends React.Component<Props, State> {
     onDemographicsSubmit = async (
         age: Demographic,
         nativeLanguage: Demographic,
-        institution?: string,
+        institution?: string
     ) => {
         const {
             user: {
@@ -239,6 +240,7 @@ class Contribute extends React.Component<Props, State> {
             user: { client },
             labels,
             sentencesSource,
+            title = this.props.t('your-voice'),
         } = this.props;
 
         return (

diff --git a/src/pages/l2.tsx b/src/pages/l2.tsx
@@ -18,17 +18,6 @@ import ContributePage from '../components/contribute/setup/contribute';
 import { ContributeType, Goal } from '../types/contribute';
 import styled from 'styled-components';
 
-const L2Header = styled.h1`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    padding: 1rem;
-    z-index: 1;
-`;
-
 const dispatchProps = {
     resetContribute,
 };
@@ -87,8 +76,8 @@ class L2Page extends React.Component<Props, State> {
         const { t } = this.props;
         return (
             <div>
-                <L2Header>{t('icelandic-as-a-second-language')}</L2Header>
                 <ContributePage
+                    title={t('icelandic-as-a-second-language')}
                     sentencesSource="l2"
                     contributeType={ContributeType.SPEAK}
                 />

diff --git a/src/pages/parallel.tsx b/src/pages/parallel.tsx
@@ -18,17 +18,6 @@ import ContributePage from '../components/contribute/setup/contribute';
 import { ContributeType, Goal } from '../types/contribute';
 import styled from 'styled-components';
 
-const ParallelHeader = styled.h1`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    padding: 1rem;
-    z-index: 1;
-`;
-
 const dispatchProps = {
     resetContribute,
 };
@@ -87,10 +76,8 @@ class ParallelPage extends React.Component<Props, State> {
         const { t } = this.props;
         return (
             <div>
-                <ParallelHeader>
-                    {t('parallel-collection-for-pronunciation-research')}
-                </ParallelHeader>
                 <ContributePage
+                    title={t('parallel-collection-for-pronunciation-research')}
                     sentencesSource="parallel"
                     contributeType={ContributeType.SPEAK}
                 />