feat: change style of Latest Changes card (#1196)

Because

- Changes  style of Latest Changes card 
- Rebased main of this
[PR](#1180)

packages/toolkit/src/view/hub/hub-view/LatestChangesCard.tsx

@@ -1,6 +1,6 @@
-import cn from "clsx";
-import { Icons, Skeleton, buttonVariants } from "@instill-ai/design-system";
+import { Icons, Skeleton } from "@instill-ai/design-system";
 import { useChangelogs } from "../../../lib";
+import * as React from "react";
 
 type Changelog = {
  id: string;
@@ -38,49 +38,61 @@ export const LatestChangesCard = () => {
 
  return (
  <div className="flex flex-col rounded-sm border border-semantic-bg-line bg-semantic-bg-primary p-4">
- <div className="mb-4 font-bold product-headings-heading-3">
+ <div className="mb-4 font-bold product-body-text-3-semibold">
  Latest Changes
  </div>
- {changelogs.isSuccess &&
- changelogs.data.map((changelog: Changelog) => (
- <a
- href={`https://instill-ai.productlane.com/changelog/${changelog.id}`}
- key={changelog.id}
- target="_blank"
- rel="noopener noreferrer"
- className="mb-4"
- >
- <div
- className={cn(
- buttonVariants({ variant: "secondaryColour", size: "md" }),
- "pointer-events-none mb-1 w-min whitespace-nowrap rounded-sm px-2 py-2 capitalize"
- )}
- >
- {changelog.date && new Date(changelog.date).getTime() !== 0
- ? new Date(changelog.date).toLocaleDateString("en-US", {
- year: "numeric",
- month: "long",
- day: "numeric",
- })
- : new Date(changelog.updatedAt).toLocaleDateString("en-US", {
- year: "numeric",
- month: "long",
- day: "numeric",
- })}
- </div>
- <p className="text-semantic-fg-primary product-body-text-3-regular hover:underline">
- {changelog.title}
- </p>
- </a>
- ))}
+
+ {changelogs.isSuccess && (
+ <div className="mb-2 grid grid-cols-[auto_1fr] ">
+ {changelogs.data.map((changelog: Changelog, index: number) => (
+ <React.Fragment key={changelog.id}>
+ <div className="relative flex items-start justify-center ">
+ <div className="inline-flex h-3 w-3 items-center justify-center">
+ <div className="h-2.5 w-2.5 rounded-full bg-slate-300" />
+ </div>
+ {index !== changelogs.data.length && (
+ <div className="absolute bottom-0 left-1/2 top-3 w-0.5 -translate-x-1/2 rounded-full bg-semantic-node-disconnected-bg" />
+ )}
+ </div>
+ <a
+ href={`https://instill-ai.productlane.com/changelog/${changelog.id}`}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="ml-2 pb-4"
+ >
+ <div className="-mt-0.5 mb-1 w-min whitespace-nowrap text-xs font-semibold capitalize text-semantic-accent-default">
+ {changelog.date && new Date(changelog.date).getTime() !== 0
+ ? new Date(changelog.date).toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ })
+ : new Date(changelog.updatedAt).toLocaleDateString(
+ "en-US",
+ {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ }
+ )}
+ </div>
+ <p className="text-semantic-fg-primary product-body-text-3-regular hover:underline">
+ {changelog.title}
+ </p>
+ </a>
+ </React.Fragment>
+ ))}
+ </div>
+ )}
+
  <a
  href="https://instill-ai.productlane.com/changelog"
  target="_blank"
  rel="noopener noreferrer"
  >
- <div className="my-auto ml-2 mt-4 flex justify-start text-semantic-accent-default product-button-button-2 hover:!underline">
+ <div className="my-auto ml-2 flex items-center gap-2 text-semantic-accent-default product-button-button-3 hover:!underline">
  View changelog
- <Icons.ChevronRight className="my-auto h-4 w-4 stroke-semantic-accent-default" />
+ <Icons.ChevronRight className="h-4 w-4 stroke-semantic-accent-default" />
  </div>
  </a>
  </div>

packages/toolkit/src/view/hub/hub-view/NewsLetterCard.tsx

@@ -80,7 +80,7 @@ export const NewsLetterCard = () => {
  <h2 className="mb-4 font-bold product-headings-heading-3">
  What&apos;s New?
  </h2>
- <div className="relative mb-1 w-full">
+ <div className="relative mb-2 w-full">
  <a
  href={`https://www.instill.tech/blog/${slug}`}
  target="_blank"
@@ -94,14 +94,14 @@ export const NewsLetterCard = () => {
  fallbackImg={
  <Icons.Box className="h-8 w-8 stroke-semantic-fg-primary" />
  }
- className="h-[140px] w-[248px] object-cover"
+ className="h-[140px] w-[248px] rounded object-cover"
  />
  </a>
  </div>
  <div
  className={cn(
- buttonVariants({ variant: "secondaryColour", size: "md" }),
- "pointer-events-none mb-2 w-min whitespace-nowrap rounded-sm px-2 py-2 capitalize"
+ buttonVariants({ variant: "tertiaryColour", size: "sm" }),
+ "pointer-events-none mb-2 w-min whitespace-nowrap rounded-sm !px-0 py-2 capitalize"
  )}
  >
  {publishedOn}