Merge pull request #125 from axsmap/AM-332

AM-332: Fix Create Mapathon mobile defects
axsmap · Jan 31, 2024 · 6aedc45 · 6aedc45
2 parents e1a7b28 + 090047f
commit 6aedc45
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 43 deletions.
diff --git a/src/components/CreateMapathon/Step.js b/src/components/CreateMapathon/Step.js
@@ -73,6 +73,7 @@ const ButtonWrapper = styled.div`
 `
 
 const ButtonContent = styled.div`
+  width: 7rem;
   align-items: center;
   justify-content: space-between;
 `
@@ -114,7 +115,7 @@ class Step extends Component {
             {this.props.isFirstStep ? (
               <ButtonWrapper>
                 <Button
-                  className="primary-btn mx-auto is-quarter"
+                  className="primary-btn mx-auto"
                   float
                   onClickHandler={() => this.props.goNextStep()}
                   disabled={!this.props.isFilled || this.props.sendingRequest}
@@ -129,7 +130,7 @@ class Step extends Component {
             ) : this.props.isLastStep ? (
               <ButtonWrapper>
                 <Button
-                  className="gray300-btn mx-auto is-quarter"
+                  className="gray300-btn mx-auto"
                   float
                   disabled={this.props.sendingRequest}
                   onClickHandler={() => this.props.goPrevStep()}
@@ -141,7 +142,7 @@ class Step extends Component {
                   </ButtonContent>
                 </Button>
                 <Button
-                  className="primary-btn mx-auto is-quarter"
+                  className="primary-btn mx-auto"
                   type="submit"
                   float
                   disabled={this.props.sendingRequest}
@@ -157,7 +158,7 @@ class Step extends Component {
             ) : (
               <ButtonWrapper>
                 <Button
-                  className="gray300-btn mx-auto is-quarter"
+                  className="gray300-btn mx-auto"
                   disabled={this.props.sendingRequest}
                   onClickHandler={() => this.props.goPrevStep()}
                 >
@@ -168,7 +169,7 @@ class Step extends Component {
                   </ButtonContent>
                 </Button>
                 <Button
-                  className="primary-btn mx-auto is-quarter"
+                  className="primary-btn mx-auto"
                   onClickHandler={() => this.props.goNextStep()}
                   disabled={!this.props.isFilled || this.props.sendingRequest}
                 >

diff --git a/src/components/CreateMapathon/index.js b/src/components/CreateMapathon/index.js
@@ -54,39 +54,17 @@ class CreateMapathon extends Component {
   render() {
     const {formatMessage} = this.context.intl
 
-    return (
-      <Wrapper>
+    return <Wrapper>
         <Helmet title={formatMessage(messages.pageTitle)} />
 
         <TopBar hideOn="phone,tablet" />
 
-        <NavBar
-          hideOn="desktop,widescreen"
-          isNarrow
-          title={formatMessage(messages.headerTitle)}
-          goBackHandler={() => this.props.history.goBack()}
-        />
+        <NavBar hideOn="desktop,widescreen" isNarrow="true" title={formatMessage(messages.headerTitle)} goBackHandler={() => this.props.history.goBack()} />
 
-        <Form
-          sendingRequest={this.props.sendingRequest}
-          poster={this.props.poster}
-          locationCoordinates={this.props.locationCoordinates}
-          errors={this.props.errors}
-          loadingTeams={this.props.loadingTeams}
-          teams={this.props.teams}
-          getUserLocation={this.props.getUserLocation}
-          setNotificationMessage={this.props.setNotificationMessage}
-          clearError={this.props.clearError}
-          createPoster={this.props.createPoster}
-          deletePoster={this.props.deletePoster}
-          setLocationCoordinates={this.props.setLocationCoordinates}
-          getTeams={this.props.getTeams}
-          createMapathon={this.props.createMapathon}
-        />
+        <Form sendingRequest={this.props.sendingRequest} poster={this.props.poster} locationCoordinates={this.props.locationCoordinates} errors={this.props.errors} loadingTeams={this.props.loadingTeams} teams={this.props.teams} getUserLocation={this.props.getUserLocation} setNotificationMessage={this.props.setNotificationMessage} clearError={this.props.clearError} createPoster={this.props.createPoster} deletePoster={this.props.deletePoster} setLocationCoordinates={this.props.setLocationCoordinates} getTeams={this.props.getTeams} createMapathon={this.props.createMapathon} />
 
         <Footer hideOn="phone,tablet" isNarrow />
       </Wrapper>
-    )
   }
 }
 

diff --git a/src/components/NavBar/Container.js b/src/components/NavBar/Container.js
@@ -12,10 +12,6 @@ const Container = styled.div`
 
   height: 100%;
   width: 100%;
-
-  ${media.tablet`
-    width: ${props => (props.isNarrow ? '723px' : '100%')};
-  `};
 `
 
 export default Container
diff --git a/src/components/NavBar/Wrapper.js b/src/components/NavBar/Wrapper.js
@@ -6,25 +6,25 @@ const Wrapper = styled.div`
   left: 0;
   position: fixed;
   top: 0;
-  z-index: 10; 
-  display: ${props => (props.hideOn.includes('phone') ? 'none' : 'flex')}; 
+  z-index: 10;
+  display: ${(props) => (props.hideOn.includes('phone') ? 'none' : 'flex')};
   align-items: center;
-  justify-content: center; 
-  //box-shadow: 0 1px 0 0 ${colors.grey};
+  justify-content: center;
+  box-shadow: 0 1px 0 0 ${colors.grey};
   height: 4rem;
-  width: 100%; 
-  background-color: transparent;
+  width: 100%;
+  background-color: white;
 
   ${media.tablet`
-    display: ${props => (props.hideOn.includes('tablet') ? 'none' : 'flex')};
+    display: ${(props) => (props.hideOn.includes('tablet') ? 'none' : 'flex')};
   `};
 
   ${media.desktop`
-    display: ${props => (props.hideOn.includes('desktop') ? 'none' : 'flex')};
+    display: ${(props) => (props.hideOn.includes('desktop') ? 'none' : 'flex')};
   `};
 
   ${media.widescreen`
-    display: ${props =>
+    display: ${(props) =>
       props.hideOn.includes('widescreen') ? 'none' : 'flex'};
   `};
 `