Merge pull request #37 from master-diet/MASTERDIET-76

Masterdiet 76
master-diet · Nov 22, 2020 · 93be45b · 93be45b
2 parents facd526 + 387d63a
commit 93be45b
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 13 deletions.
diff --git a/src/achievements/AchievementItem.js b/src/achievements/AchievementItem.js
@@ -24,7 +24,7 @@ class AchievementItem extends Component {
                 <b>Description: {this.props.description}</b>
                 {this.props.completedDate ? <b>Completed: {this.props.completedDate.replace('T', ' ')}</b> : ''}
               </div>
-              <div className='text-center'>{this.props.progress} of {this.props.completeCondition}</div>
+              <div className='text-center white-color'>{this.props.progress} of {this.props.completeCondition}</div>
               <Progress color={`${color}`} animated value={progressMade} max={this.props.completeCondition}/>
             </div>
           </div>

diff --git a/src/diary/Diary.css b/src/diary/Diary.css
@@ -122,15 +122,7 @@
 }
 
 .main_diary_card {
-    min-height: 500px;
-    min-width: 300px;
-    display: inline-block;
-    align-self: center;
-    align-items: center;
-    align-content: center;
-    width: 80%;
-    display: table;
-    margin: 0 auto;
+
 }
 
 .datepicker_card_container {
@@ -153,6 +145,7 @@
 }
 
 .card-container {
+    background-color: #424242;
     flex-direction: row;
     align-content: center;
 }

diff --git a/src/start/Start.css b/src/start/Start.css
@@ -18,6 +18,11 @@ h1 + p {
     align-items: center;
 }
 
+@media screen and (max-width: 600px) {
+    .update {
+        font-size: 5vw !important;
+    }
+}
 .wrap {
     margin: 2rem;
 }
@@ -534,3 +539,27 @@ h1 + p {
 .select-css:disabled:hover, .select-css[aria-disabled=true] .field-css{
     border-color: #aaa;
 }
+
+.white-color{
+    color: white;
+}
+.fat-label-bot {
+    position: fixed;
+    bottom: 50px;
+    right: 30px;
+    font-size: 2rem;
+    font-weight: lighter;
+    color: #fff;
+
+
+}
+
+.carbs-label-bot {
+    position: fixed;
+    bottom: 50px;
+    left: 30px;
+    font-size: 2rem;
+    font-weight: lighter;
+    color: #fff;
+
+}
diff --git a/src/start/Start.js b/src/start/Start.js
@@ -4,8 +4,19 @@ import './Start.css'
 import 'react-datepicker/dist/react-datepicker.css'
 import '@shwilliam/react-rubber-slider/dist/styles.css'
 import StartForm from './StartForm'
+import $ from 'jquery'
 
 class Start extends Component {
+  componentDidMount () {
+    if (this.props.currentUser.userPlan == undefined ) {
+      $('li').addClass('hide')
+      $('.logo').click(function(e) {
+        e.preventDefault();
+      });
+    }
+    }
+
+
   constructor (props) {
     super(props)
     this.state = {
@@ -43,7 +54,7 @@ class Start extends Component {
 
     let formGreeting = this.props.currentUser.userPlan == undefined ?
       (<h1 className="start-title">Fill up starter form!</h1>
-      ): (  <h1 className="start-title">Fill form to update your plan!</h1>
+      ): (  <h1 className="start-title update">Fill form to update plan!</h1>
       );
     let backgroundForm = this.props.currentUser.userPlan == undefined ? "bottom_background": "bottom_background_update"
 

diff --git a/src/start/StartForm.js b/src/start/StartForm.js
@@ -129,6 +129,8 @@ class StartForm extends Component {
         Alert.error('Something went wrong with saving your user plan')
       })
       .finally(() => {
+        $('.logo').prop('disabled', false);
+        $('li').removeClass('hide')
         setSubmitting(false)
       })
   }
@@ -353,10 +355,10 @@ class StartForm extends Component {
                     <RubberSlider width={140} value={this.state.slider} onChange={
                       this.handleSlider}/>
                   </div>
-                  <div className={'Carbs'}>
+                  <div className={'fat-label-bot'}>
                     Carbs
                   </div>
-                  <div className={'Fats'}>
+                  <div className={'carbs-label-bot'}>
                     Fats
                   </div>
                 </div>