improvement(reskin): submission detail - part 2 f2f

Author: dedywahyudi

src/shared/components/Header/style.scss

@@ -1,3 +1,10 @@
+@import "~styles/mixins";
+
 .nav-header-wrapper {
   z-index: 2;
 }
+
+@include xs-to-sm {
+  margin: auto;
+  flex-direction: column;
+}

src/shared/components/challenge-detail/Checkpoints/styles.scss

@@ -123,9 +123,7 @@ $tc-gray-border: #aaaab5;
         }
 
         .feedback-text {
-          @include xs-to-sm {
-            display: none;
-          }
+          @include xs-to-sm;
         }
       }
 

src/shared/components/challenge-detail/Header/DeadlinesPanel/Card/index.jsx

@@ -13,8 +13,7 @@ import TimeIconActive from 'assets/images/icon-time-active.svg';
 import './style.scss';
 
 /* Date/time format to use in the card. */
-const FORMAT = 'MMM DD';
-const FORMAT_YEAR = 'MMM DD YYYY';
+const FORMAT_YEAR = 'MMM DD, YYYY';
 const TIME = 'HH:mm';
 
 export default function Card({ past, time, title }) {
@@ -27,13 +26,13 @@ export default function Card({ past, time, title }) {
       </p>
       <div>
         <p styleName="date">
-          { past ? <CalendarIcon /> : <CalendarIconActive /> }
+          { past2 ? <CalendarIcon /> : <CalendarIconActive /> }
           <span>
-            {time2.format(time2.year() !== moment().year() ? FORMAT_YEAR : FORMAT)}
+            {time2.format(FORMAT_YEAR)}
           </span>
         </p>
         <p styleName="time">
-          { past ? <TimeIcon /> : <TimeIconActive /> }
+          { past2 ? <TimeIcon /> : <TimeIconActive /> }
           <span>
             {time2.format(TIME)}
           </span>

src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss

@@ -10,6 +10,7 @@
 
   @include xs-to-md {
     flex-direction: column;
+    padding-top: 0;
     padding-right: 16px;
     padding-left: 16px;
   }

src/shared/components/challenge-detail/Header/TabSelector/index.jsx

@@ -167,9 +167,8 @@ export default function ChallengeViewSelector(props) {
           onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.CHECKPOINTS); }}
           styleName={getSelectorStyle(selectedView, DETAIL_TABS.CHECKPOINTS)}
         >
-          CHECKPOINTS (
-          {checkpointCount}
-          )
+          CHECKPOINTS
+          <span styleName="num">{checkpointCount}</span>
         </a>
         )
       }