Merge pull request #1353 from thunderstore-io/02-24-correct_isnew_to_be_isupdated_in_package_card_and_details

Correct isNew to be isUpdated in package card and details

Author: Oksamies

apps/cyberstorm-remix/app/p/packageListing.tsx

@@ -29,6 +29,7 @@ import {
   faThumbsUp,
   faWarning,
   faThumbTack,
+  faCodeMerge,
 } from "@fortawesome/free-solid-svg-icons";
 import TeamMembers from "./components/TeamMembers/TeamMembers";
 import { useEffect, useRef, useState } from "react";
@@ -252,6 +253,10 @@ export default function PackageListing() {
   // );
 
   const isNew =
+    Math.round((Date.now() - Date.parse(listing.datetime_created)) / 86400000) <
+    3;
+
+  const isUpdated =
     Math.round((Date.now() - Date.parse(listing.last_updated)) / 86400000) < 3;
 
   const likeAction = PackageLikeAction({
@@ -589,7 +594,8 @@ export default function PackageListing() {
           listing.is_pinned ||
           listing.is_deprecated ||
           listing.is_nsfw ||
-          isNew ? (
+          isNew ||
+          isUpdated ? (
             <div className="package-listing-sidebar__categories">
               <div className="package-listing-sidebar__header">
                 <Heading csLevel="4" csSize="4">
@@ -604,7 +610,8 @@ export default function PackageListing() {
               {listing.is_pinned ||
               listing.is_deprecated ||
               listing.is_nsfw ||
-              isNew ? (
+              isNew ||
+              isUpdated ? (
                 <div className="package-listing-sidebar__body">
                   {listing.is_pinned ? (
                     <NewTag
@@ -654,6 +661,14 @@ export default function PackageListing() {
                       New
                     </NewTag>
                   ) : null}
+                  {isUpdated ? (
+                    <NewTag csSize="small" csVariant="green">
+                      <NewIcon noWrapper csMode="inline">
+                        <FontAwesomeIcon icon={faCodeMerge} />
+                      </NewIcon>
+                      Updated
+                    </NewTag>
+                  ) : null}
                 </div>
               ) : null}
             </div>

packages/cyberstorm/src/newComponents/Card/CardPackage/CardPackage.tsx

@@ -3,6 +3,7 @@ import {
   faThumbTack,
   faWarning,
   faThumbsUp,
+  faCodeMerge,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PackageListing } from "@thunderstore/dapper/types";
@@ -11,7 +12,7 @@ import { formatInteger } from "../../../utils/utils";
 import { NewLink, NewIcon, Image, NewTag, NewMetaItem } from "../../..";
 import { TooltipWrapper } from "../../../primitiveComponents/utils/utils";
 import "./CardPackage.css";
-import { faLips, faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import { faLips } from "@fortawesome/pro-solid-svg-icons";
 import { RelativeTime } from "../../../components/RelativeTime/RelativeTime";
 
 interface Props {
@@ -24,7 +25,7 @@ export function CardPackage(props: Props) {
   const { packageData, isLiked, packageLikeAction } = props;
   const updateTime = Date.parse(packageData.last_updated);
   const updateTimeDelta = Math.round((Date.now() - updateTime) / 86400000);
-  const isNew = updateTimeDelta < 3;
+  const isUpdated = updateTimeDelta < 3;
 
   return (
     <div className="card-package">
@@ -40,7 +41,7 @@ export function CardPackage(props: Props) {
         {packageData.is_pinned ||
         packageData.is_nsfw ||
         packageData.is_deprecated ||
-        isNew ? (
+        isUpdated ? (
           <div className="card-package__tag">
             {packageData.is_pinned ? (
               <NewTag csSize="small" csModifiers={["dark"]} csVariant="blue">
@@ -66,12 +67,12 @@ export function CardPackage(props: Props) {
                 Deprecated
               </NewTag>
             ) : null}
-            {isNew ? (
-              <NewTag csSize="small" csModifiers={["dark"]} csVariant="green">
+            {isUpdated ? (
+              <NewTag csSize="small" csVariant="green">
                 <NewIcon noWrapper csMode="inline">
-                  <FontAwesomeIcon icon={faSparkles} />
+                  <FontAwesomeIcon icon={faCodeMerge} />
                 </NewIcon>
-                New
+                Updated
               </NewTag>
             ) : null}
           </div>