Merge pull request #638 from Real-Dev-Squad/develop

Dev to Main Sync

Author: iamitprakash

extension-requests/local-utils.js

@@ -242,6 +242,17 @@ const fullDateString = (timestamp) => {
   return `${daysOfWeek[date.getDay()]}, ${date.toLocaleString()}`;
 };
 
+const shortDateString = (timestamp) => {
+  const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const date = new Date(timestamp);
+
+  const day = daysOfWeek[date.getDay()];
+  const month = new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
+    date,
+  );
+  return `${day}, ${date.getDate()} ${month}`;
+};
+
 function addEmptyPageMessage(container) {
   const emptyPageMessage = createElement({
     type: 'p',

extension-requests/script.js

@@ -507,20 +507,23 @@ async function createExtensionCard(data) {
   const extensionForText = createElement({
     type: 'span',
     attributes: { class: 'card-row-text' },
-    innerText: 'Extension for:',
+    innerText: 'New Deadline:',
   });
   extensionForContainer.appendChild(extensionForText);
+  const extensionInValue = createElement({
+    type: 'span',
+    attributes: { class: 'card-row-text-small' },
+    innerText: ` (in ${extensionDays})`,
+  });
   const extensionForValue = createElement({
     type: 'span',
     attributes: { class: 'tooltip-container' },
-    innerText: ` +${extensionDays}`,
+    innerText: ` ${shortDateString(secondsToMilliSeconds(data.newEndsOn))}`,
   });
   const extensionToolTip = createElement({
     type: 'span',
     attributes: { class: 'tooltip' },
-    innerText: `New Deadline: ${fullDateString(
-      secondsToMilliSeconds(data.newEndsOn),
-    )}`,
+    innerText: `${fullDateString(secondsToMilliSeconds(data.newEndsOn))}`,
   });
   extensionForValue.appendChild(extensionToolTip);
   const extensionInput = createElement({
@@ -536,6 +539,7 @@ async function createExtensionCard(data) {
   });
   extensionForContainer.appendChild(extensionInput);
   extensionForContainer.appendChild(extensionForValue);
+  extensionForContainer.appendChild(extensionInValue);
   const requestedContainer = createElement({
     type: 'div',
   });

extension-requests/style.css

@@ -307,6 +307,11 @@
   color: var(--medium-gray);
 }
 
+.card-row-text-small {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--medium-gray);
+}
 .title-text {
   text-decoration-line: none;
   font-size: 1.6rem;
@@ -841,6 +846,9 @@ body {
   .filter-modal {
     top: 12.5rem;
   }
+  .card-row-text-small {
+    display: none;
+  }
 }
 .panel::-webkit-scrollbar {
   -webkit-appearance: none;