🎨 色の変更, プレビュー動画の表示の改善

Author: wappon28dev

Diff for: client/panda.config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
     extend: {
       tokens: {
         colors: {
-          "9u-white": { value: "#fceded" },
+          "9u-white": { value: "#fcfafa" },
           "9u-red1": { value: "#dd4343" },
           "9u-red2": { value: "#b21b1b" },
           "9u-red3": { value: "#561d1d" },

Diff for: client/src/components/HeaderBody.tsx

@@ -16,6 +16,8 @@ export function HeaderBody({
   onAnchorClick?: () => void;
   onNavIconClick?: () => void;
 }): ReactElement {
+  const shouldWhite = externalStyle?.logo?.color === token("colors.9u-white");
+
   return (
     <p.header
       alignItems="center"
@@ -69,7 +71,7 @@ export function HeaderBody({
           }}
           loading="eager"
           src={
-            externalStyle?.logo?.color === token("colors.9u-white")
+            shouldWhite
               ? "/assets/images/logos/title-white.svg"
               : "/assets/images/logos/title-brown.svg"
           }

Diff for: client/src/components/list/WorksList.astro

@@ -20,7 +20,7 @@ const worksList = await getContentList("works");
 >
   {
     worksList.contents.map(
-      ({ id, title, ogpImg, releaseDate, previewVideo }) => (
+      ({ id, title, releaseDate, previewVideo, previewImg }) => (
         <p.a
           key={id}
           bg="9u-gray"
@@ -40,9 +40,9 @@ const worksList = await getContentList("works");
         >
           <Image
             alt={title}
-            height={ogpImg?.height ?? 180}
-            src={ogpImg?.url ?? "/assets/external/works/test/color_bar.png"}
-            width={ogpImg?.width ?? 320}
+            height={previewImg?.height ?? 1080}
+            src={previewImg?.url ?? "/assets/images/sub-visual.png"}
+            width={previewImg?.width ?? 1920}
           />
           <p.div
             h="100%"
@@ -87,12 +87,18 @@ const worksList = await getContentList("works");
               <p.div
                 color="9u-white"
                 left="50%"
+                p="3"
                 position="absolute"
                 top="50%"
                 transform="translate(-50%, -50%)"
                 w="100%"
               >
-                <p.p fontSize="xl" fontWeight="bold">
+                <p.p
+                  fontSize="xl"
+                  fontWeight="bold"
+                  lineClamp="2"
+                  textOverflow="ellipsis"
+                >
                   {title}
                 </p.p>
                 <p.p>{formatDate(new Date(releaseDate), "YYYY.MM")}</p.p>

Diff for: client/src/components/list/WorksListOmitted.tsx

@@ -6,7 +6,7 @@ import { INFO } from "@client/lib/config";
 import { getContentList } from "@client/lib/services/microcms";
 import { css } from "panda/css";
 import { VStack, styled as p } from "panda/jsx";
-import { WorksListOmitted } from "src/components/list/WorksListOmitted";
+import WorksList from "src/components/list/WorksList.astro";
 import logoBg from "~/assets/images/logos/bg.svg";
 
 const worksList = await getContentList("works");
@@ -63,7 +63,7 @@ const worksList = await getContentList("works");
       <Marker>
         <p.h2>Works</p.h2>
       </Marker>
-      <WorksListOmitted client:load worksList={worksList} />
+      <WorksList worksList={worksList} />
     </VStack>
     <p.div bgColor="9u-brown" color="9u-white" w="100%">
       <VStack className="content" gap="10">