Improve planner styles

recipes/src/containers/Planner/index.tsx

@@ -26,8 +26,10 @@ const DisplayMeal = (dayPlan: DayPlan, meal: Meal, onRemove: typeof PlannerActio
   if (dish !== undefined) {
     return (
       <div className='meal-card'>
-        <p className='subtitle-2'>{dish.name}</p>
-        <Button icon='clear' onClick={() => onRemove(getWeekDay(dayPlan.date), meal)} small></Button>
+        <div className='meal-card--actions'>
+          <Button icon='clear' onClick={() => onRemove(getWeekDay(dayPlan.date), meal)} small></Button>
+        </div>
+        <h5>{dish.name}</h5>
       </div>
     )
   } else {
@@ -101,11 +103,16 @@ class PlannerContainer extends Component<PlannerContainerProps, PlannerContainer
                 <Cell columns={10}>
                   <div className='cbk-planner__body__calendar'>
                     <div className='container'>
+                      <div className='day-schedule day-schedule--meals'>
+                        <div className='day-schedule--date'></div>
+                        <div className='day-schedule--lunch'> <h5>lunch</h5></div>
+                        <div className='day-schedule--dinner'> <h5>dinner</h5> </div>                                      
+                      </div>
                       {
                         this.state.week.map(([weekday, day], dayNumber) => (
                           <div key={dayNumber} className='day-schedule'>
                             <div className='day-schedule--date'>
-                              {weekday} {moment(day).format('DD')}
+                              <h5>{weekday} {moment(day).format('DD')}</h5>
                             </div>
                             <div className='day-schedule--lunch'>
                             <Droppable droppableId={`${dayNumber}-${weekday}-lunch`}>

recipes/src/containers/Planner/styles.scss

@@ -1,3 +1,5 @@
+@import 'styles/_variables.scss';
+
 .cbk-planner {
   &__body {
 
@@ -8,6 +10,18 @@
       .container {
         display: flex;
         justify-content: space-between;
+        background-color: white;
+        .day-meals {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-end;
+
+          > div {
+            height: 5rem;
+            
+          }
+        }
 
         .day-schedule {
           flex-basis: 14%;
@@ -17,10 +31,21 @@
           display: flex;
           flex-direction: column;
 
+          &--meals {
+            max-width: none;
+            flex-basis: 2%;
+            h5 {
+              writing-mode: vertical-lr;
+              text-orientation: mixed;
+              margin: 0.5rem 0;
+            }
+          }
+
           &--date {
             height: 3rem;
+            display: flex;
+            flex-direction: column;
             justify-content: center;
-            align-items: center;
             line-height: 2rem;
           }
 
@@ -35,10 +60,20 @@
           &-content {
             width: inherit;
             height: 100%;
+            display: flex;
 
             .meal-card {
               display: flex;
+              flex-direction: column;
+              width: 100%;
               align-items: center;
+
+              &--actions {
+                flex-basis: 30%;
+                display: flex;
+                width: 100%;
+                justify-content: flex-end;
+              }
             }
           }
         }

recipes/src/styles/app.scss

@@ -51,7 +51,8 @@ h4:after {
   margin-left: -4px;
 }
 
-.subtitle-2 {
+h5 {
+  margin: 0;
   font-family: $font-family-display;
   font-size: $font-size-regular;
   font-weight: $font-weight-bold;