Update colors

curioswitch · Nov 20, 2024 · d733cab · d733cab
1 parent f041d7a
commit d733cab
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 15 deletions.
diff --git a/client/src/components/ChatMessage.tsx b/client/src/components/ChatMessage.tsx
@@ -30,7 +30,7 @@ function CEOSnippet({
     onCeoClick(ceo);
   }, [ceo, onCeoClick]);
   return (
-    <div className="border-2 border-green-700 rounded-lg p-10">
+    <div className="border-2 border-primary rounded-lg p-10">
       <div className="flex flex-col md:flex-row sm:gap-4 md:gap-10">
         <CEOAvatar ceoKey={ceo.key} size="sm" />
         <div className="font-bold">{ceo.advice}</div>
@@ -81,7 +81,7 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
             clsx("max-w-2xl border-2 rounded-xl p-3 whitespace-pre-line", {
               "text-right": message.isUser,
               "bg-white": !message.isUser,
-              "bg-green-700": message.isUser,
+              "bg-primary": message.isUser,
               "text-white": message.isUser,
             }),
           )}

diff --git a/client/src/components/FloorMap.tsx b/client/src/components/FloorMap.tsx
@@ -11,7 +11,7 @@ export function FloorMap({ ceoKeys }: FloorMapProps) {
   return (
     <div className="relative">
       <img
-        className="border-2 rounded-xl border-green-700 w-full"
+        className="border-2 rounded-xl border-primary w-full"
         src={floormap}
         alt="Floor Map"
       />

diff --git a/client/src/layouts/Layout.tsx b/client/src/layouts/Layout.tsx
@@ -7,6 +7,8 @@ import { twMerge } from "tailwind-merge";
 import { usePageContext } from "vike-react/usePageContext";
 import { navigate } from "vike/client/router";
 
+import iconBack from "@/assets/icon-back.svg";
+
 export default function Layout({
   children,
 }: {
@@ -23,19 +25,23 @@ export default function Layout({
     <div
       className={twMerge(
         clsx("container mx-auto prose max-w-7xl prose-img:m-0 h-full", {
-          "bg-green-700": isHome,
+          "bg-primary": isHome,
           "h-screen": isHome,
         }),
       )}
     >
       {!isHome && (
-        <Navbar className="bg-green-700">
-          <NavbarBrand className="text-pink-200 text-2xl">
+        <Navbar className="bg-primary">
+          <NavbarBrand className="text-secondary text-2xl">
             みんなのAI社長
           </NavbarBrand>
           <NavbarContent justify="end">
-            <Button className="bg-white text-green-700" onPress={onReturnClick}>
+            <Button
+              className="bg-white text-primary font-bold h-6"
+              onPress={onReturnClick}
+            >
               最初に戻る
+              <img src={iconBack} alt="Back" />
             </Button>
           </NavbarContent>
         </Navbar>

diff --git a/client/src/pages/ceos/@key/+Page.tsx b/client/src/pages/ceos/@key/+Page.tsx
@@ -55,7 +55,7 @@ export default function Page() {
         <div className="flex flex-col md:flex-row gap-5">
           <CEOAvatar ceoKey={ceoKey} size="lg" />
           <div>
-            <div className="bg-green-700 text-white text-center p-1 w-full md:w-max">
+            <div className="bg-primary text-white text-center p-1 w-full md:w-max">
               アドバイス
             </div>
             <div className="bg-white p-4 mt-2 text-lg font-bold rounded-2xl">
@@ -64,7 +64,7 @@ export default function Page() {
           </div>
         </div>
         <div>
-          <div className="mb-2 text-green-700">ストーリー引用部分</div>
+          <div className="mb-2 text-primary">ストーリー引用部分</div>
           <div className="bg-white rounded-xl p-5 md:p-10 bg-opacity-15 text-black">
             {summary}
           </div>

diff --git a/client/src/pages/chats/+Page.tsx b/client/src/pages/chats/+Page.tsx
@@ -36,7 +36,7 @@ export default function Page() {
                         <a
                           key={ceo.key}
                           href={`/ceos/${ceo.key}?advice=${ceo.advice}&summary=${ceo.summary}`}
-                          className="border-2 border-green-700 rounded-lg bg-white no-underline basis-1/3 p-4"
+                          className="border-2 border-primary rounded-lg bg-white no-underline basis-1/3 p-4"
                         >
                           <div className="flex items-center">
                             <img

diff --git a/client/src/pages/chats/@id/+Page.tsx b/client/src/pages/chats/@id/+Page.tsx
@@ -32,9 +32,7 @@ export default function Page() {
       queryClient.setQueryData(getMessagesQuery.queryKey, (prev) => {
         const obj = prev ?? new GetChatMessagesResponse();
         // Remove placeholder messages before processing response.
-        console.log(obj.messages);
         const messages = obj.messages.slice(0, -2);
-        console.log(messages);
         obj.messages = [...messages, ...resp.messages];
         return obj;
       });

diff --git a/client/src/pages/index/+Page.tsx b/client/src/pages/index/+Page.tsx
@@ -27,8 +27,8 @@ export default function Page() {
     <>
       <div className="col-span-4 md:col-span-8 lg:col-span-12 py-5 px-20 flex flex-col gap-5 items-center justify-center">
         <Avatar className="w-32 h-32" src={thumbAiCEO} />
-        <div className="text-4xl text-pink-200">みんなのAI社長</div>
-        <div className="text-lg rounded-full py-1 px-3 bg-pink-200 text-green-800">
+        <div className="text-4xl text-secondary">みんなのAI社長</div>
+        <div className="text-lg rounded-full py-1 px-3 bg-secondary text-primary">
           あなたの悩みをAIが解決
         </div>
         <Button

diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
@@ -17,7 +17,11 @@ const config = {
           colors: {
             primary: {
               ...colors.green,
-              DEFAULT: colors.green[700],
+              DEFAULT: "#008774",
+            },
+            secondary: {
+              ...colors.pink,
+              DEFAULT: "#F3B2C1",
             },
           },
         },