Release v1.18.1

.circleci/config.yml

@@ -370,7 +370,7 @@ workflows:
           filters:
             branches:
               only:
-                - footer-update
+                - beta-demo
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global

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

@@ -16,38 +16,58 @@ import './style.scss';
 const FORMAT_YEAR = 'MMM DD, YYYY';
 const TIME = 'HH:mm';
 
-export default function Card({ past, time, title }) {
-  const time2 = moment(time);
-  const past2 = past === null ? time2.isBefore(moment()) : past;
+export default function Card({
+  title, start, end, showRange,
+}) {
+  const startMoment = moment(start);
+  const endMoment = moment(end);
+  const past = endMoment.isBefore(moment());
   return (
-    <div styleName={past2 ? 'past' : 'open'}>
+    <div styleName={past ? 'past' : 'open'}>
       <p styleName="title">
         {title}
       </p>
-      <div>
-        <p styleName="date">
-          { past2 ? <CalendarIcon /> : <CalendarIconActive /> }
-          <span>
-            {time2.format(FORMAT_YEAR)}
-          </span>
-        </p>
-        <p styleName="time">
-          { past2 ? <TimeIcon /> : <TimeIconActive /> }
-          <span>
-            {time2.format(TIME)}
-          </span>
-        </p>
-      </div>
+      <p styleName="sections">
+        {showRange ? (
+          <section styleName="section">
+            <span styleName="section-title">Starts</span>
+            <p styleName="date">
+              { past ? <CalendarIcon /> : <CalendarIconActive /> }
+              <span>
+                {startMoment.format(FORMAT_YEAR)}
+              </span>
+            </p>
+            <p styleName="time">
+              { past ? <TimeIcon /> : <TimeIconActive /> }
+              <span>
+                {startMoment.format(TIME)}
+              </span>
+            </p>
+          </section>
+        ) : null}
+        <section styleName="section">
+          {showRange ? <span styleName="section-title">Ends</span> : null}
+          <p styleName="date">
+            { past ? <CalendarIcon /> : <CalendarIconActive /> }
+            <span>
+              {endMoment.format(FORMAT_YEAR)}
+            </span>
+          </p>
+          <p styleName="time">
+            { past ? <TimeIcon /> : <TimeIconActive /> }
+            <span>
+              {endMoment.format(TIME)}
+            </span>
+          </p>
+        </section>
+      </p>
     </div>
   );
 }
 
-Card.defaultProps = {
-  past: null,
-};
-
 Card.propTypes = {
-  past: PT.bool,
   title: PT.string.isRequired,
-  time: PT.string.isRequired,
+  start: PT.string.isRequired,
+  end: PT.string.isRequired,
+  showRange: PT.bool.isRequired,
 };

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

@@ -2,81 +2,138 @@
 
 .open {
   color: $tc-white;
+
+  svg {
+    path {
+      fill: $tc-white;
+    }
+  }
 }
 
 .past {
   color: #aaa;
+
+  svg {
+    path {
+      fill: #aaa;
+    }
+  }
 }
 
 .open,
 .past {
   @include roboto-regular;
 
-  margin-bottom: 10px;
-  padding: 0 20px;
-  border-left: 1px solid $tc-gray-40;
+  flex: 0 0 auto;
+  position: relative;
+  padding: 0 24px;
+  min-width: 200px;
+  margin-bottom: 24px;
+
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    border-radius: 1px;
+    background-color: #767676;
+  }
 
   @include xs-to-md {
-    border-left: none;
-    border-bottom: 1px solid $tc-gray-40;
-    padding-top: 16px;
-    padding-bottom: 16px;
+    padding: 16px 0;
+    margin-bottom: 0;
 
-    &:last-child {
-      border-bottom: none;
+    &:not(:last-child)::after {
+      height: 2px;
+      width: 100%;
+      top: unset;
+      bottom: 0;
     }
   }
 
-  &:first-child {
-    border-left: none;
+  svg {
+    height: 13.13px;
+    width: 13.13px;
   }
 }
 
 .date {
-  font-size: 20px;
-  letter-spacing: -0.5px;
-  line-height: 25px;
-  font-weight: 500;
-  margin-top: 7px;
+  @include roboto-medium;
+
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 24px;
+  margin-bottom: 4px;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
 
   span {
     margin-left: 8px;
   }
 }
 
 .time {
-  font-size: 20px;
-  letter-spacing: -0.5px;
-  line-height: 25px;
-  font-weight: 500;
-  margin-top: 4px;
+  @include roboto-medium;
+
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  line-height: 24px;
+
+  @include xs-to-md {
+    font-size: 14px;
+    line-height: 20px;
+  }
 
   span {
     margin-left: 8px;
   }
 }
 
-.open .date {
-  color: $tc-white;
+.title {
+  @include roboto-bold;
 
-  svg {
-    path: {
-      fill: $tc-white;
-    }
+  font-size: 12px;
+  letter-spacing: 1px;
+  line-height: 16px;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+
+  @include xs-to-md {
+    font-size: 10px;
+    line-height: 12px;
+    margin-bottom: 20px;
   }
 }
-.past .date { color: #aaa; }
 
-.title {
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0;
-  color: #fff;
-  line-height: 15px;
-  margin-bottom: 5px;
-  text-transform: uppercase;
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  @include xs-to-md {
+    flex-direction: row;
+    gap: 24px;
+  }
 }
 
-.past .title {
-  color: $tc-gray-40;
+.section {
+  @include xs-to-md {
+    flex: 1;
+  }
+}
+
+.section-title {
+  @include roboto-medium;
+
+  display: inline-block;
+  font-size: 11px;
+  line-height: 10px;
+  margin-bottom: 4px;
 }

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

@@ -11,29 +11,62 @@ import Card from './Card';
 import './style.scss';
 
 export default function DeadlinesPanel({ deadlines }) {
-  /* Calculates challenge start time. */
-  let start = deadlines[0] || {};
-  start = phaseStartDate(start);
-  const started = moment(start).isBefore();
+  let hasSubmissionPhase = false;
+
+  const getCardProps = (deadline, index) => {
+    let { name } = deadline;
+    let showRange = true;
+    name = name.replace(/\bCheckpoint\b/, 'Checkpoint');
+    if (/.+submission/i.test(name)) {
+      hasSubmissionPhase = true;
+      name = name.replace(/submission/i, 'Submission');
+    } else {
+      switch (name) {
+        case 'Submission':
+          name = hasSubmissionPhase ? 'Final Submission' : 'Submission';
+          break;
+        case 'Review':
+          name = hasSubmissionPhase ? 'Final Review' : name;
+          break;
+        case 'Appeals':
+          name = hasSubmissionPhase ? 'Appeals Due' : name;
+          break;
+        default:
+      }
+    }
+    if (index === deadlines.length - 1) {
+      name = 'Winners Announced';
+      showRange = false;
+    }
+
+    const start = phaseStartDate(deadline);
+    const end = phaseEndDate(deadline);
+
+    return {
+      name, start, end, showRange,
+    };
+  };
 
   return (
-    <div styleName={`panel ${deadlines.length < 5 ? 'left' : ''}`} tabIndex="0" role="tabpanel">
+    <div styleName="panel left" tabIndex="0" role="tabpanel">
       <p styleName="timezone">
         Timezone:
         {moment.tz.guess()}
       </p>
-      <Card
-        past={started}
-        time={start}
-        title={started ? 'Started' : 'Starts'}
-      />
-      { deadlines.map((d, index) => (
-        <Card
-          key={d.name}
-          time={phaseEndDate(d)}
-          title={index === deadlines.length - 1 ? 'Winners' : d.name}
-        />
-      ))}
+      { deadlines.map((d, index) => {
+        const {
+          name, start, end, showRange,
+        } = getCardProps(d, index);
+        return (
+          <Card
+            key={d.name}
+            title={name}
+            start={start}
+            end={end}
+            showRange={showRange}
+          />
+        );
+      })}
     </div>
   );
 }